Menu Close
Responsive web design

Responsive web design

04 September 2019 | News and Insights

Find out five reasons why organisations should leverage the fundamentals of responsive web design to drive unbeatable digital experiences.

In 2016 internet traffic from mobile and tablet devices overtook desktop computers. A significant shift, considering that in 2009 it accounted for less than 1%. The global projection for mobile data traffic is due to increase a sevenfold from 2017 to 2022.

Gone are the days where you depend on a set resolution or device. Users now have a range of devices available with different types of inputs, screen sizes and bandwidths. A typical customer journey can now flow across multiple devices and sessions as a result. Developing and refining websites to stay ahead of this trend has been the at the forefront of many digital strategies for the last decade, fuelling the popularity of responsive web design. Implementing a user journey map would help organisations better measure performance and plan enhancements.

What is responsive web design?

Responsive web design is the practice of creating websites to display and function on any screen size or device without the degradation of user experience. It allows for websites to display in a fluid manner, using flexible layouts, typography, and responsive images to react to the device or available screen estate. If you take the analogy of content being like water, responsive web design allows it to flow and fit the space available.

Designing websites with a flexible layout isn’t a new approach – it’s been theorised and practiced since 2006. Browsers are progressively improving the support for the responsive requirements of modern designs. As designers and developers push technology to give the best experiences, users’ expectations of brands and their digital experiences increases. This drives several business cases for responsive web design.

1. Customer experience

Website briefs will often carry a requirement along the lines of, ‘we should have great mobile web design’, but the impact of responsive design goes much deeper than aesthetics. The user experience of being able to navigate a site and consume content on a device of your choosing has a significant impact on brand perception. User data published by Google indicates that users are 52% less likely to engage with a brand if the mobile experience is poor. A poorly presented website doesn’t give a good first impression, but struggling to read content, click links, or interact with elements will have a both an immediate (dropout) and long lasting (single visit) effect.

responsive web design

Responsive web design incorporates a flexible layout for content and layouts, where columns and grids will reform to best fit the width of the screen. As a basic example, a desktop could fit three columns of content, a tablet, two, and then a single column on mobile devices. Typography also changes in size to consider factors such as:

  • the best number of words to fit on a line
  • the distance from the user to the screen
  • the amount of space available.

This means that the content is presented in the most user-friendly way for the situation in which the user is using the website. Responsive content and layouts increase the accessibility of the website for users who may otherwise struggle to access your content.

2. Optimised content

Responsive web design considers the speed at which content is delivered to users. Phones and tablets generally do not have the processing power that is available to desktop computers, as mobile connection speed becomes a big factor. This means that large images, videos, or complex functions and interactions will take longer for users to access. To increase the speed and efficiency of responsive websites, various options can be considered:

  • vector or high efficiency image formats
  • HTML SRCSET attribute
  • CSS animations.

Faster load times and snappy interactions give a much smoother experience and result in better engagement.

3. Improved SEO

Google has always taken a user centred approach to its algorithms and more recently has been favouring mobile friendly websites. It considers factors like load times, the handling of content, and the architecture of the content, but also how people engage with your site. Factors like time spent on pages and bounce rates will be used to determine the site and page search marketing value.

Before responsive web design, common practices included a second mobile specific website that users get redirected to (m.yoursite.com for example). This was seen as a quick fix for mobile traffic but resulted in duplicate content, which is penalised by Google and creates an overhead in the management of your site.

4. Better analytics and insight

A responsive website will provide a single consistent experience for all users and devices. Well implemented analytics and tracking means you’ll be able to view the behaviour of users by device and screen size to refine specific experiences.  For example, users with particularly small screens such as the iPhone 5, is among the smallest screen sizes but still in common use. This could be a factor that lowers conversion rate due to certain content not displaying well, or elements not being visible. Analytics based on screen dimensions can help you isolate these points of friction, and good website design can target the experience for these users.

5. Better overall performance

The combination of an improved user experience, efficient content, better search engine optimisation (SEO), and refinement through insight, all leads to an increase in the performance of your website. Incoming organic traffic will increase, users will have a deeper engagement with your content, and the proportion of bounces and exits will lower. The result will be an overall increase in the number of conversions, which will help meet key conversion rate optimisation strategy goals.

Important things to consider with responsive website design

Responsive web design is part of a design led approach. Consider how and why people use your website and build upon that understanding. Knowing the requirements of mobile user compared to desktop users can unlock opportunities when shaping the experience.

Take a mobile first approach to the design and experience. Consider how content and functionality will work on smaller devices before looking at larger experiences for desktop. This reduces the problems that are normally encountered when working at larger sizes first. Common challenges include data and tables, complex search and filtering patterns, and multi-level navigation.

Complex information architectures (IA) can be difficult to understand and navigate on mobile. You don’t have the benefit of mega menus, long breadcrumbs, or hover states to open menus. While undertaking a new project, take the opportunity to evaluate your site and use data and analytics to see what content preforms. The ‘three clicks’ rule is a myth – enterprise sites are much more complex – but users need to be able to find content and navigate easily on any device. If it’s hard to navigate on a desktop, it will be much harder on mobile!

Ready to learn more about responsive web design?

Get more from your organisation’s website through our user experience design, web design, and build services. We are an award winning digital agency who specialise in designing, building and optimising Sitecore websites.

Get in touch today to discuss your organisation’s digital goals with our specialists or book a digital audit.

Let's talk more