When creating sites for the current market, UX designers and business decision makers face the daunting task of figuring out how to deliver the wow-factor website across desktops, tablets, and smartphones. Sometimes this even includes having to cater for native apps within the same project plan. With mobile web browsing now at 10% of Internet traffic compared to 4% in 2011 and smartphone penetration rising globally, countries like the U.K. are experiencing a 51% penetration rate. The majority of these users access the Internet everyday on their phones (rarely leaving home without their iOS or Android device) compared to only 30% in 2011. Not designing for mobile is an inexcusable and cardinal web design sin. Furthermore, it’s not only about smartphones—29% of American adults now own a tablet and their wants and needs are different from those of desktop users.

With the Web becoming increasingly ubiquitous and more devices, screen dimensions, and contexts to design for, what is the best way forward for mobile web design? As the founder and CEO at Cyber-Duck, a digital agency that specializes in the strategy, design, and development of both desktop and mobile design, I am often asked this question. Let’s explore two strategies for UX designers that we often recommend: responsive web design (RWD) and adaptive web design (AWD, or mobile websites). Though adopted widely by agencies across the globe, RWD is not the panacea when designing websites that need to work across all of these mediums. Conversely, going with ‘pure’ AWD is rarely ideal by itself. Often, the best solution is a combination of both approaches.

On the left, we see an example of AWD from Honda UK where there is a separate mobile website with a link to the desktop website. On the right, an example of RWD from Lamborghini where the desktop, tablet, and smartphone use the same ‘responsive’ code base.

Responsive Web Design (RWD)

Many digital agencies are proposing RWD to their clients touting the following advantages:

The content stays the same. There is no need to change or “adapt” it for different versions of the website. This also means that your CMS (Content Management System) stays the same and you don’t have to duplicate content entry for different screen types.

It can be easily achieved automatically. Using CSS (cascading style sheets), media queries, and HTML5, we are able to determine the width of the browser or device and ensure existing content is either stacked or adjusted to fit the space available automatically.

Cost. RWD is cheaper than AWD (which requires dedicated mobile websites) and takes less time to implement.

This approach can have significant limitations, however, as it is only the layout that changes and not the content or graphical elements. This can mean:

Generic not optimized experience. The user does not get a fully optimized experience for the device they are using.

Loading time issues. Websites with lots of HTML code and multimedia take far longer to load on a mobile device with a 3G connection and a smaller CPU than on a desktop with broadband. As the content doesn’t change between environments, with responsive websites, mobile users are kept waiting.

Adaptive Web Design (AWD, or dedicated mobile websites)

The commonly adopted alternative to RWD is AWD. Experts such as Jakob Nielsen have argued that AWD offers a preferable solution. The advantages are:

Speed. The HTML and CSS can be minimal and stripped down (providing you code it that way) so the loading and processing time compared to RWD will be minimal. On one website that Cyber-Duck coded it removed the CMS and most of the tracking code to really boost mobile speed!

Sensory design. When producing an AWD website, your designers are forced to focus on creating something for people’s senses within a mobile context by incorporating mobile-friendly gestures. Generally speaking, you may decide to minimize content, change the hierarchy of information, and transform widgets and input methods. Of course, you can also radically change interfaces to avoid the ‘fat finger syndrome’ so users will enjoy a more targeted UI.

Native app portability. If you go with AWD, it can be easier to transpose the code over to create a native app that you can submit to apps stores (providing you use PhoneGap, Titanium, or another wrapper). This will save your team time learning Objective-C or Java for Android.

But AWD also has the following limitations:

The content nightmare. When developing AWD you will naturally optimize the layout, the amount/type of content, interfaces, and potentially the hierarchy. While this is done in the interest of user experience, it can make the maintenance of the system problematic. Imagine trying to customize one CMS to cater for two or three different versions of a website! The developers would have to create extra functionality, with the marketing team doubling their time inputting content.

