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.

How to optimize your blog for mobile traffic


Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

How to optimize your blog for mobile traffic

  1. 1. How to optimize your blog for mobile traffic Steven Zussino, Grocery Alerts Canada @groceryalerts @travelhackingCA Wordcamp 2013 Vancouver #wcyvr
  2. 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. 3. About me  From Victoria, BC  Beautiful wife and daughter  Love to travel and help people and save money.
  4. 4. Mobile Traffic - Google Analytics, under Audience section, select Mobile > Overview.
  5. 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. 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. 7. Google’s Free Testing Tool Example
  8. 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. 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. 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. 11. Font Icons example. Here’s the Web font embedded in its style sheet:
  12. 12. What are our options in Wordpress?  Build a separate mobile version of your website (  Use a Mobile-Optimized Theme  Build a Responsive Design  Native Application
  13. 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. 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. 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. 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. 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. 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. 19. Responsive Design Example -
  20. 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. 21. Questions?