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.

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

Mobilization Options M-dot Adaptive Single URL Adaptive Responsive

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

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

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

Mobilegeddon Google’s announcement Most searches are mobile

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

Measuring Performance www.webpagetest.org

Measuring Performance developers.google.com/pagespeed

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

Using Comparisons

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

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

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

Tabular Data Cards are your friends

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

Case Study

Measuring Performance www.webpagetest.org

Measuring Performance developers.google.com/pagespeed

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

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.

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

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

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

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

Case Study http://54.153.16.170/video/view.php?id=160315_9d5a732037bc32486288e66bd224e5d513d6a2d0

Case Study 25% Increase in Pages Per Visit

Accelerated Mobile Pages Google led project Subset of HTML Insanely fast

Google AMP Increase Traffic Increase Reach

Web Push The web is becoming more app like

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

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