Designing for the mobile is different in the following ways:
- Smaller screens that don't work well with horizontal scroll
- Screen sizes vary from model to model
- Colour rendering is not handled in the same way in all cases
- The person using the mobile will be using it in a variety of different situations
- Connection speeds are more limited
- The keyboard is limited
- Dynamic interactive software such as java and flash are different for the mobile
Screen sizes
The most common mobile devices that can access the internet are camera phones. These will have smaller screens than PDAs and will can be anything from 96 x 64 to 128 x 160. A popular size is 128x 128. Blackberries and PocketPCs have screens around 320x240, and some PDAs can go up to 640x480.
Colour rendition
Color palettes are another thing to consider. Many popular consumer phones have a reduced color palette, and of course these can vary dramatically between manufacturers and model types.
Key points when designing for mobile devices:
- Use a one column layout
- Stick to a couple of easily translatable colors
- Design for the lowest common denominator
- Navigation is much more difficult and needs to be kept simple
- Web addresses need to easy to type in
- Non credit card payment solutions are much easier to provide for on the mobile phone
Many people use an automatic detection to switch between the mobile and the PC versions of their site. The problem with this approach is that the mobile device may have several different browsers, each with different capabilities and the user may want to make their own choice as to which version of the site they view. For example, one browser may view web pages very well but not work with the phone book in the mobile phone, where as the one that works well with the internal functionality of the phone may have a more limited ability to display web pages. For this reason it is often best to let the user choose which version they want to view by giving different web addresses for each version.
Please Contact us for more information.
