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.
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
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