Here at ESP Projects, we are often asked about responsive web design; what it is, how it works, and why it’s something that we think is crucial to the success of a new website amongst its visitors.
Traditionally websites have been viewed on a PC (or Laptop) with the aid of a mouse for navigation. But nowadays more and more people are using a variety of devices such as smartphones and tablets, and using their fingers or perhaps a stylus to navigate instead. This change means that the way the website displays its content has to be thought about from a multi-device perspective. There are two approaches to displaying websites on ‘non-standard’ screens, having a mobile site or a responsive web design.
Mobiles sites
The first approach is utilising a separate mobile site. This is often a simplified version of the full desktop website scaled down for mobile use. It’s quite a popular method amongst developers, but it does throw up a number of caveats.
For instance, with a mobile site, there would be a separate mobile web address which can affect tracking statistics and also Search Engine Optimisation as visits are divided between the two domains. Also, unless specifically stated it’s most likely that a separate mobile site will mean you have to update both individually, effectively doubling the work.
Most mobile sites work by trying to detect that the visitor is using a mobile device and redirecting them to the mobile version. The problem with this is that there are thousands of mobile devices out there and it’s very difficult to keep up to date. Some web-enabled TVs, for example, get mistaken for mobiles meaning you get content meant for the smallest screens on some of the largest around.
Responsive web design
The alternate approach is Responsive web design, and here at ESP Projects, we’re big advocates of it. Responsive design ensures that the website will recognise the size of the screen that is being used to access the site and adapts the content on the site to display in a way which is suitable. This means no sideways scrolling, or having to zoom in and out just to see everything on the page.
To give a visual example, the Sheffield Carers site recently launched by ESP Projects was built on a responsive design. On a standard PC or Laptop it looks like this:
You can see the full menu, Top banner, and Right Hand Logo all fit across the top with no problem, there’s even enough space on the screen to see the blue background around the edges of the site.
However on a Tablet, rather than seeing the above and then having to zoom in to read the content, the responsive design recognises the reduced available screen space and restructures the page accordingly. So it would like more like the below, wherein you can see the top banner and logo, but the menu now expands when tapped and the text has all been re-sized:
Furthermore, on a smartphone which has even less screen space to work with, the Logo is taken out, the banner simplified, and the Menu and Language Selector brought much closer together.
Why is responsive web design important?
We feel that responsive design is more forward-thinking because once added to the site it will work on next month’s and next year’s devices without having to be programmed further. The resolution of today is not necessarily the resolution of tomorrow, and so a having a responsive web design ultimately provides a better return on your investment.
Websites like this are going to become more common over the next few years. So if you’re looking for a new website, whether it be through ESP Projects or another company, ask if it’s going to include a responsive design!
If you want to explore Responsive Design for your website, use the contact us page to get in touch!
