A Beginners’ Guide to Responsive Websites

What Are Responsive Websites?

A Beginners' Guide to Responsive WebsitesResponsive websites are, put very simply, those sites that scale to different screen sizes. A responsive website should appear, in some form or another, on a mobile screen, a tablet, a desktop screen and all dimensions in between without the need for the user to scroll / pan around the site to use it as they would if they were using a desktop version of a site on a mobile. This is termed an “optimal viewing experience” and means that the end user needs to do less work to access parts of the site or web application because it’s already served up and ready for them to use. As an example, take a look at the following two favourite sites of mine, either on different devices or in a desktop internet browser that you’ve resized once you’ve loaded the site;

You could also take a look at this site too, as another example!

At no point do these sites, despite you having a small screen or a smaller, resized browser window, show you horizontal scrollbars (within reason). Compare that to the resizing of a browser window with the BBC (desktop) news site loaded up; on a smaller screen you have to scroll both horizontally and vertically to view the entire page. This is what responsiveness designs remove; on a responsive site you only need to scroll vertically and the user can easily find what they’re looking for on the one scroll-axis as they would on the desktop site.

 

When is a mobile-ready site not responsive?

The BBC News website is a good example to use actually, as they have an entirely different solution for providing mobile-ready content. They take a note of the user’s device (mobile, tablet, desktop, etc.) when they arrive on the desktop site and then direct the user to a different version / site completely. The BBC News website directs mobile users visiting http://www.bbc.co.uk/news/ to the different URL / website address of http://m.bbc.co.uk/news/, and this latter one caters for these devices by utilising a design that doesn’t use scroll bars;

Each solution, either this way or by implementing a responsive design, in order to achieve a mobile-ready website has its compromises of course, but as is usually the way there is always more than way to solve the problem.

 

Why have a website that’s mobile ready?

This all comes down to usability. If you’re catering to the end user’s needs then they’re more likely to feel engaged with your internet offering and therefore use it. If your desktop website is difficult to use and navigate then the end user will lose patience and go elsewhere; the same applies to a mobile site. If your website’s easy to use for a mobile user then they will be more likely to engage with it and use it. With the advent of mobile internet access and the rise in tablet ownership and mobile internet use, you could be alienating a fair proportion of your potential audience by not offering this. Some of the sites that I maintain now see desktop users in the minority so why assume that your users will always be on a desktop? If your competition’s solution caters for the end user, no matter which sort of device they’re using, as opposed to your own site which makes them scroll / pan around, zoom in and out, etc. and generally make them work harder to achieve what they need to on a mobile or tablet device, then you are more likely to lose that traffic – and therefore leads, sales or however you measure the success of your site – to your competitors.

 

What about sites that aren’t mobile-ready?

A website that isn’t mobile-ready is one that serves up the exact same content regardless of the users’ screen dimensions, so the desktop and mobile sites look the same and means that the user has to move around the entire site to use it (zooming in and out, and scrolling around). Responsive website design is a relatively new practice while technologies such as mobile phones accessing the internet and the use of tablets to surf have also not been around all that long, so many websites simply won’t be up to speed with the idea of serving up mobile-ready solutions.

Having a site that doesn’t cater specifically for non-desktop devices may not be a bad thing, of course, depending upon what the website owner’s trying to achieve and there will be cases where mobile users aren’t expected to use a website or web application, or where there simply isn’t an easy way to offer a mobile solution.

 

Other Usability Changes

It isn’t simply a case of presenting a website to users that doesn’t scroll; there are other aspects to mobile-ready websites that need to be considered. Mobile and tablet screens utilise touch-screen technology so their users don’t have the ability to hover a cursor over a link, like desktop users do with their mouse, so drop-down menus that are triggered by hovering are a definite no. This, on the vast majority of websites, will therefore lead to considerable changes to be made on a website’s navigation.

Other considerations are scalable images that need to be employed so that pictures used on your site don’t break out of the constraints of the horizontal boundary, defeating the point of a responsive design. Images also come into play on page load time; users on mobile devices are likely to be on a mobile operator’s roaming network as opposed to a direct broadband connection so any time saved in downloading the page including optimising images, caching, etc. (which arguably should be done in any case on your site) as well as making only the calls for resources that are required will all improve the user’s experience and could save them time and money. If your user is on a mobile phone, you can take advantage of the environment by allowing the facility to click-and-call.

 

The way forward

From a user perspective if I’m on a mobile device and the site I’m browsing doesn’t cater for this, I won’t spend too long on there unless I really can’t avoid it. I don’t want to spend my time trying to use drop-down menus by clicking on links within the microseconds that I can see them, or moving around and zooming in and out of a large website. In this case I will either return to the site using a desktop browser later (which always risks me forgetting to do so) or try someone else’s. I’m not going to be the only one either and as more and more different devices access the internet and some websites cater for this, the ones that don’t will always be left behind.