Menu

A Comparison of Methods for Building Mobile-Optimized Websites

Advertisement

A Comparison of Methods for Building Mobile-Optimized Websites

There’s a debate over which technique of creating mobile-ready websites is the best.

Google advocates creating responsive web designs, while Jakob Nielsen, a renowned usability consultant, endorses the creation of dedicated mobile sites (but he was subsequently slammed by some web designers).

A third option is also gaining in popularity, where the web server renders the appropriate HTML and CSS from the same URL depending on the device a web page on the site is being requested from (which has been referred to as responsive design + server side components).

This article will discuss each of these methods.

Real-world examples of websites using a particular method are provided under each section.

The mobile device used to test and gather data for all examples is an iPhone 4 using iOS 5.0.

Responsive Web Design (RWD)

Responsive web design (RWD) typically uses CSS3 media queries to adjust the layout of a web page based on the size of the user’s viewing area. You use the same HTML to display a different web page layout for desktops, tablets, mobile devices, TVs, etc.

Advantages of Responsive Web Design

Disadvantages of Responsive Web Design

Examples of Responsive Web Design

Starbucks

The Starbucks website is an excellent example that shows the pros and cons of responsive web design. All of their content is accessible on mobile devices, each page uses the same URL, and there’s no redirection.

Unfortunately, their site is a heavy download (about 15 seconds on a 3G smartphone) and there’s a lot of scrolling needed in order to read an entire web page.

Performance results:

World Wildlife Fund

World Wildlife Fund

The World Wildlife Fund website is a good implementation of responsive web design. Navigation is optimized for mobile tasks.

However, load time is a bit slow on a 3G smartphone (it took about 7 seconds). Also, some inner pages (e.g., their Adoption form) haven’t been optimized for mobile devices and are painful to use on my mobile device.

Performance results:

The Boston Globe

The Boston Globe

The Boston Globe website is arguably one of the best RWD implementations for a large-scale website. The site uses responsive images and optimizes JavaScript so it doesn’t kill performance on mobile devices.

Performance results:

Resources on Responsive Web Design

Dedicated Mobile Site

Some websites optimize the experience of mobile device users by creating a separate mobile site.

The most common implementation is for the desktop website to redirect to a subdomain (e.g., mobile.examplesite.com for examplesite.com.)

Advantages of a Dedicated Mobile Site

Disadvantages of a Dedicated Mobile Site

Examples of Dedicated Mobile Websites

Walmart (mobile.walmart.com)

Walmart

Walmart’s dedicated mobile site clocks in at a blazingly fast 1.35-second load time.

Performance results:

Amazon (www.amazon.com/gp/aw/h.html)

Amazon

Much like Walmart, Amazon’s separate mobile pages are faster than the responsive web designs I tested, (it clocked in at 2.25 seconds load time).

What’s strange, however, is that not all pages in their website have mobile-optimized versions. For example, if you do a Google search from your smartphone, many of Google’s results point to desktop pages that don’t redirect to a mobile-optimized version. Additionally, if you access the mobile page directly from your desktop, you aren’t redirected to the desktop version.

Performance results:

BBC (www.bbc.co.uk/mobile)

BBC

BBC’s separate mobile pages are fast compared to the responsive web pages I tested (3.40 seconds), but nearly half of that time is spent redirecting mobile users to the mobile page (1.65 seconds).

Unlike Amazon’s separate mobile pages, if you access a mobile page from a desktop you will are automatically redirected back to the desktop version.

Performance results:

Resources on Dedicated Mobile Sites

RESS: Different HTML and CSS from the Same URL

This method of creating a mobile-ready website uses server-side programming to render custom CSS and HTML for different devices. Mobile users would get one set of code, while desktop users would get a different set of code.

The primary purpose of this implementation is to improve website performance.

This method works best when combined with a responsive web design.

This implementation has been referred to as responsive web design + server side components (RESS).

When using this method, it’s important to include the Vary HTTP header (read about this on Google’s guide to building smartphone-optimized websites) so that robots will crawl both the desktop and mobile versions.

Advantages of RESS

Disadvantages of RESS

Examples of RESS

