Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making The Most Of Mobile


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Making The Most Of Mobile

  1. 1. <ul><li>Making the Most of Mobile </li></ul><ul><li>By: Cindy Krum </li></ul><ul><li>Rank-Mobile </li></ul>
  2. 2. Overview Observations <ul><li>Many aspects of Mobile Optimization follow Traditional SEO Wisdom </li></ul><ul><li>An Optimal Mobile Experience = Return Mobile Traffic = Better Results in Mobile Search Engines </li></ul><ul><li>Device Independence: Traditional sites being viewed on Mobile Technology (Device Independence: ) </li></ul>
  3. 3. Overview What is Different About Mobile <ul><li>Industry in its Infancy </li></ul><ul><li>Different Bots/Crawlers </li></ul><ul><li>Slow Download Speed & Connectivity Issues </li></ul><ul><li>Very Different Results Pages ( ) </li></ul>
  4. 5. Overview Outline <ul><li>Development Best Practices </li></ul><ul><li>SEO Best Practices </li></ul>
  5. 6. Development Best Practices
  6. 7. Development Best Practices: Code in XHTML <ul><li>Traditional Browsers are Forgiving - Mobile Browsers are Not </li></ul><ul><li>Infinite Handset/Browser/View Setting Combinations Possible </li></ul><ul><li>Rigid Accessibility Standards Make it Ideal </li></ul>
  7. 8. Development Best Practices: Use an External CSS <ul><li>External CSS is Ideal for Mobile </li></ul><ul><ul><li>Separates Content from Design </li></ul></ul><ul><ul><li>Minimizes Code </li></ul></ul><ul><ul><li>Decreases Load Time (External vs. Embedded) </li></ul></ul><ul><ul><li>Ensures Correct Display on Different Screen Resolutions-(Use %’s and relative positioning.) </li></ul></ul><ul><li>Use the <link> Element to Attach Stylesheets (Some handhelds don't recognize @media or @handheld ) </li></ul>
  8. 9. Development Best Practices: Have a Mobile Specific CSS <ul><li>Use multiple style sheets: Use a “screen” style sheet for traditional computers, and “handheld” for mobile devices. </li></ul><ul><li>Use &quot;display: none&quot; to hide elements in either rendering. </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;screen.css&quot;/> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;handheld&quot; href=“handheld.css&quot;/> </li></ul><ul><ul><li>Caveat: “display:none” Elements can Still Effect Download Speed on Mobile </li></ul></ul>
  9. 10. Development Best Practices: iPhone Optimization Tips <ul><li>iPhone Illustrates the Idea that There is One Web </li></ul><ul><li>Google Currently has a Separate Search Page for the iPhone: </li></ul><ul><li>iPhone Ignores the ‘handheld’ Media Designation. </li></ul><ul><li>The iPhoene Metatag: <meta name=”viewport” content=”width=808” /> Tells Mobile Safari that the page was built with the iPhone in mind </li></ul>
  10. 12. SEO Best Practices
  11. 13. SEO Best Practices: Quick Wins <ul><li>Follow all Traditional & Local SEO Best Practices </li></ul><ul><li>Provide Info Relevant to Mobile Users </li></ul><ul><li>Submit your Site to Mobile Search Engines </li></ul><ul><li>Don’t Rely on: </li></ul><ul><ul><li>Embedded Images </li></ul></ul><ul><ul><li>Objects </li></ul></ul><ul><ul><li>Scripts </li></ul></ul><ul><ul><li>Frames </li></ul></ul><ul><ul><li>Flash </li></ul></ul><ul><ul><li>Pop-up Windows </li></ul></ul><ul><ul><li>Mouse-Over Events </li></ul></ul>
  12. 14. SEO Best Practices: Testing <ul><li>Test with Mobile Devices & Device Simulators </li></ul><ul><ul><li>Opera: </li></ul></ul><ul><ul><li>Skweezer: </li></ul></ul><ul><ul><li>Google: </li></ul></ul><ul><li>Test Transcoded & Non-Transcoded Versions of Your Site </li></ul><ul><li>Validate your Site with Mobile Code Checkers </li></ul><ul><ul><li>Mobi Ready: </li></ul></ul><ul><ul><li>W3C Mobile Web Best Practice: </li></ul></ul>
  13. 15. SEO Best Practices: Mobile Navigation <ul><li>JavaScript Navigation will Display in it’s Entirety-Not Always a Good User Experience </li></ul><ul><ul><li>Adjust the Physical Order of Source Content </li></ul></ul><ul><ul><li>Use Optimized Internal Jump Links </li></ul></ul><ul><li>Have Mobile Site Map (and Submit it!) </li></ul><ul><li>Make Phone Numbers & E-mail Addresses Click-able <a href=“tel:3035651100”>303-565-1100</a> <a href=“” ></a> </li></ul>
  14. 18. <ul><ul><li>“ 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, You're a Fool to Design only for the Un-Mobile Web, December 22, 2005. </li></ul></ul>