With the rise of mobile (smartphones) and large screen (Smart TV) devices, there's been a massive switch in how users view web pages. Our aim is to create a device-agnostic website.
What is responsive design?
Responsive design is the technique of making web pages fluid and adaptive to any change in a device that a user may choose to view the site on. In responsive design a website changes (response) depending on the device it's viewed upon without losing access to information. This means that on different devices the same pages can look different, have a different functionality or have a different layout, giving the user a different experience but still providing the same information.
An example of this is the main menu. On a mobile device, the main headings are stacked on the right-hand side but on a widescreen device the main heading is positioned across the screen and on hover shows a drop-down menu.
The same content is accessible on both devices, the user journey is just slightly different with extra clicks involved on the mobile device.
Having different user journeys is not a bad thing, it just gives us more to think about when using a responsive site. A responsive site makes you think about providing the shortest user journey on every device, even if those journeys are different.
Why use it?
Users expect to be able to use any device that connects to the internet, from smart TVs to mobile phones, to view every website without the need to change settings or zoom (pinch).
Previously, websites would have had a mobile version. This is basically a different site that's built to work on a smartphone. Often this had repurposed content that produced a scaled-down version of the site meaning there were two sets of content to maintain.
Responsive design gives users a better experience allowing them to access all the content without the need to zoom. This keeps more users on the page while allowing for content to be kept in a create once, publish everywhere (COPE) environment.
Things to think about
-
Screen size/Breaking points
As the site adapts to the device that the user is on the layout of the page changes depending on the width of the screen. The widths in which the layouts can change are called the breaking points.
We've five breaking points:
- 335px (mobile)
- 500px (phablet)
- 680px (tablet)
- 800px (desktop)
- 1024px (wide screen)
When working with pages that are responsive you have to be aware of all breaking points so that you can test your work and make sure that at each point the page looks and functions correctly.
-
Touch devices
Touch devices work differently from desktop devices as there's no mouse or cursor on the screen, no right or left click etc.
Finger size has to be considered for all links as the site needs to be accessible on all devices.
-
Layout
The layout can change depending on the screen you're viewing it on. The width of every element on the page is flexible, squeezing and stretching to the needs of the device.
-
Behaviour
There's a large variety of behaviours available on websites. Traditionally it was hover and click, now there's a pinch, swipe, etc. It's not necessary to incorporate all of these behaviours into each website but it's important that crucial functionality for users are catered for.
-
Images
Images are one of the major difficulties of responsive design. As each element has to adapt to the screen size image quality can be affected and cause pixelation (blurring). It's very important that the right size of image is used where stipulated.
New approach
Responsive design has led to websites being thought about in a different way. The content is the most important part of any site and making the site as easy and accessible to use and understand is key to having a successful site. To help achieve these two major goals of any site we've taken content and the mobile-first approach.
Content first
Content first is a design approach that relates to everything involved in building a website to be designed with content central to every decision made. This approach filters through all aspects of the design starting with the user goals and journeys, to the layout and structure of the site.
Content first doesn't mean that you need the full and final content to go on the site before anything else can continue. Instead, an outline of how much content there needs to be and an understanding of how users use and interact with that content is required. This allows the user to be at the heart of everything we do, as we target the content in a way that makes it easy to find and understand.
Mobile-first
Mobile-first is a development approach that relates to how a site is structured. It focuses on flexibility to fit elements into small screens (mobile devices), first in a linear layout then progressing to a column-based layout depending on the size of the screen the site is being viewed on. This has implications on the order of content as the most important content should be first.
Our site is built using a mobile-first approach. This means that when building or editing the site a different thought process has to be taken than any previous version. Code has to be semantic and the elements have to be laid out in order of importance.