Mobile Friendly Web Design

AGENCY PRIMERS SERIES:MOBILE-FRIENDLY WEB DESIGN

A D i v i s i o n o f S I E R R A B R A V O C O R P O R A T I O N

We partner with advertisers, marketers and other people with big plans to build award-winning interactive projects.

About UsMark Hurlburt and Annette Johnson

What is the Mobile Web?Hint: It’s a mix of content and technology.

Mobile Web Challenges

Presentation Issues

Input Differences

Bandwidth Availability

User Goals

Technology Limitations

Mobile Web Advantages

Portable

Contextual

Location Awareness

Always On

A Bit of History

In the beginning...

WAP

Walled-garden approach from mobile carriers

Nowadays...

HTML

Search-dominant “real” internet

Mobile Web Market

Q:Who Has a Cellphone?A: Everyone -271,000,000 Phones in the US

32% of Americans Have Gotten Online with a

Mobile Device

Three Classes of Users

Feature Phones

Smartphones

Touchscreen Smartphones

Smartphone Landscape

77%

23%

Smartphone Market

Touchscreen Smartphones Other

25%

75%

Mobile HTML Requests

72%

28%

Mobile Market

What About Other Devices?

45% of adults own iPods or other MP3 players (5%)

41% of adults own game consoles (9%)

14% of adults own PDAs (7%)

2% of adults own e-book readers (1%)

Advertising SpendMobile advertising is expected to grow by 15% in 2010 to 2.9B

Mobile Advertising Outlook

72% say they’ve used mobile advertising tactics already

31% plan to spend between $100-249K, 15% plan to spend $1M+

78% of agencies said their mobile campaigns had met their goals, 9% said their expectations were exceeded

Mobile User MotivationStay in touch with others

Accessing information on the go

Posting content on the go

0% 25% 50%

Mobile Users Are Not Desktop Users

Knowing that these users are different is the first step, what do you do with that information?

Competing Mobile Web Dogmas

“One Web” - Adapting the user interface of a website to conform to the device that is being used to view it (also referenced as device independence)

“Contextual Web” - Adapting the functionality of the site to focus on content, features and tools of particular interest to the given user

How Many Sites Do You Need?

Usability Success Rates

Feature Phones

Smart Phones

Touchscreen Smartphones

Desktop Browser

0% 50% 100%

80

75

55

38

Best PracticesSingle point of entry to a site

Avoid popups, frames and other multi-window layout and navigation techniques

Avoid rich media (i.e. Flash) or provide alternative content

Strive for valid markup

Provide link to “full site”

Separating Mobile Users

“example.mobi” style separate domain

“mobile.example.com” third level domain

“example.com/mobile”

Browser and/or device “sniffing”

Design Considerations

Simplicity

Prioritized Content

Simplified Layout, Reduced Images

Examples

QUESTIONS?More answers online at http://nerdery.com

Resources

W3C

http://www.w3.org/TR/mobile-bp

Jakob Neilsen

http://www.useit.com/alertbox/mobile-usability.html

Pew Center for the Internet and American Life

http://www.pewinternet.org/Reports/2009/12-Wireless-Internet-Use.aspx

Save the DateWebinars on Jan 19th and 21th