A plea for device agnostic web development Part 1
To quote Stephanie Rieger, who is an incredible contributor to the topic:
“This is vitally important people, so listen up”
Our industry has been aware of the stats and figures regarding mobile web traffic for quite some time now. The trends have been there, and talked about at great length, and yet it still feels like some people were almost taken by surprise at how much of a device shift is happening. Facebook and YouTube now routinely report mobile traffic of at least 30%. The statistical entities are all pointing to 2014/2015 being a point where mobile traffic will exceed desktop traffic.
I’m here to talk about Responsive Design. It’s a concept that’s absolutely buzzing right now, and for a very good reason.It affects everyone from clients to planners to UXC’s and so forth, and for agencies to fully embrace this concept changes need to be made to how we work.
Let’s start with the basics. This post is about two approaches to mobile web development from a very high level. Adaptive Design, and Responsive Design. They both share ideas, but function in slightly different ways. The simpler one is Adaptive Design, let’s start there.
The mindset of creating a separate platform with separate data for a ‘mobile’ site, while sometimes valid for good reasons, is often a way of avoiding the problem of mobile traffic and their different screen sizes. Adaptive Design is a development and design methodology that ultimately dictates that the same data drives different layouts.
To clearly visualize this, go to http://www.isobar.com/
Look at the site, and slowly make the browser window smaller. You’ll see that there are three very distinct layouts that are placed in effect at three specific screen sizes. I’ll wait here while you go play with the site.
These aren’t arbitrary points, but correlate to an iPhone screen size, an iPad screen size and ultimately the last one is a desktop version.
In geek speak, these are called breakpoints. It’s a fancy term for a major layout change. There are major and minor breakpoints, where minor breakpoints reflect small tweaks to accommodate the changes between, let’s say an iPhone 4 and a Galaxy S2, that have different screen sizes. Major breakpoints are fundamental shifts in layout.
It’s an elegant way to approach the dilemma of weighing up complex designs versus mobile friendly content. It has flaws, however. Right now, one of the major problems is Android devices. Because the nature of Android OS means that any manufacturer can build a device using it, there really aren’t that many restrictions on device dimensions. This leads to a crazy ecosystem of screen sizes, which together with the increasing amount of tablets makes this approach potentially tedious in terms of constantly tweaking the breakpoints to gracefully make use of the screen real estate.
Even though the mantra of ‘Mobile First’ might be relevant for 2011 and 2012, there’s really no guarantee that this is relevant in the future. Browsers exist in so many things right now, and even though there’s not a whole lot of people that use internet in their car screens or on their PSP’s or browse through their TV’s, there’s a definite chance that this will change moving forward.
To truly walk the path of future-proofing web content, the ‘Mobile First‘ mantra should really become ‘Simplest Device First‘. And a step in that direction is Responsive Design.