First, for a sobering look at how your site parses in mobile browsers, check out these mobile preview applications: Skweezer, Google, and the live demo of Opera Mini. Chances are your site is not immediately navigable in the mobile environment or you’ll hate what it looks like.
When polled during a recent Chris Sherman mobile search web event, most pro SEM attendees indicated that they had not yet geared shop production to consider and exploit the rapidly expanding field of mobile search. This will certainly change.
“… it’s really not a matter IF the mobile phone will become the dominant internet platform any more but WHEN…” – Yahoo! analyst Russell Beattie
Adopt Last September comScore Networks estimated that in the
Compared to traditional web search, mobile search remains a relatively small piece of the pie. That said, the looming mobile marketplace is vast and can’t be ignored. We advise our clients to consider mobile versions of their sites for any web production with an expected shelf life of over 18 months.
Last September comScore Networks estimated that in the
There are a number of issues. This post discusses tips, tricks, and techniques for successful development of alternate mobile versions while demystifying the action-steps required to design, build, deploy, and market mobile websites.
2 Schools of Mobile Thought
There are 2 schools of thought regarding mobile site creation, double duty sites (where a single site acts as both mobile and wired) and multiple site versions. Each method can involve HTTP User-Agent headers, HTTP Accept Headers, and UAProf to identify the mobile browser and redirect to properly formatted content as appropriate. Wikipedia has a very useful list of user agents for your reference. It is possible to use.asp or PHP to detect mobile phones.
It can be practical to adapt existing website hierarchical structure. The site map is already there as are content attributes like text. The “double-duty” approach uses CSS to configure a single website to “auto-adapt,” functioning as both the mobile and wired editions. Exclusions, based on browser platforms, make available an alternative mobile-friendly version which only mobile users see. In essence this method “hides” page elements from mobile users or traditional (wired) browsers.
Double-Duty and Tricks
Employ multiple style sheets. At minimum designate one style sheet for normal web browsers (wired traffic) and a second style sheet (below the first) for mobile browsers.
Employ the CSS attribute “display: none” to mask page elements for either mobile or wired renderings. This method makes it possible to hide page elements from each type of visitor. The hybrid approach makes it feasible to use a single site structure for both browsing environments.
Use these headers to identify your visitor’s mobile device: HTTP User-Agent headers, HTTP Accept Headers, and UAProf. Be sure to utilize the appropriate MIME type: “text/html” or “application/xhtml+xml”.
The Multiple Sites Approach
Others prefer completely separate creative and technical processes for wired and mobile site design and development. The basis of this approach is rooted in the belief that mobile visitors should experience a totally different and more streamlined user experience and information design because they are more task-oriented. At SES Rachael Pasqua suggested that mobile is “not surf media, it’s search media”. She recommends developing on a subdomain (mobile.yourDomain.com) rather than a .mobi extension in order to retain the top level domain name without having to re-brand.
Mobile Website Design Essentials
Regardless of the approach you choose, it is critical that mobile websites be 100% W3C XHTML compliant because mobile browsers are completely unforgiving when it comes to improper coding. Strict adherence to XHTML accessibility guidelines offers the most reliable website experience for users. As an important aside XHTML compliance also provides adaptive users, who have special accessibility needs like the deaf and blind, access to content via their interpretative devices.
Mobile browsing requires different content placement like big navigation buttons at the top and bottom of the screen. Keep download times short. Bandwidth is still an issue in the mobile environment.
Make sure the site uses CSS to control the appearance of content. External CSS files can be used to designate a different style sheet for each mobile browser. When attaching style sheets, use the LINK element because is a friendlier format for mobile browsers.
Mobile Site Optimization
Some mobile optimization techniques are entirely different than wired sites. Other basic principles still hold true. For starters, the screen is only 2 or 3 inches, downloads can be slow, and visitors tend to be more results oriented. Here are some tips:
Key performance marketing goals (KPI) should be no more than 1-3 clicks away from the homepage. Don’t use fancy funnels to convert.
Place main content at the top of the first page and follow with navigation. Though opposite from traditional web design (nav bars on top), mobile users want to see changing content quickly enough to know they are on a different page- as opposed to a replay of navigation elements. In this small screen format, top nav bars eat up a significant portion each pages first field of view. Mobile visitors do not want to scroll to realize that they are on a new page holding the content they seek.
Keep the navigation very simple using large text links. Provide fewer navigation options to pages that have less information. Use images only when needed to accomplish the KPI. For more complex navigation, create menu-only pages with big text link nav options. Practice good old fashioned call-to-action principles early and often.
Use sitemaps and robots.txt so that spiders can quickly index your mobile site while avoiding the possibility of duplicate content.
Use pretty URLs which employ keywords.
Optimize your site for 1-2 word keyphrases. Mobile users tend to search for smaller phrases with fewer words (the big thumb factor).
Use <H> (heading) and bold html tags. As with traditional web design, html tags like H and Bold send signals to mobile search engines regarding content you designate as core.
Be strategic and intentional in mobile specific link building campaigns and dedicate efforts to mobile URL marketing tactics. Submit to mobile and local directories and seek links from other mobile sites.
Traditional PR buzz tactics like brick and online press releases help to garner additional inbound links. Mobile search is still young enough that it is “news” in some arenas that your product or services are offered via mobile. Take advantage of being an early adopter with good PR.
Integrate social media tagging and social bookmarking tools on your mobile pages. My belief is that social behavior via the mobile web is the future. All we need to look at is text messaging as the harbinger.
Be sure phone numbers are clickable. Keep in mind while mobile handsets usually render phone numbers clickable, the following syntax helps to ensure this: < href=”tel:2503851190″>250-385-1190</a>. It should be obvious that the KPI for mobile applications is often a visitor calling a phone number. Your clickable phone number and main website address should be in the footer of each mobile page.
Protect your brand. If you decide not to use the .mobi domain for your brand’s mobile site, purchase it anyway to defend your brand. Forward traffic to the actual mobile site by way of a 301 redirect from the .mobi address.
It is true that Google offers a transcoding application which does it’s level best to parse any website to mobile automatically. Do not depend on this technology. You likely won’t enjoy the results.
Keep your mobile URL very short and easy to remember. A significant amount of mobile traffic comes from direct visitors who type in your URL.