0
<ul><li>Making the Most of Mobile </li></ul><ul><li>By: Cindy Krum </li></ul><ul><li>Rank-Mobile </li></ul>
Overview Observations <ul><li>Many aspects of Mobile Optimization follow Traditional SEO Wisdom   </li></ul><ul><li>An Opt...
Overview What is Different About Mobile <ul><li>Industry in its Infancy </li></ul><ul><li>Different Bots/Crawlers </li></u...
 
Overview Outline <ul><li>Development Best Practices  </li></ul><ul><li>SEO Best Practices </li></ul>
Development Best Practices
Development Best Practices:  Code in XHTML <ul><li>Traditional Browsers are Forgiving - Mobile Browsers are Not </li></ul>...
Development Best Practices:  Use an External CSS <ul><li>External CSS is Ideal for Mobile </li></ul><ul><ul><li>Separates ...
Development  Best Practices:  Have a Mobile Specific CSS <ul><li>Use multiple style sheets: Use a “screen” style sheet for...
Development  Best Practices:  iPhone Optimization Tips  <ul><li>iPhone Illustrates the Idea that There is One Web </li></u...
 
SEO Best Practices
SEO Best Practices:  Quick Wins <ul><li>Follow all Traditional & Local SEO Best Practices </li></ul><ul><li>Provide Info R...
SEO Best Practices:  Testing <ul><li>Test with Mobile Devices & Device Simulators </li></ul><ul><ul><li>Opera:  http://www...
SEO Best Practices:    Mobile Navigation <ul><li>JavaScript Navigation will Display in it’s Entirety-Not Always a Good Use...
 
 
<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...
Upcoming SlideShare
Loading in...5
×

Making The Most Of Mobile

608

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
608
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Transcript of "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: http://www.w3.org/2001/di/ ) </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 ( http://searchengineland.com/070920-090609.php ) </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 http://mezzoblue.com/tests/mobile/ ) </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: http://www.google.com/uds/samples/iphone/isearch.html </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: http://www.opera.com/download/ </li></ul></ul><ul><ul><li>Skweezer: http://www.skweezer.net/ </li></ul></ul><ul><ul><li>Google: http://www.google.com/gwt/n </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: http://mr.dev.mobi/ </li></ul></ul><ul><ul><li>W3C Mobile Web Best Practice: http://validator.w3.org/mobile/ </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=“mailto:cindy.krum@bluemoonworks.com” > cindy.krum@bluemoonworks.com</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, Oreillynet.com You're a Fool to Design only for the Un-Mobile Web, December 22, 2005. </li></ul></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×