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. Making the Most of Mobile SES Chicago 2006 By: Cindy Krum
  2. 2. Nextel Dance Party
  3. 3. Overview <ul><li>Is your site ready for mass adoption of mobile web technology? Begin planning for the future now. </li></ul><ul><li>Mobile search allows you to search for websites that are specifically designed for mobile phones and devices. </li></ul><ul><li>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. </li></ul><ul><li>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. </li></ul>
  4. 4. Overview <ul><li>Basic Best Practices </li></ul><ul><li>Code Best Practices </li></ul><ul><li>Navigation Best Practices </li></ul>
  5. 5. Basic Best Practices
  6. 6. Basic Best Practices: Submit Your Site to the Major Mobile Search Engines <ul><li>Google Mobile & Mobile Local - </li></ul><ul><ul><li>Submit through Google Mobile Site Maps: </li></ul></ul><ul><ul><li>Use the traditional submission form at / and put ‘mobile’ in the comments field. </li></ul></ul><ul><ul><li>Be sure to submit to regular Google Local. </li></ul></ul><ul><li>Yahoo Mobile: http:// /free/mobile/request </li></ul><ul><li>Technorati Mobile - http:// / </li></ul><ul><li>My Mob Search - http:// </li></ul><ul><li>MSN Mobile/Windows Live, AOL Mobile, Nokia Mobile Search, 4INFO Mobile Search, Infospace Mobile. </li></ul>
  7. 7. Basic Best Practices: Begin Mobile Linking Efforts <ul><li>Create a site worthy of inbound links </li></ul><ul><li>Begin a traditional linking campaign. Don’t forget to: </li></ul><ul><ul><li>Submit to Mobile Directories </li></ul></ul><ul><ul><li>Submit to Traditional Directories </li></ul></ul><ul><ul><li>Submit to Local Directories & Local Search Engines </li></ul></ul><ul><li>Consider purchasing traditional text links and mobile text links: =39&CreativeSpecID=%09%09%09599 </li></ul><ul><li>Offer an RSS feed, and the ability to have text messages sent on a regular basis. </li></ul><ul><li>Use Social Taging/Bookmarking Icons. </li></ul><ul><li>Create Social Networking Personas and Link them to your Site. </li></ul>
  8. 8. Basic Best Practices: Target Appropriate Keywords <ul><li>Target 2-3 keyword phrases for each page that you would like to show up for in search engines. </li></ul><ul><li>Pick keyword phrases that have interchangeable elements: EX: Chicago Rental Cars, Ohare Car Rental, Book Car Online </li></ul><ul><li>Numerous bonus combinations makes it more likely you will show up well for shorter keyword searches. </li></ul><ul><li>Use title tags, meta tags and alt tags to your benefit. </li></ul><ul><li>Keep pages short. Having different topics on different pages is better for targeting keywords and helps users avoid scrolling. </li></ul>
  9. 9. Basic Best Practices: Test with Mobile Browser Technologies <ul><li>Opera: http:// /download/ </li></ul><ul><li>Skweezer: </li></ul><ul><li>Google: </li></ul>
  10. 10. Basic Best Practices: Embrace the Mobility of Mobile Sites <ul><li>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. </li></ul><ul><li>Make Phone Numbers Click-able </li></ul><ul><li>Include your main address in the footer-this will help with local and mobile-local search engines. </li></ul><ul><li>Provide information that would be especially important to people who were mobile: Hours of operation, product specifications, prices, maps and driving directions. </li></ul><ul><li>Use clear Call-to-Action. </li></ul><ul><li>Make online processes brief, clear, and goof-proof. </li></ul>
  11. 11. Code Best Practices
  12. 12. Code Best Practices: Code in XHTML <ul><li>Traditional browsers are forgiving. Mobile browsers are not. </li></ul><ul><li>Validate your code. The closer your XHTML is to the standard, the more likely it is to display correctly across all mobile technology. </li></ul><ul><li>Avoid unnecessary code. </li></ul><ul><li>Use HTTP &quot;Accept&quot; headers to return mobile content to mobile crawlers. </li></ul><ul><li>Provide a text equivalent for every non-text element. </li></ul><ul><li>Label all form controls appropriately and explicitly associate labels with form controls. </li></ul>
  13. 13. Code Best Practices: Keep it Simple <ul><li>Do not use frames. </li></ul><ul><li>Keep file names short, and keyword rich. </li></ul><ul><li>Do not use tables for layout. </li></ul><ul><li>Do not cause pop-ups or other windows to appear. </li></ul><ul><li>Ensure that information conveyed with color is also available without color. </li></ul><ul><li>Do not rely on embedded objects or script. </li></ul><ul><li>Limit scrolling to one direction, unless secondary scrolling cannot be avoided. </li></ul>
  14. 14. Code Best Practices: Use an External CSS <ul><li>Mobile browsers work really well on modern sites that are accessible, use semantic markup, and separate semantic and presentational markup. </li></ul><ul><li>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. </li></ul><ul><li>External CSS minimizes load time. </li></ul><ul><li>CSS doesn’t have to be boring </li></ul>
  15. 15. Code Best Practices: Minimize Load Time <ul><li>Avoid excess flash and java script, and provide alternatives for viewers without flash or java script enabled. </li></ul><ul><li>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. </li></ul><ul><li>Keep pages short and sweet. </li></ul><ul><li>Keep all necessary files in your directory, on your site. </li></ul><ul><li>Whenever possible convert PDF’s to XHTML. </li></ul>
  16. 16. Code Best Practices: Prepare for Problems <ul><li>Confirmation is critical in the wireless world. </li></ul><ul><ul><li>When any action is taken, it must be followed up as quickly as possible by an e-mail. </li></ul></ul><ul><ul><li>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.) </li></ul></ul><ul><li>Create a Custom 404 that includes a site map. </li></ul><ul><li>Use 301 redirects when ever pages move or are eliminated. </li></ul>
  17. 17. Navigation Best Practices
  18. 18. Navigation Best Practices: Use Optimized Jump Links <ul><li>Use optimized bookmarks or jump links at the top of the page. </li></ul><ul><li>These preview your content, since there is so much less room ‘above the fold.’ </li></ul><ul><li>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. </li></ul>
  19. 19. Navigation Best Practices: Adjust the Physical Order of Source Content <ul><li>Make side navigation appear below main content. </li></ul><ul><li>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. </li></ul><ul><li>This allows you to keep the more optimized and important content at the top, which is better for search engines. </li></ul><ul><li>Use jumps at the top of the page to let users know about navigation options below. </li></ul>
  20. 20. Navigation Best Practices: Be Clear & Concise <ul><li>Never forget the mobile user is in a hurry and looking at a 2-3 inch screen. </li></ul><ul><li>People don’t have time to learn your site. </li></ul><ul><li>Name buttons clearly-Button naming is not the place to be creative! </li></ul><ul><li>Organize buttons logically and consistently </li></ul><ul><li>Include text links to main pages in your footer. </li></ul><ul><li>Have a site map, and submit a Mobile Google Site Maps. </li></ul><ul><li>Never make anything more than 3 clicks away from the homepage. </li></ul><ul><ul><li>Category Page, </li></ul></ul><ul><ul><ul><li>Sub Category Page </li></ul></ul></ul><ul><ul><ul><ul><li>Product Page. </li></ul></ul></ul></ul>
  21. 21. Nextel Crime Deterrent
  22. 22. <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>