What is Responsive Web Design?

Responsive Web Design is a way of creating a single website that adapts its layout to best suit the screen size its being viewed on… in today’s world that means mobile devices.

Since the introduction of the first smartphones we now have a multitude of devices to choose from, we can now access the internet from anywhere, instantly.

Now over 50% of internet browsers are choosing to use their mobile or tablet to browse the internet!

Catering for mobile users

This paradigm shift to mobile has meant the standard development of a website needs to be reconsidered as the majority focus on desktop and ignore these new platforms. Although they still look and function correctly on mobile devices, they offer a poor user experience as the site shrinks to fit on screen, forcing visitors to zoom to make content legible and navigate the site. These types of sites are slow to load on mobile devices as the user has to download large image files created specifically for bigger screens. If they feel a website is taking to long they will move on to another site, effecting bounce rates and conversion goals.

How Responsive Design works

Responsive Web Design was developed to deliver a tailored user experience on mobile devices. It works by targeting the width of each user’s screen to determine how much space is available and how best to display a website. Breakpoints are set that look for specific ranges that define types of device and their orientation. These are generally set to look for smartphones, tablets and desktops. Once detected, layout is optimised and smaller images are added making site load much faster.

Benefits of Responsive Design

• A responsive website delivers an optimal experience regardless of device size.
• Loads faster on mobile devices than standard websites.
• Removes the need to zoom on smaller screens to read text.
• Easier to maintain than a separate mobile website.
• Has the potential to reduce bounce rates and improve your position in Google and other search engines.
• Responsive sites are much cleaner and put the focus on your content and the end users experience.

What features are important to include

Lazy loading: When our responsive sites are accessed only images visible on screen are initially loaded. Anything off screen will only load once the user scrolls to them on the page.

Adaptive images: To make sites load even faster we’ve added a script that creates optimised images (file size and dimensions) when a device type is detected.

Use code instead of images: Where possible, we use coding techniques for design elements instead of images.

For improved user experience:

Intelligent menu: To overcome space constraints on smaller devices, the main menu is hidden and replaced with an icon. When clicked the menu will display in an optimised format.

Fast click: Most smartphones and tablets have a small delay when performing a touch request. This feature removes the delay for a quicker response.

Gesture support: For added interactivity we’ve added swipe gestures to our animated banners.