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!
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.
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.
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.
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.
Please see below some great examples of responsive design. You will notice how the site adapts depending on which device you view the websites on:
For more information about how we can create you a fantastic responsive website click here