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.

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.

Written by

Yashar Rassoulli

Yashar Rassoulli

Sign up for our newsletter