Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 WordP...
Responsive
WordPress Themes
Mobile Responsive - 

RESIZE and STACK elements 

for better readability on mobile 

devices.
...
Viewport Meta Tag
Controls scaling of the page on
different devices
A pixel is not a pixel: <200 dpi =
ratio 1.0; > 200 dp...
@media Queries
Using @media query in your stylesheet allows you to
change styles for different device widths:

https://css...
Testing Mobile Friendly
Change User Agent in Safari and
search for website — Look for
“Mobile Friendly” designation.
Check...
Requesting Recrawl
https://www.google.com/webmasters/tools/googlebot-fetch
Enter URL and click Fetch
Click Submit to Index...
Check Robots.txt file!
OLD:

















NEW:



https://yoast.com/wordpress-robots-txt-example/
https://yoast.com/goo...
Page Load
Time Vs. Size
Load time #1 - Hosting big consideration
WP Super Cache - Settings for shared hosts:

http://suppo...
WordPress SEO Tips
Fix your time zone in the Settings > General
Exclude tags and perhaps categories from Sitemap
Use WordP...
General Advice
HTML 5 - supported by iPhone (usability of forms,etc.)
Design for ALL screen sizes
Always show all content
...
Usability/Readability Factors
Navigation is most complicated
part of mobile design. Buttons
and clickable area heights sho...
Mobile Searches
95% mobile searches are for 

local info
Hours/location/phone on every page
Use link tel: - it opens the i...
Using Mobile Plugins
https://wordpress.org/plugins/wp-mobile-edition/ - Can
set up custom mobile pages, remove theme short...
Angela Bowman

askwpgirl.com

Jason Bobich

wpjumpstart.com
Check out Jump Start 2 Demo
Upcoming SlideShare
Loading in …5
×

Understanding "Mobile Friendly" with WordPress Themes

2,667 views

Published on

This is an overview of how mobile WordPress themes work and mobile considerations.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Understanding "Mobile Friendly" with WordPress Themes

  1. 1. What it Means to be “Mobile Friendly” Google and WordPress Themes
  2. 2. 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.
  3. 3. 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)
  4. 4. 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
  5. 5. @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/
  6. 6. 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/
  7. 7. 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)
  8. 8. 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.
  9. 9. 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/
  10. 10. 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
  11. 11. 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/
  12. 12. 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!
  13. 13. 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!
  14. 14. 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/
  15. 15. Angela Bowman
 askwpgirl.com
 Jason Bobich
 wpjumpstart.com Check out Jump Start 2 Demo

×