1. Mobile Best Practices & Essential Tips
Title Slide
For a photo background you can use:
One of provided general images (see back of slide deck)
A custom photo specific to a destination you are presenting to. In this case, to replace the image, select and make the gray overlay box smaller or send it behind the photo, right click on a photo and chose – change picture. Then relink it to your new jpg file. The size of the background needs to be 1000 px x 750 px 72 dpi.
You can also use a gif animation or video as a background, but keep in mind it will increase the overall file size of presentation and will make hard to share.

2. Agenda Mobilization Options Google and Mobile Measuring performance
Using Analytics
Challenges and Easy Tricks
Mobilization Case Study
What is next with Mobile?

3. Mobilization Options
M-dot Adaptive
Single URL Adaptive
Responsive

4. M-dot Industry's first mobile solution Improvement over desktop site
Can be low cost and fast to implement
Increased maintenance
Slower due to redirect
SEO Compliance issue
Analytics issues
Social sharing issues

5. Responsive - RWD One entity – easier to maintain Improved SEO
Social Sharing
Requires site redesign
Slower load times – downloads everything
One template

6. Single URL Adaptive Customized layout for each device
Faster load times
No need to alter desktop site
Can be difficult to implement
More costly than an m-dot site

7. Mobilegeddon
Google’s announcement
Most searches are mobile

8. How Google Views Mobile
Google’s two bots
Desktop bot
indexes content
Mobile bot
checks mobile usability and speed
Single URL

9. Measuring Performance

10. Measuring Performance
developers.google.com/pagespeed

11. Using Analytics to Measure Success
Setting goals
Checkouts
Contacts
Pages per visit
Time on site
Segmenting by device type

12. Using Comparisons

13. Challenges and Easy Tricks
Font-size
Minimum tap targets
Tabular data
Contextual Keyboards
Turn Off Autocorrect and Autocapitalize

14. Font Size Use px instead of em or rem
Ideally, use 14px to 16px for content
12px as a minimum - some browsers enforce this
1.5x line height

15. Tap Targets Buttons instead of links
40px to 50px square or larger is good “rule of thumb”
25px can still work…

16. Tabular Data
Cards are your friends

17. Input types <input type="text"> <input type=“search">
<input type=“number">
<input type="tel">
<input type=“date">
<input type=“time">
<input type=“ ">
<input type=“url">
<input type=“color">
<input type=“range">

18. Case Study

19. Measuring Performance

20. Measuring Performance
developers.google.com/pagespeed

21. developers.google.com/pagespeed
Case Study
developers.google.com/pagespeed

22. Configure the Viewport
Case Study
Configure the Viewport
<meta name=viewport content="width=device-width, initial-scale=1">
Allow the page to scale for mobile display.

23. 14px generally works for a mobile viewport
Case Study
Legible Text
14px generally works for a mobile viewport

24. Tap Targets Case Study 48px 48px 48px
“spacing between [....] so that a 10mm finger pad would not accidentally press both links at once”

25. developers.google.com/pagespeed
Case Study
developers.google.com/pagespeed

26. developers.google.com/pagespeed
Case Study
developers.google.com/pagespeed

27. Case Study

28. Case Study
25%
Increase in Pages Per Visit

29. Accelerated Mobile Pages
Google led project
Subset of HTML
Insanely fast

30. Google AMP
Increase Traffic
Increase Reach

31. Web Push
The web is becoming more app like

32. Mobile First? Graceful Degradation vs. Progressive Enhancement
Best system to generate ideas?
Design vs development

33. Key Points to Remember Benchmark your performance
Notate your analytics
Test on multiple devices