An overview of options in creating a mobile website - both optimizing your current site and creating a separate mobile site.

1. Making a Mobile Website

2. Overview of Presentation Shared Vocabulary What is Mobile Mobile Ecosystem Devices, Phones, Browsers, Etc Entering the Ecosystem Apps, Mobile Web, Text/SMS Why You Need to Mobilize Where We Are in Mobile (1999 -> 2010) Mobile Strategy Mobile Context Mobile is Different Mobile User Experience Mobile Design & IA – Basic Best Practices Options in Mobile Current Site, Microsite, Others External Tools, Hosted, Others Making the Decision Getting Ready Reminders Resources

3. Shared Vocabulary

5. Mobile ecosystem

6. Diverse Ecosystem Many types of Devices (phones - but also iPad, game consoles, etc) Phones Platform (iPhone, Blackberry, Nokia, etc) Type of Phone Screen Size & Resolution Input Types Features (camera, etc) Memory Phone Operating System Operator Customizations to the Phone Browsers Connection Speeds & Issues 2G, 3G, 4G, etc Connectivity 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 Browsers http://patterns.design4mobile.com/index.php/Full_browsers Blackberry, 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-says And 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 phones Kindle Tablet PC iPod Touch & other wired mp3 players Some GPS systems Video game consoles Home entertainment systems Etc. But mainly phones Smartphone Feature Phone Standard Phone

9. Diverse Ecosystem:Types of Phones – Smart, Clever, Etc Platform + Device iPhone Android Blackberry + many, many types of feature phones

10. Diverse Ecosystem:Phone Models Even with in the same platform, there are major differences in phone features & capabilities. Memory Battery life Screen Size Many ranges: 84-132px, 160-176px, 208-240px, 320-480+px Input Types (touch screen, keypad, click wheel, etc) Other Phone Features (camera, music player, etc)

11. Diverse Ecosystem:Operator Customizations to Phone Device application controls Network controls System integration Access to hardware Example: 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:Browsers There 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 Pyramid Mobile Apps Native Non-Native Hybrid Mobile Web SMS/Text http://www.pointabout.com/understanding-the-mobile-landscape/the-mobile-pyramid/

15. Mobile Web vs Apps 6 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/Email Mobile 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

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 Strategy http://www.clickz.com/clickz/column/1721831/tips-creating-winning-mobile-strategy

20. 50% Won’t Come Back Bad experience = lost users More than half of users are unlikely to return to a website that they had trouble accessing from their phone Gomez, Why The Mobile Web Is Disappointing End-Users, http://gomez.com/resources/whitepapers/mobile-survey-whitepaper

22. Touch Screens and enhancements to the user experience

23. Plus the network effect

26. And we adjusted... Cross-browser compatibility File size and weight Concerns about image size

27. 2010 - Similar for Mobile Undefined, inconsistent terminology What 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 enforced Proprietary systems & walled gardens From a consumer perspective, leads to a lot of confusion. Little convergence Fragmentation Remember the browser wars? Now platform wars? Rapid change...and in an undefined direction Lots of great business ideas But no real certainty about where this new communication tool will take us. Leaving... Success undefined And business model undefined If 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 Users For 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 PC Had to have an internet connection Had to make that work Provided new options There was a lot of excitement. And not a great deal of critique.

29. Different This Time Mobile 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 One Strategy can involve a multi-pronged approach to planning for mobile. For example: Short term Minor modifications Mid term Modifications to mobile optimize your entire site OR A 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 Steps Web is to mobile as print is to web Just as print needs to be translated to the web So a standard website needs to be translated to mobile Web & Mobile Strategy Goal of the Project Audience Budget Resources Etc [For the time, budget, resources, capacity I have, what can I get/do that gives the most value] Think about What users want/need What you want/need What you can afford in time, capacity, $, political capital, etc Remember that users don’t always know what they want/need Remember that managers don’t always know what they want/need

33. Basic Elements of Mobile Strategy Consider your users Where they are today Where they will be tomorrow Consider devices Plan for Android and other new entrants Where they are today Where they will be tomorrow Consider the technology Plan for today And plan for HTML 5 Consider the context Mobile context is different Plan for the limitations Capitalize 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 Experience http://www.slideshare.net/Rachel_Hinman/mobile-user-experience-what-web-designers-need-to-know

