So what is Responsive Web Design and why is it so important for websites to be built this way? Well to fully comprehend the need for change, we have to wind the clock back a few years to understand the evolution of the internet.
The web was born back in 1989 as the brainchild of Tim Berners-Lee when he launched the first-ever website to help others understand how to share information around the globe. The first site and those that followed shortly after, were just text and links, so no major design issues would arrive for quite some time.
Move on a few years and websites were being adopted by many of the leading global brands. Combine this with the birth of Social Media in 1997 with the launch of Six Degrees, and it was evident that a new online audience was evolving. This meant that all businesses needed to have an online presence of some kind to gain the attention of all these potential new customers. As internet speeds improved and we moved away from dial-up modems to dedicated broadband internet connections, home computers became commonplace. These ‘desktop’ machines typically had screens of around 15” and resolutions of 800×600, setting the benchmark for the size of most early websites.
Now let’s fast forward to the year 2007 and the launch of the first generation iPhone. This mobile device had an advanced built-in web browser, that unlike some other earlier mobile browsers, displayed full websites and not a broken down text-only version. The problem was that reading and navigating these websites involved a lot of pinching, zooming and double-tapping. Not the best user experience, but definitely a step in the right direction.
The early solution was to create a mobile version of a website on a different subdomain e.g. mobile.yourdomain.com or on a completely different domain e.g. yourdomain.mobi. These were good solutions as far as user experience was concerned but doubled the work of maintaining a website. As search engine optimisation becomes increasingly important, it was soon evident that having two separate websites also diluted your page rank, as visits and links were spread across multiple URLs.
Another issue that soon arose with ‘Mobile Websites’, was that they targeted specific devices or screen sizes. It was very popular to create an iPhone website for example, but what about the iPad or the growing number of new smartphones with high tech web browsers? They all had different screen sizes and so a mobile website that targeted iPhone users was no longer a better solution for these new devices.
Adaptive Web Design
As web browsers continued to improve and adopt new advances in web page layout methods using CSS (cascading style sheets), it became possible to design pages with a ‘media query’ in such a way that the content layout could be changed depending on the specific width of the device viewing the page. This meant that it was now possible to create a single website that would adapt at specific pixel widths. We could have one layout for traditional desktops, say above 900px (pixels) wide or whatever the original fixed width of the site, and then set a new ‘breakpoint’ whereby the page layout would change to a narrower fixed width. This would then show the content for the next smallest device, say a tablet in portrait (upright) mode. The iPad proved very popular and so its portrait width of 768px became the next breakpoint marker. Devices with smaller screens than this could see another even narrower fixed-width layout. Perhaps below 400px, the page would be set exclusively for mobile phone use.
This is the principle of adaptive design. A series of fixed-width designs that could be applied to a single page and so removing the need to provide the same content on multiple domains. It was a great solution, but not perfect and is often confused with its successor, Responsive Web Design.
Responsive Web Design
The problem that responsive web design solved, was in relation to the ever-growing number of device screen sizes. Desktops were getting much larger, especially as many cinema TV’s and games consoles have built-in web browsers. Plus, new mobile devices such as phablets had started to appear. Is it a phone or is it a tablet? Therefore a new strategy was needed to allow a more flexible approach to layouts, enter Responsive Web Design.
Responsive design combines the use of breakpoints as a trigger for when changes should be applied, along with flexible percentage sized page elements. This method allows a page to re-flow its content on a pixel by pixel basis and focusing on the needs of the page itself rather than that of the device. As the browser width changes, the elements on the page be they text, image or other media, would all expand or contract to fill their allotted places. Here’s a couple of examples to help explain this.
Take the page to less than 850px wide – our fictitious breakpoint – to see the change.
1) – If three columns of text, each maintaining 33% of the available width, became too narrow to read, we could make each column span the full width (100%) of the page.
2) – Another option could be to have the first column with more important information cover the full page width (100%) and the two remaining columns occupy 50% each of the row below. Then, when the screen width reduces further these could all become full width rows.
SEO Advantages of Responsive Web Design
We talked earlier about how multiple versions of the same page targeted at specific devices, can dilute your page rank, but there’s even more reason to opt for Responsive Web Design when considering the SEO benefits. Duplicating content in this manner is also a problem with the search giants and will earn you unwanted penalties.
Let’s not focus on the negatives of not having a responsive website, but the upside to responsive design. In April 2015, Google released an update to its page ranking algorithm to include mobile-friendly factors. These factors improved the position of mobile-friendly websites in the search results and demoted some of the not so mobile-friendly sites. How do you get a mobile-friendly website? Simple – responsive web design.
Responsive Design leads to a better user experience (UX)
Whilst we need to give great consideration to how the search engines view and position our websites, we shouldn’t lose sight of our human page visitors. It’s important that they always receive the best experience we can provide them with, and having pages that respond perfectly to their preferred devices goes a long way to achieving this. Give them consistency regardless of whether they viewed your website earlier on a mobile device and then later on the laptop. Let’s not lead them to question if it’s the same site they were looking at earlier.
If you’re looking for web designers to develop a fully responsive website for you, feel free to get in touch. We’d love to hear about your project and see how we can help you.