Design Considerations & Special Use Input Functions
The design featured here has been kept really simple and the only “extravagances” are the background images used for the header and navigation blocks. These are, in fact, only 10 px wide are set to repeat on the x-axis, in the case of the header, and the y-axis for the buttons. These can be substituted with a plain color - or nothing at all - for a really minimalist design.
Minimal
Here's an example of a the same design stripped down to the bare necessities. The header has been given a plain colored background and the navigation blocks are white with black text and a radiused border. I suppose the navigation block icons could be removed but then how would the average three year old be able to know which one to poke at?
Keep the HTML clean, simple and complient and avoid using inline CSS. Don't force the browser to load any unnecessary scripts and take the time to run your files through an optimizer application before uploading them to the server.
User Input
Contact forms are the usual method of getting input and info from visitors and these are explained on another page of this site. They are not strictly necessary on a mobile site and, in a lot of cases, it may be desirable to use the alternative.
Email Me
A link can be used to launch the devices email application along with the keypad and this can be an easier way for cell phone users to communicate. If you provide a link like this...
<a href="mailto:your-name@your-website.com?subject=Mobile Web Design&body=" class="email">
... the result will be something like the screenshot on the right on an iPhone...
The email and subject are automatically entered and the cursor is positioned in the content section of the email by the addition of ...
&body=
Any text entered after the “=” will be added to the email content automatically.
Phone Me
A phone link that will place a call on devices like the iPhone can be created like this...
<a href="tel:18881234321" class="phone-link">Phone(888)123-4321</a>
And Another Thing...
If you are running a standard website as well as a mobile one, make sure the link for mobile users to get to their version is large enough for them to finger touch. Load you regular website on an iPhone to get an idea about what is realistic in this respect. The icon should be recognizable for what it is and be at least 40 px square - or round.
