Why Responsive Web Design?
I have been providing professional website and email hosting for a small number of clients since 2007, and in the early days, I built a handful of basic websites. During the Corona Virus pandemic of 2020, I decided to retrain in web design, and am now building modern, ‘responsive, mobile-friendly’ websites, primarily for charities, small businesses and individuals. These are websites that automatically reformat the content of the pages to fit better across the width of the user's screen - desktop computer, laptop, tablet, phone, etc. - thereby making the pages readable and bandwidth-friendly across all platforms. With mobile devices now accounting for the majority of Internet usage, it is now more important than ever that websites are built in a responsive and mobile-friendly manner, otherwise visitors using mobile devices, struggling to fully access the content, may well leave the site and go elsewhere. August 2018 figures provided by the UK Office for National Statistics show that “Mobile phones or smartphones still most popular devices used to access the internet”. More recent figures (August 2019) provided by ONS show that “Among all adults, 84% had used the internet “on the go” in 2019, using a mobile phone, smartphone, laptop, tablet or handheld device." Furthermore, on April 21, 2015, the world’s largest Internet search engine, Google, boosted the rankings of mobile-friendly websites, whilst warning that “...pages designed for only large screens may see a significant decrease in rankings in mobile search results.” .
This very website you are viewing right now is an example of one
of my responsive websites. Other responsive websites I have built are:
Bob Grainger Photography
The PAT Tester
Ystradgynlais Volunteer Centre
How To Tell If a Website is Mobile-Friendly
One way that you can very quickly check if a particular website, including your own, is responsive and mobile-friendly, is to use one of the many online tools. For example, at www.responsinator.com you can enter (at top-left corner of the page) the website address of the site you’re interested in and you can then see how the website would appear on various size displays, such as several popular mobile phones and tablets, etc. Also, Google’s Mobile-Friendly Test page will check if a particular website is fully responsive and mobile-friendly.
How Does Responsive Web Design Work?
The main characteristic of a responsive, mobile-friendly website is that the content of each page will automatically rearrange and adapt itself to maintain readability and functionality regardless of the width of the user’s display - from the wide screens of desktop computers, down to the narrow displays used by mobile phones. Very importantly, there is no need for the user to keep scrolling left and right to read the content and, in fact, there is normally no left/right scrollbar, as there simply isn't the need for one.
To demonstrate the power of responsive web design, take a look at the three images below. The first image shows how an old-school, non-responsive version of this very website would appear on a medium to large screen, such as on a tablet or desktop display. Even though the version of the website being shown in the image had been produced in a non-responsive way, notice how everything fits perfectly across the width of such a wide display - perfectly readable and usable, and with no need for a left/right scroll bar. No issues so far then.
However, now compare the above situation to when we view the same version of the website on a narrow display, such as on a mobile phone - the first of the two images below. Due to the fact that the website had been built in a ‘non-responsive’ manner, it is very difficult and frustrating to use on such a narrow display, mainly because much of the width of the website is hidden from view, and the user would need to keep scrolling left and right to be able to take in all of the content. In comparison, take a look at the second of the two images below, this time showing the same website but after it was rebuilt in a manner which allows the content of the pages to automatically adapt or ‘respond’ to the width of the display. Notice how much easier it is to read, how everything appears just as it should, and how the content is perfectly readable and usable. Notice in particular how the full width of the page fits across the screen and that there is no left/right scrollbar.
Less Bandwidth and Data Usage
There is another benefit to having a well-designed responsive website: less bandwidth and data usage for mobile users. A well-designed responsive website would serve up to the user large size images when the page was being viewed on a large display such as a desktop monitor, medium size images when the page was being viewed on a medium-sized display such as a tablet, and small size versions of the same image when being viewed on a small display, such as a mobile phone. The reason for this is quite simple: large displays require large size images because small images would need to be stretched to fill the screen, and the result would look very poor and pixelated. Small displays on the other hand, such as on mobile phones, really only need small-size images, and so downloading a large-size file would be unnecessary, as a smaller size image would have been sufficient. Downloading large images to mobile phones, when small versions would have been sufficient, would be a waste of bandwidth and data usage. A well-designed responsive website detects the width of the display, and serves up (downloads) the appropriate-sized image.
Charges for Web Design
I typically charge between £150 and £300 for producing a responsive, mobile-friendly website, depending on what’s involved. To keep the cost down, I start by using one of around one hundred quality, professional templates, and modify them to suit the client’s material. If you also require website and email hosting, then this costs just £39/year. Also available, if you require it, is domain name registration, starting at £8.99/year (there is no VAT to pay on anything). Please see the Hosting page for full details about hosting and domain names.