Too many versions. While a ‘standard’ AWD solution can create optimized solutions for a desktop, tablet, and smartphone, what about smaller tablets? With the new Google Nexus 7 tablet boasting a diminutive 7” display, Apple launching a new mini iPad soon, and additional retina displays having higher screen resolutions, it is important that UX designers plan their AWD strategies carefully.

Native app ‘transformation’. If you try and kill two birds with one stone and adapt your AWD website code into a native app you might compromise the performance of the native app. Many people argue that designers should focus on using standard Apple/Android UI official guidelines (see the Android UI overview) and developers should focus on native programming languages (Facebook recently dropped their HTML5 native app, moving to Objective-C).

Combining RWD with AWD

The best solution is often achieved by combining RWD with AWD, so that you enjoy the cost and time efficiencies of RWD while offering the better user mobile experience that AWD offers in prioritized content areas.

Using RWD as the basis, you can include some elements of AWD, changing some assets, content, or interfaces depending on whether the site is visited from a smartphone, tablet, or desktop—thus making a responsive website appear ‘adaptive’. Similarly, if you go with the AWD approach you can embrace RWD’s responsiveness so the content and interfaces degrade gracefully on different size screens (RWD) until the ‘break point’ where a different version is applied (AWD). In this example, the tablet version would look similar on a 10” iPad to on a 7” Galaxy tab but when it reached a mobile size 5” it would morph into the smartphone version.

This route poses two challenges: The interaction design/information architecture needs to be designed for both the desktop and mobile at the same time while considering the resizing, spacial distribution, and animation (if required) of elements on desktops, tablets, and mobile screens. Once this juncture has been crossed, the developers need to rely on all available technologies (media queries, browser sniffing, feature detection, and network speed analysis) to detect the multitude of resolutions and device capabilities while tailoring the end user experience to each particular device. This approach is bleeding edge and quite experimental. At Cyber-Duck we are currently applying it to our own website as our AWD solution is too fragmented.

Conclusion

You will no doubt be under cost and timeline pressures while working to deliver a great new website that functions well on desktops, smartphones, and tablets. With 78% of Americans reporting that they use their mobile devices to go online you need to be strategic when approaching a new project or a redesign. You will have a number of mobile design options and on some projects it’s a simple decision.

For instance, a corporate website that needs to display the same information in the same hierarchy, on both mobiles and desktops, can take a mobile-first RWD approach. (If you go down the RWD route I would urge you to test loading times as well over half of mobile visitors will abandon a website if it takes more than 5 seconds to load.) Often the AWD path is very sensible in response to speed, sensory, and contextual considerations. If you are planning an event website and need to make the map and schedule the first call to actions on the smartphone while the desktop/tablet will focus on glorifying and selling the event, an AWD approach would be warranted.

By combining RWD and AWD, however, you can often obtain the same user experience objectives far more cost effectively and efficiently than by using AWD or RWD alone.

Comments

Hi Shah - My agency Cyber-Duck just wrote another article about why and how to implement responsive http://mobile.smashingmagazine.com/2013/06/18/adapting-to-a-responsive-design-case-study/ If you need specific help on your project, feel free to contact us via our website Cyber-Duck.co.uk

Hello Danny,
Is there any challenge with Responsive Web design? When I go for RWD, though my business is going well with current design. Would please have a look at my site: http://www.appsta.com and let me know about RWD's required? Or please recommend some agencies where I can get the help.

You article states that 78% of Americans access the internet via smart phones. This is not true In fact yiur source did not say that. It said that 78% of Smartphone users use them to access the internet. (Which I find low. After all what other reason is there for paying the extra money to own a smart phone?) In fact only 48% cell phone owners own Smart Phones and only about 70% of Americans own cell phones. Which means only 26.6% of Americans access the Internet via Smart Phones. A significant difference.

RWD and AWD (Mobile Websites) are quite different concepts. What they have in common is that both aim to optimise UX on mobile and portable devices. It is possible to borrow 'concepts' of RWD for AWD (Mobile Websites) and vice versa.

