HTML5 Zone is brought to you in partnership with:

I spend my spare time combining the luxury life of having no kids and a wonderful girlfriend with the agonizing pressure of blogging under my Onderhond monicker. As a front-end developer I am raised and nurtured at Internet Architects, a Belgian company investing a lot of time and resources in making the web a better place Niels is a DZone MVB and is not an employee of DZone and has posted 109 posts at DZone. You can read more from them at their website. View Full User Profile

Responsive != Mobile: Ditching Assumptions

05.03.2013
| 6330 views |
  • submit to reddit

The surge in mobile devices really changed the web. What used to be a theoretic ideal (one site to rule them all) suddenly became a reality. Almost overnight a myriad of devices sprung up, all web-ready and eager to serve your web page. Not too surprisingly, we weren't ready for that. And to cope with it, we made a few assumptions that led to bad decisions and misguided truths. Let's be clear once and for all: even though mobile kick-started the responsive revolution, responsive does not equal mobile.

Hello Apps, Goodbye Apps

Last month I ditched a few apps from my phone and started using their web equivalents. Leaving the apps vs web discussion for what it is though, it taught me an even more important lesson: mobile (or small-screen) versions of popular sites often offer a better user experience than their desktop/full-screen equivalents. To the point where I would like to use the small-screen version, even on desktop.

Especially sites that revolve around updates are prone to this behavior. Twitter and Facebook are two good examples, but most news sites fall into the same category too. Generally speaking, I go to these sites, expecting to get an update of what's new between now and my latest visit. Mobile versions are usually tailored to do that, desktop versions throw in a bunch of noise that makes it a lot harder to get what I came for. Of course mobile sites get the benefit of leaner design (smaller size, fewer requests and less fluff), but there's more to it.

Take The Verge for example. On mobile you get a small carousel on top, below that is a nice, scrollable and infinite-loading list of the latest articles. On desktop you get a noisy layout, followed by even more noise. These are the top articles (as seen by The Verge and commenters), but they don't necessarily reflect my interests. Nor do they adapt after I read a certain article. If you want a list of the latest articles, you have to click the black square on the left (with the number inside). It then opens a clunky overlay, featuring some badly animated scroll behavior. Quite horrible indeed.

Dashboards and Iframes

All of this got me thinking ... what if I made my own page, dropped a few iframes on it and loaded several web pages within the iframes. I could make a dashboard of my favorite sites, benefit from their mobile alternatives and all of that in one single tab. Or I could make a separate social hub, a news hub, an entertainment hub. Even better would be if in the future these sites auto-updated their content stream (or like Twitter, give a static indication of new content). Hardly a technical challenge, so I gave it a whirl. The results were stupefying though.

I made a page with six iframes and tried to load six different websites, only one wielded the preferred result. Twitter and Facebook wouldn't even load in an iframe, The Verge and one other failed to load their mobile version (even though I used their m. urls). The fifth one didn't have a separate mobile url but did appear to be responsive. All fake though, it just gave me the full version on desktop, even though its display area was that of a standard smartphone.

Assumptions. By saying that responsive equals mobile, people are wrongly assuming that the mobile versions should only be used on mobile. They are sniffing and making decisions that I don't agree with, failing my experiment and leaving me pretty disappointed.

Conclusions

Don't assume too much. What is logical today may not be all that logical tomorrow. Responsive web design is adapting your site based on certain context variables. Mobile is not a single variable, nor does it have any unique properties. Touch found its way to desktops and since the beginning browser windows could be resized to fit smartphone dimensions. There is nothing that defines "mobile" these days.

The fact that your mobile site is better than your desktop site is a secondary problem that could do with some soul searching, in any case you should not decide for your user which version he wants to use. Don't sniff, don't make assumptions, don't decide for others, especially when there is no good reason to do so.




Published at DZone with permission of Niels Matthijs, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)