Responsive web design, in short, is developing your website to ensure that it looks good on any device. It is the process of designing and developing a webpage so that it adjusts to the size of the screen it is being displayed on. The visible screen on a device - whether it be a laptop, a phone, or a tablet - is called a ‘viewport’, and with the enormous range of devices on the market today, there is an immeasurable number of different viewport dimensions that impact how your webpage is displayed. Trends are tipping towards customers using mobile devices to access web pages, so it is more important than ever to ensure your website is mobile friendly. Other research and studies have shown that:
With this in mind, we can see how essential it is to have a website that is suited to a range of devices. We have detailed the ways in which you can incorporate responsive web design factors to provide a seamless experience for every user.
The viewport refers to the visible area of a webpage, and is determined by the screen size of the device. Because there are so many devices and brands on the market today, the viewports can vary greatly in terms of dimensions. A mobile phones viewport is significantly smaller than that of a computer screen, and even within the type of device there are many different viewports.
In terms of responsive web design, webpages were initially designed for computer screens. It was common to have a static design with fixed elements and sizes. What this means is that web designers would have an image for example set to display at 1024 pixels, which was a fixed size that would display the same regardless of the device. This might sit well with regular computer screens and desktops that can accomodate the size, but imagine displaying this image size on a 600 pixel wide phone. Your customers would be forced to awkwardly pinch and zoom out to fully view the image, or scroll across horizontally to properly explore the page. A common quick ‘fix’ to accomodate different sized viewports to the initial design was to scale down the entire webpage to fit into the screen it was being displayed on. This may have worked in the past with the limited number of devices and viewports, but this is no longer the case.
Rather than set your webpage elements to fixed sizes, you can include the viewport meta tag in the code to let it know how to display your content. This can control the dimensions of the page and scale the elements of your webpage. Make sure you size your content appropriately to the viewport and consider how the user will interact with the website. Users are more familiar with scrolling vertically down webpages rather than horizontally - we use our thumbs to scroll down mobile phones and the mouse wheel to quickly move through webpages. If a user is forced to scroll horizontally, it creates a poor user experience that may negatively impact their impression of your website and discourage them from returning.
Viewport considerations are a key element to responsive web design - if you follow these rules your website should move smoothly and not impede on your end users experience.
Rules to follow:
Did you know that 25% of users abandon website that take more than 4 seconds to load? It is important to find the right balance between having images of a decent quality that they can be viewed on your website, and having pictures that are too high resolution and impact the loading speed of your website. Ideally, you will want to be creating low-resource designs with compressed images (with a compression ratio of 91%), and have the images adapt according to the viewport size and screen resolution of the device.
Website developers use grids to determine the layout and structure of a website. Using grids is also beneficial where they have a flexible nature that is adaptable to the viewport and device your customers are using. Grid views are where the webpage is divided into columns and rows (hence the grid). Using grids makes the webpage design process less troublesome.
A grid view in responsive web design often has 12 columns, with a total width of 100% - in other words, spanning across the full width of the viewport. These grids will shrink and expand as you reorient your device or resize the browser window, so they are adaptable to a range of different devices and screen dimensions.
A media query is a technique introduced in CSS3 where it uses rules to include a block of elements/CSS properties only if certain conditions are met. You can use media queries to set out a rule that prevents certain images loading when your webpage is being displayed on smaller devices. For example, the condition would be that if the browser window is 650 pix or smaller, particular images will not load for that device. This makes the design process easier where instead of designing a different website for each viewport, you can design one website and choose elements to omit for smaller devices.
Breakpoints are used with media queries to determine the best possible layout to display to your users. They are points where your website content responds according the device width. There are a couple of different ways you can use breakpoints to create an adaptable web design.
We’ll use an example of a layout on a computer screen compared to that of a smaller device such as a mobile phone. For the computer screen, which has greater dimensions in terms of width, it is the optimal viewport to display your website in its full design glory. The layout at the larger resolution is capable of displaying a full width header, two columns, and an array of images and text. For a smaller device, these elements will not display properly or look cluttered. In this case, we can set a breakpoint to optimise the design based on the viewport.
There are a couple of different approaches you can follow to determine your breakpoints:
Mobile-first design best practices is where you design your website to be functional and best suited for a mobile viewport (i.e. screen), and then scaling up the website for the desktop/computer experience. This is done for a couple of reasons: 1) As noted earlier, more customers use their phones to browse and access websites; and 2) it is easier to scale up a website from a phone to a desktop experience than it is to take a website intended for a computer viewport and scale down.
To create a mobile-first design, all you have to do is ensure your website has the essential information and functionalities, after which it can then be scaled up to a desktop experience. There are a few features to note in creating a mobile first design:
Creating a responsive web design can be a time-consuming process, not to mention intimidating when we consider just how many devices there are to accomodate for in the market today. You can use this advice to influence how you design your website, and ensure your customers always have a smooth experience interacting with your business. If coding isn’t your area of expertise, you can contact us at PMGS to create a perfectly aesthetic and functional website to accomodate all your business needs and functionalities, while keeping your customers and audience at front of what we do.