Some stuff about Web and .NET development
RSS icon Email icon Home icon
  • Guidelines for mobile web development

    Posted on July 16th, 2010 Thibaut No comments
    Mobile Web Development Having recently completed a web project (related post) including an iPhone/iPod touch optimized version, here are some guidelines I’ve learnt and followed during that development :

    • Lightweight and concise design : we read less on mobiles than on a regular computer. Go to the point, be clear, provide fast access to relevant information. Don’t fear that visitors will be missing important information, they’ll go to the full version of the website if they’re interested in what they’ve seen.
    • No hover effects : whether it’s on menu items, links etc, don’t waste time developing hover effects. It’s a nonexistent concept on tactile interfaces.
    • Take inspiration from the GUI style of the platform : using GUI elements in which users are already familiar will make the interface easier to use. If you’re developing for the iPhone/iPod touch, you can take a look at the iPhone GUI PSD from Teehan+Lax. You can also get some inspiration from this gallery of iPhone websites.
    • Orientation detection : detect the orientation of the phone and adapt the interface accordingly. More screen width enables you to display larger images and longer paragraphs of text, improving readability on mobiles’ small screens.
    • Optimize for the phone screen resolution : when developing regular websites, you have to cope with different browsers, different screen resolutions, etc. One of the greatest things when developing for a specific mobile device is that every user has the same screen resolution and same browser. So you can tailor your interfaces to the pixel without worrying about those concerns.
    • Interfaces for fingers : there’s no mouse cursor on tactile interfaces and everything is done using the finger (at least if you’re using an iPhone/iPod touch). Keep that in mind by providing big enough buttons and add space between links to prevent errors. If you’re developing for the iPhone/iPod touch, I recommend you to take a look at the iPhone Human Interface Guidelines (official Apple documentation).

    And that’s it for this post ! Don’t forget that this is a noncomprehensive list and if you’ve got interesting guidelines to add, don’t hesitate to comment about that ;)