Best practices for the mobile web!

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

2 comments

Comments 1 - 2 of 2 previous next Post a comment

  • + bonus999 bonus999 7 months ago
    Hi, I found that your ppt is very useful, may I download your ppt as a reference? My e-mail bonus999@gmail.com, thanks a lot!
  • + ramzo ramzo 2 years ago
    Hi!
    Can u please allow me to download this presentation. I need this urgently for my project at my college. I will be highly obliged. My email is jalanram@gmail.com
Post a comment
Embed Video
Edit your comment Cancel

26 Favorites

Best practices for the mobile web! - Presentation Transcript

  1. Best practices for the mobile web Nov 2005
  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
  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.[ ] Banking
    • Bank with
    • HDFC | IDBI | UTI
    • Get a loan
    • Home | Personal | Auto
    • -------------
    • 2. [ ] Travel & Ticketing
    • Railway enquiry
    • Air ticketing
    • City guide
    • ------------
    • 3. [ ] Jobs
    • Search | More…
    • ------------
    • 4. [ ] Matrimony
    • Find | Status | Chat
      • ------------
    • 5.[ ] Search
    • 6.[ ] Bill pay
  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 pay
    • More..
    • -----------
    • [ ] IDBI
    • Balance enquiry
    • Cheque status
    • Deposit details
    • More..
    • -----------
    • [ ] UTI
    • Balance enquiry
    • Mini statement
    • Open account
    • -----------
    • [ ] Get a loan
    • Home | Personal | Auto
    • -----------
    • Menu
  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
  6. Best practices in layout “ A picture is worth a thousand words. An interface is worth a thousand pictures.” Ben Shneiderman
  7. It should breathe...but also work
    • Subtle spacing
    • No empty spaces, no spacer images
    • Grow in one direction
    • Clarity in design
    X X 
  8. Understandable is better than pretty!
    • Size does matter!
    • Text equivalents necessary
    • Resizing (server level)
    • Right-sizing (page level)
    • Can’t trust fonts!
  9. Color me black and white…
    • Ensure readability
    • Provide simplicity
    • Contrast is essential
    • Should work without colors
  10. Can I use tables?
    • Device support
    • Non-essential tables
    • Should work without tables also
    • Consider loading time
    • Target audience – device support
  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
  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.
  13. Context Context Context! It’s like water:fish
    • Suitable content
    • Meet expectations – that’s it!
    • Clarity is of the essence
  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!
  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
  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
  17. Style allowed? Wow! - Hold it!
    • Style sheet support
    • Style sheet independence
    • Consider loading time
    • Target audience – device support
  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!
  19. Thank you For comments or clarifications… Ekta Rohra Jafri http://www.linkedin.com/in/devingel [email_address]

+ devingeldevingel, 3 years ago

custom

5858 views, 26 favs, 9 embeds more stats

W3C mobile web standards decoded into normal speak! more

More Info

© All Rights Reserved

Go to text version
  • Total Views 5858
    • 5791 on SlideShare
    • 67 from embeds
  • Comments 2
  • Favorites 26
  • Downloads 104
Most viewed embeds
  • 23 views on http://www.medianama.com
  • 17 views on http://www.guim.fr
  • 15 views on http://karen-tondeur.over-blog.com
  • 4 views on http://www.netvibes.com
  • 4 views on http://apprentieweb.blogspot.com

more

All embeds
  • 23 views on http://www.medianama.com
  • 17 views on http://www.guim.fr
  • 15 views on http://karen-tondeur.over-blog.com
  • 4 views on http://www.netvibes.com
  • 4 views on http://apprentieweb.blogspot.com
  • 1 views on http://s3.amazonaws.com
  • 1 views on http://srv04.admin.over-blog.com
  • 1 views on http://reestols.blogspot.com
  • 1 views on http://babyfaces.wordpress.com

less

Flagged as inappropriate Flag as inappropriate
Flag as innappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel

Categories