The Mobile Web
Responsive Design or jQuery Mobile

May 24th, 2012

By 2015 the majority of traffic on the internet will be coming from mobile devices. So said Luke Wroblewski, the esteemed speaker on mobile design at the 2010 San Diego Event Apart seminar about all things web design.

It’s hard to believe that it’s only been 5 years since the iPhone was first introduced.  The trend toward mobile has been exponential in its progression, and now with over 70 million Smartphones in use in the US alone and 1.2 billion mobile web users worldwide, the march towards a mobile web is only going to get faster.

You Need a Website that Thinks Like a Mobile User

If your website isn’t mobile-friendly, when users visit it, they have to strategize the best way to browse it.  Does it look better in landscape or portrait orientation?  How far do they need to “zoom” in to read the text or “click” a link?  This process can be frustrating and time consuming to a mobile user, and since they are most likely on the go, time is a precious commodity not to be wasted.

As more and more users surf the web through a mobile device, we must design with them in mind by implementing web design solutions that cater to these users, as well as those surfing from a PC.  Two of the most popular solutions are Responsive Design and jQuery Mobile.

Responsive Design: Full & Fluid

Responsive Design (also called “fluid design”) is a website design that has a layout that fits to the view screen of the device it is being viewed on.  When the site is viewed on a desktop computer, the user get’s the full experience.  If the site is viewed on a device like the iPhone or Android, the website layout adapts itself to the size of the screen.

Certain elements might shift position or become hidden entirely to give the user a less cluttered and more simplified experience, but still most or all of the content can be retained.

jQuery Mobile: Speedy & Simplified

The other method for developing a compact mobile version of a website is to use a framework specifically meant for mobile devices.  The latest (and arguably the greatest) choice for that currently is jQuery Mobile.  This lightweight framework allows for the creation of a mobile site that is compact and minimal, usually comprised of a few images and buttons, and it’s also “touch” ready.

A jQuery Mobile site is a very paired down standalone website, and only contains the most essential information, differing from the desktop site.

Comparing the Solutions

The decision of whether to go with a responsive design or a standalone mobile site has a few criteria to take into account.

Responsive Design: For the Discriminating Mobile User

If your users need access to much of your information on the go (think Wikipedia), a responsive site is great because all the content of the website is still there; it’s just presented in a different fashion for each device/user.  The consistency of the design is also a great feature, and if aesthetics are a priority a responsive design is impressive and visually exciting for mobile users.

The tradeoff with this mobile solution is the load time of responsive designs tend to be a lot higher, since the mobile user still has to download all the files and images of the desktop website, even if they don’t see them.  This isn’t a huge issue on 4G networks, but on 3G networks this can tend to be fairly frustrating if someone wants information quickly.  Responsive designs are also more time consuming to develop and as such tend to be a lot pricier.  In addition, since this way of designing requires a lot of strategy to make sure all users get a worthwhile experience, this style of a mobile website is best implemented from the ground up, rather than as an afterthought.

jQuery Mobile: For the Fast-paced Mobile User

A jQuery Mobile site, due to its minimalistic approach will naturally load quickly for users, even on the slower 3G networks, but the content is paired down, as well.  This type of mobile site is perfect for users that are accessing the website constantly on the go, such as a restaurant website where users really just want to see directions, hours and a simple menu.  With that said, there are still very big name companies that use this framework for their mobile solution, such as DisneyWorld, Stanford and Ikea, to name a few.  And while they are attractive and sleek, the designs are not at all like the desktop versions and are usually fairly plain in comparison.

Responsive or jQuery Mobile? – You Decide

When choosing how to enter the mobile web, it’s a process of weighing what your users are expecting when they visit your site on the go.  If your website contains a wealth of information that your users need access to on a constant basis, and you also care about having a unique design, a responsive design is probably the best approach.  On the other hand, if speed is important to your users and they only need a few key pieces of information about your business, a jQuery Mobile site is a perfect fit.  Whichever direction you choose, your users will thank you for catering to their mobile experience of the web.