mobile site for mobile world
TRANSCRIPT
![Page 1: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/1.jpg)
#mobileweb
Design For Mobile World
![Page 2: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/2.jpg)
Ido Green
@greenido
+GreenIdo
devheb.com
![Page 3: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/3.jpg)
Source: Data from BI Intelligence (http://www.businessinsider.com/state-of-internet-slides-2012-10?op=1)
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.
![Page 4: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/4.jpg)
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.
TIMESPENTON SITES
TIMESPENTON 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 SPENTON MOBILE DEVICES
![Page 5: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/5.jpg)
We’ve heard them...
harder to navigate
sparse in features
poor on design
cut down
unfamiliar
smaller
sparse in features
![Page 6: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/6.jpg)
(Bold) Examples
![Page 7: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/7.jpg)
• 250% increase in mobile visits
Cancer.orgInformational
• 3x increase in mobile revenue (donations)
• Higher rates of mobile access to key areas
![Page 8: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/8.jpg)
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
![Page 9: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/9.jpg)
• 50% more time spent on mobile site
Huffington Post Media
• 37% more mobile unique visitors
• Reaching 29% of all US mobile users
![Page 10: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/10.jpg)
• Tenfold increase of mobile conversions
PlusnetTelco
• Time to convert decreased 40%
![Page 11: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/11.jpg)
25 principles
![Page 12: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/12.jpg)
SiteSearch
Commerceand
Conversions
OptimizingFormEntry
Site-wideDesign
Considerations
Homepage and
Navigation
![Page 13: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/13.jpg)
Mobile homepage and site navigation
#primarypurpose#identifyneeds
![Page 14: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/14.jpg)
Keep calls-to-action front and center
![Page 15: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/15.jpg)
Keep menus short and sweet
![Page 16: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/16.jpg)
Make it easy to get back to the homepage
![Page 17: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/17.jpg)
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
![Page 18: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/18.jpg)
Mobile site search#visible #smart#relevant
![Page 19: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/19.jpg)
Make site search visible
Search availableunder menu
![Page 20: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/20.jpg)
Ensure site search results are relevant
![Page 21: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/21.jpg)
Implement filters to narrow results
![Page 22: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/22.jpg)
Guide users to better site search results
![Page 23: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/23.jpg)
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
![Page 24: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/24.jpg)
Mobile Commerce and Conversions
#explore#purchaseasguest#crossdevice
![Page 25: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/25.jpg)
Commercial is BIG on the mobile web
94% OF USERS RELY ON SITES FOR COMMERCIAL TASKS
66% USE SITES MORE OFTEN28% USE SITES & APPS EQUALLY6% USE APPS MORE OFTEN
ALMOST ALL ADVERTISERS SHOULD HAVE AN EFFECTIVE MOBILE SITE TO REACH THESE USERS.
![Page 26: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/26.jpg)
Let users explore before they commit
![Page 27: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/27.jpg)
Let users purchase as a guest
![Page 28: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/28.jpg)
Pick up where you left off
![Page 29: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/29.jpg)
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
![Page 30: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/30.jpg)
Optimizing form entry
#efficientforms#pre-exisiting info#real-timevalidation
![Page 31: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/31.jpg)
Design efficient forms
![Page 32: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/32.jpg)
Using pre-existing information
bit.ly/amazingforms for info. on creating forms
![Page 33: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/33.jpg)
Streamline information entry
bit.ly/inputtypes for info. on choosing the
best input type
Contextual keyboard
![Page 34: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/34.jpg)
Minimize form errors with labeling
bit.ly/labelinputs for info. on labeling form
fields
![Page 35: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/35.jpg)
Provide visual calendars for dates
![Page 36: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/36.jpg)
Real-time validation of forms
bit.ly/form-validation for info. on real time validation
![Page 37: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/37.jpg)
Form Entry Take-aways
Design efficient formsUse pre-existing informationStreamline information entryMinimize form errors with labelingProvide visual calendars for datesReal time validation of forms
![Page 38: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/38.jpg)
Site-wide design considerations
#expandableimages#avoid“fullsite”labeling#findnearme#singlebrowserwindow#controlpromotions
![Page 39: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/39.jpg)
Don’t make users pinch-to-zoom
bit.ly/responsive-basics for responsive web
fundamentals
![Page 40: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/40.jpg)
Tappable / expandable images
![Page 41: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/41.jpg)
Be clear why you need a user’s location
![Page 42: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/42.jpg)
Keep your user in a single browser window
![Page 43: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/43.jpg)
Don’t let promotions steal the show
![Page 44: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/44.jpg)
Optimize your entire site for mobile
![Page 45: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/45.jpg)
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
![Page 46: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/46.jpg)
The principles are published!google.com/think/multiscreen
Technical guidance bit.ly/web-fun
![Page 47: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/47.jpg)
PageSpeed Insightsbit.ly/page-speed-insights
![Page 48: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/48.jpg)
Not just shrinking design ...
![Page 49: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/49.jpg)
Delight the mobile consumer
![Page 50: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/50.jpg)
Google Confidential and Proprietary
How To?● Web Fundamentals
● Web Starter Kit
● Page speed insights
● webpagetest.org
![Page 51: Mobile Site For Mobile World](https://reader035.vdocuments.net/reader035/viewer/2022062419/55a5241b1a28ab63018b4600/html5/thumbnails/51.jpg)
Google Confidential and Proprietary
+Ido Green@greenido
Thank you!