CNN

CNN

The mobile version uses HTML and CSS that’s optimized for mobile performance, while the desktop version uses significantly more HTTP requests and JavaScript.

The navigation has also been tailored for mobile-specific tasks.

Performance results:

eHow

eHow

Like CNN, the HTML and CSS for eHow’s mobile version is tuned for performance. The top-level navigation is the same for both sites, with an emphasis on search and their seven content channels.

Performance results:

SlideShare

SlideShare

SlideShare’s mobile and desktop versions are completely different. The mobile version uses a responsive web design, while the desktop version doesn’t. Each site uses completely different HTML and CSS. There’s significantly less JavaScript in the mobile version. Each site also uses a different navigation structure.

Performance results:

WordPress.com

WordPress.com

WordPress.com’s mobile and desktop versions are nearly identical, with a few differences:

Performance results:

Resources on RESS

Summary

In theory, responsive web design is the best solution. But in practice, most RWD sites aren’t implemented optimally and result in slower load times.

According to my tests, having a dedicated mobile site results in the fastest load times, but there’s significant downsides with this implementation. I’d only go with this if performance was top priority.

My personal preference is to go with a combination of a Responsive web design and different HTML from the same URL (RESS). This provides all the benefits of RWD while overcoming its two biggest downsides (more files to download and slower load time).

What method are you using for building mobile-optimized sites? Please share your thoughts on this subject in the comments.

Related Content

About the Author

Johan Johansson is a Senior Web Developer at Pixelmade in Vancouver, Canada. He has developed over 350 websites during his 17-year career. His free time is consumed by his 2-year-old son who won’t take "no" for an answer. You can follow Johan on Twitter @johansson_johan.

This was published on Jan 7, 2013

52 Comments

Design Nirvana Jan 08 2013

Thanks for this wonderful write-up… Very well written and indeed interesting…

Ray S. Jan 08 2013

I can’t stand mobile sites. I live in an area with strong LTE and am usually around wi-fi. Give me the option to disable the mobile site or at least put the option for the desktop site at the very top, not all the way at the bottom.

Good summary, Johan.

My gripe that I don’t see addressed is that only responsive web design allows for page pinch zoom, a critical feature for older eyes.

Brett Jankord Jan 08 2013

The biggest con of RESS is, as you mention, it requires device detection: Mobile users will need to be detected. Device detection is unreliable.

With new devices coming out everyday, if you want your device detection to be as reliable as possible, you have to test every new device to make sure you detection keeps working/is accurate.

Now you can rely on services like WURFL, DeviceAtlas, etc. and shift the onus of testing to them, but know that even services that provide device detection won’t always have new devices in their database. They may eventually add them, but I know when Windows 8 devices started coming out it took a while for them to be added to these device detection services. This leads to false positives.

Another issue with device detection is there are manufactures that do not follow standards for user agents. I’ve seen some devices use false UAs as their default user agent. Or other devices that offer no unique part in their UA to categorize them correctly. Again, this causes false positives.

I say this as warning for those interested in solutions that rely on device detection.

Their are drawbacks to each approach as you listed, yet I feel the draw backs of solutions that rely on device detection outweigh the others.

Craig Webb Jan 08 2013

Thanks for a great, comprehensive article complete with Pros and Cons for each strategic option and pertinent links to further information and resources. I am sure that I will refer back to this article when discussing options with clients.

Daniel Jan 08 2013

Thank you for writing this! I too have been working on how to handle mobile websites. I use a combination of responsive design and server side handling.

First, I wanted to mention a downside to responsive web design you forgot to mention; no desktop version. I know the idea of responsive design is to not NEED a desktop version, but especially if you end up using CSS to hide and optimize the website for mobile devices, some users will want to access the full and unrestricted version. There is also the issue of how exactly you determine which “version” the user gets, which can get difficult on large tablets, small computers, and different resolutions.

One of the major benefits of using a hybrid style mobile site is that it’s very easy to provide a switch to choose which mode you want. Also, I often add specific components such as a fixed “Get Directions | Email Us | Call Us” to the mobile site, or a more graphic intensive header for the desktop site. In fact, I can usually get away with two style sheets and less than a dozen conditional statements.

