understanding "mobile friendly" with wordpress themes
TRANSCRIPT
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/