Building mobile friendly pages

This is a fairly general concept being covered more and more. There's varying doctypes you can use, some JavaScript works on some devices, some JavaScript doesn't work. I've done a couple mobile versions of programs at work now, and I have some tips.

  1. Use XHTML Strict. There is a webml doctype, however XHTML doctypes work just fine on modern phones, and you don't have to learn anything new
  2. Images. Keep them small and to a minimum. You want the pages to load fast, and images tend to be the heavier resource.
  3. JavaScript. Aside from tracking codes, don't use it. Certain things will work and others won't. It's best off to just avoid it for now. Html5 functions like the canvas are improving on devices such as the iPhone and iPad. You can use it if you like, but note that it's not 100% supported just yet.
  4. Detection. While providing links on your regular pages to a mobile version is handy, it's best to use server side detection, so you can redirect them to a mobile friendly version. Sites like Canadian Tire, and flickr redirect you to their m. subdomain. How to do this depends on what language you use, but a simple google search on user agent detection in language should suffice
  5. Viewport. You'll want to take advantage of the meta viewport tag, so that the page view just shows what you want them to see, no extras white space. As an example: is what I use and it works quite well on the iPhone, and blackberry.