Call us for a chat on
01234 779050

Responsive Web Design – A Business Essential

Date: Tuesday, 2nd August 2016 | Category: , , , , , , , , , , , , , , , , ,

In this age of new technology there is no excuse for poor levels of user experience.

It is now absolutely vital that consumers have the best experience when viewing websites, regardless of their browsing device. Responsive Web Design (RWD) is a method of optimising user interface on your website.

RWD means pages can be viewed in response to the size of the viewing device. Therefore you can get the same experience across all platforms, from iPhone 4s to Dell’s XPS 13, providing optimal customer service, interface, and interaction.

Staying on Google’s good side

As of April 2015 Google began ‘punishing’ sites that were not mobile-friendly, pushing them further down the search rankings in favour of optimised websites.

Although this currently only pushes down your rankings down on mobile searches and not desktops, it is predicted that there will be eventual desktop repercussions as well. Non-responsive sites can also impact your desktop ranking by giving your website the reputation of having low user experience levels, resulting in negatives such as poor feedback and higher bounce rates.

Back-to-school basics

In the world of RWD web content should resemble the description of fluids your science teacher gave you in school. When transferred to different ‘containers’ (devices) the content, like water, should fill the shape of the container.

Courtesy of Josh Clark – Seven deadly mobile myths, Illustration by Stéphanie Walter.

This can in fact be seen easily on a desktop or laptop simply by altering the size of the window you’re viewing this in.

So, how does this actually work?

To put it in more technical terms RWD enables a site to adapt the layout to the viewing environment using fluid, proportion-based grids, flexible images, and CSS3 media queries.

The grid concept means that units become less rigid and absolute (pixels/points) and relative units are used instead (percentages). This idea of relative units is then applied to images as well to make them flexible to the plethora of devices available for public consumption.

Media queries are effectively a way of putting conditional clauses into the coding of a website. These clauses are normally defined by the size of the device the website is being viewed from. For example for anything above 375 pixels wide (the width of an iPhone 6) a different rule can apply to the way something is displayed compared to the same content being viewed on a browser that is 1280 pixels (the width of a 13” MacBook Pro) wide. So on a phone a particular menu bar could be blue but on a laptop the bar could be shown as red. (Thank you to one of our developers – Andrew – for painstakingly guiding me through a short introduction to coding and the magic behind it all). Whilst RWD gives device viewing the capability to be equal, its usage also individually tailors websites to the many devices out there! Who knew?

Keeping you up-to-date

Here at Phew our developers are working to the bone to ensure all of our websites are thoroughly up-to-date with RWD to ensure your users get the best experience from the services we help you provide, enhancing your Search Experience Optimisation (SXO). Find out more about SXO and how it is over-taking SEO in our February Service Spotlight, available to read here.

Want to make sure your sites are hitting the right spots? Get in touch, give us a call on 01234 779 054 or email hello@phew.org.uk.