Make a Mobile Web Site
•Download as PPTX, PDF•
3 likes•381 views
An overview of options in creating a mobile website - both optimizing your current site and creating a separate mobile site.
Report
Share
Make a Mobile Web Site
- 1. Making a Mobile Website
- 2. Overview of PresentationShared VocabularyWhat is MobileMobile EcosystemDevices, Phones, Browsers, EtcEntering the EcosystemApps, Mobile Web, Text/SMSWhy You Need to MobilizeWhere We Are in Mobile (1999 -> 2010)Mobile StrategyMobile ContextMobile is DifferentMobile User ExperienceMobile Design & IA – Basic Best PracticesOptions in MobileCurrent Site, Microsite, OthersExternal Tools, Hosted, OthersMaking the DecisionGetting ReadyRemindersResources
- 4. What is “Mobile”The word “Mobile”:mobile, nomadic, roving wandering (migratory) "a restless mobile society"; mobile (moving or capable of moving readily (especially from place to place)) "the tongue is...the most mobile articulator"mobile (having transportation available)mobile (capable of changing quickly from one state or condition to another) "a highly mobile face"mobile (affording change (especially in social status)) "Britain is not a truly fluid society"; "upwardly mobile“Princeton’s WordNet, http://wordnet.princeton.eduThe technology term “Mobile”:The definition of “mobile” in the technology vernacular is in flux. Some include laptops – which are “capable of moving readily”.Others focus on what type of connectivity is in use.For our purposes, the use case is the most relevant.“Laptops are more like PCs than mobile phones, and iPads are more like mobile phones than like laptops.”http://moconews.net/article/419-cnn-offers-one-definition-to-answer-the-question-what-is-mobile/
- 6. Diverse EcosystemMany types of Devices (phones - but also iPad, game consoles, etc)PhonesPlatform (iPhone, Blackberry, Nokia, etc)Type of PhoneScreen Size & ResolutionInput TypesFeatures (camera, etc)Memory PhoneOperating SystemOperator Customizations to the PhoneBrowsersConnection Speeds & Issues2G, 3G, 4G, etcConnectivity issues (network capacity, lack of coverage, etc)
- 7. “Build for more than one device. No device will be dominant. No, not even that one.”- Design4mobile, Full Browsershttp://patterns.design4mobile.com/index.php/Full_browsersBlackberry, Android and Symbian all outsell iPhone as a platform.http://blogs.barrons.com/techtraderdaily/2010/10/05/android-phones-outsell-iphone-blackberry-in-us-nielsen-saysAnd smartphones account for only 17% of US mobile phone penetration. **http://articles.cnn.com/2010-09-30/tech/gahran.smartphone.ownership_1_feature-phones-cell-phone-smartphones?_s=PM:TECH** That said, Nielsen predicts that more Americans will have smartphones by the end of 2011 than feature phones http://blog.nielsen.com/nielsenwire/consumer/smartphones-to-overtake-feature-phones-in-u-s-by-2011
- 8. Diverse Ecosystem Devices (Phones - But Not Just Phones)More than just phonesKindleTablet PCiPod Touch & other wired mp3 playersSome GPS systemsVideo game consolesHome entertainment systemsEtc.But mainly phonesSmartphoneFeature PhoneStandard Phone
- 9. Diverse Ecosystem:Types of Phones – Smart, Clever, EtcPlatform + DeviceiPhoneAndroidBlackberry+ many, many types of feature phones
- 10. Diverse Ecosystem:Phone ModelsEven with in the same platform, there are major differences in phone features & capabilities.MemoryBattery life Screen SizeMany ranges: 84-132px, 160-176px, 208-240px, 320-480+pxInput Types (touch screen, keypad, click wheel, etc)Other Phone Features (camera, music player, etc)
- 11. Diverse Ecosystem:Operator Customizations to PhoneDevice application controlsNetwork controlsSystem integrationAccess to hardwareExample:Phone companies can affect search results. When you go to Google search on AT&T phones, it creates a cookie and then delivers select results within the search.
- 12. Diverse Ecosystem:BrowsersThere are hundreds of mobile browsers, though on smartphones there is more consistency. - http://www.flipcorp.com/en/blog/read/blog/the-right-way-to-build-a-mobile-site.html
- 13. Entering the ecosystem – Apps, mobile web, text
- 14. Shared Vocabulary - TechnologiesThe Mobile PyramidMobile AppsNativeNon-NativeHybridMobile WebSMS/Texthttp://www.pointabout.com/understanding-the-mobile-landscape/the-mobile-pyramid/
- 15. Mobile Web vs Apps6 Benefits of Mobile Web Anyone with mobile web access can visit your site.No need to download anything.Not platform/device specific – so you only have to develop one version.Apps are developed for individual platforms.Users can click on an email in their phone – and be directed to that URL (or a redirected page).Apps can’t open webpages. Feature phones can access mobile websites. And if you develop properly, it will even be a good experience.You can develop a mobile website for very little $It might take a little more to do it well and make it seamless (and to include the proper redirects from your website). But it will still be a fraction of developing an app for a single platform.Update model is simple.Just like editing a website. And with RSS, you can auto-update some pages.NOTE: Apps have a place in the mobile world – but unless you have a compelling reason to develop an app, work on a mobile website first.
- 16. Mobile Web and Text/MMS/Social/EmailMobile web plays nicely with text, IM, social tools (Facebook, Twitter etc) and email.URLs can be received by a user and then open the website on a mobile phone.
- 17. Why you need to mobilize
- 18. Growing Fast30% of mobile phone users browse the mobile web1 in 5 phones are smart phonesSmart phone adoption rising by 85% a yearMobile will eclipse desktop by mid 2013Comscore, The State of Mobile, June 8, 2010Last year, mobile web usage increased 148% worldwide.- 2009 Mobile Trends Reporthttp://www.quantcast.com/docs/display/info/Mobile+Report
- 19. Coming, Ready or Not“Simply put, we [consumers] expect more, all the time. Instead of thinking about whether mobile is big enough, we should be thinking about what expectations we’d actually be failing to meet without a thoughtful approach to mobile in place.”- 10 Tips for Creating a Winning Mobile Strategyhttp://www.clickz.com/clickz/column/1721831/tips-creating-winning-mobile-strategy
- 20. 50% Won’t Come BackBad experience = lost usersMore than half of users are unlikely to return to a website that they had trouble accessing from their phoneGomez, Why The Mobile Web Is Disappointing End-Users, http://gomez.com/resources/whitepapers/mobile-survey-whitepaper
- 21. Converging Trends3G/4GImpact of Social NetworkingNew mobile devices
- 22. Touch Screens and enhancements to the user experience
- 23. Plus the network effect
- 24. Friend has a phone, I am more likely to get a phoneWhere we are
- 25. Back to 1999 – For DevelopersFor Web Developers, 1999 was the Wild West.There was a lot of really cool stuff going on – but it was also insane.Undefined, inconsistent terminologyFew standardsProprietary systems & walled gardensLittle convergenceFragmentationRemember the browser wars?Rapid change...and in an undefined directionLots of great business ideasSince we didn’t know the trajectorySuccess undefinedBusiness model undefined
- 26. And we adjusted...Cross-browser compatibilityFile size and weightConcerns about image size
- 27. 2010 - Similar for MobileUndefined, inconsistent terminologyWhat is mobile? What qualifies as a mobile device?And what isn’t mobile? We know a desktop isn’t – but what about a laptop?Standards but not consistently enforcedProprietary systems & walled gardensFrom a consumer perspective, leads to a lot of confusion.Little convergenceFragmentationRemember the browser wars? Now platform wars?Rapid change...and in an undefined directionLots of great business ideasBut no real certainty about where this new communication tool will take us.Leaving...Success undefinedAnd business model undefinedIf you need proof –just look at search. Google is still figuring out what mobile search looks like. And the results, thus, are always changing.
- 28. Back in 1999 - For UsersFor most users in 1999, the internet was like a bonus item – a new toy.Most accessed the web at work.Not integrated into the rest of life (except for geeks)Significant barriers to entry Had to have a PCHad to have an internet connectionHad to make that work Provided new optionsThere was a lot of excitement.And not a great deal of critique.
- 29. Different This TimeMobile adoption is different and more rapid. Very low barriers to entry.Go to CVS, buy a feature phone, add minutes, go on the mobile web.Developers have the same issues BUT users are more impatient and have much faster rates of adoption.This means we don’t have much time to catch-up.
- 30. Mobile Strategy
- 31. Mobile Strategy – Get OneStrategy can involve a multi-pronged approach to planning for mobile.For example:Short term Minor modificationsMid term Modifications to mobile optimize your entire site ORA basic mobile site running in parallel with your main site (i.e. give them contact info & the basics that they’d want on a phone)Longer term A well-designed & executed mobile site
- 32. Mobile Strategy – The StepsWeb is to mobile as print is to webJust as print needs to be translated to the webSo a standard website needs to be translated to mobileWeb & Mobile StrategyGoal of the ProjectAudienceBudgetResourcesEtc[For the time, budget, resources, capacity I have, what can I get/do that gives the most value]Think aboutWhat users want/needWhat you want/needWhat you can afford in time, capacity, $, political capital, etcRemember that users don’t always know what they want/needRemember that managers don’t always know what they want/need
- 33. Basic Elements of Mobile StrategyConsider your usersWhere they are todayWhere they will be tomorrowConsider devicesPlan for Android and other new entrantsWhere they are todayWhere they will be tomorrowConsider the technologyPlan for todayAnd plan for HTML 5Consider the contextMobile context is differentPlan for the limitationsCapitalize on the strengths
- 34. Mobile context
- 35. Mobile Intentions- RuderFinn Intent Index, http://www.intentindex.com/mobile/
- 36. Context“Context is about understanding human relationships to the people, places and things in the world”- Adaptive Path, Mobile User Experiencehttp://www.slideshare.net/Rachel_Hinman/mobile-user-experience-what-web-designers-need-to-know
- 37. The Mobile ContextElements of Mobile Context Include:Positioning: spatial / location information, and related (surroundings)Point in timePresence and related status (online, offline, available, busy, etc)Handset status and capabilitiesPersonal context (User Preferences, calm behavior)Information Genre, Descriptor tags, allows for categorization and context based processingSocial contextMobile Context is the intersection of these elementsThe Mobile Context, C Enrique Ortizhttp://www.slideshare.net/c.enrique.ortiz/the-mobile-context-and-peoplecentric-mobile-computing
- 38. Mobile Context - LocationUsers can be anywhereRestaurantCoffee shopIn a meetingWalkingBabysittingOn metro/bus/trainStill in bedDrivingPhoto credit
- 39. Mobile Context – Immediacy & DistractionVisitors in the mobile space are likely to:Be distractedHave short attention spansBe interruptedReceive a call while browsing
- 40. “Context will center on observing patterns, particularly location, presence and social interactions.” - Gartner, http://www.gartner.com/it/page.jsp?id=1278413“The most powerful position in the context business model will be a context provider. Web, device, social platforms, telecom service providers, enterprise software vendors and communication infrastructure vendors will compete to become significant context providers during the next three years. Any Web vendor that does not become a context provider risks handing over effective customer ownership to a context provider, which would impact the vendor's mobile and classic Web businesses.”Gartner, http://www.gartner.com/it/page.jsp?id=1278413Consider Mobile Users In A 360degrees EnvironmentMobile users live in a 360 degrees environmentShort attention spanMulti-tasking/wasting timeSudden interruptionsMomentary social contextOn the move-The Return of Shovelwarehttp://www.dopedata.com/2010/04/19/mobile-content-the-return-of-shovelware
- 41. Mobile is DifferentMobile is DifferentCapitalize on strengthsBe aware of challenges so you can find solutions or alternativesChallengesLimited displayUsers may be distractedPower managementText input challengesDifferent navigation optionsSlower network (sometimes dramatically)
- 42. Differences – Pro & ConPersonalAlways with meAlways onSo you can remind me of a webinarSo your 4 AM text message may wake me upAllows for immediacy
- 44. Mobile vs TetheredDesktopFull sized keyboardFull sized screenMulti-key mousePower!!Photo Credit
- 45. Mobile is DifferentLimited battery lifeSmall screenSmall keyboardLimited display resolutionVaried and inconsistent keyboard & input optionsLimited CPU and memoryPhoto CreditCheck out the banana peel!
- 46. Wide Range of Content
- 47. And Different from Tethered Web
- 48. Phone = A Convenience ToolThe phone is a convenience tool and a social toolThe desktop/laptop is a productivity toolExpectations of each device differWhen I’m in my kitchen, I use my phone to reply to a quick email. >More convenient.When I’m out with friends, I use my phone to look up a artist we plan to see. >More social.When I’m in my office, I use my computer. >More productive.
- 49. What Users WantThey want it to workThey want it to be easyUsefulFastFree – or if I have to pay, make it easy. SimpleDon’t interfere with other uses of the phoneYour use is very often secondary for meDon’t’ break anything
- 50. Mobile Design Best Practices
- 51. “For the most part, you won’t need to learn any new technologies for mobile site design. But you will need to look at site design in a different way, one that is decidedly more restrictive than design for standard browsers.”Mobile Web Design, Noupe Design Blog
- 52. http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-practices.htmlBe Aware of ContextDesign for Partial Attention and InterruptionDon’t expect to have your users undivided attentionSimplify, Simplify, SimplifyDistracted users require a reduced cognitive load
- 53. Best Practices for Mobile MicrositesEnsure that clickable areas are obviousUse drill-down instead of long pagesNavigation should be consistent but not comprehensivePlace additional links at the bottom but don’t assume they’ll be found.Simplify forms
- 54. Navigation and Content: MicrositesNavigation – Keep it SimpleOnly the essential elementsLogo and Company NameTry to keep color and brand consistency across the sitesContact InformationInclude a phone number even if you don’t provide that on the main siteLink to the full website
- 55. Best Practices in Mobile OptimizationThese guidelines apply to any site rendered on mobile – your full site or a microsite.Images:Use images with only with defined purposeResize images to reduce file sizeDefine image size in HTMLReduce extraneous imagesSlows page load timeClutters the screenRemoves focus from contentLayout: No tables Use relative units (ems, percentages etc vs pixels, etc)ALT tags (images may not load or may be turned off)Label all form fieldsAvoid openingnew windowsMake buttons clear and easy to selectDon’t rely on javascript or images for navigation or essential function (as these may be turned off on many phones)To consider:Color contrast – high is best with low rez screensReduce margins & padding
- 57. Walk Before You FlyYou don’t have to do everything at once...- Charlie Browninghttp://www.slideshare.net/charlienb/mobile-trends-and-strategies
- 58. Strategies for MobileOne WebThe Internet is the Internet, and sites should run well on all devices. Optimization should be based on CSS and device detection, but should not change site function or content beyond the necessary.Mobile WebThe mobile is a different platform with different capabilities and different user needs. Sites should be optimized for mobile in many (but not all) cases.”Or...A HybridA mix of options based on resources, website capabilities, web platform, plans to upgrade and other factors that provides the best current options and plans for an even better experience later.- One Web & Mobile Web elements extracted from Barbara Ballard’s piece: http://www.littlespringsdesign.com/blog/2006/Sep/whats-wrong-with-the-mobile-web-part-1/
- 59. Your ApproachOne Web:Make changes to your current site to improve user experience.Mobile Web:Continue to maintain your current site and create a separate site specifically for mobile devices.Hybrid:Based on your current realities and plans for the future, determine the best mix of options to improve current user experience and plan for the best long-term option for your organization.
- 60. Options in MobileMicrosite/Mobile SiteSeparate microsite for mobile phones with redirect.Mobile Landing PageLanding page with link to microsite/mobile specific (without an automatic redirect)Landing page with link to App(s)Current siteMinor FixesChanges that help your site render better on mobile. No differentiation between mobile & desktop browsers (i.e. no mobile detection).Mobile OptimizedLiteMajor issues are addressed but efforts are focused on 1) a mobile microsite or 2) a redesign or new WCMS implementation. Mobile OptimizedThe site is intentionally designed to display and execute properly on a mobile device.
- 61. Mobile Optimize vsOptimizeLiteOptimizeLiteIn this model you are only trying to make your site “better” as an interim step while you either work on optimizing your site or creating a mobile microsite. OptimizeIn this model, you are optimizing your existing site for mobile – making substantial changes to design, navigation, content, etc to improve the user experience on mobile devices. Which to Choose? It’s about balancing NOW with LATER.You want to provide the best current experience, while leaving time and resources available for creating a great site later.
- 62. Options:Current Site – Minor FixesDefinition: Making updates to your current site that cut down on the primary issues encountered by mobile visitors. These changes will affect all visitors and are really just good design/usability. No differentiation between mobile & non-mobile (so no mobile Optimization or OptimizationLite).Content: The same content, design and navigation is delivered to desktop and mobile visitors. The rendering depends on the mobile device.What to Do:Go through your site and make changes to reduce page load and other issues.
- 64. Homepage
- 65. Contact page
- 66. Any page/section that would be of special interest to mobile users (i.e. news, regularly used reference sections, etc).
- 67. Consider monitoring URLs distributed in email newsletters, through twitter, etc as these may also be accessed on a mobile device.Details:There are many changes you can make that will drastically improve mobile user experience. A few simple items to consider are below. Review the information in the design best practices for additional information.Reduce page load (images, multi-media, extraneous javascript, etc)Always optimize images/multimedia to reduce size and ensure proper renderingReconsider Flash & Javascript (which often aren’t enable on mobile devices)Test forms to ensure processing works.Pay particular attention to search – as mobile users are more likely to search than desktop visitors.Only new windows in crucial areas – or eliminate them altogether.Replace image or flash based navigation with text based navigation And remember javascript won’t execute so if you use jt, test to ensure the nav still functions properly and subnavs can be accessed.Reduce repetitious navigation
- 68. Options:Mobile OptimizeLiteDefinition: Use CSS to display pages differently based on the device. In this model, visitors have access to your entire site – but experience a cleaner version of the site.Content: Visitors encounter different content based on CSS. Mobile visitors will have a different experience than desktop, based on changes you select.What to Do:Do-It-YourselfDefine two CSS files – one for mobile and one for desktop.Use agent detection to determine the device and utilize the appropriate CSS to display the pageUse an external tool or site to provide the script.Very few tools do this well – be careful that you aren’t making the user experience worse.Tools usually “HTML scrape” your site and provide a script for you to embed in your site (similar options to the DIY options above). A few host the altered site themselves.These are generally “one size fits all” tools and may not execute well on your site. Look for options that allow you to edit the script afterwards. Details:Look at your site on a series of mobile devices.
- 69. Consider making the changes suggested in “Minor Fixes” – these are often easy and impact both mobile and desktop users (and are accessibility compliant).
- 70. If you plan to mobile optimize , consider making substantial changes – but iteratively.
- 71. If you don’t plan to mobile optimize, fix the most egregious or those that can be executed quickly. Options: Mobile OptimizeDefinition: Use agent detection, JavaScript, CSS or a mix to render your site differently for mobile users. This is part of along-term strategy to enhance user experience on your site for visitors on all devices. Content: Visitors encounter different content based on CSS. Mobile visitors will have a different experience than desktop, based on changes you select.What to Do:Begin with Define two CSS files – one for mobile and one for desktop.
- 72. Use agent detection to determine the device and utilize the appropriate CSS to display the page. NOTE: This model of detection doesn’t work for all devices. Detection Detecting mobile devices isn’t as easy as it sounds so the best option is to either:Find an available script or Use a service (these generally provide you with a script to load on your site that they update). Where to Find ScriptsFor .ASP.NET: http://51degrees.codeplex.com/
- 73. Detecting mobile devices isn’t as easy as it sounds so the best option is to either:Find an available script or Use a service (these generally provide you with a script to load on your site that they update). Go through your site and make changes to reduce page load and other issues.
- 75. Homepage
- 76. Contact page
- 77. Any page/section that would be of special interest to mobile users (i.e. news, regularly used reference sections, etc).
- 78. Consider monitoring URLs distributed in email newsletters, through twitter, etc as these may also be accessed on a mobile device.Details:As with OptimizedLite, look at your site on a series of mobile devices.
- 79. Consider making the changes suggested in “Minor Fixes” – these are often easy and impact both mobile and desktop users (and are accessibility compliant).Options: Mobile MicrositesDefinition: Use CSS to display pages differently based on the device. In this model, visitors have access to your entire site – but experience a cleaner version of the site.Content: Desktop Visitors and Mobile Visitors see the same content but mobile visitors have an optimized design and navigation experience , based on changes you select.Options:Create your own and publishCreate your own designDownload templatePurchase/download softwareHosted – No Site IntegrationAll updating is manualHosted – RSS Feed IntegrationYou can select pages on your site with RSS feeds and the mobile site will update.Hosted – RSS Feed Integration and Initial “Grab” of Your Site.As above but with additional tools that help you set-up your site (they do an initial “grab” of your pages). You can then set-up RSS feeds to update pages.Hosted – Site integration Generally, they provide an initial site “grab” and also give you the option of auto-syncing content either with RSS or without (usually they use HTML Scraping which keeps content consistent but doesn’t require RSS)
- 80. Options: Mobile Landing PageDefinition: Use CSS to display pages differently based on the device. In this model, visitors have access to your entire site – but experience a cleaner version of the site.Content: Desktop Visitors and Mobile Visitors see the same content but mobile visitors have an optimized design and navigation experience , based on changes you select.
- 81. RedirectsMobile Microsites If you have a mobile microsite, you’ll have a redirect. You can generally rely on a host or external tool to help you with this but if you handle it in house, check out the resources below.Resources:It’s complicated but if you want to learn more...http://www.w3.org/TR/mwabp/#bp-devcaphttp://mobiforge.com/developing/story/device-detection-cloud-deviceatlas-personalhttp://51degrees.codeplex.com/wikipage?title=EnhanceTutorialhttp://webservices.usc.edu/blog/development/mobile_detection/http://webdesign.about.com/od/mobile/a/detect-mobile-devices.htm
- 82. Hosted OptionsThere are several types of tools to mobile optimize your website.Site Builder with No Update OptionSite Builder with RSS feed integrationSite Builder with RSS feed integration and advanced toolsSite Builder with integration with your websiteSite “Mobilizer” which renders your website as mobile optimized pages
- 83. Hosted Options – More DetailsSite Builder with No Update OptionSite Builder with RSS feed integrationSite Builder with RSS feed integration and advanced toolsSite Builder with integration with your websiteSite “Mobilizer” which renders your website as mobile optimized pagesDownloadable OptionsScripts – free, renders your site in a mobile friendly formatScripts – generated by vendor, renders your site in a mobile friendly formatSoftware that creates a mobile website that you publishTemplates that create a mobile website that you publishNote: Some tools let you edit from your mobile phone
- 85. Evaluate Your Options:Juggling the OptionsOn the HorizonOptimize your main site for mobile - even if you also have a mobile microsite.Because...Many users visit your main site after a mobile redirect.The iPad and similar devices will change the requirements of mobile.Users may seek information only available on your main site.Right NowBut in the meantime...Evaluate your options and, if your site can’t be mobile optimized in the short term, consider a progressive enhancement strategy.
- 86. Your ConsiderationsEvaluateTimeframeBudgetResourcesBuy-inCapacityOptionsTo get the best optionsMove quickly
- 87. Your RealitiesCMSAre there extensions already available? If your vendor already has extensions, review those to see what options are available.How Your Site Was BuiltTablesIf your site is table based, it will probably render poorly no matter which tool you use. Consider building a separate site.RSSIf your site isn’t RSS-compliant, you won’t be able to use RSS-feed based external tools. Consider building a separate site, updating select pages to be RSS-compliant and then creating the update toolUse of Flash & Javascript NavigationIf your site uses Flash or Javascript navigation, mobile optimizing will likely fail to render consistently. Consider building a separate site and replacing the navigation with text based options.Content “blocks” and structureType of siteResourcesTechnologyStaff TimeMoney
- 88. Making the DecisionIf you are using Wordpress, Drupal or similar open-source CMS Consider add-ons & tools to mobilize you If you have:A table-based site
- 89. Aren’t RSS Feed ReadyThen...
- 90. Not Mobile Ready?Approach the challenge from three directions.Minor Fixes on your main siteHelps with major issues encountered by usersAnd will make your site leaner, cleaner and more accessibleCreate a simple mobile micrositeUse mobile sensing on your main site to direct users to a simple version of your site.Include the basic information desired by a mobile user (contact information, etc)Include a link to the main siteNOTE: Be sure to plan for an update strategy so that this information doesn’t grow stale (i.e. have the contact email be info@org.org and not irene@org.org. Begin the process of mobile optimizing your main website.
- 91. Getting Ready
- 92. Online Tools: Mobile Ready & Phone EmulatorsMobile Ready Evaluation SitesTools to evaluate your site. They return specific errors that you can use to determine the best options for fixing your site. http://mobiready.com/A service of mobi.forge, a mobile reference and news site.http://validator.w3.org/mobile/MobileOK checker from W3Chttp://www.gomez.com/mobile-readiness-instant-testGomez provides paid services in this area. The readiness check is free.Emulators – OnlineEmulate/simulate your site on a mobile device.http://emulator.mtld.mobi/emulator.php Enter a site to evaluate and select from several deviceshttp://www.opera.com/mobile/demo/ Enter a site to view it within a simulation of the opera mini browser.Site Emulators (from mobile tool vendors)Tools that will display your site on an online emulator (as part of the sales process). Not especially robust but worth a quick view.http://www.bmobilized.com – A basic viewhttp://mippin.com/web/?p=portal - Emulators for several types of phones (iphone, BB, etc) BUT only for RSS feed sites
- 93. Download: Phone EmulatorsPhone Emulators – DownloadsPhoney: http://www.marketcircle.com/iphoney/Not a full emulator but displays Safari within an iPhoneoptimzed environment.Blackberry: http://na.blackberry.com/eng/developers/resources/simulators.jspEmulators only. Separate from the dev kit.Developer Kits (including emulators)iPhone SDK: http://developer.apple.com/devcenter/ios/index.actionAndroid SDK: http://developer.android.com/sdk/index.htmlNokia SDK: http://www.forum.nokia.com/Library/Tools_and_downloads/Other/Series_40_platform_SDKs/More info on mobile mobile SDKs (including Palm) :http://blogs.walkerart.org/newmedia/2010/04/23/setting-up-smartphone-emulators-for-testing-mobile-websites/Other OptionsMost Adobe products includes a tool for testing and developing mobile siteshttp://www.adobe.com/products/creativesuite/devicecentral/
- 94. Check Your Web StatsWeb Analytics programs include information on:Mobile devicesMobile CarriersBrowsersOperating systemsGoogle AnalyticsVisitors > MobileInformation on mobile devices and mobile carriersVisitors > Browser Capabilities > Browser & OSi.e. Safari/Android, Safari/iPhone, etc.Other Analytics ProgramsMost have similar capabilitiesIf not, you can run GA in parallel (and should for stat validation anyway, IMHO).NOTE: Analytics is an art not a science – as the information depends on information reported from many devices, many websites, etc. Use the information to guide further research and to validate decisions.
- 95. Reminders
- 96. Speed is Crucial50% of visitors will wait only 10 seconds or less before abandoning a site.1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 9 – 10You’ve just lost ½ your visitors...and remember, 50% of them won’t try again.
- 97. Keep Page Size LeanKeep page size lean Mobile microsite – Page size of <20kMobile optimized -Page size <100 k (brings back memories of early internet days!)Use images with purpose or not at allBe aware of other included items in page download
- 98. Keep Page Size LeanBloat can come from more than just images...Original reference in http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
- 99. Page TitlesMobile browsers display 45 charactersBookmarks display 25 characters
- 100. Problems Users EncounterIssues with content and screen size (either too large or small)Links/actions don’t workOverlapping/misplaced text/imagesVideo/audio doesn’t playFunction buttons are missingNavigation missing or challenging as created using flash, javascript and/or images.
- 101. No more m.m.site.comGoogle uses this modelwww.site.mobiwww.site.com/mwww.site.com/mobileBut most search experts tell you that optimizing your current site and displaying information differently provides the best search engine results.
- 102. Note on HTML/XML/EtcWhile XML or XHTML offer improved options and faster page rendering for mobile, you can code in HTML and CSS.
- 103. Plan for SearchMobile search engines give preference to mobile optimized sites.Readable filenamesIf you use a vendor, be sure your domain is displayedDon’t redirect to a page deep within your mobile siteNOTE: For some time Google rated mobile sites higher in mobile search rankings. This no longer appears to be the case.
- 104. Mobile Search Engine Optimization Best PracticesShort, keyword-rich title tags containing mobile specific keywordsText-based content or accessible text equivalentPages 20k or lessLinks to mobile contentInclude the word "mobile" somewhere on the pageInclude the phone number in the meta description or in the body of the pageConsider the mobile user experience and create content that a mobile user would appreciate and promoteMobile keyword research with Google's Mobile Keyword Toolsemantic markupinclude your address, if relevant. This will improve performance for local searches.use well-formed codeAdd a meta robots tag with "noindex, follow" to paginated pages.- Design4Mobile, SEOhttp://patterns.design4mobile.com/index.php/Search_Engine_Optimization
- 105. Focus on UsersThere is very little room for error in mobileFocus on user needs instead of business modelDon’t focus on technology – that will change.
- 106. Make Your Campaigns MeasurableGetting buy in from decision-makers requires data. Be sure to plan for that information at the beginning of your mobile efforts.
- 107. On the HorizonHTML 5 – Hooray!!Plan for itAnd plan for backwards compatibility
- 108. Resources
Editor's Notes
- Operating System (OS) – iOS, Blackberry, Android, SymbianOperators - Sprint, AT&T, Verizon, etc
- SMS/text – reaches a less affluent audience (though that may change with the introduction of less expensive data plans)
- I’d like to take a few minutes and talk about why mobile matters. I may be preaching to the choir but there are some trends that I think inform our conversation – and some of them create some interesting trajectories (which we’ll talk about later).
- Growing fast – and it’s going to keep going.And mobile web is growing.
- Social networking which allows for much more interaction – and untethered interaction (meaning you can be anywhere and decide to update FB).
- So we have all this change. And it’s a little like being a web developer in 1999.
- Lets take a trip back to 1999. It was a wild time. The internet had been around for a long time but real web development was in early stages. We still had blink, after all.
- If you fast forward to 2010, mobile is in a similar place for developers.This is not just for entrepreneurs – we know that the web became core to the business for most organizations. We can expect this will be true for mobile too.
- HOWEVER! From the end user perspective, and in terms of user expectations, the web in 1999 and mobile in 2010 are very different.
- And so it is time to plan for a mobile strategy.
- If you know that your users are going to expect something from you – and they will, most likely in the next 6-9 months, you gotta have a plan.So...mobile strategy. Get one.It doesn’t have to be complicated.
- These notes are especially relevant to mobile optimizing an existing site but are important in all mobile design.
- Things you need to think about when considering these options