Most people like to watch online video. Some business owner remain doubtful about the profit of incorporating online video into…
Coding a Simple Mobile Website in XHTML Basic
This 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>
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);
}
}
?>
Contact HeyGoTo at (702) 475-4227 or go to www.HeyGoTo.com today to find out how we can help you! To read more industry information go to the HeyGoTo Blog at http://heygoto.com/wordpress/
The following two tabs change content below.
My Mission is to Motivate & Empower others to Genuinely Succeed with Online Marketing through Training & Mentoring!
Latest posts by David Moceri (see all)
- - August 12, 2023
- Internet Marketing – The Art of Capturing Market Share - May 20, 2017
- Top 3 Social Media Mistakes Online Marketers Need to Avoid - December 31, 2016
This post was written by David Moceri
