Designing a Website For Mobile Devices - iPhone - iPad - and all the rest
It won't be too long before more people are surfing the 'net on portable devices than with personal computers. Designing a website that looks good, and is user friendly on all devices, is a challenge.
Portable devices have a large range of different screen sizes and most of them actually have two since they can be used in portrait or landscape mode. The iPhone has a minimum screen width of 320 px and the iPad a maximum of 1024 px. How to design a site that works over this range?
Liquid layouts have never been very popular for page design but they are worth considering for portable devices and can also be made to look good computers by locking the maximum page width.
The image to the left shows how the page design looks on the iPhone in portrait mode. The header and the navigation are displayed without the visitor having to scroll and the header height is kept to a minimum.
The navigation is composed a of blocks. Each one contains a suitably descriptive icon and text. The block height is about 40px and the whole block width is active so that the visitor can touch it anywhere to get to the appropriate page.
The example website has seven pages which should be enough for most purposes. There are eight navigation blocks on the Home page and two of those, phone and email, do not have associated pages. The phone block will place a call to the number entered into the code if the visitor is using a device that has phone capabilty. The email block will launch the device's email client along with the keypad.
Most designs of this type allow the navigation to stretch across the page on wider devices. This one locks the navigation to prevent it from stretching so that the text can flow up to the top of the page on wider devices or when the same device is turned from portrait to landscape mode.
The image below shows the same page on an iPad where you can see how the text flows. Also, on wider screens, the website name and page name maintain their position in the center of the header and the wirelss icon increases in size.
Design example page HERE.
