If you’re planning a new website, you’ve probably come across the term responsive web design, probably in reference to mobile-friendly web design. So what exactly are responsive websites? In order to explain, a brief history lesson is needed…
A brief history of mobile websites
When smart phones were first introduced, they would show a miniaturised version of a website. It wasn’t ideal, but users could read page text by ‘pinching and zooming’. Web developers quickly realised that serving up a mobile version of the website would be preferable to users. These mobile sites were small, lightweight versions of regular websites and offered a much better user experience. The drawback, of course, was the additional development time – any change made to the desktop website also had to be made to the mobile site. For large websites with lots of content, this was expensive and impractical.
Step forward responsive web design
It didn’t take long for clever web boffins to realise they could build websites in such a way that a single website could deliver both a streamlined mobile experience and a more visual desktop experience. In fact, responsive web design caters for any screen size – mobile, tablet, laptop and desktop.
So how does it work?
In order to understand how responsive web design works, you need to understand a little about how webpages work in general. At the simplest level, any webpage you visit is comprised of two different files – an HTML file and a CSS file. The HTML file contains the page content (e.g. text and images) while the CSS file contains the page styles (e.g. colours, fonts, layout positioning).
Responsive web design works by serving up a single HTML page regardless of the viewer’s device. The CSS file then determines the screen size of the device and applies styles in a manner that is appropriate. So while the initial work on the CSS file is increased, the long-term development and update costs are reduced.
Examples of responsive web design
You can see how the images below show the same website on multiple devices. For more examples, view my web design portfolio.
What are the benefits of responsive web design?
Aside from the improved user experience, Google takes the issue of responsive web design very seriously. In fact, if your website is not responsive, it could be penalised and your search engine results could suffer1.
Is your website mobile-friendly?
You can check here with Google’s mobile-friendly tool. If your website fails the test, you may want to address the problem quickly.
What are the next steps?
If you would like a quote for responsive web design, email me at firstname.lastname@example.org or call 0117 914 1867. All current websites I design and build are mobile-friendly. I can also convert your current website to a responsive website. Get in touch today for a quote.