According to recent data, a staggering 78% of us use a mobile device to access the internet. To put that into context, just three years ago (that is in 2018), 72% of the population used a smartphone as the most common device to access the internet . When compared with the data in 2013, that’s a massive 53% increase! Therefore, it is clear that how we access the internet has become so diverse that computers are no longer the primary device we use to access information online. This is where responsive web design becomes so important to businesses not just here in Leicester, but for companies of all sizes across the globe. The key for anyone embarking on a new web design project is to ensure that their website is capable of loading on all devices seamlessly. So, how can you be sure your website will have a responsive design?
In simple terms, a website is said to have a responsive design if it can adapt to the screen of the user. The web page should be able to automatically adjust to the screen size of the smartphone, tablet, notebook, laptop or desktop without issue. It is the web designer’s skill and technical know-how that will determine whether a website is responsive or not. During the development stage, there are many layers of technical designing that need to be followed to enable dynamic changes to the appearance of a website. The result will be a responsive website that will change its appearance depending on the screen size and orientation of the device being used to view it.
The term responsive web design was first brought to light by Ethan Marcotte way back in 2010. Three key components are encompassing this broad term, although we do not intend to get down in too technical details as most of us are not coders or designers:
The first component is the fluid grids. It essentially attempts to align all the elements of a webpage with the browser’s default type size. Back in the day, there was a lot of complex coding behind each page to make it responsive.
The second component is fluid images. This simple technique sets the maximum with of an image to 100%, making the image scale down to a smaller size if the containing column of that image becomes narrower than the image's intrinsic size. The smart thing about this technique is that it never grows larger. With this option, an image can scale down to fit in a flexibly sized column, rather than overflow it. It will never grow larger and become pixelated if the column becomes wider than the image, which maintains the image quality unaltered.
The third component is the media query, which enables layouts using JavaScript. Rather than having one layout for all screen sizes, the layout could be changed. Sidebars could be repositioned for the smaller screen, or alternate navigation could be displayed.
Even if you take a single device type like a smartphone, there are a dozen different screen sizes for which websites need to adjust their display. Most web designers use clever tools to make a website compatible with almost any screen size.
Here are the most commonly used screen sizes in pixels:
As we access websites on smartphones more than ever before, it is important to make a business website compatible with as many devices as possible. For example, the image on the left is where the design does not include responsive coding whereas the image on the right seamless fits on a mobile screen.