irresponsibly responsive

2011 was an exciting year for the web development community. We saw the rise of mobile, coined concepts like mobile-first and responsive and braced ourselves for a future where anything could be seen by anyone, anywhere, on any device. It was a great year for experimentation and mucking about, but now it's time to get serious. The question is, can we still control the beasts that responsive and mobile-first have become?

why no responsive?

Last month I cleaned up the css and html of this site, but as you can see I stayed away from responsive for the time being. Partly because I had enough work with reworking the html and css as it was (I made static html5 templates for all pages, redesigned all components and reworked the entire css to less), but mostly because I'm still not quite sure how (and if) to approach responsive and mobile-first design.

It's not that I don't like the ideals behind responsive and mobile-first (on the contrary, I love them), but after reading one year's worth of blog articles and online discussions I'm still not convinced we're technically ready for the things we are preaching so vehemently. Every solution, every methodology and every best practice just raises more and more questions, making me doubt if we're actually on the right track. To me, it often sounds like we're a one-legged man trying to win the Iron Man competition.

mobile-first, responsive (, progressive enhancement)

Three buzzwords, all somewhat connected but all meaning something different. From what I noticed, most people in the web development industry hardly know the difference between these three concepts. Responsive is quickly becoming the new html5. Still, a select group of people in the know are preaching these concepts to a larger group of professionals who just run with it and produce something that might come back to haunt us three or four years from now (think ie6-tailored websites).

The core of this miscommunication lies in the way these concepts are advertised. Mobile-first and responsive are solutions that don't fix the core problems we are trying to solve in the first place. For now we don't seem to have any better solutions at hand so people just roll with it, but these solutions are nothing more than cheap hacks that sound logical, but fail at their well-meant intents.

The downside of their current popularity may be that when people find out all this extra effort isn't really solving much (or in some cases, actually becomes counterproductive), they might abandon mobile-first and responsive altogether, throwing out the good with the bad.

mobile-first

Mobile-first is nothing more than a practical implementation of an ideal we've been preaching for years now: "focus on your core message and build the rest of your site around it". The reason why this is linked to mobile is because for now (and even that nothing is quickly becoming outdated), mobile equals smaller screen estate. In reality though, the smaller screen estate is just another boundary that forces us to focus on the core content, meaning that there is actually no direct link with mobile at all. We're just dealing with a temporary consequence of "mobile".

Current mobile-first best practices are very much focused on mobile constraints though, which might narrow people's vision. Mobile-first has become the equivalent of designing for screen constraints instead of designing with a focus on the core content. Even though both ideals overlap, they are clearly not the same and screen estate is just one of the many factors influencing core message design.

responsive

While the mobile-first ideal is still workable and useful, responsive design is clearly flawed at its very core. Responsive design is meant to anticipate a certain context people find themselves in, in order to serve a version of the site or app that tries to match this context. Even in an ideal world this would require quite a few assumptions coming from the information architect and designer (but hey, that's their job), but let's face it, we're hardly dealing with an ideal situation here.

Currently a user's context is reduced to device/browser estate. Based on this information me make assumptions on what functionalities can be dropped, what priorities the user might have and what information might be obsolete. Really, it's like trying to predict someone's taste in food based on the size and position of his left ear. There is no way to track someone's connection speed, no way to track device specific functionalities.

What's worse though, we're trying to predict someone's context purely on technical requirements alone. I understand that people surfing the web on phones might require simplified GUIs to quickly accomplish core tasks on a website, but sometimes people are just wasting time on their phones (train rides, waiting rooms, ...) and don't mind a little extra hassle in exchange for extra functionalities. There is a whole range of variables that influence a person's context and thus his needs from your site, but responsive just gives you one: screen estate.

conclusion

Design based on context with focus on your core message is a splendid ideal and should be pursued as much as possible. But mobile-first and responsive design are flawed solutions to overcome this difficult challenge, definitely in their current state. While I believe it's necessary to keep experimenting with these techniques, I fear they'll turn out to be counter-productive in the long run, placing a burden on our jobs a couple of years from now.

So for now you won't be seeing a responsive version of my site. There's pinch-zoom for the visually inclined, there's rss for those who care about readability and the site works perfectly fine on tablets. It will be interesting to see how the responsive and mobile-first concepts will develop themselves in 2012, hopefully they will just prove to be intermediate solutions resulting in more robust methodologies that will truly benefit our core goals.

For now, keep in mind what you're actually trying to accomplish and educate the people around you on what "responsive" and "mobile-first" really mean, rather than selling them a dream that might leave them disappointed and depressed two or three years from now.