Website Design For Smart Phones
The screenshots below show the iPhone website as they appear on the device itself.
The navigation is created using the Icon Navigation Widget to save space. This navigation opens when the icon is tapped and closes when tapped again.
Even with some of the content cut out for this version, the pages are very long making the smooth scroll to the top button essential and the previous/next buttons helpful.
These screenshots were taken of the website displayed in the iPhone Simulator.
The image size has been adjusted so that the viewable screen width is as near as possible to the actual iPhone screen width of 320px.
This is necessary since the simulator displays the device at twice its actual size.
This is the kind of clarity and readability that is required of a good mobile website design.