Mobile Friendly Website

Most websites will work on Smart Phones however some bits of the website may not work. The biggest problem is Flash based animated graphics which Apple and Android no longer support. There are however other methods to get animated graphics to work and all new websites use these methods. If you have a website that is a few years old then it may contain Flash based animated graphics which will not show up when your website is viewed on a Smart Phone.

The Size Issue

The biggest problem with Smart Phones is the screen size - Whilst most websites will work on a smart phone they are literally shrunk down to fit the smaller screen. As you can see by the iPhone 4 image shown here, our old website is very difficult to read at this size.

What are the Options

There are several options that website owners can choose from. Website owners need to consider if and how people may interact with their website on a smart phone to determine the best solution for their website.

• Do Nothing - If you think people will not view your website on a smart phone.
• Smart Phone Template - Reduced amount of website content designed specifically to work on a smart phone.
• A Responsive Web site - The Website layout changes to suit the reduced screen size

Smart Phone Template

A Smart Phone Template is best where people who use your website on a smart phone only need a reduced  amount of detail from that offered on your website. 

• Service Providers - Book Online form
• Locate your business - Using smart phone map service or app
• Email - Using smart phone email service or app
• Phone link - Use smart phone dialler service or app

The image below shows a typical website that uses a smart phone template - The smart phone website is a different layout from that used on a Laptop and a Tablet. 

Responsive Website.

A responsive website changes its layout, image sizes and font sizes to suit screen resolution of the device being used. Whilst the resolution of modern smart phones is very high the actual pixels that make up the images are very small which means you can fit a lot in but it can be difficult to read. To get around this a responsive template does 5 things

• Images are made smaller so as not to consume a lot of the valuable screen space.
• The content layout can change to provide more space. On a PC we may be able to fit 4 objects across the screen but on a tablet we change this to 2 rows of 2 objects and on a smart phone we change this to 4 rows with 1 object on each row
• The text needs to get larger in relationship to everything else. 
• Horizontal Menus are changed to vertical pull down or scrollable lists.
• Some parts of the website are disabled according the size of the device being used to view the website.

The image below shows a responsive website. Note how the layout changes on each device and the tablet has different layouts to suit its orientation. The images change size but the text is approximately the same actual size on each device.

Contact Details

A website usually has contact details including a Phone Number, Email address, Physical Address details and a Map showing your location. These contact details can be enhanced to work differently on a Smart Phone.

• Phone Numbers need to be structured in a specific way so that the Phone recognises it as a phone number that can be clicked on to make a phone call to that phone number.
• Email Addresses work in the same manner as a website. They are links that open your email application on the smart phone.
• Physical Address becomes a link to the smart phones map application - The map shown on the website is not required when viewing website on a Smart Phone.