iphone on a laptop

Responsive web design options for your WordPress site

What does responsive web design even mean? According to Wikipedia:

Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices.

In practical terms, for most visitors to most websites, that means making sure that your WordPress site is optimised for their viewing pleasure on a range of desktop display sizes, tablet screens and smartphones. That means that text should be legible and the site’s user experience should flow just as well on a smartphone as on a desktop.

We’re fans of responsive design: we think it makes commercial sense and we’d recommend considering responsive design for any website. But, responsive web design also incurs its own costs. It takes longer to plan, design and build responsive than fixed sites. The user interactions need to be thought through: you don’t get a mouse cursor on touchscreens so there’s no ‘hover’ state for example. In contrast, not many desktop displays are touchscreen, so things that feel natural on mobiles (e.g. swiping) need reconsidering.

So, we offer three options for responsive websites:

  1. Not responsive – your site appears the same on all browsers (within cross-browser compatibility limits). This isn’t a disastrous approach: a well-designed desktop site will still be fine on most tablets, and even smartphones are designed to allow easy zoom in/out (from a time before responsive design was a ‘thing’ on most sites).
  2. Mobile responsive – a mobile-specific (and optionally a tablet-specific) version of the site, served specifically to devices within certain screen resolution limits. This covers the majority of visitors for most WordPress sites and represents a good balance between investment and reward.
  3. Fully responsive – the site is fully fluid and elements will re-flow/re-size (some might be fixed width, some % based) depending on browser resizing as well as viewing on specific screen resolutions.

What about if your site will use an off-the-shelf theme?

Whenever we use an off-the-shelf theme (with or without customisation), we’ll aim to maintain the responsiveness of that theme for your site. If you ask us to make changes to the design or to incorporate fixed-width assets like tables that don’t respond well then we’ll do our best to advise you of any impact that might have on responsiveness.

If we’re using a theme with heavy customisation or building you a bespoke theme, we’ll specify responsiveness clearly in our proposal to you. Where we’re undertaking a bespoke theme design and build, we’ll generally recommend using a responsive front-end framework like Twitter Bootstrap to economise and standardise as far as possible. That keeps initial costs lower and decreases the learning curve for anyone else that might work on the site in the future.

In Summary

Pragmatic by name, pragmatic by nature: we’ll always try to recommend an approach that’s sensitive to best practice design, user experience and your business objectives with a web project. The spread of responsive web design and it’s effect on the cost and complexity of WordPress design and build means that more often than not the best option for a new WordPress website will use an existing theme or theme framework at some point.

Leave a Reply