Thanks again for the comprehensive article.

Steve Jan 08 2013

Thank heaven. Finally an article that draws a good comparison to the various mobile methods and mentions the html needed to tell google that the site is mobile or the site needs to be crawled differently for mobile or that the separate mobile site is associated with a primary site.

Johan – if you have any other resources for these issues, please post them!

Matt Smith Jan 08 2013

Regarding the cons for RWD – why in the world you want to have separate content for mobile users? That suggests that a user of a specific device (smartphone) doesn’t want to get the same content that someone on a different devices (laptop). It’s alienating to that user group. Just because the concept of attempting to achieve content parity (with a strong content strategy in place) is more difficult doesn’t mean it’s not 100% worth doing.

Cyril Godefroy Jan 08 2013

Hi Johan,

I’d lovĂ© to know what tools you used to measure the load time on mobile.

Rachel McCollin Jan 09 2013

Hi Johan,

This is a useful roundup of the three techniques. It would have been interesting to add mobile first to the comparisons as a method in itself, but I realise not that many sites are using it (a shame).

I personally use RESS a lot as I work with WordPress, which means you can use PHP to send different content to different devices. However methods can be unreliable as they often rely on UA sniffing. I’ve been working on a solution which uses javascript to detect screen width, then sends this value to PHP which generates different content accordingly. I think this solution is closer to responsive design than the examples above.

Personally I don’t use WPTouch as it actually makes a site slower on mobile than a responsive one. I also hate the identikit sites it generates.

I gave a talk on this topic at one of Opera’s developers days last year and have blogged about it on my site. I think it has real potential.

Rachel.

Sumit Jan 09 2013

I lke your article. Thank you for sharing..

Necokopr Jan 09 2013

Great one! I think how to approach this heavily depends on the product and target audience. I believe Responsive would take care of 80% time, but for serious projects, dedicated or RESS is a must. I’m sure we will soon start seeing more and more tools optimizing responsive design performance with server side components, such as http://ress.io

Julie Nelson Jan 09 2013

Awesome article. Have you seen the website that google made that shows people what their websites look like in mobile? It’s pretty cool.

http://www.howtogomo.com/en/d/

Billy Jan 09 2013

I work for me and I will do what works for my audience and projects. Unlike Google for example, I don’t have 1000’s of engineers and developers across the globe to aproach this ‘issue’ in such a narrow minded way.

To each his own – who the hell are they anyways, the Internet police? “You’re under arrest for creating a dedicated mobile design with a seperate URL damn you!”

Great article, Johan.

I would add that RESS has the disadvantage of typically not giving mobile users the option to use the desktop version of the site on their device.

It is a conscious decision to accept an inferior user experience in order to use functionality otherwise not available in the mobile site. RESS usually removes that possibility.

Johan Johansson Jan 10 2013

Thanks everyone for the positive feedback!

@Joe – Being unable to page pinch zoom is possible on any of the 3 formats if the meta viewport hasn’t been set to user-scalable=no or initial-scale=1. So this isn’t specific to a mobile format, but is instead the result of poor coding!

@Brett Jankford – detection is definitely a big risk. Not only for mobile devices, but for tablets as well.

@Daniel – Interesting point about mobile users wanting to access the full desktop version. I haven’t seen any research on this, but will keep my eyes open for it.

@Matt Smith – Mobile use cases can be quite different than desktop use cases (ex. showrooming). Additionally, tasks are significantly different for mobile users when compared to desktop users. That doesn’t mean the content needs to be different, but the navigation and content prioritization should be.

@Cyril Godefroy – Akamai’s mobitest, and webpagetest.org (but be careful with their Nexus S results, the http requests were different from our internal testing).

@Rachel McCollin – Mobile first is quite rare, but is getting more popular. The Boston Globe website is a good example of mobile first. When I get a minute I’m going to do some performance testing on WPTouch websites – excellent point!

@Julie Nelson – lots of awesome research on that website!

@Tom – Agreed – although it’s possible to give mobile users the ability to switch to a desktop theme, it’s quite rare.

