Responsive Web Design

Users are now accessing the web on a vast range of desktop, laptop, tablet and mobile devices – all with varying capabilities and screen sizes. The challenge of producing websites that are visually appealing and usable on all of these devices is increasingly difficult. Thankfully, there is a solution; Responsive Web Design.

Adaptive Website Design for Multiple Devices

Viewing a website that was designed for a desktop computer on the small screen of a smartphone can be very problematic. It requires a lot of zooming in and out and scrolling in all directions, which, in short, results in a poor user experience.

In the past, the primary solution to this problem has been to build bespoke 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.

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 and orientation of the user's browser, to deliver the optimal layout. This ensures that the site looks great, is consistent and is usable, regardless of device.

Designing for the web as a whole, rather than for a specific device, ensures that all users get access to the same information and receive a consistent user experience. It not only maximises the site's compatibility with the plethora of devices available now, but also new devices that have yet to be launched – future-proofing your site. There is also the huge benefit of ease of maintenance; keeping one website up-to-date is much easier than managing multiple device specific sites.

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.

You can also check out the responsive design we create for the new University of Bedfordshire website. You can also read more about this project on the Squiz blog.

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.