The term ‘Responsive’ gets used a lot. But what actually is it and why should we care? What’s wrong with what we already have and why do we need to update our website?
What is a responsive website?
- Responsive websites respond to the needs of the users and the devices they’re using
- They are built to look great at any resolution and on any device
- Content scales and the page’s structure fluidly adjusts (using CSS and HTML) to resize, hide, shrink, enlarge, or move content
How does a responsive website ‘respond’?
- Fluid grids allow content and layout to ebb and flow based on a device’s screen size (following pre-defined behaviour)
- Media content and text scale automatically based on the resolution of the browser
- Media queries allow developers to specify where and when content will be reordered and reformatted to ensure it is optimized at every resolution
- Progressive enhancement allows functionality to be enhanced and optimised based on a device’s native support
The example below shows four devices sharing the same content in an optimised format for each.
This blog is an example of responsive design. Try resizing your browser window to see how it moves/adjusts the content in real time for best-fit. Another good example is the Bang & Olufsen website.
What are the benefits of going responsive?
- One set of content can be built and used for all devices and resolutions
- One central content structure is established and used
- One central image library can be used
- One set of copy can be created and used
- Content is presented with an optimised layout and behaviour for the viewing device (defined by creative and implemented by developers)
- Media can be automatically optimised to suit the device
- Functionality and features can be scaled to suit the device’s specifications
Adaptive or responsive?
These two approaches are often confused. The terms are frequently (and incorrectly) used interchangeably. Although similar, responsive is actually a subset of the adaptive approach.
In the simplest terms they can be defined as follows:
- Adaptive = Multiple fixed-width layouts
- Responsive = Multiple fluid grid layouts
This is how an adaptive website adapts to the device:
- They rely on a set of fixed layouts; each designed to suit a defined range of typical resolutions and devices
- “Breakpoints” force the content to snap to new layouts at predetermined resolutions
- Although potentially easier to implement, adaptive websites are less flexible
- They work using a ‘closest-fit’ approach for each device, so the end result may be sub-optimal
Responsive websites will still have specific layouts designed for typical resolutions that are triggered when the browser hits a specified width. The key difference is that between these points the content can dynamically flow and resize. This ensures that all browser resolutions are catered for.