EverWeb Codebox

Mobile Website Design

Optimum Size

A site designed specifically for smart phone users should be 320px to 400px wide. If you make it any wider it will force users to view it in landscape mode which gives a much poorer visitor experience or squash the content down with a subsequent lowering of quality.

The header should be kept to a minimum height and contain just the website name. Links and navigation are dealt with later in this section.

Remember that vistors are going to have to do a lot of scrolling so keep the info to a bare minimum and cut out all the fancy extras. A back to the top button may be considered a luxury for a conventional site but it is a must for mobile ones. Back to the top buttons can be placed at any point so really long pages can have several.

The footer area on a mobile site can contain all the non essential items to reduce clutter and can contain links to reference pages such as terms and conditions, mailing address and so on.

Publishing To A Sub Domain

The mobile version is normally published as a sub domain. This folder is set up on the server. The sub domain name comes before the domain name - separated by a dot...

Website - domain-name.com

Sub domain or mobile site - mobile.domain-name.com

It's not necessary to use the word "mobile". A shorter but less descriptive way is to use ...

m.domain-name.com

... or, more descriptive...

mobi.domain-name.com

Hosting services usually provide a simple way to set up sub domains. If it's not obvious, or there are no instructions, contact tech support at the hosting service.

Redirect Code

One Site or Two?

Although EverWeb allows the mobile site to be built using the same project file as the conventional one sometimes this may not be the best way. Creating the mobile site on a separate file is a lot more convenient if the site has more than just a few pages and becomes essential for larger sites.

The techniques and content for a mobile site are completely different. It's easier to focus on this away from the extravagancies of the conventional one.

Apart from some text, there shouldn't be anything copied over from the main site to the mobile one.

The code shown below is used to redirect mobile visitors to the appropriate version of the website.

<script type="text/javascript">

if (screen.width <= 600) {

window.location = "http://mobile.domain-name.com"; }

</script>

Substitute the URL to your own mobile website - marked in red.

In this case, if the device screen width is equal to or less than 600 px, the mobile version of the site will load instead of the conventional one. This value is chosen so that tablet users will see the conventional site but those using a smart phone will get the mobile version. This value can be changed if required.

The code is inserted via the Head Code box in the main website project. Normally it would only be required in the head code of the main website home (index) page but can be included in every page by pasting it into the site wide Head Code box in the EverWeb Site Publishing Settings page.

To prevent vistors on computers landing on your mobile pages, the reverse of the above code can be applied so that they are redirected to the main website...

<script type="text/javascript">

if (screen.width >= 600) {

window.location = "http://domain-name.com"; }

</script>

This will send visitors to the main site if their device screen width is equal to or greater than 600px.

EverWeb Codebox Mobile Website Demo

Usability

EverWeb fixes the viewport and prevents visitors from zooming using this code...


<meta name="viewport" content="width=400, user-scalable=no" />


To allow zoom, paste this code into the Site Wide Head Code Box of your mobile website's Site Publishing Settings page...


<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />


Change the value for "maximum-scale" to anything up to 10. The default value is 5.