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:
- 89% of people admit to searching for local businesses on smartphones, with 58% searching daily
- 40% of users say they will leave a site if it is not mobile friendly
- 80% of users own a smartphone
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.
Viewports
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:
- Do not use large elements set at a fixed width. This includes features such as text boxes, images, and headers. If the elements are set to a dimension wider than the viewport they are being displayed on, it can cause the viewport to require the user to scroll horizontally to properly view the features.
- Do not use content that relies on specific viewport dimensions to render well or display correctly. Avoid large high-resolution images that require a landscape orientation and exact viewport dimensions for the viewer to experience it as intended. It is rare that the user will have the exact viewport requirements, so it is best to have content that can be properly appreciated with all screen dimensions and width of devices.
- Use relative width values rather than absolute values. What this means is instead of setting your image to an exact dimension, set it to display at a percentage of the viewport width. For example, if you want an image to display across the full width, you would set the value to 100% so that it would span across the viewport and fill it completely.
Responsive Images
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.
Grid Views
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.
Media Queries
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
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:
- Breakpoints based on your content – The most ideal option to decide breakpoints is to base it on the content of your website. In this method, you simply need to add breakpoints when your content needs a layout adjustment.
- Breakpoints based on the device used – It may sound like a good idea to decide breakpoints based on each different device, but realistically this may not be the best approach. There are already so many devices with varying widths to consider, and that’s not even factoring in the new additions that get released at a dizzying rate. When a new device with a different width gets released, you will have to go back to your code and add a new breakpoint all over again, which may be time-consuming.
Mobile-First Design Best Practices
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:
- Prioritise key menu items – ensure your menu is condensed to the essential elements necessary to experience your website, including the home page, product pages where applicable, about pages, and anything crucial for the customer to explore.
- Remove visual distractions – mobile viewports are notably smaller than desktop and computer screens, so excessive images and decorative elements will clutter the screen. Limit your mobile pages to just the essentials, with images and text centred on the screen.
- Optimise tap target tap ability – Minimise those awkward interactions your customers may have on your website by having big enough buttons for them to tap, and avoid those fat finger moments.
- Focus on the primary call to action – Determine the primary call to action you wish for your customers to do while visiting your site. Whether this be to shop, download, or contact, feature the call to action on a prime location on your mobile site that is easy for your audience to view and access for greater conversion rates.
- Have search and filter functionalities – Assist your customers in easily finding what they’re looking for by implementing search and filter functionalities (when applicable). Have a search bar in a prominent location on your website to help your audience quickly find what they are after, and allow for a filtering option to assist them through the process.
- Leverage unique device functionalities – Make use of the functionality a mobile device allows. You can add your phone number to your website, and link the number to the users mobile phone function that allows them to call you by simply tapping your number. Other functionalities you can do include GPS to assist customers in locating your business by opening the map feature from your website, bank card scanning to quickly input their details for a purchase, and QR code reading to eliminate the need for them to type in details.
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.
