Posted on July 16th, 2010 No comments
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
Posted on November 11th, 2009 No comments
- Full-color book
- Very well crafted, original divisions into “tabbed” chapters with color schemes for each one of them
- 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”
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.
Posted on May 22nd, 2009 1 comment
- 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
- 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