Making the Most of Mobile

SES Chicago 2006

By: Cindy Krum

Overview

Is your site ready for mass adoption of mobile web technology? Begin planning for the future now.

Mobile search allows you to search for websites that are specifically designed for mobile phones and devices.

The goal of this presentation is to help you optimize sites to be viewed and found in search engines, whether the user is on a traditional computer, or mobile web technology.

Mobile web crawlers will evaluate your site as if it was being displayed on a mobile device, so you should too. Sites that are hard to use on mobile web will not be found by mobile search engines.

Overview

Basic Best Practices Code Best Practices Navigation Best Practices

Basic Best Practices

Basic Best Practices: Submit Your Site to the Major Mobile Search Engines

Google Mobile & Mobile Local - Submit through Google Mobile Site Maps:

http://www.google.com/support/webmasters/bin/answer.py?answer=34648 Use the traditional submission form at

http://www.google.com/addurl/ and put ‘mobile’ in the comments field.

Be sure to submit to regular Google Local. Yahoo Mobile: http://search.yahoo.com/free/mobile/request Technorati Mobile - http://m.technorati.com/ My Mob Search - http://mymobsearch.com/web/add_your_site.php

MSN Mobile/Windows Live, AOL Mobile, Nokia Mobile Search, 4INFO Mobile Search, Infospace Mobile.

Basic Best Practices: Begin Mobile Linking Efforts

Create a site worthy of inbound links Begin a traditional linking campaign. Don’t forget to:

Submit to Mobile Directories Submit to Traditional Directories Submit to Local Directories & Local Search Engines

Consider purchasing traditional text links and mobile text links: http://advertising.msn.com/AdProducts/CreativeSpecDetail.aspx?pageid=39&CreativeSpecID=

%09%09%09599 Offer an RSS feed, and the ability to have text messages sent on a regular

basis. Use Social Taging/Bookmarking Icons. Create Social Networking Personas and Link them to your Site.

Basic Best Practices: Target Appropriate Keywords

Target 2-3 keyword phrases for each page that you would like to show up for in search engines.

Pick keyword phrases that have interchangeable elements:

EX: Chicago Rental Cars, Ohare Car Rental, Book Car Online

Numerous bonus combinations makes it more likely you will show up well for shorter keyword searches.

Use title tags, meta tags and alt tags to your benefit. Keep pages short. Having different topics on different pages is

better for targeting keywords and helps users avoid scrolling.

Basic Best Practices: Test with Mobile Browser Technologies

Opera: http://www.opera.com/download/ Skweezer: http://www.skweezer.net/ Google: http://www.google.com/gwt/n

Basic Best Practices: Embrace the Mobility of Mobile Sites

Offer ‘Send this to my Phone” links that can e-mail or text message the url of the page. These should be near the top or bottom of the page.

Make Phone Numbers Click-able Include your main address in the footer-this will help with local

and mobile-local search engines. Provide information that would be especially important to

people who were mobile: Hours of operation, product specifications, prices, maps and driving directions.

Use clear Call-to-Action. Make online processes brief, clear, and goof-proof.

Code Best Practices

Code Best Practices: Code in XHTML

Traditional browsers are forgiving. Mobile browsers are not.

Validate your code. The closer your XHTML is to the standard, the more likely it is to display correctly across all mobile technology.http://validator.w3.org/

Avoid unnecessary code. Use HTTP "Accept" headers to return mobile content to

mobile crawlers. http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html Provide a text equivalent for every non-text element. Label all form controls appropriately and explicitly

associate labels with form controls.

Code Best Practices: Keep it Simple

Do not use frames. Keep file names short, and keyword rich. Do not use tables for layout. Do not cause pop-ups or other windows to appear. Ensure that information conveyed with color is also

available without color. Do not rely on embedded objects or script. Limit scrolling to one direction, unless secondary

scrolling cannot be avoided.

Code Best Practices: Use an External CSS

Mobile browsers work really well on modern sites that are accessible, use semantic markup, and separate semantic and presentational markup.

CSS minimizes the code required to build a page, standardizes fonts and colors, eliminates tables and ensures the site will display correctly on different screen resolutions.

External CSS minimizes load time. CSS doesn’t have to be boring http://www.csszengarden.com/

Code Best Practices: Minimize Load Time

Avoid excess flash and java script, and provide alternatives for viewers without flash or java script enabled.

Avoid large image files and provide alternatives. Provide users the option to download larger graphic files, if their browser does not download them the first time.

Keep pages short and sweet. Keep all necessary files in your directory, on your site. Whenever possible convert PDF’s to XHTML.

Code Best Practices: Prepare for Problems

Confirmation is critical in the wireless world. When any action is taken, it must be followed up as quickly as

possible by an e-mail. This is especially true when the viewer will be waiting on some

information from your company (ie: a purchase to be shipped, a trouble ticket to be addressed, a newsletter to be sent.)

Create a Custom 404 that includes a site map. Use 301 redirects when ever pages move or are

eliminated.

Navigation Best Practices

Navigation Best Practices: Use Optimized Jump Links

Use optimized bookmarks or jump links at the top of the page.

These preview your content, since there is so much less room ‘above the fold.’

These also help with navigation, because they help users avoid scrolling.

The Good News!You can control weather or not these links are displayed for traditional web browsing through CSS.

Navigation Best Practices: Adjust the Physical Order of Source Content

Make side navigation appear below main content. The physical order of the source code will determine

what appears first on mobile browsers. Use CSS floats and absolute positioning to cause it to be rendered anywhere you want on the traditional page.

This allows you to keep the more optimized and important content at the top, which is better for search engines.

Use jumps at the top of the page to let users know about navigation options below.

Navigation Best Practices:Be Clear & Concise

Never forget the mobile user is in a hurry and looking at a 2-3 inch screen.

People don’t have time to learn your site. Name buttons clearly-Button naming is not the place to be creative! Organize buttons logically and consistently Include text links to main pages in your footer. Have a site map, and submit a Mobile Google Site Maps. Never make anything more than 3 clicks away from the homepage.

Category Page, Sub Category Page

Product Page.

“So if you’re someone who happens to design things for the web, well, I think you can see that you can either start designing now with mobile viewing in mind — instead of designing exclusively for the un-mobile web — or you can play catch-up later, after you finally get hip.”

-Michael Smith, Oreillynet.com You're a Fool to Design only for the Un-Mobile Web, December 22, 2005.