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.
Mobile Responsive -
RESIZE and STACK elements
for better readability on mobile
Container widths use %
instead of ﬁxed pixels
Responsive themes use a combination
of Viewport Meta Tag (for scaling) and
@media queries (to control styling for
Viewport Meta Tag
Controls scaling of the page on
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):
Example (view on mobile device):
<meta name="viewport" content="width=device-width, initial-scale=1
Using @media query in your stylesheet allows you to
change styles for different device widths:
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://
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!
Do NOT block any wp folders. This
prevents Google from seeing site as
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.
Time Vs. Size
Load time #1 - Hosting big consideration
WP Super Cache - Settings for shared hosts:
Cloudﬂare - Loads site from cloud. Wicked fast.
Usually need to point DNS to their servers to work best.
Image optimization -https://wordpress.org/plugins/imsanity/
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
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 -
Navigation is most complicated
part of mobile design. Buttons
and clickable area heights should
be 48px. This is the “fat ﬁnger
Max 10 words per line for
readability on phone.
Body font of 15px or 16px is now
Keep it simple!
95% mobile searches are for
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
Caching can cause issues with mobile plugins: https://
Check out Jump Start 2 Demo