Upload
groceryalerts
View
1.961
Download
2
Embed Size (px)
DESCRIPTION
This is a presentation I delivered as part of Wordcamp 2013 Vancouver #wcyvr
Citation preview
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?