Mobile Friendly Websites

Overview

These days more and more people access the web on a mobile phone or tablet, so anyone who maintains a website needs to be thinking about how it displays on a smaller screen. As a WebHealer client you can choose one of our mobile optimised designs, which handles most of the issues automatically, but even then there are some pitfalls to watch out for. Alternatively if you choose a design which isn't mobile optimised, don't worry as it will still work on small screen devices, however the user will probably need to zoom in to read some of the text.

This guide has two sections. Firstly it explains a few things you should know if you have chosen a mobile mptimised design (e.g. Mobile ColourMAX or Social colourMAX), and the second section is for those who are using our older non mobile optimised designs. If you don't know whether your design is mobile optimised, you can safely assume it is not.

1. Mobile Optimised Designs
2. Non Mobile Optimised Designs

1.Mobile Optimised Designs

In Summer 2013 we introduced the first of a range of mobile optimised designs, Mobile colourMAX, which incorporated a number of leading edge technologies to maximise the effectiveness of websites on mobile devices, particularly phones with small screens. The key technolologies were:

• Responsive design, automatically resizing text for easy readability on small screen mobile devices
• Auto-switching between traditional menus and mobile friendly pull down menus
• Google Fonts to ensure the display of consistent font styles whatever the device in use

A number of less obvious changes (such as the styling of clickable phone numbers to support click-to-call) were also included, but the primary goal was to ensure that a visitor to your website should find it very easy to read on large screens or small, without the need to zoom in and out.

Mobile Friendly Text

The main issue to be aware of when using a mobile friendly design occurs if you have been in the habit of adjusting the font size of your text using the method <FONT SIZE=...>, for example you may have entered something like:

This will look fine on a normal desktop screen, and you will see something like:

The problem occurs on a mobile phone, as all the text is enlarged quite a lot for readability, but the font size setting overrides that, so you will see something like:

There is a simple solution however, which is to avoid <FONT SIZE=...> and instead to use one of the two following methods:

1. For the above situation, use bold or colour instead which is often a neater way to emphasise text, or if you really want a larger font, use <BIG> as this will always make the text bigger, even if it is already enlarged. You can even double up with <BIG><BIG> to make it extra big - see below.
2. If you are enlarging text to make a sub-heading, use our Paragraph Control Tool to create proper sub-headings, which will automatically be formatted in the standard size, and even in a standard colour.

To illustrate example one, here's how to make text larger, using mobile friendly codes.

Mobile Friendly Fonts

Although you may not be especially familiar with fonts, you might recognise font names such as Arial or Times New Roman. These are two very popular fonts, but you may be surprised that not every computer understands them. Most Windows PCs do, but there are many more types of personal computer these days, such as Linux as well as the more popular Apple Mac. Yet more people now browse the web on a Sony Playstation or Xbox.

Once you add in the myriad types of mobile phone, you quickly realise that a lot of people are likely to be using devices that will not recognise even common font names, never mind more exotic ones such as "Comic Sans", "Century Gothic" or "Papyrus". Don't worry, the text isn't invisible, however the style that appears can vary from what you expect. The solution we developed with our mobile optimised designs, is to switch to the Google Fonts system, which doesn't rely on the fonts available on the device in use, but retrieves all font design information from Google's systems when the page is loaded. For this reason if you try to customise the fonts in your website's Administration Area you will only be given Google Font options (such as PT Sans or Lora) if you are using a mobile optimised design.

This leads us to the area of caution for our clients. If you have tried to change fonts in the content text area of your pages, you are advised to remove these font changes as they are likely to produce unpredictable results depending on the device being used, and as you have switched to a mobile optimised design to avoid all these complications, the best approach for text is to keep it clean and simple. To illustrate this point, the following example should be avoided.

2.Non Mobile Optimised Designs

Our older designs are not mobile optimised, but don't worry that a mobile phone user will be unable to read your website, as these designs still work on mobile devices. It is simply the case that the website visitor's experience won't be as slick and convenient to read and navigate. In fact a reason why we resisted enlarging the width of our website designs as wide screen laptops became more popular was to avoid problems when websites were viewed on smaller devices.

Having said that, mobile phone users will almost certainly need to use zoom features to read and navigate a non mobile friendly design. Users of tablets such as iPads are likely to have no trouble at all.

One other area to be aware of though is fonts - see section on fonts above. If you wish to ensure the best readability on mobile devices you would be advised to use Arial as the font choice in your Style & Design section. Not only is this font very popular but it is highly readable at smaller sizes, and if it is unavailable on a particular device, a very similar substitute is likely to be used instead.