Great summary – I’ve been using the RESS model for a while as it provides the best performance/flexibility of all the models. I’m constantly surprised by how often this method gets overlooked with most debates centering on RWD v Separate Mobile Site.

At a server level we can remove certain processes based on whether the session is mobile or not, significantly improving performance. We can serve up responsive templates to mobile devices which provide a far better user experience related to device. This includes mobile optimised (reduced) CSS and JS keeping the code light and fast.

The importance of RWD should not be understated here, as it is a key component of this technique. There are so many devices out there, it is imperative that the design holds up on many as possible.

Tom – I don’t think you can claim that lack of desktop site access is a disadvantage for RESS. Yes, it is vital a user can access the desktop site on their mobile if they choose, but this can easily be added to a mobile site built using this technique, developers just need to implement it.

Totio Filipov Jan 11 2013

Thanks for the awesome article, Johan. Sadly, the disadvantages outweigh the advantages of RWD.

Very interesting article you have here, I too need to develop a mobile site very soon. Thanks for your pointers.

Jason Jan 12 2013

That was a nice comparison between the advantages and disadvantages of responsive web design. As an additional information people use BootStrap to get responsive designs.

Jami Bova-Whitehead Jan 15 2013

First of all , this is one hell of an article ! Second Jakob Nielsen is 100% on the money. Google seems to be doing the SEO double talk. Mobile is affecting the SERPs and if your mobile website is slow it’s going to have a negative impact . If you are going to go the RWD route it has to be fast and that means little content, no bells and whistles . Redirect to a mobile site . Some businesses request RWD but I don’t personally recommend it .

Randy Carey Jan 17 2013

Many of us in the Joomla world have been leveraging the CMS/server-side to fork a mobile version tailored from the same content – and specific IOS and Android templates when those devices have been detected.

But now that Joomla has responsive design built in, I think most of us have switched to responsive. I do think the premium approach is RESS, and those of us working with open source CMSs are clearly in position to offer RESS when the client is willing to pay for this premium.

Luke Hopkins Jan 17 2013

Another thing to be aware of is that UA snifing and mobile detection is only going to get more unreliable as more devices, OS versions, browsers, OSs and viewports come to market. Not sure if its a very futureproof method. Whereas mobile connection speeds and WiFi coverage in only going to increase. Therefore Id say RWD will be the overall winner.. but at the moment things like RESS certainly help with the performance hit of RWD.

Tauqeer Jan 18 2013

i had a problem with wordpress meta tags but now cleared everything … thanks for sharing :)

Great article, at the end of the day it all comes down to speed and size.

Inspiration Jan 21 2013

beautiful examples, i am a friend of responsive :)

PixelCrayons Jan 22 2013

Responsive design has paved the way for us to think about future in a truly responsible manner. Now it’s upto us how we make use of this concept and overcome all the obstacles it puts forth, like performance etc.

Great read, Johan.

Muhammad Jan 22 2013

Very nice article. I think Responsive Design is the best way to go. Build your application for mobile and in case of Desktop browser render additional markup thru Ajax. See http://www.ointerns.com/Interns

Jeremy Jan 29 2013

It seems as everything has moved toward making mobile responsive websites it has become the new standard for quality in theme designing industry, which I’m a part of, but now things are changing slightly – some users now want the ability to turn the responsiveness off. It makes sense too depending on the website.

haider Jan 29 2013

very informative and well written articles.

Thanks

Alastair Brain Jan 30 2013

What about using Responsive PrestoShop Themes for E-commerce Shopping Store? Instead of developing new site will simply adopting a responsive PrestaShop Theme Will work?

Totio Filipov Feb 01 2013

I love the World Wildlife Fund’s website. You can tell it’s really well-made by professionals. Very easy on the eye and very well looking on a mobile device too!

Fesada Feb 02 2013

Great article. However i find it strange that you made a post on mobile optimised website since this blog is not mobile optimised. Hope it will be soon.

Sanjay Feb 02 2013

What tool did you use to measure the loading time? Just wondering..Anyway cool post, I think loading time is still a must even in RWD site.

ashlynn Feb 04 2013

great!

