This is a presentation I delivered as part of Wordcamp 2013 Vancouver #wcyvr

1. How to optimize your
blog for mobile traffic
Steven Zussino, Grocery Alerts Canada
http://www.groceryalerts.ca/
@groceryalerts @travelhackingCA
Wordcamp 2013 Vancouver #wcyvr

2. Introduction
 Mobile web usage is exploding and by
2014, more people will use smartphones
than desktops to get online.
 What are the numbers on your blog?
 What are the options in Wordpress?
 How can I test my blog on a mobile
device?

3. About me
 From Victoria, BC
 Beautiful wife and
daughter
 Love to travel and
help people and
save money.

4. Mobile Traffic - Google Analytics,
under Audience section, select
Mobile > Overview.

5. Testing Performance On Mobile
Devices
Here are some free performance-testing tools:
 Mobitest, Akamai
Generate waterfall charts and HAR files for the
iPhone 4 iOS 5.0, iPhone 3G and Nexus S.
 Network Panel, Chrome Developer Tools
Generate waterfall charts and HAR files from the
Chrome browser. Switch the user agent to an
iPhone (iOS 4 or 5), Nexus S, Galaxy Nexus,
BlackBerry 9900, BlackBerry BB10 or Nokia N9

6. Google’s Free Testing Tool
 Google provides a website called How to Go
Mo which helps you test your mobile
website for mobile compatibility.
 To test your site, go to the Mobile
Meter page, enter in your website address
and click Test Your Site.

7. Google’s Free Testing Tool
Example

8. Importance of Speed
 64% of smartphone users expect websites to
load in 4 seconds or less, while the average
website takes more than twice that amount,
at 9 seconds.
 Source

9. How To Minimize Loading Time
 Reduce Dependencies
Fewer files to download means fewer HTTP
requests and faster loading times.
 On mobile CSS – make sure that you use
background images.
 Using display: none or visibility:
hidden won’t prevent them from being
downloaded in browser.

10. How To Minimize Loading Time
 Combine Stylesheets and Javascript
Fewer files to download means fewer HTTP
requests and faster loading times.
 Use CSS3 to create buttons and widgets to
prevent extra images from loading.
 Source

11. Font Icons
WordPress.com example. Here’s the Web font
embedded in its style sheet:

12. What are our options in
Wordpress?
 Build a separate mobile version of your
website (m.yourblog.com)
 Use a Mobile-Optimized Theme
 Build a Responsive Design
 Native Application

13. Mobile version of your website
 Basically building 2 blogs,
one for a desktop and one
for a mobile device.
 When someone visits your
website from a mobile
device, they are redirected to
your mobile website (with
different graphics and
layout).

14. Wordpress Mobile Tip -
DudaMobile WordPress plugin
 Can set up a mobile
website redirect that
automatically
redirects visitors to
your mobile version if
they arrive on your
website from a
mobile device.
 Source

15. Pros and Cons
Pros:
 It is inexpensive to build, and in some cases you can build it for free.
 With a separate site, you can tailor the content to the needs of your
mobile readers that won’t be replicated on the desktop version of your
website.
Cons:
 Hassle to maintain both versions of website (mobile/desktop).
 Redirection issues (mailing links).
 You don’t have a version that is suitable for tablets.
 If you do not follow Google’s recommendations, you can damage your
potential for ranking in their search results.
 If you use a third-party service to develop a mobile version and you host
it with them, this can affect the ranking of your site on Google.

16. Use a Mobile-Optimized Theme
 WPtouch is a WordPress plugin that automatically
enables a simple and elegant mobile theme for
mobile visitors of your WordPress website. The
mobile theme is complete with AJAX loading
articles and smooth effects when viewed from
popular touch mobile devices like the iPhone, iPod
touch, Android mobile phones, BlackBerry OS6+
mobile devices, and more.
 The administration panel allows you to customize
many aspects of its appearance, and deliver a fast,
user-friendly and stylish version of your site to your
mobile visitors, without modifying a single bit of
code (or affecting) your regular desktop theme.
 The theme also includes the ability for visitors to
switch between your mobile WordPress website and
your website's regular theme.

17. Pros and Cons
Pros:
 You only have one website with a different theme displayed for
mobile.
 The website is lightweight and fast.
 It can be very easy to get up and running (using WPTouch)
Cons:
 As this option is limited on graphics, you lose a bit of branding as
your mobile site does not look identical to your website.
 If you want it to work correctly on tablet devices, you need to
have a theme that supports these devices.
 Google recommends a responsive theme, so it’s difficult to
ignore this.

18. Responsive Design
 A responsive design means that your content
automatically adjusts to the size of your device.
You have one website and one set of content,
but depending on what device you display it on,
it is automatically laid out differently.
 Imagine if you had three columns of information
on a desktop device. On an iPad, you may only
display it in two columns, or one column on an
iPhone. Any information that cannot be
displayed gets moved below, therefore
eliminating any scrolling to the right.

19. Responsive Design Example -
http://ami.responsivedesign.is

20. Pros and Cons
Pros:
 You can have different displays suitable to the particular device so you have a good
viewing experience.
 You have one website to manage, as there is only one set of content. With mobile sites,
you could have only one set of content if it’s just a blog. It gets more complicated if you
end up changing content on your mobile site and not on your desktop or you start adding
functionality such as new menus.
 With a responsive design, you can also have the image sizes adjusted so that you are not
downloading large images on a mobile device.
 Google recommends that you use a responsive design.
Cons:
 It’s more expensive to get a responsive design built than a normal mobile website.
 It may not be possible to make an old website responsive, so you may have to start again
with a new website.
 Slower performance—A mobile website generally has less content, so with a responsive
design it displays slower. You can improve this by creating smaller image sizes specific to
different devices but generally the speed will still be slower.
 More difficult to navigate the site—Your mobile users have different requirements than
your desktop users. They don’t have as much time or patience and want a simple way of
navigating.

21. Questions?