Your SlideShare is downloading. ×
0
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Understanding & Designing for the Mobile Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Understanding & Designing for the Mobile Web

109,542

Published on

Published in: Design, Technology
1 Comment
25 Likes
Statistics
Notes
  • Nice Slide.....
    Thanks for share
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
109,542
On Slideshare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
0
Comments
1
Likes
25
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Understanding & Designingfor the Mobile Web
  • 2. Mobile Web Users• Busy doing something else - Main focus not necessarily website - Information needs to be quick and easy to access• Key difference between mobile and desktop - Mobile – “on the go” situations - Desktop – stationary, predictable environment
  • 3. Mobile Site Usefulness
  • 4. When Planning for Mobile…Answer a few basic questions: 1. Who is using your site? 2. What are your users doing when they get to your site? 3. Where is your site being accessed from? 4. When is your site accessed? 5. Why are users coming to your site?Zero in on the main focus of the website andmake that prominent and accessible
  • 5. User Friendly Guidelinesfor the Mobile Web
  • 6. Design for FingersFingertips are 40-80px wide • Click targets should be a minimum of 30-40px in sizeNo hover events • Active events are useful for user experienceUse Whitespace • Increases space between clickable elements
  • 7. Optimize for Vertical ScrollingUsers already familiar • Reduces chance that users will miss content
  • 8. Keep Download Time in MindAvoid background images • Can reduce readability in certain lighting conditionsUse external stylesheets and javascriptCombine smaller images into one file • Use css to position
  • 9. Mobile FormsUse native web form controls Use top aligned labelsMinimize number of screensDisplay password character optionUse HTML5 form imput types • email, url, number, range, date pickers, search, color
  • 10. Mobile FormsMinimize required data input when possible • Entering data requires the user to focus on input - Websites need exact data • Require minimum amount of data • Remember data that the user previously enters • Use drop downs instead of input fields • Collect data automatically
  • 11. Miscellaneous GuidelinesMost mobile browsers don’t support plugins or extensionsSearch box and navigation need to be prominent and easy to findLess is more • Avoid unnecessary graphicsIs your site useable with little to no css?
  • 12. A Closer LookReal-World Mobile Site Examples
  • 13. YouTube
  • 14. CNN
  • 15. Clarity Way
  • 16. Yuma Dental

×