Writing Web Pages For Mobile Devices

Billions of people surfing the Web via mobile device than ever before, with new and better tablets and mobiles comming out all the time. If your Web page doesn’t display well on Mobile devices with WiFi then you are missing a trick. All Web Developers should learn how to design for mobile devices including iPhones, smartphones, cellphones, PDAs, and palm-sized computers.

Top Tips for designing for moblie:

1. Use only HTML tags such as: p, br, b, i, blockquote, center, ul, ol, li, images, pre, headers, and simple tables
2. do not use frames, layers, imagemaps, Javascript, Java or plugins
3. Use an alternative stylesheet that can be used by mobile divices — the very presence of a mobile-specific stylesheet will override all styles from your screen stylesheet, thereby simplifying the presentation of your site.
4. Keep your layout small, and avoid clutter
5. Be aware of how graphics are displayed

Images for Mobile

Images are not easy to display well on many mobile devices. Whilst most mobile browsers will support images some are not in color, and they will often have low resolution. Currently many mobile devices have a screen width and height of approximately 150×150 pixels. iPhones and other smartphones are a bit bigger. When devices resize your images to fit that small screen it can result in very poor quality images, or they don’t resize they are too much too big for the screen.

Links for Mobile

Links can be the most important element on the mobile page. Make them easily identifiable. When styling your mobile links, it is good practice to emulate conventional link appearance with an underline, distinguished color, and perhaps a slightly contrasting background colour.

HTML for Mobile

As many mobile devices (exluding smartphones) support a limited version of HTML 3.2 its best to stick with basic layout and formatting tags.

Content for Mobile

Writing good content for mobile is critical. Too much will be difficult to read – too little and you won’t be providing enough information. Decide what is essential. Pages designed for Mobile devices are usually used as a reference and should be straight to the point.

Ask yourself the following questions:

  • What are mobile visitors looking for?
  • What information do they want/need?
  • Can I reduce sidebar content?
  • Which navigational elements are redundant?
  • Which stylesheet elements can I do without?

Points to Remember

  • Keep your pages small – essential content only
  • Navigation should be easy, clear and concise
  • Avoid any graphics that are not essential
  • Always Test your pages Be sure to test your pages in both smartphones like the iPhone and PDAs.

Heather Buckley is Director and co-founder of IT and business training providers Silicon Beach Training. Founded in 1999, Silicon Beach Training run public-scheduled training courses in their Brighton Training Centre as well as bespoke on-site courses worldwide. Popular courses include Social Media Training, Photoshop Training and PRINCE2 Training, which has recently been launched in Birmingham. Heather writes on the Silicon Beach Training blog with a focus on IT, Project Management and Social Media as well as offering Photoshop knowledge from her experience as a photographer.