Skip to main content

RWD: It's Not Desktop vs Mobile

By Craig Buckler

Blogs

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

My recent article, Should Users Have the Option to Switch Off Responsive Design?, prompted passionate debate on SitePoint. The premise: responsive websites could offer a toggle switch so mobile users can switch to the desktop view should they prefer it.

I suggested such a solution shouldn’t be necessary. I was in the minority.

Several comments revealed that Responsive Web Design is badly implemented and mobile layouts are often an afterthought. Many take the simpler route of removing useful content rather than re-factoring it. Some respondents even stated RWD would be dead within a few years.

The technology behind Responsive Web Design — media queries — is fundamentally sound. However, we’re still learning to use the techniques and I can understand the difficulties designers face. A single, static Photoshop mock-up has never been a true representation of a website and now we’re designing for an unlimited number of resolutions.

As developers, we’re also obsessed with the gadgets we own. For example, if you’re using a 17″ laptop and an iPhone, you’ll make sure it works on those devices first and potentially miss a range of mobile, tablet, desktop, television and console resolutions. And that’s before you consider the general trend for larger phones and smaller laptops.

Restricted View

Part of the problem stems from the restricted view that designs are either “mobile” or “desktop”. In RWD, this translates to a media query such as: show the mobile design until the browser width exceeds 900 pixels then switch to a desktop layout. When used badly, the process:

  • avoids any consideration of the enormous range of devices
  • assumes the mobile layout is a simplified or scaled-down alternative to the desktop
  • removes useful content, and
  • enforces unsuitable fixed-width templates.

It need not be that way. Good responsive web design should never be a “choice”. The site should be presented in the most optimal way for the horizontal and vertical resolution available. It’s fluid and there are thousands of possibilities — not just two. This raises an important point:

A single toggle switch can never represent all the options.

SitePoint has a technical audience. You understand RWD and like to configure systems according to your personal preference. However, by providing an RWD toggle switch, are we simply bypassing layout problems rather than fixing them?

Admittedly, you will never keep all users happy all the time, but RWD remains a cost-effective option for many sites. Assuming you use it well.

Coming soon: 7 Ways to Improve Your Responsive Web Design Approach

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

New books out now!

Get practical advice to start your career in programming!


Master complex transitions, transformations and animations in CSS!