How To View This Site On A Computer

Open the page in Firefox since this browser allows the narrowest window. Adjust the browser width to as wide as you would normally use. Now decrease the browser width and note how the content flows to adjust for various device widths right down to 320px which is the width of an iPhone screen in portrait mode.

Layout

A liquid layout flows in and out across the page when the browser window is reduced and increased in width.

This type of layout is based on a percentage of the browser width rather than having its page width fixed. In this case the width is set to 100.

The Viewport width is set to the device width and the abilty to zoom has been denied to the end user by setting the initial, maximum and minimum scale to 1.0.

Side Menu

The side menu is set to a maximum width rather than have it stretch across the top of the whole page. This width allows it to fit the iPhone in portrait mode. The full menu is displayed on the Home page but only a return link is required on the others to save space.

Header

The header has been kept as simple as possible and uses a 10 px wide background image repeated across the x-axis.

The text size remains fixed so the logo needs to be able to zoom in and out to keep it out the way. This is achieved by giving it a class in the stylesheet with the width expressed as a percentage and the height set to auto in much the same way as the images in the content area. The logo also requires positioning data which is, again, expressed as a percentage.

Navigation

The navigation is a simple unordered list. Each item in the list is a separate container. These containers are high enough and spaced apart to allow a reasonable target for the user to hit them with their finger tip. Each container is active over its full width and incorporates an icon and link text with rollover color.

iphone

The PHONE link is specifically for cell phone users and the EMAIL link launches their email app.

Contact forms, and any other user input areas, require the use of HTML5 input types. The 'tel' input type will launch the numeric keypad on the device and 'email' will launch the alphabetical one.

Note that the navigation is not repeated on every page like it would be on a standard website. This is a waste of space for mobile devices. All that is required is a link to the Home page and the main navigation.

Content

Content for a mobile website needs to be cut back to the basics and code should be kept to a minimum. Always be aware of the fact that these devices are downloading via cell phone connections which can be unreliable and expensive.

Pay particular attention to optimizing image files and avoid the use of effects such as borders and dropshadows - particularly if they are added using PNG images rather than via CSS.

Movie files should be prepared for fast start internet streaming and use a suitable format such as .mp4 or .3gp. Music files require the .mp4 format to suit most of the modern players and the superior quality is preferable to the slightly more compact .mp3.

Image Auto Resize

The image has been set to float to the left and the text content flows around it. It expands and contracts with the screen width of the viewing device - up to a point. More about this on the photo page.