Blogs

7 Ways to Improve Your Responsive Web Design Approach

Craig Buckler
Share

If your users are demanding a toggle to switch between desktop and mobile layouts, perhaps your Responsive Web Design hasn’t been as successful as you hoped. Here are seven considerations before you jump on the RWD bandwagon…

1. Why use Responsive Web Design?

RWD is a cheap option; you can re-purpose your existing desktop layout to ensure it works well on a smaller mobile device. If you’re developing a new site, there are few reasons not to use RWD.

However, are you considering RWD because it’s an inexpensive way to tick a few business strategy objectives? You can certainly implement a mobile layout within a few hours but will it be useful? It’s usually obvious when a responsive design has been added as an afterthought. It may be better to stick with a good desktop layout than undermine your online presence.

2. Consider the Context, but…

…avoid stereotypes.

Historically, designers considered desktop viewers to be static and smartphone users to be roaming. A train company would typically highlight ticket buying on desktop devices and station directions on mobile devices. There are a couple of problems with this approach:

  • the boundaries have become blurred. People use whatever device is practical e.g. they may surf the net on a phone while watching TV.
  • RWD reveals nothing about the context. Device resolution is a crude assumption especially when you consider the high-density displays offered by modern phones and tablets.

If static and roaming users have different contexts, it may be preferable to provide separate mobile sites or apps which have dedicated functions.

3. Distill Your Content

Why do people visit your site? What’s important to those users? What’s their typical journey? Without these answers, you’ll be tempted to throw everything on the home page. That may be possible on a large display but you’ll struggle when switching to a mobile layout.

The best option: think small-screen first, then…

4. Design Upwards

Once you have a design for the smallest practical screen, you can work upwards in a series of media query breakpoints.

While there are no strict rules, breakpoint steps should not be large — perhaps no more than 200 pixels. However, each step need not be a major re-flow such as additional columns; it could be a font-size change, floating images or another simple tweak.

5. Keep it Fluid

Ideally, your design should be fluid between breakpoints — not fixed. While fixed layouts are easier to comprehend and code, they’re too fragile for RWD (refer to Is Your Responsive Web Design too Fragile?)

Ideally, even your media queries should use proportional units such as %, em and rem instead of pixels.

6. Never Compromise

RWD should never be used to offer a watered-down version of your website. In some cases, you should consider additional facilities on mobile devices such as geo-location and off-line support. Keep it simple and easy to use:

  • don’t use browser sniffing
  • don’t disable zooming
  • don’t hide content.

7. Only Performance Matters

RWD may be cheap to implement but it should be planned from the start. Applying RWD to a site serving 1Mb+ pages will never result in an optimal experience on devices operating over a mobile network.

Responsive Web Design is one of the most important technologies to appear in recent years. But using RWD badly may be worse than not offering it at all.