best practices for the mobile web!
DESCRIPTION
W3C mobile web standards decoded into normal speak!TRANSCRIPT
![Page 1: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/1.jpg)
Best practices for the mobile web
Nov 2005
![Page 2: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/2.jpg)
Best practices in designing for the mobile web 2
Best practices in Navigation
Navigation is about wayfinding, you can't treat it as separate (from design)..
..it's about creating a complete system. It's about looking at the whole.
Clement Mok On navigation in building architecture
![Page 3: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/3.jpg)
Best practices in designing for the mobile web 3
When it comes to access - what is important is how…
Clarity in linking
Don’t link to something you can’t get
Make access easy
Minimize nav bars on top
Main content – first!
Welcome to Airtel Live Wap Portal:[ ]Travel & Ticketing[ ] Banking[ ] Jobs[ ] Matrimony
[GIF- AirTel Live]1.[ ] BankingBank withHDFC | IDBI | UTIGet a loanHome | Personal | Auto-------------2. [ ] Travel & TicketingRailway enquiryAir ticketingCity guide------------3. [ ] JobsSearch | More…------------4. [ ] MatrimonyFind | Status| Chat
------------5.[ ] Search6.[ ] Bill pay
![Page 4: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/4.jpg)
Best practices in designing for the mobile web 4
How deep do you go?
Browsing time is a factor
Easier to scroll than to click
Shallow and wide
Not narrow and deep
The key is balance
Select:[ ] HDFC Bank[ ] IDBI Bank[ ] UTI Bank[ ] More Banks
Back
[ ] HDFC-Balance enquiry-Mini statement-Bill payMore..-----------[ ] IDBI-Balance enquiry-Cheque status-Deposit detailsMore..-----------[ ] UTI-Balance enquiry-Mini statement-Open account-----------[ ] Get a loanHome | Personal | Auto-----------Menu
![Page 5: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/5.jpg)
Best practices in designing for the mobile web 5
Everything has to look the same!
Consistency in terminology
Consistency in visual design
Mean what you say!
Make it familiar
The key is memorability
![Page 6: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/6.jpg)
Best practices in designing for the mobile web 6
Best practices in layout
“A picture is worth a thousand words. An interface is worth a thousand pictures.”
Ben Shneiderman
![Page 7: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/7.jpg)
Best practices in designing for the mobile web 7
It should breathe...but also work
Subtle spacing
No empty spaces, no spacer images
Grow in one direction
Clarity in design
![Page 8: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/8.jpg)
Best practices in designing for the mobile web 8
Understandable is better than pretty!
Size does matter!
Text equivalents necessary
Resizing (server level)
Right-sizing (page level)
Can’t trust fonts!
![Page 9: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/9.jpg)
Best practices in designing for the mobile web 9
Color me black and white…
Ensure readability
Provide simplicity
Contrast is essential
Should work without colors
![Page 10: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/10.jpg)
Best practices in designing for the mobile web 10
Can I use tables?
Device support
Non-essential tables
Should work without tables also
Consider loading time
Target audience – device support
![Page 11: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/11.jpg)
Best practices in designing for the mobile web 11
Text input is a pain…need relief!
By hook or by crook – minimize
Evaluate, contain text entry
Don’t default on defaults
Clickable is always better than input
![Page 12: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/12.jpg)
Best practices in designing for the mobile web 12
Best practices in Communication
"Context" is the invisible environment, the interrelated conditions, the structure of interpretation in which your life occurs. The context of your life is like water to a fish.
![Page 13: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/13.jpg)
Best practices in designing for the mobile web 13
Context Context Context! It’s like water:fish
Suitable content
Meet expectations – that’s it!
Clarity is of the essence
![Page 14: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/14.jpg)
Best practices in designing for the mobile web 14
Beeeeeep! Error! Now what?
Human error – Human error message
Machine error – Human error message
Navigation – retry, cancel or away
How to recover…
Prevention is better than cure!
![Page 15: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/15.jpg)
Best practices in designing for the mobile web 15
Best practices for high end mobiles
"Designers have to learn to stop trying to control the display of their pages. They have to accept that forces beyond their control will cause their design to display differently, sometimes radically, in certain situations. - Randal Rust
![Page 16: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/16.jpg)
Best practices in designing for the mobile web 16
High-end mobiles
Color - finally
Images - necessary
Formatting
Do not trust cookies!
No frames…at all
Ensure readability- its still very small
Test on all target devices extensively
![Page 17: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/17.jpg)
Best practices in designing for the mobile web 17
Style allowed? Wow! - Hold it!
Style sheet support
Style sheet independence
Consider loading time
Target audience – device support
![Page 18: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/18.jpg)
Best practices in designing for the mobile web 18
What works…
Prioritize tasks for mobile use
Design for single button use – navigation key or left soft key
Minimize input
Make information very contextual. Use location info
Make information personal. Take into account usage behavior etc
Test. Test. Test. Test. On users & on devices!
![Page 19: Best practices for the mobile web!](https://reader035.vdocuments.net/reader035/viewer/2022070301/5452450baf795985248b49c3/html5/thumbnails/19.jpg)
Thank you
For comments or clarifications…
Ekta Rohra Jafri
http://www.linkedin.com/in/devingel