How to optimize your blog for mobile traffic

Steven Zussino, Grocery Alerts Canada

http://www.groceryalerts.ca/

@groceryalerts @travelhackingCA Wordcamp 2013 Vancouver #wcyvr

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?

About me

From Victoria, BC Beautiful wife and

daughter Love to travel and

help people and save money.

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

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 ToolsGenerate 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

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.

Google’s Free Testing Tool Example

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

How To Minimize Loading Time

Reduce DependenciesFewer 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.

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

Font Icons

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

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

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).

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

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.

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.

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.

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.

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

Pros and ConsPros: 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.

Questions?