Post on 09-May-2015
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.