For brands, there are few success measures as powerful as the ability to deliver a seamless customer experience.
Modern-day customers are ‘always on’. They think nothing of toggling between their smartphone, tablet, laptop or desktop. They also demand lightning-fast loading times, crisp imagery optimised according to screen size and a delightful user journey at every touchpoint.
Responsive design is a web design solution that can meet these needs.
What is responsive web design?
This technique of web design uses CSS media queries (the part of the code that defines the look and feel of your website) as well as JavaScript (the part of the code that can provide dynamic content and functionality) to arrange the elements on a page so that the page is optimised to a user’s screen size.
Although creating a responsive website can require extra time and resources during the design phase, it allows businesses to provide the same content and functionality without building separate sites that are optimised for each device type. It therefore saves valuable time and resources during the (arguably more costly) development phase.
Given that Google overhauled its algorithm in April to de-prioritise sites that aren’t mobile-friendly in its search results rankings, it’s also an investment that’s bound to pay off.
Key characteristics of a responsive website
We’re slowly wising up to the importance of responsive design but there’s often confusion about what exactly designing a responsive website entails. Here are three defining principles for a website that swaps a one-size-fits-all experience to take the user’s context into account.
Fewer breakpoints the better
Defining breakpoints is an essential part of a responsive design. Breakpoints are pre-defined widths (measured in pixels) at which the layout changes to provide the user with the best possible layout for the information and functionality at the screen size being used.
There are a variety of opinions about which widths are the best and how many breakpoints are required. One thing is certain, since there are hundreds of different devices out there with dozens of screen sizes, you are better off defining breakpoints that suit the content and functionality being displayed, rather than the devices it is displayed on.
Additionally, implementing a fluid layout instead of a fixed layout will ensure your site uses the space available to it on any given device.
Single codebase
Responsive sites offer the opportunity to develop a single codebase, which is the collection of source code used to build the site.
This is extremely good news when it comes to maintaining and evolving your site. In the past, if you had a variety of codebases in order to cater for a variety of devices, you would need to apply updates to each codebase individually, in order to roll out a new feature or a patch. With a single codebase, you only ever need to apply updates once.
Images
Whilst there are proposals to create a <picture> tag that will be naturally responsive, there are no standard solutions for images in responsive sites as yet. This means that, to ensure image file sizes aren’t too large for devices on mobile networks, you need to use JavaScript to optimise images on the fly as they are being loaded.
This is particularly important because, with an ever increasing number of devices with high density displays, providing high resolution images is important for a good user experience. Therefore, being able to load images dynamically is a must to keep file sizes, and therefore load times, down.
Hybrid websites: The best of both worlds?
In the last few years, responsive design has become the industry standard – but it’s not without its drawbacks.
There is still a case for developing multiple codebases in order to provide an experience that is tailored to the device. This particularly applies to a situation in which activities are more delineated between mobile and desktop, for example editing large documents, which is often best done on a larger screen.
Typically, more complex tasks require a larger screen and more data, which can become slow when using a cellular mobile network. This supports the argument to tailor more complex functionality to larger devices.
Hybrid, also known as RESS websites (Responsive Web Design and Server Side Components), address this challenge by combining a responsive design via a single codebase, but allow you to tailor more complex functionality depending on the device being used to access the site.
Creating a hybrid website is even more labour-intensive, because as well as capitalising on the advantages of both responsive and device-tailored sites it still has to manage the issues associated with each approach.
Nonetheless, the hybrid website offers to pave the way for a rich device-specific functionality and is still less work than creating multiple device-specific optimised sites. Which means we are likely to see more of this approach.
This article was co-written by Stephen Cheshire and Long Sien.
The post Uncovered: Responsive web design appeared first on Digital Pulse - Disruption, Innovation and Industry Change.