In general it depends on the project and product. RWD is generally easier to implement and support (from a content perspective) and offers less overheads when new devices come out as it is fluid enough to fit almost any device (with the exception of tweaks to retina displays etc'). Its hard to really see without seeing your brief. Many ecommerce platforms offer RWD solutions by default so the barrier to get started is minimal.

Any thoughts on what's preferred from a eCommerce gaming perspective (pros and cons)? I see us as a company we can have a corporate site that is RWD and formatted across all formats but have started to spend time discussing this as the RWD terminology is flying around the office right now.

I agree with you. Ethan said in his summary: "...if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach." My article confirms this. I also reinforced this concept in my own article: "Using RWD as the basis, you can include some elements of AWD, changing some assets, content, or interfaces depending on whether the site is visited from a smartphone, tablet, or desktop". What I mean here is that a good designer (who will be aware of Fitts' Law) will no doubt want to extend the standard responsive web design and 'adapt' certain elements such as GUIs while enlarging buttons for mobile and hand-held device. There are obviously numerous examples out there where designers have done this.

Responsive design is adaptive as defined by Ethan Marcotte:
http://www.alistapart.com/articles/responsive-web-design/

"But a responsive design isn’t limited to layout changes. Media queries allow us to practice some incredibly precise fine-tuning as our pages reshape themselves: we can increase the target area on links for smaller screens, better complying with Fitts’ Law on touch devices; selectively show or hide elements that might enhance a page’s navigation; we can even practice responsive typesetting to gradually alter the size and leading of our text, optimizing the reading experience for the display providing it."

While the the responsive grid is at the heart of responsive design, it does not stop there.

I disagree with this whole article but in short... RWD "It can be easily achieved automatically" and cost is less than AWD. I also know you can alter the content and graphical elements as well as improve loading time with RWD.

Yes you can change background images using media queries, but that only works if all of these images are background images, hence why people are trying to develop better methods for implementing responsive images inside HTML.

Though, I would avoid using media queries to simply hide content; you end up with the same performance overhead without necessarily a user experience benefit. As you have said, using AJAX to dynamically load extra content based on screen size or feature detection to enhance the experience is the best way to approach this.

This is where a combined approach works, using media queries as well as other sensors together to provide a truly adaptive design.

2) For content - It's a similar concept, but more about setting the content divs to display:none or display:block based on the media query. (ex. In portrait, set #main-content-portrait to display:block and #main-content-landscape to display:none. In landscape, it would be the opposite.)

If you want to get fancy,use jquery/AJAX to dynamically load content in as screen sizes/orientations change, so youre not loading a bunch of hidden divs content up front.

Aaraon. Thanks for your comment. I explained that AWD is essentially a separate Mobile Website (hence my use of brackets when I introduced this concept). I clarified that AWD is about adapting the user experience to the context of the usage (on a small screen with limited connectivity and poor processing power for example) whilst dramatically adapting or even changing the elements based on the designer's vision. As such it is the *user* and the context that the design is being adapted to, the device is secondary. At no point did I mention that AWD is solely about the layout, this is only one component of AWD - content and interfaces also play a key part within AWD (see my explanation of RWD if this not clear). Progressive enhancement is a valid philosophy for designing both RWD and AWD (taking a mobile first approach), and some designers can approach the design process from a 'graceful degradation' perspective (i.e. design for the desktop first, tablet second and then mobile) and still ensure that the project is successful.

Love the strategy of combining strategies to balance the quality of the experience with the cost of development. Of course, it always depends on a number of criteria, and at Fjord, we help our clients to choose a mobile delivery strategy using a tool that quantifies the ROI for each strategy:

It seems you are unclear on what exactly "adaptive web design" is and this has undermined the premise of your post. An "adaptive" website is one that *adapts* to the device. It isn’t solely about layout (as RWD is primarily concerned), but instead looks at the complete picture of device resolution, capabilities, etc. and uses the principles of progressive enhancement to craft an appropriate experience for the user no matter what device or platform she is on. Adaptive web design, as a practice, is comprised of techniques like mobile-first and responsive web design.