No-fuss websites in Kent and the south east, with applegreen
Skip navigation

Ask Applegreen:
Website display on mobiles and tablets

Increasing numbers of people are using mobile devices to access websites. These can range in size from the largest (iPads) to the smallest (mobile phones), with the smaller tablets and larger phones in between. Typical figures for mobile usage are around 20%, that’s one fifth of visitors (October 2013).

Why does this matter? Because a website that is designed for a desktop computer can be much harder to see, and therefore navigate, on a very small device. All websites can be accessed and used on smaller screens, but not easily. The answer is to design a site that is mobile-friendly.

What is a mobile-friendly website?

It is a site whose information and navigation are optimised for small screens. As screens become smaller, the material rearranges so that the most important appears first and the navigation changes to suit fingers rather than cursors.

If you are using on a desktop computer and want to see whether a particular website has been designed to be mobile-friendly, re-size your browser by hovering your cursor over the left or right edge, drawing it inwards to narrow the viewport, and see what happens. Does part of the website disapear to the right of the monitor? Or do the contents rearrange themselves to fit the viewport? (you will not see these changes if you are using Internet Explorer versions 8 or earlier). Smartphones and tablets have the ability to zoom out of non-optimised web pages so that no material disappears from the viewport, and the whole page can be seen – but very small. In order to read or navigate, visitors need to keep enlarging the screen with their fingers. This becomes frustrating over long periods.

Take a look at the screenshots below showing different versions of this web page. The first shows how the home page would appear on a mobile phone before optimisation. The second is optimised for a phone: which is easiest to read? In the mobile-friendly version, the navigation is enlarged and simplified, photos re-scale to fit and the text self-adjusts for easy readability. The third image is of the unoptimised version of the home page on a desktop whose browser has been re-sized.

Use the scrollbars on the middle and right-hand examples to see the effect:

Brightside b&b, Cranbrook, Kent. Website by Applegreen, website design in Kent UK.

Mobile phone view of un-optimised site: the phone's zoom facility lets you see the whole page in miniature. The visitor would have to keep enlarging in order to read and navigate (this can't be done here).

Mobile-optimised image of Brightside's home page.

Optimised version as seen on a mobile phone: text, photos and navigation adjust automatically (or hide) so that all the visitor has to do is scroll down using fingers (you can do this here with the mouse). This site returns to normal, see left, when viewed on a desktop monitor.

Brightside's home page, non-optimised, as it would appear when the browser is resized.

Un-optimised version as seen on a desktop browser that has been narrowed to mimic a phone screen: elements do not rearrange or adjust and there is no zoom, so you have to scroll down and across to read text that is very small.

Responsive web design

Webpages that change layout as the viewport narrows or widens are called "responsive". Achieving responsiveness requires a relatively new set of techniques that would mean a complete overhaul of the code if an existing, non-responsive website were to be made responsive. For this reason, it has only been applied to the Applegreen's newest websites, not including Applegreen itself!

Another approach to targeting mobile devices involves the creation of two alternative versions of a website: some code is added to detect the device that is being used to view the site and the appropriate version is delivered.

This technique often results in a pared-down website being delivered to the smartphone, as in this example of a hotel in the Dutch city of Maastricht (not an Applegreen project). The desktop version does not adapt to the viewport size but a different version altogether is delivered to the mobile phone, containing only some of the information provided by the main site.

This solution may be acceptable for a retrofit of an existing non-reponsive website but Applegreen does not recommend it for a site that is to be built from scratch.

Should my new website be mobile optimised?

Mobile optimisation is becoming the new standard for modern websites, mainly because mobile surfing is only going to increase. It is not compulsory, and we are certain that the old style of website will continue to be read and recognised decades from now. But a mobile-optimised site is more future-proof in structure, even if the devices on which they are read change radically from what is available even now.

The real question is, who is the website aimed at? The answer will naturally depend on the type of business or organisation it is promoting. A website aimed at youth should be easily accessible on mobiles. One directed at older age-group probably need not. Your business matters too: are people likely to want to find you while on the move? A hotel or B&B is an ideal candidate for mobile optimisation, hence the choice of Brightside.