Mobile vs. Responsive Design, A One-Act Retrospective
Posted by justin on April 5, 2012, 6 p.m.
~Enter Dean & Jeanine, two tech-savvy feline photography enthusiasts~
Jeanine: "Hey Dean, check out this hilarious website. Chock full of cats on unicycles. I'll pull it up on my phone."
Dean: "Awesome, Jeanine, lemme see!"
Jeanine: "Wait, hang on. I can't get it to load right. Lemme try rotating it... nope. I'll zoom out and scroll over to... nope."
Dean: "Jeanine, what's the deal? Didn't cats-on-unicycles.org* set up a mobile-friendly site?"
Jeanine: "It would't appear that way, Dean. It wouldn't appear that way."
If this conversation is all-too-familiar, then it's time to dive in to the wonderful world of mobile-friendly website design! Presenting your site within the limited real estate of a smartphone can be a challenge, but there are two fields of thought on how best to experience your website on your phone, tablet, or medical nano-robot: responsive design and mobile design.
Method the First: Responsive Design
A responsive design uses a single source of content which it then adapts to a variety of mobile devices without having to constantly resize or scroll, nor does your user have to enter a different URL or wait for a redirect. As your user shrinks or expands their browser window, your website automatically adapts to present content in the best possible layout – including on smaller screens found on phones & bigger ones on tablets.
Method the Second: Mobile Design
A mobile design is almost like a second website – you've probably seen URLs like "www.website.mobi" along with "www.website.com" – this is a clear example of a website taking advantage of a mobile-only design. Mobile designs are optimized content sets, styles and scripts, that are meant to be used only on supported small-screen devices.
But Who's the Boss?
Both mobile design methods achieve the end result for your users – a layout that allows them to navigate your site efficiently on a small-screen device. There are advantages to using each method, some of which you can read about right now!
|Responsive Design||Mobile Design|
|Best layouts: always presents an ideal layout, regardless of screen size. Mobile-only sites can only offer the user the full desktop version of the reduced mobile version (no in-between for tablets or mid-sized screens).||Short load times: mobile users can be served minified, optimized scripts, HTML and CSS. Responsive designs download the full desktop's files, then re-size the layout for the device.|
|Any device: displays an optimized layout without any mobile detection or secondary URL; mobile designs may require a script redirect or an additional URL (m.site.com) to maintain.||Optimized content: mobile users can be given bulleted, easy-to-scan content instead of the full desktop-version content, which may not be ideal for mobile visitors.|
|Short development cycle: use existing HTML and scripts; only need time to develop media-queries. Mobile designs require maintenance of two separate templates, two style sheets, etc.||Unique experience: Mobile designs can take advantage of mobile-only options such as gestures and multi-touch input.|
Surprise Option: Combine Mobile and Responsive into.... Mobonsive!
If development time and budget allow, create a mobile and responsive design. With a combination of device detection and media-queries, users can be offered the best possible experience:
If a mobile device is detected with a small screen size, redirect users to m.site.com. Every mobile site should give the user the option to visit the full desktop site, which in the case of a Mobonsive design, would still be optimized for small screens.
If a mobile device is detected with a large screen size (or if no mobile device is detected), users are given the responsive desktop version with the option to visit the mobile-optimized URL.
It's been a wild ride, but hopefully you've learned something today – I know I have!
* Not a real website... yet.