mobile optimization

19
Mobile Optimization

Upload: rachel-howe

Post on 15-Aug-2015

102 views

Category:

Mobile


2 download

TRANSCRIPT

Page 1: Mobile Optimization

Mobile Optimization

Page 2: Mobile Optimization

Agenda

• Overview of Mobile Optimization• Mobile Website Options• Common Mistakes• Resources

Page 3: Mobile Optimization

Overview

Page 4: Mobile Optimization

Optimizing for mobile means that you are making your site easily accessible and easy to use for mobile visitors.

Overview

Page 5: Mobile Optimization

Mobile Website Options

Page 6: Mobile Optimization

Mobile Website Options• Mobile Site

– m.example.com

• Responsive– Same as desktop version of the site (HTML is

the same), but fits to mobile devices (CSS changes).

• Adaptive (Dynamic)– Has some slight changes in styling to be more

user friendly to mobile users.

Page 7: Mobile Optimization

Responsive design is highly recommended by Google

Page 8: Mobile Optimization

Code Sample:

Page 9: Mobile Optimization

Dynamic

Code Sample:

Example above from the Google Developers Blog

Page 10: Mobile Optimization
Page 12: Mobile Optimization

Common MistakesBlocked JavaScript, CSS and image files

• Use “Fetch as Google” feature in Google Webmaster Tools to see how Googlebot sees and renders your content. It will help you identify and fix a number of indexing issues on your site.

• Check and test your robots.txt in Google Webmaster Tools.• Test your mobile pages with the Mobile-Friendly Test to see if

our systems detect your website as compatible for mobile users.

• If you use separate URLs for your mobile pages, make sure to test both the mobile and the desktop URLs, so you can confirm that the redirect is recognized and crawlable.

Page 13: Mobile Optimization

Common MistakesUnplayable content

• Use HTML5 standards for animations to provide a good experience.• Use video-embedding - that’s playable on all devices!• Consider having the transcript of the video available. This will make your site

accessible to people who use assistive browsing technologies or who have browsers that cannot play a proprietary video format.

Page 14: Mobile Optimization

Common MistakesFaulty redirects

Page 15: Mobile Optimization

Common MistakesFaulty redirects

• Use WMT to check faulty redirects• Set up your server so that it redirects smartphone users to the equivalent

URL on your smartphone site.• If a page on your site doesn’t have a smartphone equivalent, keep users on

the desktop page, rather than redirecting them to the smartphone site’s homepage.

Page 16: Mobile Optimization

Common MistakesMobile only 404s

Page 17: Mobile Optimization

Common MistakesApp download interstitials

Stick with option #2

Page 18: Mobile Optimization

Resources