At the J. Boye Philadelphia 2012 conference, there was quite a bit of talk about Responsive Design to aid us in a Mobile First approach to the web. It seemed as though almost every slide from the Content Management to the User Experience tracks and everything in between mentioned Responsive Design.
Honestly, I am extremely pleased that the work pioneered by Ethan Marcotte and continued on by some very smart people like Luke Wroblewski, Mat Marquis, Scott Jehl, Todd Parker, and so many other web technology experts has become a hot topic for enterprise web strategists.
The concepts of fluid grids, dropping images and complex navigation in smaller viewports, and media queries are all very future-friendly HTML/CSS approaches to the web, especially as we begin designing in a Mobile First approach. These techniques all carry great promise for the next generation of web applications.
All of this sounds great. There are a number of great sites that are already embracing Responsive Design techniques (Boston Globe was the original large scale implementation). CMS vendors are beginning to bake-in responsive templates. Many open source frameworks and systems for helping front end developers get started are already beginning to mature. Personally, I have used these techniques on a number of recent applications – including both HTML5 mobile apps within PhoneGap and public websites.
Sounds great – so what’s the problem with responsive design?
One of the biggest problems that we see in Responsive Design techniques relates to “responsive images”. Images are one of the greatest sources of page weight and how to properly handle images within Responsive templates is still very immature.
For instance, if you are hiding a large, hi-res banner image in smaller viewports or switching to a smaller resolution, there is no way to load only the image you want (or not load one at all) without broken markup or server-side help (which usually means employing the dreaded user-agent detection approach). Obviously we could inject the images via JavaScript at run time, but that is not proper for the semantic web and a true standards-based approach to HTML development.
There is right now a hotly contested debate going on between some of the top front end developers in the world and the browser developers (lots of super smart web people much smarter than me). Everyone is looking for a solution on how we should group sets of images and have the browser only download that which is needed at the moment depending on screen size, pixel density, bandwidth, and so on.
For instance, if the small, mobile viewport only really needs a 50 x 50 pixel image, why serve the 200 x 200 pixel image and scale it down in the browser? Why rely on browser sniffing to determine viewport size (which of course it does not work well and that is but one of many issues with browser sniffing for mobile devices)? How do we adapt to high density displays such as the iPhone 4 or Samsung Galaxy Nexus? How about scaling based on bandwidth standards that are forthcoming from the W3C?
The main row is regarding the HTML markup conventions to be used, with the top HTML developers mostly wanting one convention and the browser developers wanting another. The W3C’s Web Hypertext Application Technology Working Group (WHATWG) has initially chosen to ignore the Responsive Images Community Group’s (RICG) suggestions and instead has released a proposal that is causing quite a commotion in some very influential circles. Most of the people in the RICG, many of whom set the bar for modern web development, were left out and generally ignored in the WHATWG proposal.
What does all of this mean to your organization? It shows that Responsive Design is still in its infancy and while there is currently the ability to create spectacular sites with these techniques, many of the technical challenges are still very real and the solutions very uncertain.
While I urge organizations to adopt a Mobile First approach to the web and applications created for it, I would strongly suggest that you not jump in head first in Responsive Design without truly understanding that this whole concept is still a huge work in progress.
Learn more about the ongoing Responsive Image debate?
These 3 articles are a good place to start:
- Responsive images and web standards at the turning point
- Responsive image element proposed by the WHATWG
- WTFWG
Learn more about user experience best practices and trends
Sign up the J. Boye Aarhus 12 conference for web & intranet professionals in November, which features a dedicated user experience conference track
I agree that responsive design is in its infancy and we realize it will, through its early and wide adoption, continue to accelerate through a long series of iterative improvements in methods and technologies.
The problem of sending full size images to a mobile device is not solved by serving a desktop-optimized site to a mobile user either so while we wait for a suitable improvement in browsers and html standards to handle this efficiently at least we can work towards optimizing the interface for different size screens.
Good insight and advice!
In the end though I must say I am slightly annoyed of hearing the “Mobile First approach” sentence once again.
This is like the “responsive design” term itself, we hear it more and more, and often, not only I doubt people really understand what it means and imply, but I also believe it might not be the right/best approach in all cases.
I agree w Roland’s comment. Maybe I am missing something but I think the mobile first mantra is a bit simplistic. In my experience, the right way to go about responsive design is desktop and mobile in tandem…don’t fully conceive either experience without considering the other …and comprehending the trade offs. I don’t really understand the desire to posit big rules for ux design, when our job is first and foremost to think clearly.