Six Revisions

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:)