Just in case you’ve been living under a rock recently, let’s get some quick definitions out of the way: Responsive web design means creating a site that will dynamically adapt to different screen sizes by resizing and reformatting its fundamental parts. Conversely, a mobile site is designed to cater specifically for mobile devices and is made available in addition to a full desktop site, often with design and content variations.
What starts out as a 2 or even 3 column site with rich visual imagery and expansive menus can scale down, via a series of steps, to a simple 1-column scrolling site with simple or even icon based navigation and smaller or greatly reduced imagery. In principle the site should go from a giant desktop monitor to a palm sized Smartphone seamlessly and elegantly – reordering and reshuffling like Optimus Prime and visually awesome at every step in-between.
This is achieved, in part, with media queries. A media query (an element of the CSS3 spec), inspects the physical characteristics, such as screen resolution, of whatever device is displaying the site – be it a scaling desktop browser or handheld device. If the device passes the requirements outlined in the query, then the specific CSS is loaded. Media queries can be applied at various different resolution changes to swiftly amend any display or formatting issues as they appear.
Sounds great, doesn’t it? “So what is the problem?” I hear you ask. There are also sites catering specifically for mobile devices, particularly Smartphones, and an increasing percentage of sites now offer a mobile version of their site. This condenses and presents the content in a suitable format for viewing on mobile devices. The size and load time of these sites is normally optimised to be far smaller and faster, given that, much of the time they’ll be accessed on data connection rather than broadband connections. An example would be Facebook’s mobile site.
This is done by paring down elements, optimising the site and its images in a way that allows for a great experience on a small screen. Think; easy to ready text, minimal images, simple, purpose built menus and reduced copy length. An average load time can be reduced from 15 seconds to less than 2 seconds and file sizes are often halved. You can see a visual comparison here.
Popular publications such as the NME have a dedicated mobile site with content hand-picked by the editorial team that is deemed most suitable for mobile viewing. There’s a focus on easy to read copy and a notable move away from image heavy content such as galleries. As Chris Ferdinandi of Go Make Things points out “Mobile traffic is rapidly overtaking desktop traffic. Building a site that looks good on small screens will be a must-have, not a nice-to-have.”
With that in mind, what is the best approach to achieving this? In a recent article on the topic, Bryson Meunier recently highlighted that even Ethan Marcotte, the founder of the responsive design movement, stated in his book Responsive Design that; “responsive web design isn’t intended to serve as a replacement for mobile web sites.”
“If your main goal is mobile optimization, then responsive is simply not enough. Unless your website is just a blog or an online publication, you really should create a separate mobile website,” says Tim Macchi from Bluetrain Mobile, who believes the choice of Responsive vs Mobile rests solely on the content and purpose of the site.
Interestingly, there is also a school of thought that suggests that Responsive design this may lead to a certain visual homogenisation of the web. Jonathan Longnecker of FortySeven Media suggests that “in our quest for modular, gridded and responsive nirvana we’ve lost the spark,” adding, “from a technical and UI perspective it really is fantastic and forward thinking. But it’s almost like it lost its soul to get there. Where’s the character? Where’s the personality? Does it really make sense to be more wowed by seeing what happens when you change the width of the browser than the visual impact of that first page loading up? Personally, I was underwhelmed.”
Ethan Marcotte, writing for .net Magazine agrees, in part, asking “How does a highly art directed layout adapt to a changing browser window? How do we rethink complex, interaction-heavy interfaces on a smaller display?” Yet also suggests that, while it is still early says, “Responsive web design offers us a foundation, a framework for tackling these problems – both now, and in the years to come.”
There appears to be a good argument for the web being big enough for both Responsive and Mobile offerings and depending on the context; the two could coexist or even be partnered up to create a well rounded web experience for suitable sites. That said, for desktop, laptops and tablets; responsive does appear to be an essential step in the user experience evolution of the modern web, but may not be the holy grail of web design it has been touted as.
What do you think: Do both of these approaches have a place in the web going forward or is one of these minidiscs and one MP3s?
Images: Bue Train Mobile