Monday morning sponge #3

Monday morning sponge episode three, this week the theme is mobile. It’s been too long since I last posted a sponge article but not from lack of wanting to. On the contrary February has flown by! But this sponge topic has been a long time coming…

Over the past few months I have been reading a lot about mobile web development and testing, from simple media queries (checkout this sites CSS) to learning my way around the Android SDK. Hopefully I can share some of the sites I have bookmarks along the way.

• Considerations for Mobile Design (Part 1): Speed This series “Considerations for Mobile Design” aims to help experience designers understand how the transition to mobile affects their audience and, in turn, their designs. There is so much to consider before even touching any HTML. Hopefully this series will highlight some of those things.
• Considerations for Mobile Design (Part 2): Dimensions This post is a continuation of the series, “Considerations for Mobile Design”. This time it looks at mobile device dimensions.
• Safari Web Content Guide A library of information from Apple documenting guidelines for optimizing web content for WebKit enabled mobile devices.
• Put Your Content in My Pocket A great article from A List Apart with tips for improving your web site for the iPhone.
• How To Build A Mobile Website A great article pointing out things to consider when building a mobile site, including a look at media queries and device orientation.
• Using Media Queries in the Real World A good introduction to media queries as well as some implementation ideas and JavaScript based alternatives.
• Combining meta viewport and media queries A great article discussing how to make your websites ready for mobile using the meta viewport attribute and media queries.
• tips for building iPhone websites Not that the iPhone is the only mobile device out there, but here is some more tips for building a site optimized for the iPhone and other modern WebKit enabled devices.
• Web Development For The iPhone And iPad: Getting Started This article focuses on three phases of building and optimizing your website: design, coding and testing.

Testing

• mobi Ready The mobiReady testing tool evaluates mobile-readiness.
• W3C mobileOK Checker Mobile checking tool from the W3C. Simply drop in the address of your site and you can find out how well your site performs.
• Opera Mini Simulator Opera mini might not be the most popular mobile browser currently in circulation but it is still worth testing as it is popular on older mobile devices.
• Mobile Web Design (inc emulators) A great list of mobile device emulators that can be used for testing a site. Very handy if you do not have some of the more popular mobile devices available to test with.

Example sites

• Showcase of Designs Optimized for iPhoneThis showcase presents several interesting, interactive and beautiful designs that are optimized for the mobile devices, in particular the iPhone. There are also some useful tools at the bottom of the article if you are interested in optimising your own site.

Further reading

• Mobile Web Design Book by Cameron Moll – A web standards approach for delivering content beyond the desktop. I would recommend downloading the free chapter that is available if nothing else!