dasjo Feb 04 2013

i’m a bit worried how load time and page sizes are measured. i’m not an expert of such studies, but what i have seen so far is that these benchmarks count time and bytes until finished. what really matters in mobile & responsive web design though is the time until the user is able to see the site. extra images or progressive enhancements by footer positioned javascript shouldn’t account for that which i think would change benchmarks a bit. i’m not saying that responsive is done right at the moment, there will always be room for improvement and performance is really important. i just want to say that those numbers give the wrong impression when they don’t capture what users actually do perceive

Great summary & appreciate the generous use of references to support the discussion. Very informative, lots to consider.

Anyone aware of resources to learn more about RESS? This alternative seems best but definitely need to ramp up knowledge on how to implement & develop for RESS.

Well done!

Witold Feb 07 2013

I think that mobile devices should progressively become computer like staff and computers should get what is the best from mobiles for example interactive screen.
There is a lot of people who are disappointed by limitations of both computers an mobile devices. They can get what is the best from both and unify. This is possible and it will satisfy
everybody web designers and customers. Nobody wants limited products… WE can profit from both technologies…

Kevin Franklin Feb 08 2013

Just on the need to detect mobile devices in RESS… I agree this would be a nightmare. I find that serving the mobile by default and only testing for desktop (since there are fewer more stable desktop user agent strings) to be workable.

vandana Feb 08 2013

That was a very good information for Responsive Web Designs, Thanks for the awesome article, Johan

Justin O'Neill Feb 09 2013

@Johan,
Wow! Thankyou so much!! This article has made me way more enlightened on the correct steps I need to take to switch over to how I design.

@Totio,
I disagree. I believe RWD is the answer and it’s been the answer the whole time. We’re all sitting here thinking about these different options and how to increase load speed/ performance/ etc. But the truth of the matter is: what will it matter 5 years from now? Internet speed will more than likely grow 100x (google fiber) along w/ more powerful hardware- I’m not saying to fill up everything w/ heave loads of code without care… optimization is still key.

I personally believe if we concentrate on doing things right the first time, and thinking in terms of smallest to largest (mobile to big screen), everything will fall into its natural Zen.

Sasha Baksht Feb 13 2013

Nice comparison!
We tend to develop dedicated mobile web sites for complex websites and responsive HTML layout for simple ones.
And dedicated mobile does not meat a set of static pages – it uses same database, same back-end just UI and UX are customized for mobile users.

Zeeshan Rasool Feb 14 2013

I have read few articles today on responsive web designing and I think this is best I read in all. Thanks for the examples I love the way you explained each thing.

kundan Feb 21 2013

great article . thanks for sharing.

Nikita - Design Junction Feb 21 2013

We use to build mobile versions of websites. Lately, though we have switched over to Responsive Web Design and different HTML from the same URL (RESS), this seems to achieve the best technical results and also is a more economical option for clients.

Karthik Feb 22 2013

I’m using a responsive design for my blog and yes, it doesn’t do well in mobiles. Now I’m really confused to choose between responsive and N responsive design :(

Technooze Feb 25 2013

Responsive web design is more cost effective and easy to manage. It was a good article to read through and know some other options and thoughts.

Don Pezzano Feb 27 2013

Thanks for a great article. So much food for thought.

Emily Mar 06 2013

To correct the comment made earlier, using RESS does not in any way prevent you from letting people use the desktop version of the site. It’s just matter of coding it. Take a look at Macmillan (m.macmillan.org.uk) or Pizzahut (m.pizzahut.co.uk). These are both RESS based sites which allow you to link to the desktop site.

Additionally, with a RESS compatible delivery platform, you can deliver both the desktop and mobile versions from the one site giving you the maximum benefits of both responsive and server side optimisations.

For more thoughts on mobile http://bit.ly/W4yTmf

duflot Mar 07 2013

That would have been great to go further on the SEO advantages and drawbacks of these different methods.
Good and complete article otherwise, thanks:)

Lloyd Lee Sep 17 2013

Google recommends responsive web design, so I’m going with responsive web design.

This comment section is closed. Please contact us if you have important new information about this post.

Advertisements
Partners