Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#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 ...
Google Confidential and Proprietary
86%
14%
Sources: Time spent stats: http://www.flurry.com/bid/109749/Apps-Solidify-Lead...
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 mo...
The case for the mobile web
We wanted to distribute the cancer.org
experience as widely as possible, to as broad
an audien...
• 50% more time spent on mobile site
Huffington Post
Media
• 37% more mobile unique visitors
• Reaching 29% of all US mobi...
• 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...
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
...
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...
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 ...
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 error...
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’ l...
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!
Upcoming SlideShare
Loading in …5
×

Mobile Site For Mobile World

13,135 views

Published on

It's a mobile world out there. You wish your site (and apps) to be 'mobile first' and make sure they are using the best practices for mobile. It's important to remember that E-commerce occurs across apps and web, but consumers rely disproportionately on mobile web for commercial tasks. In these slides we will show you how to improve your sites/app for the new world.

Good luck!

Published in: Mobile, Design, Technology

Mobile Site For Mobile World

  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!

×