Understanding "Mobile Friendly" with WordPress Themes

What it Means to be “Mobile Friendly”Google and WordPress Themes

Google Versus The Humans

Google is looking for a “signal” that your site is Mobile Friendly:

Responsive Design (what WordPress themes do)

Dynamic Serving of different content based on the User Agent (not always reliable)

Mobile URL (a lot of work to maintain)

Humans are looking for a good experience:

Readability, navigation, easy access to content

You might be able to make Google happy, but doesn’t mean the humans will be happy.

Responsive WordPress Themes

Mobile Responsive - RESIZE and STACK elements for better readability on mobile devices.

Container widths use % instead of fixed pixels

Responsive themes use a combination of Viewport Meta Tag (for scaling) and @media queries (to control styling for various devices)

Viewport Meta Tag

Controls scaling of the page on different devices

A pixel is not a pixel: <200 dpi = ratio 1.0; > 200 dpi = ratio 1.5 Images can blowup (become blurry) if viewport is not handled correctly

Viewport resizing Bookmarklet tool for browsers (super cool): http://lab.maltewassermann.com/viewport-resizer/

Example (view on mobile device): http://themeblvd.com/viewport-test/

<meta name="viewport" content="width=device-width, initial-scale=1.0”>

@media Queries

Using @media query in your stylesheet allows you to change styles for different device widths:https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Hide HTML using an @media query and the display: none; property on the selector.

View examples: http://mediaqueri.es/

Testing Mobile Friendly

Change User Agent in Safari and search for website — Look for “Mobile Friendly” designation.

Check pages at https://www.google.com/webmasters/tools/mobile-friendly/

http://ready.mobi/

Requesting Recrawl

https://www.google.com/webmasters/tools/googlebot-fetch

Enter URL and click Fetch

Click Submit to Index

Choose Crawl this URL or this URL and its direct links (limit to 500 and 10 respectively per week)

Check Robots.txt file!

OLD:

NEW:

https://yoast.com/wordpress-robots-txt-example/

https://yoast.com/google-panda-robots-css-js/

Do NOT block any wp folders. This prevents Google from seeing site as Mobile Friendly.The old often heard best practice of having a robots.txt that blocks access to your wp-includes directory and our own old best practice of blocking your plugins directory are no longer valid.

Page Load Time Vs. Size

Load time #1 - Hosting big consideration

WP Super Cache - Settings for shared hosts:http://support.hostgator.com/articles/specialized-help/technical/wordpress/wp-super-cache-plugin

Cloudflare - Loads site from cloud. Wicked fast. Usually need to point DNS to their servers to work best.

Image optimization -https://wordpress.org/plugins/imsanity/ and https://wordpress.org/plugins/ewww-image-optimizer/

WordPress SEO Tips

Fix your time zone in the Settings > General

Exclude tags and perhaps categories from Sitemap

Use WordPress SEO by Yoast - includes XML sitemap and all social schema.

Use Local SEO by Yoast

Use the Social Network Auto Poster

General Advice

HTML 5 - supported by iPhone (usability of forms,etc.)

Design for ALL screen sizes

Always show all content

Optimize for touch - no mouseovers, gallery plugins should use TouchSwipe

Test on all browsers

Favicons for all devices - https://wordpress.org/plugins/favhero-favicon-generator/

Usability/Readability Factors

Navigation is most complicated part of mobile design. Buttons and clickable area heights should be 48px. This is the “fat finger factor.”

Max 10 words per line for readability on phone.

Body font of 15px or 16px is now standard.

Keep it simple!

Mobile Searches

95% mobile searches are for local info

Hours/location/phone on every page

Use link tel: - it opens the iPhone's calling application and calls the number used as the link's target.

Local SEO by Yoast is ideal!

Using Mobile Plugins

https://wordpress.org/plugins/wp-mobile-edition/ - Can set up custom mobile pages, remove theme shortcodes, custom menu (not great styling)

https://wordpress.org/plugins/wptouch/ - Nicer styling. Top mobile plugin. Works! Use until you can set up a responsive theme.

Caching can cause issues with mobile plugins: https://www.wptouch.com/support/knowledgebase/optimizing-caching-plugins-for-mobile-use/

Angela Bowmanaskwpgirl.com

Jason Bobichwpjumpstart.com

Check out Jump Start 2 Demo