Making theMost of Mobile

By: Cindy Krum

Rank-Mobile

OverviewObservations

Many aspects of Mobile Optimization follow Traditional SEO Wisdom

An Optimal Mobile Experience = Return Mobile Traffic = Better Results in Mobile Search Engines

Device Independence: Traditional sites being viewed on Mobile Technology (Device Independence: http://www.w3.org/2001/di/)

OverviewWhat is Different About Mobile

Industry in its Infancy Different Bots/Crawlers Slow Download Speed & Connectivity

Issues Very Different Results Pages

(http://searchengineland.com/070920-090609.php)

OverviewOutline

Development Best Practices

SEO Best Practices

Development Best Practices

Development Best Practices: Code in XHTML

Traditional Browsers are Forgiving - Mobile Browsers are Not

Infinite Handset/Browser/View Setting Combinations Possible

Rigid Accessibility Standards Make it Ideal

Development Best Practices: Use an External CSS

External CSS is Ideal for Mobile Separates Content from Design Minimizes Code Decreases Load Time (External vs. Embedded) Ensures Correct Display on Different Screen

Resolutions-(Use %’s and relative positioning.) Use the <link> Element to Attach Stylesheets

(Some handhelds don't recognize @media or @handheld http://mezzoblue.com/tests/mobile/)

Development Best Practices: Have a Mobile Specific CSS

Use multiple style sheets: Use a “screen” style sheet for traditional computers, and “handheld” for mobile devices.

Use "display: none" to hide elements in either rendering.

<link rel="stylesheet" type="text/css" media="screen" href="screen.css"/><link rel="stylesheet" type="text/css" media="handheld" href=“handheld.css"/>

Caveat: “display:none” Elements can Still Effect Download Speed on Mobile

Development Best Practices: iPhone Optimization Tips

iPhone Illustrates the Idea that There is One Web

Google Currently has a Separate Search Page for the iPhone: http://www.google.com/uds/samples/iphone/isearch.html

iPhone Ignores the ‘handheld’ Media Designation.

The iPhoene Metatag:

<meta name=”viewport” content=”width=808” />

Tells Mobile Safari that the page was built with the iPhone in mind

SEO Best Practices

SEO Best Practices: Quick Wins Follow all Traditional & Local SEO Best Practices

Provide Info Relevant to Mobile Users Submit your Site to Mobile Search Engines Don’t Rely on:

Embedded Images Objects Scripts Frames Flash Pop-up Windows Mouse-Over Events

SEO Best Practices: Testing

Test with Mobile Devices & Device Simulators Opera: http://www.opera.com/download/ Skweezer: http://www.skweezer.net/ Google: http://www.google.com/gwt/n

Test Transcoded & Non-Transcoded Versions of Your Site

Validate your Site with Mobile Code Checkers Mobi Ready: http://mr.dev.mobi/ W3C Mobile Web Best Practice: http://validator.w3.org/mobile/

SEO Best Practices: Mobile Navigation

JavaScript Navigation will Display in it’s Entirety-Not Always a Good User Experience

Adjust the Physical Order of Source Content Use Optimized Internal Jump Links

Have Mobile Site Map (and Submit it!) Make Phone Numbers & E-mail Addresses Click-able

<a href=“tel:3035651100”>303-565-1100</a>

<a href=“mailto:cindy.krum@bluemoonworks.com” > cindy.krum@bluemoonworks.com</a>

“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.