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

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

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. 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. 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. @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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Angela Bowman
askwpgirl.com
Jason Bobich
wpjumpstart.com
Check out Jump Start 2 Demo