#mobileweb
Design For Mobile World

Ido Green
@greenido
+GreenIdo
devheb.com

It’s a mobile world, right?!
Global phone shipments - over 300 million last quarter Android: over 1 billion 30 day active users Android : people check 100 billion times each day.

Google Confidential and Proprietary 86%
14% Sources: Time spent stats: http://www.flurry.com/bid/109749/Apps-Solidify-Leadership-Six-Years-into-the-Mobile-Revolution#.U44l461dVX4; Commercial task stats: Google/Ipsos Multiscreen Industry Study of 29k smartphone users across 9 industries. ON MOBILE, ENTERTAINING APPS DOMINATE TIME, BUT SITES CAPTURE THE BULK OF TRANSACTIONS. TIME SPENT ON SITES TIME SPENT ON APPS 14% 40% GAMIN G & ENT. 28% SOCIAL 20% OTHER 66% SITES 6% APPS 28% SITES & APPS PRIMARY CHANNEL FOR COMMERCIAL TASKS INDUSTRY SNAPSHOT 75% OF AUTOS USERS 60% OF FINANCE USERS 70% OF TRAVEL USERS 71% OF RETAIL & TECH USERS 64% OF LOCAL SERVICES USERS ... USE SITES MORE OFTEN FOR COMMERCIAL TASKS USER TIME SPENT ON MOBILE DEVICES

We’ve heard them... harder to
navigate sparse in features poor on design cut down unfamiliar smaller sparse in features

(Bold) Examples

• 250% increase in mobile
visits Cancer.org Informational • 3x increase in mobile revenue (donations) • Higher rates of mobile access to key areas

The case for the mobile
web We wanted to distribute the cancer.org experience as widely as possible, to as broad an audience as possible... ....It was a ‘mission imperative’ to mobilize all of our cancer.org content. — Elizabeth Hammer, principal, digital platforms, The American Cancer Society

• 50% more time spent
on mobile site Huffington Post Media • 37% more mobile unique visitors • Reaching 29% of all US mobile users

• Tenfold increase of mobile
conversions Plusnet Telco • Time to convert decreased 40%

25 principles

Site Search Commerce and Conversions
Optimizing Form Entry Site-wide Design Considerations Homepage and Navigation

Mobile homepage and
site navigation

Keep calls-to-action front and center

Keep menus short and sweet

Make it easy to get
back to the homepage

Homepage Take-aways Keep calls to
action front and center Keep menu’s short and sweet Make it easy to get back to the home page

Mobile site search

Make site search visible Search
available under menu

Ensure site search results are
relevant

Implement filters to narrow results

Guide users to better site
search results

Site Search Take-aways Make site
search visible Ensure that site results are relevant Implement filters to narrow results Guide users to better site search results

Mobile Commerce
and Conversions

Commercial is BIG on the
mobile web 94% OF USERS RELY ON SITES FOR COMMERCIAL TASKS 66% USE SITES MORE OFTEN 28% USE SITES & APPS EQUALLY 6% USE APPS MORE OFTEN ALMOST ALL ADVERTISERS SHOULD HAVE AN EFFECTIVE MOBILE SITE TO REACH THESE USERS.

Let users explore before they
commit

Let users purchase as a
guest

Pick up where you left
off

Let users explore before they
commit Commerce & Conversions Take-aways Let users purchase as a guest Enable users to pick up where they left off

Optimizing form entry

Design efficient forms

Using pre-existing information bit.ly/amazingforms for
info. on creating forms

Streamline information entry bit.ly/inputtypes for
info. on choosing the best input type Contextual keyboard

Minimize form errors with labeling
bit.ly/labelinputs for info. on labeling form fields

Provide visual calendars for dates

Real-time validation of forms bit.ly/form-validation
for info. on real time validation

Form Entry Take-aways Design efficient
forms Use pre-existing information Streamline information entry Minimize form errors with labeling Provide visual calendars for dates Real time validation of forms

Site-wide design
considerations

Don’t make users pinch-to-zoom bit.ly/responsive-basics
for responsive web fundamentals

Tappable / expandable images

Be clear why you need
a user’s location

Keep your user in a
single browser window

Don’t let promotions steal the
show

Optimize your entire site for
mobile

Don’t make users pinch and
zoom Site-wide Take-aways Provide expandable / tappable images Be clear why you need a users’ location Keep your user in a single browser window Don’t let promotions steal the show Optimize your entire site for mobile

The principles are published! google.com/think/multiscreen
Technical guidance bit.ly/web-fun

PageSpeed
Insights
bit.ly/page-speed-insights

Not just shrinking design ...

Delight the mobile consumer

Google Confidential and Proprietary How
To? ● Web Fundamentals ● Web Starter Kit ● Page speed insights ● webpagetest.org

Google Confidential and Proprietary +Ido
Green @greenido Thank you!