The Author
  • Yashar Rassoulli
January 24, 2013
Theory & Research
Technology
Responsive: A Task for the Developer or the Device?
With interest in responsive at an all-time high, I think it’s time to fundamentally rethink the assumptions that underly a responsive approach to web design.

A post on responsive design recently made its way to the top of Hacker News.

While I agree that responsive is currently the right approach (Erik from our team often talks about the benefits of responsive design), I think that a lot of time, money and energy is spent building responsive sites that could instead be focused on improving the mobile browser experience. As developers, we should be able to provide semantic markup and let the device focus on its interpretation.

As a user, I’m often paranoid about what’s missing.
I find when browsing on my phone that it can be difficult to differentiate between a responsive and mobile-only website design. I’m left thinking, “Have developers changed the site because I’m on a mobile device? What might I be missing here?”

We’ve all had the frustrating experience of trying to find something on the mobile version of a site and opting to switch to the desktop version after a period of confusion. I think the fact that including a link to the “desktop version” on mobile sites is considered a best practice is an indicator that we’re doing something wrong.

Develop semantically and let the device interpret the optimal display.
Today’s smartphones are as powerful as were desktop machines not too long ago. Why not push to make sites more accessible by thinking deeper about the accessibility and usability of our sites rather than building different versions of the same site? The HTML5 specification has done a great job of laying out web pages in a document-like format. Semantic markup, large typefaces and interactive objects coupled with better use of whitespace are just a few considerations that can make both desktop and mobile sites more usable.

Mobile browsers are getting smarter.
The battle of developer vs. increasing device fragmentation will never end. We won’t be able to achieve 100% device coverage. Devices need to continue to get smarter about semantic markup.

A good example of this concept in action is Safari’s “Reader” mode on the iPhone. Using a bit of wizardry, Reader finds content and displays it in a highly usable format. Opera Mini in the past has also done a good job of taking seemingly indecipherable web pages and making them accessible.

I’m often impressed by my phone’s ability to zoom in and out of a full desktop site to allow focus on a particular piece of content or navigational element, teasing out hints from markup that was never intended to be interpreted in quite that way. But while some sites behave better than others, most can be improved. Let’s not optimize for mobile by changing the complete experience and leaving our users in the dark about what’s going on behind the scenes; instead, let’s treat accessibility on the mobile web like we do on the desktop. This is partially akin to the “mobile first” approach.

Let’s focus on semantic markup and accessibility while pushing the state-of-the-art forward for mobile browsers. Maybe then we can eliminate the overhead of building responsive and mobile-only sites for everything from watches to TVs.

Thoughts?
  • Photography Classes
    Responsive design is getting even harder though. There is too much stratification in the mobile browser market. Developing a responsive design for one version of an android deceive does not usually work for another, it is becoming a PITA in my opinion.
  • John Haugeland
    The worst thing I can imagine for web development is a series of browsers making heuristic-driven guesses at how each to differently mangle my sites. Maybe you should look back to how badly this went when people tried this in the past, before calling for people to repeat the same mistake anew in the future.
  • Yashar Rassoulli
    @John, thanks for the comment. This is already being done to some extent with "reader" mode or even tools like Instapaper and Pocket. We can move more of this into the browser. The mobile browsers are also already making a number of accessibility choices to improve the browsing experience of desktop sites. What I'm arguing is that we should continue to push in this direction this rather than responsive.
  • Yashar Rassoulli
    @Photography Classes, I agree :) Definitely doesn't make it encouraging.
More Like This