Responsive web design

With users now accessing the web on a vast range of desktop, laptop, tablet and mobile devices, with varying capabilities and screen sizes, the challenge of producing websites that look great across them all is increasingly difficult.

In the past, the primary solution to this problem has been to build separate websites for different devices. Whilst building a separate mobile site can be a great option, it can also require large amounts of resource and development time and may result in inconsistent sites which are difficult to maintain.

Thankfully, CSS3 media queries have enabled a new alternative; Responsive Web Design. It allows designers to create websites with fluid layouts and flexible images that automatically adapt according to the size of the user's browser - ensuring that the site looks great, is consistent and is usable, regardless of screen size and device.

Why is Responsive Web Design Necessary?

It's already possible to view a website on a browser of any size, but viewing a site designed for a desktop computer on say, a smartphone, can be very problematic. It requires a lot of zooming in and out and scrolling in all directions which, in short, provides a poor user experience.

Creating flexible designs which adapt to provide the optimal layout for any given browser size embraces the 'One Web' mentality that encourages us to design for the Internet as a whole and not specific devices. It creates a more consistent user experience, results in a future-proof and easy to maintain website and eliminates the need to build separate, device-specific, websites. That said, it is always important to carefully consider the requirements of your audience, the nature of your content and your overall project objectives in order to determine the best approach for your organisation. Squiz can guide you in this process.

What Does a Responsive Web Design Look Like?

To illustrate the concept of Responsive Web Design, we'll show you a simple example. See below three versions of a single webpage design, each at different browser widths.

In the top image, the browser is wide, as it might be on a desktop computer. The elements of the page are spaced out horizontally with multiple columns and a large banner image and video.

In the second image, the browser window is slightly narrower, as it might be on a digital tablet. In response to the browser width, the design has shifted, as defined in the page's markup, to display the page elements in the most appropriate manner; the banner is simplified, the main content reduced to one column and the navigation and footer information is condensed.

The final image shows how the design might look on a mobile device with a narrow browser width. The images are smaller, the content column is narrower, the navigation has moved into a 'stacked' design and the banner image has been removed. The hierarchy of the page content is maintained, and the content is clear and easy to navigate, despite the small browser size.

For a great example of responsive design in action, check out the Westminster Abbey website. With a bit of help from Squiz, they redesigned their site in time for the Royal Wedding using a responsive layout which shifts according to browser size. Try it yourself by making your browser window narrower. You will see the elements of the page automatically move to create a new layout as you make the window smaller.

If you want to find out more about Responsive Web Design, or if you want information on our Responsive Web Design Packages, please get in contact.