Mobile Devices May be Small, But they Still Need Web Design
There are four basic rules to create a good site for a palm sized device:
- Stick to basic HTML tags such as: p, br, b, i, pre, headers (h1-6), blockquote, center, ul, ol, li, images, and simple tables
- Avoid frames, layers, imagemaps, plugins, Javascript, Java, and CSS*
- Keep your layout small, and avoid clutter
- Be aware of how graphics are displayed
Graphics
Graphics are tricky on many mobile devices. Most mobile browsers support images, but some are not in color, and they often have lower resolution than a personal computer.
Then there is the size. Many mobile devices have a screen width and height of about 150x150 pixels. iPhones and other smartphones are larger, but still smaller than a standard monitor. Many devices will resize your images to fit that small screen, which can result in really ugly images. And even if they don't resize, if they are too much larger than the screen, they'll be hard for your readers to view.
HTML
Many (non-smartphone) mobile devices support a limited version of HTML 3.2. If you stick with basic layout and formatting tags, you'll create a better site for your mobile readers.
Content
Content is where your mobile page will succeed or fail. The key is to set up pages that have enough content to keep your offline readers happy, but not so much that it won't download or be difficult to read. You have to look at your site and decide what is the most essential. Web pages that are viewed on mobile device like a PDA are usually used as a reference and should be short and to the point.
Tips to Remember
- Keep your pages small
- Navigation should be clear and concise
- Avoid graphics that do nothing to add to the navigation or readability
- Test your pages Be sure to test your pages in both smartphones like the iPhone and less sophisticated mobile devices like PDAs.
