Your Mobile Code
Hand crafting your site’s HTML for the best mobile experience can be a real pain in the neck.
Mobile Moxie’s Page Code Grader can help lighten that burden. It’s pretty straightforward to use; put in your site’s URL and pick a user-agent, and then their script will get the site and run a bunch of checks on it. They have a bunch of different UserAgents paired with the page layout images so you can get a rough idea of how your inspected page would look on that device.
Like most tests on the web, however, you should take this test as a guide and not as a rule. When I ran this test on a mobile site, I was surprised to get dinged for the use of tables (this particular site doesn’t use tables) and dinged for style tags (this particular site might have style tags, but I don’t think so). And I’m not sure how to get a 1 pixel border without specifying the border width in pixels.
However, there were some good things it caught; it steered me toward the use of handheld.css (as opposed to the style.css file I normally use; apparently the name is important) and it reminded me to use relative measures rather than the absolutes I had previously (I had a line height of 24 pixels, and changed it to 2em). It correctly found that my images are nice and small. It liked my text-buttons (as opposed to some unwieldy image buttons).
Overall, I give this tool a B. It’s in my list of tests to run, but it’s not the last one I’d use.
If you’re having a problem with your image sizes, give Dink a try: Dink does resizing of images for mobile devices, on the fly, so you don’t have to. And it has drupal and ruby on rails plugins.