A Comparison of Methods for Building Mobile-Optimized Websites

Jan 7 2013 by Johan Johansson | 52 Comments

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

  • Content parity: Your site contains the same content and HTML markup regardless of the device being used, providing your users with a similar experience. This will grow in importance as more people rely on their smartphone as their primary means of accessing the Web.
  • A single URL for web pages: This makes it easier to share and link to your content. No redirection is needed to get devices to their optimized view (compared to a dedicated mobile site).

Disadvantages of Responsive Web Design

  • Content won’t be fully optimized for mobile devices: Unless you use a mobile-first approach, your web pages will contain the same information as its desktop counterpart. Compare this to a separate mobile site where you could potentially tailor the content of a web page just for mobile users.
  • Slower performance: The average web page today is about 1.3 MB, according to January 2013 data from HTTP Archive. It’s possible to prevent unnecessary downloads when using RWD, but in practice, most responsive web design sites are the same or bigger in size. 86% of the sites tested by mobile performance researcher Guy Podjarny were the same or greater in size, as reported in a presentation about mobile site performance.
  • It can be more difficult to navigate the site: Mobile users generally want to perform different tasks than desktop users. They may also be more accustomed to mobile-specific UI design patterns. Unless you customize the navigation structure for each device, there could be usability problems.

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:

  • Average load time: 14.99 seconds
  • Average page size: 1,193.88 KB
  • Number of HTTP requests: 142

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:

  • Average load time: 6.91 seconds
  • Average page size: 885.97 KB
  • Number of HTTP requests: 72

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:

  • Average load time: 5.55 seconds
  • Average page size: 605.27 KB
  • Number of HTTP requests: 87

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

  • Easier to make separate changes to the mobile and desktop sites: Changes can be limited to the mobile version only or desktop version only.
  • Faster load time: Since you’re developing only for mobile sites, you can streamline and optimize your mobile site specifically for the mobile user experience.
  • Easier to navigate: The navigation structure and content is customized for the tasks performed by mobile users.

Disadvantages of a Dedicated Mobile Site

  • Multiple URLs for each page: Sharing a web page on social media becomes an issue, because mobile users will share the mobile URL, but desktop users may click the link and get the mobile version. To prevent duplicate content SEO issues, you’ll need to use the rel="alternative" and rel="canonical" meta tags. Also, when a mobile user searches on Google and clicks a desktop URL in the search engine’s results, they’ll either see the desktop version or be redirected to the mobile version of the page. If the mobile version of this page doesn’t exist, they’ll get an error.
  • Different content and functionality: The purpose of creating a dedicated mobile website is to tailor the site specifically for mobile users. This can mean cutting out content and functionality, resulting in a different experience.
  • Content forking: You have two different sets of content, which could create a content strategy nightmare.
  • Requires redirection: Mobile users will need to be redirected to the optimized view, and vice versa. Redirection adds to a page’s load time. It can also have implications on your site’s SEO.

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:

  • Average load time: 1.35 seconds
  • Average page size: 272.29 KB
  • Number of HTTP requests: 45

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:

  • Average load time: 2.25 seconds
  • Average page size: 103.66 KB
  • Number of HTTP requests: 16

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:

  • Average load time: 3.40 seconds
  • Average page size: 56.04 KB
  • Number of HTTP requests: 22

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

  • Easier to navigate: The navigation structure can be customized for the different tasks performed by mobile and desktop users.
  • Less page bloat: Instead of relying on display: none; or visibility: hidden; to hide page elements for mobile devices, they can instead be removed from the HTML or CSS. This will reduce the amount of data downloaded and speed up load time.
  • Faster load time: Unnecessary JavaScript can be removed from the HTML, which frees up CPU, memory and cache on the mobile device.

Disadvantages of RESS

  • More server resources: Dynamically building the HTML will increase the load on the server.
  • Requires device detection: Mobile users will need to be detected. Device detection is unreliable.

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:

  • Average load time: 3.46 seconds
  • Average page size: 163.12 KB
  • Number of HTTP requests: 28

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:

  • Average load time: 6.15 seconds
  • Average page size: 188.95 KB
  • Number of HTTP requests: 31

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:

  • Average load time: 6.15 seconds
  • Average page size: 188.95 KB
  • Number of HTTP requests: 31

WordPress.com

WordPress.com

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

  • The mobile version has an http-equiv attribute, while the desktop version doesn’t (<meta http-equiv="x-ua-compatible" content="IE=10">)
  • They each use a different stylesheet
  • The mobile version places the novalidate attribute within the <form> tag, while the desktop version places it within a form <input>
  • The mobile version has a News link in the footer, while the desktop version doesn’t have a News link anywhere in the page
  • Some JavaScript was removed from the mobile version

Performance results:

  • Average load time: 2.77 seconds
  • Average page size: 118.40 KB
  • Number of HTTP requests: 19

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.

52 Comments

Design Nirvana

January 8th, 2013

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

Ray S.

January 8th, 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.

Jay

January 8th, 2013

Good summary, Johan.

Joe

January 8th, 2013

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

January 8th, 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

January 8th, 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

January 8th, 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

January 8th, 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

January 8th, 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

January 8th, 2013

Hi Johan,

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

Rachel McCollin

January 9th, 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

January 9th, 2013

I lke your article. Thank you for sharing..

Necokopr

January 9th, 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

January 9th, 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

January 9th, 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!”

Tom

January 9th, 2013

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

January 10th, 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.

Ian

January 11th, 2013

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

January 11th, 2013

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

Jake

January 11th, 2013

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

Jason

January 12th, 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

January 15th, 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

January 17th, 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

January 17th, 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

January 18th, 2013

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

Theo

January 19th, 2013

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

Inspiration

January 21st, 2013

beautiful examples, i am a friend of responsive :)

PixelCrayons

January 22nd, 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

January 22nd, 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

January 29th, 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

January 29th, 2013

very informative and well written articles.

Thanks

Alastair Brain

January 30th, 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

February 1st, 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

February 2nd, 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

February 2nd, 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

February 4th, 2013

great!

dasjo

February 4th, 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

Dave

February 7th, 2013

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

February 7th, 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

February 8th, 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

February 8th, 2013

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

Justin O'Neill

February 9th, 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

February 13th, 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

February 14th, 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

February 21st, 2013

great article . thanks for sharing.

Nikita - Design Junction

February 21st, 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

February 22nd, 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

February 25th, 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

February 27th, 2013

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

Emily

March 6th, 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

March 7th, 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

September 17th, 2013

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

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences.

Mobify