Guidelines for 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

Book review : Guidelines for Online Success

Written by industry experts, this book is a collection of best practices for web application and website development. Divided into 6 chapters (Interface & design, Marketing & Communication, Technology & Programming, Technical advice, Content/Content management and E-commerce) and widely illustrated, “do” & “don’t” are discussed about many notions of web development. Anyway, this book doesn’t assumes his title at all as it’s more a collection of pictures of nice websites than practices to follow. Even worse, among the few practices we’re given, many of them are completely unuseful and even redundant.

Pros

• Full-color book
• Very well crafted, original divisions into “tabbed” chapters with color schemes for each one of them

Cons

• Absolutely not a collection of “guidelines”, too few text and way too many pictures
• Some “guidelines” are completely dumb, such as “don’t make ugly layouts” and “don’t hide your navigation”
• Because the book is written by many people, some “guidelines” are redundant. I was told at least 5 times in the book that “my website should not take too long to load”

Conclusion

Absolutely not interesting about the “guidelines” aspect, but the book stills remains valuable if you’re using it like a “Web Design Index” for inspiration of best web productions.

Réussir son site web en 60 fiches

For the french readers out there, Réussir son site web en 60 fiches is a complete checklist filled of very interesting rules and advices that a website or web application must follow. Divided into 6 chapters (marketing, content, navigation, design, interactivity and technical aspects), the book illustrates, through color illustrations, theory, statistics, good and bad examples how the ideal website should be. Definitely one of my best buys about web books !

Pros

• A checklist close to perfection, precise and concise at the same time
• Globality of the approach : marketing, content, navigation, …
• Theory illustrated through statistics, real-case good and bad examples
• Interesting resource URLs given all along the book (reference articles, interesting tools, …)
• A great value-added book at a very fair price (about 25 $)
• Fast to read, straight to the point construction, training book as well as a checklist reference
• Color printed book

Cons

• Could have been interesting to have more technical details about the good practices, but it would have lost its “checklist” philosophy
• Honestly nothing else. As I said, one of my best buys of web books