1. #mobileweb
Design For Mobile World

2. Ido Green
@greenido
+GreenIdo
devheb.com

3. 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.

4. 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

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

6. (Bold) Examples

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

8. 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

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

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

11. 25 principles

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

13. Mobile homepage and
site navigation

14. Keep calls-to-action front and center

15. Keep menus short and sweet

16. Make it easy to get back to the homepage

17. 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

18. Mobile site search

19. Make site search visible
Search
available
under
menu

20. Ensure site search results are relevant

21. Implement filters to narrow results

22. Guide users to better site search results

23. 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

24. Mobile Commerce
and Conversions

25. 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.

26. Let users explore before they commit

27. Let users purchase as a guest

28. Pick up where you left off

29. 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

30. Optimizing form entry

31. Design efficient forms

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

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

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

35. Provide visual calendars for dates

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

37. 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

38. Site-wide design
considerations

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

40. Tappable / expandable images

41. Be clear why you need a user’s location

42. Keep your user in a single browser window

43. Don’t let promotions steal the show

44. Optimize your entire site for mobile

45. 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

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

47. PageSpeed
Insights
bit.ly/page-speed-insights

48. Not just shrinking design ...

49. Delight the mobile consumer

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

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