38. Mobile Context - Location Users can be anywhere Restaurant Coffee shop In a meeting Walking Babysitting On metro/bus/train Still in bed Driving Photo credit

39. Mobile Context – Immediacy & Distraction Visitors in the mobile space are likely to: Be distracted Have short attention spans Be interrupted Receive a call while browsing

41. Mobile is Different Mobile is Different Capitalize on strengths Be aware of challenges so you can find solutions or alternatives Challenges Limited display Users may be distracted Power management Text input challenges Different navigation options Slower network (sometimes dramatically)

42. Differences – Pro & Con Personal Always with me Always on So you can remind me of a webinar So your 4 AM text message may wake me up Allows for immediacy

43. Mobile user experience

44. Mobile vs Tethered Desktop Full sized keyboard Full sized screen Multi-key mouse Power!! Photo Credit

45. Mobile is Different Limited battery life Small screen Small keyboard Limited display resolution Varied and inconsistent keyboard & input options Limited CPU and memory Photo Credit Check out the banana peel!

46. Wide Range of Content

47. And Different from Tethered Web

48. Phone = A Convenience Tool The phone is a convenience tool and a social tool The desktop/laptop is a productivity tool Expectations of each device differ When 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 Want They want it to work They want it to be easy Useful Fast Free – or if I have to pay, make it easy. Simple Don’t interfere with other uses of the phone Your use is very often secondary for me Don’t’ break anything

50. Mobile Design Best Practices

53. Best Practices for Mobile Microsites Ensure that clickable areas are obvious Use drill-down instead of long pages Navigation should be consistent but not comprehensive Place additional links at the bottom but don’t assume they’ll be found. Simplify forms

54. Navigation and Content: Microsites Navigation – Keep it Simple Only the essential elements Logo and Company Name Try to keep color and brand consistency across the sites Contact Information Include a phone number even if you don’t provide that on the main site Link to the full website

55. Best Practices in Mobile Optimization These guidelines apply to any site rendered on mobile – your full site or a microsite. Images: Use images with only with defined purpose Resize images to reduce file size Define image size in HTML Reduce extraneous images Slows page load time Clutters the screen Removes focus from content Layout: 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 fields Avoid openingnew windows Make buttons clear and easy to select Don’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 screens Reduce margins & padding

56. Options in mobile

57. Walk Before You Fly You don’t have to do everything at once... - Charlie Browning http://www.slideshare.net/charlienb/mobile-trends-and-strategies

58. Strategies for Mobile One Web The 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 Web The 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 Hybrid A 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 Approach One 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 Mobile Microsite/Mobile Site Separate microsite for mobile phones with redirect. Mobile Landing Page Landing page with link to microsite/mobile specific (without an automatic redirect) Landing page with link to App(s) Current site Minor Fixes Changes that help your site render better on mobile. No differentiation between mobile & desktop browsers (i.e. no mobile detection). Mobile OptimizedLite Major issues are addressed but efforts are focused on 1) a mobile microsite or 2) a redesign or new WCMS implementation. Mobile Optimized The site is intentionally designed to display and execute properly on a mobile device.

61. Mobile Optimize vsOptimizeLite OptimizeLite In 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. Optimize In 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.

63. Focus particularly on

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 rendering Reconsider 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

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.

74. Focus particularly on

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).

80. Options: Mobile Landing Page Definition: 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. Redirects Mobile 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-devcap http://mobiforge.com/developing/story/device-detection-cloud-deviceatlas-personal http://51degrees.codeplex.com/wikipage?title=EnhanceTutorial http://webservices.usc.edu/blog/development/mobile_detection/ http://webdesign.about.com/od/mobile/a/detect-mobile-devices.htm

82. Hosted Options There are several types of tools to mobile optimize your website. Site Builder with No Update Option Site Builder with RSS feed integration Site Builder with RSS feed integration and advanced tools Site Builder with integration with your website Site “Mobilizer” which renders your website as mobile optimized pages

83. Hosted Options – More Details Site Builder with No Update Option Site Builder with RSS feed integration Site Builder with RSS feed integration and advanced tools Site Builder with integration with your website Site “Mobilizer” which renders your website as mobile optimized pages Downloadable Options Scripts – free, renders your site in a mobile friendly format Scripts – generated by vendor, renders your site in a mobile friendly format Software that creates a mobile website that you publish Templates that create a mobile website that you publish Note: Some tools let you edit from your mobile phone

