1. The document provides guidelines for designing mobile websites, noting that mobile users are busy and need quick access to information on the go as opposed to desktop users in stationary environments. 2. When planning a mobile site, designers should consider who the users are, what they are doing, where and when they access the site, and why they are visiting. The main focus of the site should be prominent and accessible. 3. User friendly guidelines include making click targets at least 30-40px, avoiding hover events, using whitespace for spacing, optimizing for vertical scrolling, minimizing download time by combining images, and using top-aligned labels for forms.

1. Understanding & Designing
for 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 and
make that prominent and accessible

5. User Friendly Guidelines
for the Mobile Web

6. Design for Fingers
Fingertips are 40-80px wide
• Click targets should be a minimum of 30-40px in size
No hover events
• Active events are useful for user experience
Use Whitespace
• Increases space between clickable elements

7. Optimize for Vertical Scrolling
Users already familiar
• Reduces chance that users will miss content

8. Keep Download Time in Mind
Avoid background images
• Can reduce readability in certain lighting conditions
Use external stylesheets and javascript
Combine smaller images into one file
• Use css to position

9. Mobile Forms
Use native web form controls Use top aligned labels
Minimize number of screens
Display password character option
Use HTML5 form imput types
• email, url, number, range, date pickers, search, color

10. Mobile Forms
Minimize 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 Guidelines
Most mobile browsers don’t support plugins or extensions
Search box and navigation need to be prominent and easy to find
Less is more
• Avoid unnecessary graphics
Is your site useable with little to no css?

12. A Closer Look
Real-World Mobile Site Examples

13. YouTube

14. CNN

15. Clarity Way

16. Yuma Dental