In days of old, people wishing to access the internet were limited to using a desktop computer, which unfortunately for the user, were large and cumbersome. However, fortunately for web developers of the time, due to the uniformity of screen sizes, a website would be displayed more or less the same for all visitors, without the need for any fancy trickery.

However, things got complicated when smartphones took over. With an entire spectrum of screen sizes and the increased use of mobile devices to access the internet, websites no longer had a single audience to cater for. Developers now had to build websites with the knowledge that anyone, using any sized screen, could potentially be a visitor to their site. In particular, a solution had to be found for properly displaying websites on smaller screens, which naturally are unable to display a site in the same manner as a widescreen desktop display.

One solution (now outdated), was the practice of separating audiences into 2 groups – mobile and desktop. A separate site would be created for each group, which would then be displayed to visitors respective of the device being used. Although an effective solution, it came with many disadvantages. Not only causing a negative impact on development time, the user experience between devices due to inconsistencies between them. This method also fails to take into account the variety of screen sizes and shapes, so the site could display differently on certain devices. Thankfully, a more elegant solution was developed – responsive web design.

What actually is responsive web design?

Responsive web design is a method of development whereby the layout of a site, and the content within, can automatically respond to the limitations of the screen it is being displayed on. Page elements can be sized using percentages rather than pixel values, horizontally aligned elements can be displayed vertically to fit screen constraints and text and images can resize to the correct proportion.

Typically, a site will be designed with three ‘sizes’ in mind – desktop, tablet and mobile. For each, page elements can be styled to change how they are displayed at different screen widths corresponding to these ‘sizes’. Importantly, this is achieved by using a single site, hence the name ‘responsive’. A responsive site is a one size fits all solution, eliminating the need to create separate custom site layouts for specific screen sizes or orientations.

To illustrate how a site can respond to different sized screens, an example from our own portfolio can be seen below from 1895 Sports.

How can responsive web design impact your business?

Responsive web design is important for your business as it directly affects how visitors interact with your site.

It is important that the information within a site is available to all users, in a way that is accessible and easy to read. With more and more people (around 50% of all internet traffic) now using mobile devices to access the internet, ensuring that your site is available to this demographic is important. A user presented with a poorly displayed site might think of it as unprofessional or outdated, and will likely look elsewhere to meet their needs, causing a business to miss out on new clients.

Responsive web design will not only affect the experience of visitors to your site but also how your site is presented to the world, through SEO. Many SEO benefits come from having a single responsive site that can adapt to all screens. By only needing to serve one site, page load time is reduced. This improves user experience with the site and also Google rankings, as websites with a faster load time are favoured.

Similarly, responsive websites have the benefit of having no duplicate data. If it were that separate sites were created for different devices, Google would read the content of these sites as being identical, something which Google would penalise – negatively impacting your site ranking.

Here at Mosaic Digital Media, we build our websites responsively by default – as it should be! If your site is outdated and needs a responsive makeover we can help – Give us a call on 01925 563 960 or contact us here.