84. Making the decision

85. Evaluate Your Options:Juggling the Options On the Horizon Optimize 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 Now But 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 Considerations Evaluate Timeframe Budget Resources Buy-in Capacity Options To get the best options Move quickly

87. Your Realities CMS Are there extensions already available? If your vendor already has extensions, review those to see what options are available. How Your Site Was Built Tables If your site is table based, it will probably render poorly no matter which tool you use. Consider building a separate site. RSS If 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 tool Use of Flash & Javascript Navigation If 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 structure Type of site Resources Technology Staff Time Money

89. Aren’t RSS Feed ReadyThen...

90. Not Mobile Ready? Approach the challenge from three directions. Minor Fixes on your main site Helps with major issues encountered by users And will make your site leaner, cleaner and more accessible Create a simple mobile microsite Use 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 site NOTE: 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 Emulators Mobile Ready Evaluation Sites Tools 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 W3C http://www.gomez.com/mobile-readiness-instant-test Gomez provides paid services in this area. The readiness check is free. Emulators – Online Emulate/simulate your site on a mobile device. http://emulator.mtld.mobi/emulator.php Enter a site to evaluate and select from several devices http://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 view http://mippin.com/web/?p=portal - Emulators for several types of phones (iphone, BB, etc) BUT only for RSS feed sites

93. Download: Phone Emulators Phone Emulators – Downloads Phoney: 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.jsp Emulators only. Separate from the dev kit. Developer Kits (including emulators) iPhone SDK: http://developer.apple.com/devcenter/ios/index.action Android SDK: http://developer.android.com/sdk/index.html Nokia 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 Options Most Adobe products includes a tool for testing and developing mobile sites http://www.adobe.com/products/creativesuite/devicecentral/

94. Check Your Web Stats Web Analytics programs include information on: Mobile devices Mobile Carriers Browsers Operating systems Google Analytics Visitors > Mobile Information on mobile devices and mobile carriers Visitors > Browser Capabilities > Browser & OS i.e. Safari/Android, Safari/iPhone, etc. Other Analytics Programs Most have similar capabilities If 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 Crucial 50% of visitors will wait only 10 seconds or less before abandoning a site. 1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 9 – 10 You’ve just lost ½ your visitors ...and remember, 50% of them won’t try again.

97. Keep Page Size Lean Keep page size lean Mobile microsite – Page size of <20k Mobile optimized -Page size <100 k (brings back memories of early internet days!) Use images with purpose or not at all Be aware of other included items in page download

98. Keep Page Size Lean Bloat can come from more than just images... Original reference in http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

99. Page Titles Mobile browsers display 45 characters Bookmarks display 25 characters

100. Problems Users Encounter Issues with content and screen size (either too large or small) Links/actions don’t work Overlapping/misplaced text/images Video/audio doesn’t play Function buttons are missing Navigation missing or challenging as created using flash, javascript and/or images.

101. No more m. m.site.com Google uses this model www.site.mobi www.site.com/m www.site.com/mobile But 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/Etc While XML or XHTML offer improved options and faster page rendering for mobile, you can code in HTML and CSS.

103. Plan for Search Mobile search engines give preference to mobile optimized sites. Readable filenames If you use a vendor, be sure your domain is displayed Don’t redirect to a page deep within your mobile site NOTE: 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 Practices Short, keyword-rich title tags containing mobile specific keywords Text-based content or accessible text equivalent Pages 20k or less Links to mobile content Include the word "mobile" somewhere on the page Include the phone number in the meta description or in the body of the page Consider the mobile user experience and create content that a mobile user would appreciate and promote Mobile keyword research with Google's Mobile Keyword Tool semantic markup include your address, if relevant. This will improve performance for local searches. use well-formed code Add a meta robots tag with "noindex, follow" to paginated pages. - Design4Mobile, SEO http://patterns.design4mobile.com/index.php/Search_Engine_Optimization

105. Focus on Users There is very little room for error in mobile Focus on user needs instead of business model Don’t focus on technology – that will change.

106. Make Your Campaigns Measurable Getting buy in from decision-makers requires data. Be sure to plan for that information at the beginning of your mobile efforts.

107. On the Horizon HTML 5 – Hooray!! Plan for it And plan for backwards compatibility

108. Resources