Archive for June, 2010
Building a Mobile Version of your Website with Wordpress (CMS)
Tuesday, June 22nd, 2010This guide on creating a mobile version of your wordpress powered website is for sites that primarily use WP as a content management system (CMS) for static pages. If your WP powered site is mainly a blog then are plenty of plugins already available for displaying a mobile friendly version of your post.
This is part 3 of our series on building mobile versions of a website for small businesses. Be sure to check out part 1 were we cover what you need to consider before designing your mobile pages. Part 2 covers how to code mobile pages in XHTML Basic, you should glance through that before you read this guide about doing the same in Wordpress.
We are creating separate mobile specific pages here, not re-rendering your existing pages in a mobile friendly layout. Most the clients I work with are small businesses serving local areas. Their websites are mainly about the key pages that describe their services or products. If they happen to use a blog on the site it is for long-tail search traffic and link building, as well as publishing news and the like. The blog is secondary to those few static pages that say this is who we are and this is what we do, call us. It’s those key static pages we wish to mobify.
Creating the Mobile Page Template
Wordpress lets you create page specific templates in your theme. We will build one just for use on your mobile pages. You can download a copy of a mobile template similar to what is explained below here.
Create a new php file and name it mobilepages.php. Start with this;
<?php /* Template Name: Mobile Page */
Removing the Excess Out of wp_head
Wordpress adds a lot of junk to your header. Some of the plugins you use may add extra stuff there too. In the interest of minimization your pages for mobile browsers you want to omit most of that. Things like links to rss feeds, wordpress versions, parent post and adjacent post links, post archives, etc…. Bloaty, bloat, junk, junk.
In your current themes function.php file include these lines;
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
wp_generator shows the WP version number (why show this?), wlwmanifest_link is used for Window’s Live Writer (who uses that?) and rsd_link is for Real Simple Discovery, some sort of xml interface so you can blog from some other client software, besides using the WP dashboard (who uses that?). We add these the the functions.php file and they get applied to every page of your WP powered site. We don’t want them on the mobile pages, but they don’t need to be on your other pages either. Junk.
There are more actions we want to remove but just for our mobile pages. We’ll add those to the top of the template file, just below the template name, like this;
<?php
/*
Template Name: Mobile Page
*/
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action('wp_head', 'index_rel_link');
remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'adjacent_posts_rel_link');
remove_action('wp_head', 'rel_canonical');
If you are using any plugins that add links to css files or java script files you may need to code a little function to exclude those. For example, the Sociable plugin will add a css file link to all your pages, even those you’ve not enabled sociable to show on. To remove that from the mobile pages I used this code;
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'sociable-front-css' );
}
If you have other plugins that do the same you’ll need to read the php file for that plugin and find the wp_print_styles hook to determine how they named it for that plugin.
Headers and Cache Control
Same as was shown in part 2, how to code a mobile website, we need to deliver some specific HTTP Headers. Add this;
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 10;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);
header('Content-type: application/xhtml+xml; charset=utf-8');
Document types and XML version declarations
Because our template file is a php script we’ll need to echo our xml declaration, else it will be mistaken for a shorthand opening php tag. So we add this;
echo "".'<?xml version="1.0" encoding="utf-8"?>'."\n";
Wordpress Stuff in the Head
We can add our dynamic title tag and the wp-head function.
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<?php wp_head(); ?>
The Rest of our Meta Tags and the CSS file
Now we add these;
<meta name = "viewport" content = "width = device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" /> <meta name="HandheldFriendly" content="True" /> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <link href="http://domain-name.com/path/to/mobile/style.css" rel="stylesheet" type="text/css" /> </head>
The Body and the Wordpress Loop
Because our mobile pages are small, and there will not likely be a lot of them, nor a need for other mobile template variations, we can scrap creating separate header and footer template files that get injected with a php include(). We’ll just hard code them into the template. Our wordpress loop will sit inside our content div’s;
<body>
<div id="page">
<div id="header">
<a href="http://domain-name.com/m/">
<img scr="path/to/image/folder/logo.gif" alt="Business Name" width="xxx" height="yy" />
</a>
</div>
<div id="content">
<?php if(have_posts()) :
while(have_posts()) : the_post();
the_content(); ?>
<?php edit_post_link('Edit this page.', '<p>', '</p>'); ?>
<?php endwhile;
else : ?>
<?h2><?php _e('Not Found'); ?><?/h2>
<?php endif; ?>
</div>
<div id="menu">
<ul class="m">
<li class="home"><a href="http://domain-name.com/m/">Home Page</a></li>
<li class="page1"><a href="http://domain-name.com/m/page-1/">Page 1</a></li>
<li class="page2"><a href="http://domain-name.com/m/page-2/">Page 2</a></li>
<li class="page3"><a href="http://domain-name.com/m/page-3/">Page 3</a></li>
<li class="page3"><a href="http://domain-name.com/m/page-4/">Page 3</a></li>
<li class="contact"><a href="http://domain-name.com/m/contact/">Contact Us</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>Non-mobile site <a href="http://domain-name.com">Business Name</a></p>
<p>Copyright 2010 Business Name, LLC.</p></div>
</body>
</html>
You may notice the dynamic <?h1> header tag is not included there. For these mobile pages I prefer to enter then directly into the text editor instead of relying on using the post title field. That way you can use your post title field to better differentiate you mobile pages from within your full list of pages in the WP dashboard. We are also re-editing the page file url slugs so you don’t need to rely on WP making a page file name using your full title text. We want brief short URLs.
A Back/Home link for Internal Pages
Your internal mobile pages should include a noticeable link back to the home page, since the mobile browser may not have a back button. The is_page() function in Wordpress makes this easy. We’ll add an if statement that say’s “if this is not the home page, add this link” and place it in our header like this;
<div id="header">
<a href="http://domain-name.com/m/">
<img scr="path/to/image/folder/logo.gif" alt="Business Name" width="xxx" height="yy" />
</a>
<?php if (!is_page(m)) { ?>
<p><a href="http://domain-name.com/m/">Home</a></p>
<php? } ?>
</div>
I include a link to the home page in the logo at the top, by habit, but that may not be intuitive enough for most users, so the little home button does the job.
You could get more advanced and use referral agent strings to determine what the last page visited was and have the back button be an actual back button. But if you only have a handful of mobile pages and they go no deeper than 3 pages deep, a simple home button is good enough.
Upload your completed mobile page template into your current theme folder. As well its own stylesheet file.
Create Pages in Your m Folder
The Mobile Home page
I title this page the “Mobile Home Page” so I can get to it easily in the list of pages in the WP dashboard. Re-edit this page file name to be just m, instead of mobile-home-page as WP would want to do automatically. You are using pretty permalink URLs right?
In the page attribute section set this page to be a parent of the sites main home page, then select the mobile page template. Write your content and publish. You now have a mobile home page 
Add the Rest of your Pages
Create the rest of your mobile pages the same way, except now select your mobile home page to be the page parent so that your internal pages all resided inside the m folder. Publish those pages and you now have a mobile website.
Redirecting Mobile Users
We want to redirect mobile users, who happen to land on the full version of the site, to our mobile pages. We also want to redirect them to the right pages and allow them to visit the full version if they choose to.
Like we did in part 2, coding a mobile web-page, we’ll use Andy Moore’s detect mobile browsers script. Buy it, download it, and save that to your current theme’s folder. Then at the top of your header.php file, in your theme, we’ll add something like this;
<?php
if (strpos($_SERVER[HTTP_REFERER],"domain-name.com")==0) {
require_once('mobile_device_detect.php');
if (is_page(2,3,4)) {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/page-1/',false);
} elseif (is_page(5)) {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/page-2/',false);
} elseif (is_page(6,7)) {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/page-3/',false);
} elseif (is_page(9,10,11,13)) {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/page-4/',false);
} elseif (is_page(18)) {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/contact/',false);
} else {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/',false);
}
}
?>
The strpos() function is checking our referral string in the HTTP header and if it is not coming from within our domain the mobile detection sniffer goes into action. We also take advantage of the WP is_page() function to set our redirects to specific pages. If your main site has a number of similar pages on one them, yet your mobile site only has the one page on that topic, we’ll redirect all those themed pages to the one mobile page, using a series of if, elseif statements. Inside your dashboard Page edit screen you’ll be able to get the post number codes for your page you want to redirect. Just go to the edit screen for that page and view the url, or while in your dashboard view that lists all you pages just mouse over the link to edit a page and you’ll see the post id number in the url. It should look like this;
http://www.domain-name.com/wp-admin/page.php?action=edit&post=2
The post=2 part is your post number. You can enter multiple pages at once into the one function by separating them with commas.
The final else statement simply redirects every other page of the site, except those we’ve explicitly created a re-direct for, to our mobile home page.
If you wanted mobile users to be able to still read your blog posts you may want to use some sort of mobile friendly blog posts plugin then adjust the above redirects to exclude your blog pages.
Coding a Simple Mobile Website in XHTML Basic
Monday, June 21st, 2010This is part 2 of my guide on building a simple mobile version of a small business website. Part 1 covered that basic considerations you need to take into account before developing your mobile pages. Here we get into the specific of coding the pages. Part 3 will take this into building the mobile pages in Wordpress, for those sites that use it as a CMS.
A sample template of an XHTML Basic mobile web-page can be downloaded here. It includes the php coding for HTTP header delivery as discussed below.
Mobile Specific Pages vs. Mobile Friendly Pages
To keep things simple we opted to create a stand alone mobile version that resides on its own URL instead of cloaking pages to provide a mobile version on the same URL’s as the normal website. Those who support the One Web philosophy may not agree with that approach but frankly it is simpler AND in the interest of delivering usable content to different user groups with different user behaviors, the one web idea is pretty flawed (IMHO).
Location of your Mobile Page URL’s
You’ve got two options. Place them in a sub folder off the root domain or use a sub-domain. The sub-folder is probably the simplest to set-up. Some label the mobile folder or sub-domain as mobile, others mobi and some just use m. In the interest of shorter url’s I like to us the m like this;
domain-name.com/m/
Mobile Page Meta Data
Document Types
There are two major doc types that can be used for mobile web pages. WML (wireless markup language) and XHTML. WML was the standard for older phones but as more phone browsers becom more capable, XHTML BASIC 1.1 is becoming the mobile standard. We’re going to go with the XHTML as its closer to what we as web designers are familiar with, HTML.
So this would be our doc type statement at the top of the file;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
but since XHTML is a sort of XML we also need this above it;
<?xml version="1.0" encoding="utf-8"?>
Note that if your pages are able to execute php script then that the <?xml part of that code may get mistaken as php and the server try to parse it as such, generating an error. If that is the case then deliver that line with a php echo instead, like this;
<?php echo "".'<?xml version="1.0" encoding="utf-8"?>'."\n"; ?>
And we’ll also state in the html tag that this is xhtml and xml;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
Character Coding
Character coding absolutely has to be utf-8, so include this;
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
Mobile Specific Meta Tags
Modern mobile browsers on larger screened smartphones can browse normal full sized websites, but they will scale the full sized page to fit the small screen, then you would zoom in on a section of it. But because we’re building pages specifically to fit mobile screens we tell the device to not re-scale things. We also let the device know they are indeed on a mobile friendly page.
<meta name = "viewport" content = "width = device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" /> <meta name="HandheldFriendly" content="True" />
Headers and Caching
You need to send some specific HTTP headers to the device. The content type header specifies an xhtml+xml application and that it uses utf-8 character coding. Also, because mobile phones have limited memory and bandwidth restrictions you should set specific caching directives to help the device limit HTTP requests and rely on its cache, where appropriate. You want to set an expiry date, into the future and tell the device to re-validate if content has expired. In other words, as the user hops from page to page, they do not need to load the entire file set again as they revisit a page via the back button.
In php you would add this code to the top of your pages, or page template;
<?php
$offset = 60 * 60 * 24 * 10;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);
header("Cache-Control: must-revalidate");
header('Content-type: application/xhtml+xml; charset=utf-8');
?>
The offset variable there is setting the expiry date to 10 days into the future, from the day the user visits it.
If caching leaves you scratching your head there’s a great overview of it here.
The XHTML Markup
XHTML is pretty much exactly like HTML but it gets very strict on a few things. It is case sensitive and all tags and attributes must be in lowercase. All tags need to be closed, including empty ones like the image tag or break tag. For more on the differences between HTML and XML there are good references here and here.
Click to Call Links on Phone Numbers
Some smart phones will automatically turn a phone number into a click to call link, if the number exists in typical text formats for phone numbers. But not all of them do. You can use the tel attribute on an a href tag to make the phone dial that number when the link it clicked via the touch screen.
It looks like this;
<a href="tel:555-555-5555">555-555-5555</a>
If you were so inclined you could even add java on-click events to that link for tracking purposes.
Include a Back Button on Internal Pages
Most mobile browsers do not have a built in back button like your desktop browser does but we all know how handy that feature is when browsing the web. You should include a back button or link, or at the very least a home button or link at the top of your internal pages. The home page itself does not need one, of course.
For the simple types of mobile sites I’ve been building for local small businesses a home button is enough as most the mobile site pages are off the home page.
Google Analytics on Mobile Web Pages
Most mobile web browsers in modern smartphones can execute java script. The normal Google Analytics code will work just fine. There is a serverside script you can use that will let you track on phones that do not execute java but it’s really not necessary as the numbers of those are small and shrinking.
Create a Mobile Sitemap
You can create a separate, mobile specific, site map of your mobile web pages and submit it to Google via the Webmaster Tools interface. Google uses a different crawler the index the mobile web. This should get your pages crawled and indexed as mobile.
Here is an example mobile site map;
<?xml version="1.0" encoding="UTF-8" ?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">
<url>
<loc>http://www.domain-name.com/m/</loc>
<mobile:mobile/>
</url>
<url>
<loc>http://www.domain-name.com/m/page-name</loc>
<mobile:mobile/>
</url>
</urlset>
More on mobile sitemaps here.
Redirecting Mobile Users to your Mobile Website
Google has more than one version of its search results for mobile users. They get the normal universal results, or they can choose a mobile specific set of results. If they are using the normal results, which probably links to your normal web-pages, you want to employ user agent sniffing to detect that the user is coming from a phone and serve them your mobile specific pages.
I use this great php script by Andy Moore to detect mobile users and set redirects to mobile pages. It’s well worth the $50. You can set which types of mobile devices you want to redirect and which you do not. The iPad for instance may be a mobile device, but its large screen is as big as some laptops, they can use your full site.
I did however customize the call to this script to do a little more. I wanted mobile users to be able to visit the non-mobile pages and I wanted to set specific redirects for certain pages.
Allow Mobile Users to go Back to Main Site
When your mobile pages exist on a separate URL, like the simple mobile sites we are coding up here, you still want your users to be able to switch to the full sized site should they want to. You don’t want them caught in a loop of trying to go to the full version only to be redirected again back to the mobile version. I included a link to the full version of the website down in the footer of the mobile version and before the mobile browser check and redirect script kicks in I run a check on the referral string. If the mobile user came from a link on the same root domain, then there is no re-direct. If they landed on the site via any other referral, be it a search engine or a link from another site, we sniff for a mobile user agent and redirect them.
That code looks like this;
<?php
if (strpos($_SERVER[HTTP_REFERER],"domain-name.com")==0) {
require_once('mobile_device_detect.php');
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/',false);
}
?>
The strpos function finds the position of the first occurrence of a string within a larger string. Our string being the server response from the HTTP referrer header. So this will work for referrals from any page of the site, as well as from a sub-domain should you have placed your mobile version in a sub-domain versus a sub-folder of the root domain.
Redirect the Right Pages
The default set-up for most mobile user redirects is to throw them to your mobile home page, regardless of which page of your website they happened to land on. A better approach would be to redirect them to the relevant page of your mobile site, for those pages that have a similar page on the normal site. Your mobile version is probably a stripped down version of your site with fewer pages, only the most important ones. The rest of your non-mobile website pages can be redirected to the mobile home page.
The above referral check script could be adapted to do a second check for a sting referencing a particular page like this;
<?php
if (strpos($_SERVER[HTTP_REFERER],"domain-name.com")==0) {
require_once('mobile_device_detect.php');
if (strpos($_SERVER[HTTP_REFERER],"page-name.html")==0) {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/page-name/',false);
} elseif (strpos($_SERVER[HTTP_REFERER],"other-page.html")==0) {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/other-page/',false);
} else {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/',false);
}
}
?>
The referrer check and redirect script would be placed on your non-mobile pages.
Validate your Code
Once your site is complete you can check to make sure everything validates using the W3C mobileOK Checker. You can view how your mobile pages will render on an iPhone, from your descktop computer, using this iphone emulator.
And there you have it. How to build and code your mobile pages. Part 3 of this series will show how to do it in Wordpress.
Building a Simple Mobile Version of your Small Business Website
Monday, June 21st, 2010After building a few mobile versions of websites for some clients I though I would share some insights. I tend to work with small businesses that operate in local areas so this guide is catered primarily to simple ways to create a mobile version for those types of websites.
This is a 3 part series starting here with a basic overview of considerations when building a mobile version. Part 2 gets into the specifics of coding mobile pages and part 3 takes that one further with a guide on coding a mobile theme template for websites using Wordpress as a CMS.
Now onto the major considerations you need to think about before building your mobile web pages.
Target the Right Phones, the smart ones
There are oodles of cell phones on the market that are capable of browsing the web. From older phones with a small black and white, or black and green, screen not much bigger than a wrist watch to full sized touch screens like the iPhone. As we all know the growth market in mobile are these larger screened Smartphones and those are the users who are venturing onto the web via their phone. You can basically ignore those older small screen phones.
The iPad and the other tablets to come are technically mobile devices but they are not phones and their screen sizes are not much different than many laptops. If you plan on using user agent detection to redirect mobile users to your mobile version don’t include the iPad in that. Those users can use your full sized site just fine.
Minimized Page Layouts
As large as the screens are on an iPhone, or Blackberry, or Android, they are still quite small compared to a desktop monitor or laptop screen. You need to tailor your design to these small screens so your site is actually usable. Screens are small so your pages should be small, in all aspects.
Also recognize that user behavior on a phone is different than on a full sized monitor. People browsing the web from a phone, and in particular if they are searching for a local business, are in a hurry. They want to very quickly find what they are looking for then go about their day. They do not want to read pages and pages of text so make your mobile web pages very short and concise. Get right to the point an avoid fluff. A headline and a few sentences of text plus a call to action can often be enough.
Flexible Layouts for Different Screen Sizes
Among the large screen smart phones screen dimensions vary widely. Design your mobile pages to fit most the phones out there by using dynamic page widths. Or if you need or want to use a fixed width then make it small enough to fit some of the smaller phones yet render nicely, but not too small, on larger phones.
Small file sizes for speed
The mobile web is slower than a hard-line high speed connection. Many mobile users are also on data plans with bandwidth restrictions. Keeping your page files, style sheets, and image files light will speed up load times and help conserve your users bandwidth. Keep your code light. Bare bones HTML markup and make sure your css is not declaring styles for elements you are not using. If you are including a contact page with an email form, the css for that form can be as large as that for rest of your site markup. In that case you should serve the css for that form separately so it is only loaded when that page is viewed, not all your pages.
Minimize the use of images and where you do include an image optimize it. Re-size images to fit a typical phone screen. When saving jpeg images, if your software lets you, reduce the image quality percentage down to 6o% to 70%. That is enough that the human eye can’t quite see the image degradation yet can cut file sizes, in bytes, by 50% or more.
Site Navigation, again minimal
The mobile version of your website likely only needs a handful of core pages. Most local small businesses don’t have a very large website to begin with. Your mobile website can be as small or smaller. Just focus on your primary service/product pages, plus the home page and a contact page.
Many guides on best practices for mobile web design will tell you to place your navigation links at the bottom of the page. A decent idea, except I prefer to include it right up top on the home page, below the header but above the primary page content. This helps users get to the specific page they need. Internal pages can stick to the navigation on bottom rule.
A Sample Small Biz Website with Mobile Pages
I recently finished up a mobile version for a client, an air conditioning company in Houston, Texas. If you are viewing that link from a full sized web browser (Firefox, Chrome, or Opera), just shrink your window to about iPhone width to see how the mobile pages would render. But if you are using Internet Exploder you won’t be able to see it as it does not know what to do with xml.
Their full website, here, has about 40 static pages, not including blog posts. The mobile version has a grand total of 9 pages. We cover just their primary products and services and a couple pages about their pricing policy and guarantees. That’s it. Come winter we’ll add a page for gas furnaces but there is no rush on that.
You can see the difference in content between their full page for ac repairs versus the mobile ac repair page. The mobile version is much thinner on content, else the user would need to scroll about 10 screen heights to get it all. We focused on delivering the message in a few words as needed and emphasized the contact button and click to call links.
A Simple Search Optimization Tip
Include your phone number in your meta description tags. Phone numbers, even when just plain text, become a click-able link that will dial the number on some smartphones. When a user does a Google search and that description tag as displayed in the results, people can click to call without even visiting your website. Certainly worth adding.
Now that those things are covered, on to coding up your mobile web pages.
