1.
Mobile is the new Godzilla Fort Collins Internet Professionals July 28, 2011

3.
Godzilla is Coming

4.
Are you ready? <ul><li>The choice: </li></ul><ul><ul><li>Don’t be surprised and find yourself running from the monster! </li></ul></ul><ul><ul><li>Educate yourself, plan, and implement: ride the monster to victory  </li></ul></ul>

5.
2009 Forecast : PC vs Smart Phone Shipments Source: http://bit.ly/iZzsbV

6.
2010 Actual PC vs. Smart Phone Shipments

7.
Shift in Usage <ul><li>Fallout: 20% drop in usage of PC between 2008 and 2010. </li></ul>Source: http://read.bi/lFHwKR

8.
Mobile phones to outnumber PCs by 2013 <ul><li>According to Gartner's PC installed base forecast, by 2013: </li></ul><ul><ul><li>PCs in use will reach 1.78 billion units </li></ul></ul><ul><ul><li>Smartphones and browser-equipped enhanced phones will exceed 1.82 billion units </li></ul></ul><ul><ul><ul><li>and will be greater than the installed base for PCs thereafter. </li></ul></ul></ul><ul><li>By 2013, mobile phones will overtake PCs as the most common Web access device worldwide. </li></ul><ul><li>Source: http://bit.ly/lQdGRx (January 2010) </li></ul>

10.
We better do something!

11.
<ul><li>“ Mobile Web users are typically prepared to make fewer clicks on a website than users accessing sites from a PC. Although a growing number of websites and Web-based applications offer support for small-form-factor mobile devices, many still do not. Websites not optimized for the smaller-screen formats will become a market barrier for their owners — much content and many sites will need to be reformatted/rebuilt. ” </li></ul><ul><ul><li>– Gartner Research, January 2010 </li></ul></ul>

12.
Smart Phone growth <ul><li>96% increase in smart phone sales Q3 2010 </li></ul><ul><ul><li>Smart phone prices are still dropping </li></ul></ul><ul><ul><li>Mobile is currently a $10B industry </li></ul></ul><ul><ul><li>Unprecedented </li></ul></ul>

13.
Terminology <ul><li>Websites & Web Apps are used within a mobile web browser (e.g. mobile Safari, Opera, Android browser) </li></ul><ul><li>“Native Apps” are applications people download from the iTunes App Store or Android Marketplace and are written in a language unique to the platform. </li></ul>

14.
Website usage from mobile devices <ul><li>Visits to websites from mobile devices grew 600% in 2010 </li></ul><ul><li>Access to Twitter via mobile browser experienced a 347% jump to 4.7 million users between January 2009 and January 2010. (March 2010 http://bit.ly/krGJvz ) </li></ul>

15.
Mobile content usage <ul><li>May 2011 </li></ul><ul><ul><li>69.5 percent of U.S. mobile subscribers used text messaging on their mobile device </li></ul></ul><ul><ul><li>Browsers used by 39.8% of subscribers (up 1.5 percentage points from previous month ) </li></ul></ul><ul><ul><li>Downloaded applications used by 38.6% (up 2.0 percentage points) </li></ul></ul><ul><ul><li>(May 2011 http://bit.ly/qOVNtg ) </li></ul></ul>

16.
App usage on mobile devices <ul><li>Over half of Android and iPhone users spend more than 30 minutes per day using apps. (2009 http://bit.ly/lnKn3x) </li></ul><ul><li>35 percent of US Android/iPhone users interact with applications on their smartphones before getting out of bed . The most common activity here is checking Facebook (Ericsson 2011 PDF http://bit.ly/jKCOlY) </li></ul><ul><li>18 percent of social networking users log in while their heads are still on the pillow. (Ericsson 2011 PDF http://bit.ly/jKCOlY) </li></ul>

17.
% of smartphone users who use apps for: <ul><li>Everyday tasks </li></ul><ul><ul><li>$hopping : 38% </li></ul></ul><ul><ul><li>Weather: 58% </li></ul></ul><ul><ul><li>News: 46% </li></ul></ul><ul><ul><li>Maps: 50% </li></ul></ul><ul><li>Social & Interaction </li></ul><ul><ul><li>E-mail: 82% </li></ul></ul><ul><ul><li>Social networking: 65% </li></ul></ul><ul><ul><li>Twitter: 10% </li></ul></ul><ul><li>Android/iPhone smartphone users, USA. </li></ul><ul><li>Ericsson 2011 http://bit.ly/jKCOlY (PDF) </li></ul><ul><li>Personal </li></ul><ul><ul><li>Hobbies, religion, etc: 20% </li></ul></ul><ul><ul><li>TV/movie streaming: 16% </li></ul></ul><ul><ul><li>Music streaming: 34% </li></ul></ul><ul><ul><li>Music download: 22% </li></ul></ul><ul><ul><li>YouTube: 43% </li></ul></ul><ul><ul><li>Games download: 25% </li></ul></ul>

18.
The app eal <ul><li>Apps are perceived as easy to use because they require: </li></ul><ul><ul><li>easy to download and install (even paid apps) </li></ul></ul><ul><ul><li>little or no navigation through file structures </li></ul></ul><ul><ul><li>no inputting of addresses/URLs </li></ul></ul><ul><ul><li>no web searching (it’s just there on your device) </li></ul></ul><ul><ul><li>no clicking on links </li></ul></ul><ul><li>Apps give users direct access to the content or online service of their choice. </li></ul>

19.
<ul><li>“ The smartphone market is very clearly driven by consumer needs , leading Ericsson ConsumerLab to believe that smartphones will continue to rise in popularity and become true global mass-market devices. ” </li></ul><ul><ul><li>– Ericsson AB, May 2011 http://bit.ly/jKCOlY (PDF) </li></ul></ul>

21.
Current Smartphone Market Share <ul><li>May 2011 (vs Feb 2011) </li></ul><ul><li>Android: 38.1% (+5.1 points in past 3 months) </li></ul><ul><li>Apple: 26.6% (+1.4) </li></ul><ul><li>RIM: 24.7% (-4.2) </li></ul><ul><li>Source http://bit.ly/qOVNtg </li></ul>

22.
Tablet Stats <ul><li>iPad has 89% of tablet traffic world-wide </li></ul><ul><li>In the US, iPad has 96% of tablet traffic </li></ul><ul><li>Source http://bit.ly/p80Ivq </li></ul>

23.
Mobile eCommerce <ul><li>By 2014 </li></ul><ul><ul><li>over 3 billion of the world's adult population will be able to transact electronically via mobile or Internet technology. </li></ul></ul><ul><ul><li>6.5 billion mobile connections </li></ul></ul><ul><ul><li>“Cash transactions will remain dominant in emerging markets by 2014, but the foundation for electronic transactions will be well under way for much of the adult world” </li></ul></ul><ul><ul><li>(Jan 2010 http://bit.ly/lQdGRx) </li></ul></ul>

24.
More Mobile eCommerce <ul><li>50% of mobile ecommerce is eBay </li></ul><ul><li>Largest (known) single purchase via a mobile phone: a $500K airplane. </li></ul>

25.
& NFC <ul><li>NFC = Near Field Communications </li></ul><ul><ul><li>Technology similar to RFID, but 2-way </li></ul></ul><ul><li>First NFC phones are on the market now </li></ul><ul><ul><li>Android Nexus 4S on Sprint </li></ul></ul><ul><ul><li>BlackBerry Bold 9900 and 9930 </li></ul></ul><ul><li>Google Wallet </li></ul><ul><ul><li>Currently supports Citi MasterCard wherever MasterCard PayPass is accepted </li></ul></ul><ul><ul><li>As well as a prepaid Google card </li></ul></ul><ul><ul><ul><li>Can be funded with any credit card </li></ul></ul></ul><ul><li>2012 = year of the mobile wallet? </li></ul>

26.
Creating Mobile Experiences

27.
What do I do? <ul><li>I need an iPhone site </li></ul><ul><li>I need an iPhone app </li></ul><ul><li>I need an Android app </li></ul><ul><li>I need a Windows Phone 7 app </li></ul><ul><ul><li>Only kidding! </li></ul></ul>

28.
Mwuahahahaha!

29.
Why not <ul><li>How do you know what you need? </li></ul><ul><li>Apps aren’t the only answer </li></ul><ul><li>An app may or may not be the right answer for your clients, customers and business </li></ul>

30.
Mobile is entirely new

31.
Mobile is entirely new <ul><li>Major Computing Eras </li></ul><ul><ul><li>1950s: Mainframe & Mini Computers </li></ul></ul><ul><ul><li>1980s: Personal Computing </li></ul></ul><ul><ul><li>1990s: Internet & World Wide Web </li></ul></ul><ul><ul><li>2010s: Mobile </li></ul></ul>

32.
Create a mobile experience <ul><li>Not a mobile site </li></ul><ul><li>Not an app </li></ul><ul><li>The words &quot;Mobile Experience&quot; keeps the focus where it should be. Not on what's hip today. </li></ul>

34.
<ul><li>“ Create a product, don’t re-imagine one for small screens. Great mobile products are created, never ported.” </li></ul><ul><ul><li>– Brian Fling (author of Mobile Web Design & Development) </li></ul></ul>

35.
Start from the beginning <ul><li>Context </li></ul><ul><ul><li>The setting: physical, mental, temporal </li></ul></ul><ul><ul><li>Physical </li></ul></ul><ul><ul><ul><li>Location </li></ul></ul></ul><ul><ul><ul><li>Stationary or in motion? </li></ul></ul></ul><ul><ul><ul><li>Standing, seated, in a car, in a conference room? </li></ul></ul></ul><ul><ul><ul><li>Two-handed or one-handed? </li></ul></ul></ul><ul><ul><li>Mental </li></ul></ul><ul><ul><ul><li>State of mind </li></ul></ul></ul><ul><ul><ul><li>Relaxed or stressed? </li></ul></ul></ul><ul><ul><li>Temporal </li></ul></ul><ul><ul><ul><li>When will users be accessing your content? </li></ul></ul></ul><ul><ul><ul><li>How much time will they have? </li></ul></ul></ul>

36.
Where are we mobile? <ul><li>84% at home </li></ul><ul><li>74% waiting in lines </li></ul><ul><li>64% at work </li></ul>

37.
<ul><li>“ Don’t forget that mobile is a unique medium with its own benefits. Don’t’ try to simply apply the same rationale to your mobile strategy as you would your web or print strategy .” </li></ul><ul><ul><li>– Brian Fling (author of Mobile Web Design & Development) </li></ul></ul>

38.
Your people <ul><li>Who are your people? Who is your audience? </li></ul><ul><li>What are their needs? </li></ul>

39.
Focus on context, goals, and needs <ul><li>Define your constituents’ context </li></ul><ul><li>Uncover their goals </li></ul><ul><li>Understand how their context alters their goals </li></ul><ul><li>Figure out the tasks they want to perform </li></ul><ul><li>What content and functionality will support those tasks and help them accomplish their goals? </li></ul><ul><li>How will a mobile experience add value to their lives? </li></ul>

40.
Strategy tips <ul><li>Keep it simple </li></ul><ul><li>Limit features to only those crucial to your audience </li></ul><ul><li>Never put corporate goals above your users’ needs </li></ul><ul><li>“Try to determine the need that will motivate users to act or interact, and build the experience around that and nothing else” </li></ul>

41.
The problem with your current site <ul><li>Pinch, zoom, pan = crappy way to navigate </li></ul><ul><li>User experience =  </li></ul>

42.
Fighting the inevitable <ul><li>Temptation = how do I “mobilize” my current website? </li></ul>

43.
Fighting the inevitable <ul><li>Temptation = how do I “mobilize” my current website? </li></ul><ul><li>STRATEGY FIRST! </li></ul>

44.
Breaking out of the box <ul><li>Team “mobile device” exercise: </li></ul><ul><ul><li>List at least 10 properties your device has </li></ul></ul><ul><ul><li>List at least 5 tasks you can do with your device </li></ul></ul><ul><ul><li>List at least 1 business problem you can solve with this device </li></ul></ul><ul><ul><li>You have 10 minutes </li></ul></ul>

45.
To App or not to App: Solutions <ul><li>Responsive Design (RWD) : Create one site for both web and mobile that adapts naturally </li></ul><ul><ul><li>Most flexible, works on all devices </li></ul></ul><ul><li>Mobile website (different than your main site) or HTML5 Web Application </li></ul><ul><ul><li>Works on all phones with a web browser </li></ul></ul><ul><li>Native App </li></ul><ul><ul><li>Need a separate one for each specific platform/device </li></ul></ul>

47.
Responsive Web Design is <ul><ul><li>“ A flexible grid (with flexible images ) </li></ul></ul><ul><ul><li>that incorporates media queries to </li></ul></ul><ul><ul><li>create a responsive, adaptive layout.” </li></ul></ul><ul><ul><li>- Ethan Marcotte </li></ul></ul>

48.
Responsive Web Design <ul><li>A flexible grid </li></ul><ul><ul><li>Sizing in proportions </li></ul></ul><ul><ul><ul><li>% rather than px, creates the fluid layout </li></ul></ul></ul><ul><ul><ul><li>images too: flexible images so they are fluid too </li></ul></ul></ul><ul><li>CSS3 Media Queries </li></ul><ul><ul><li>Conditional styling </li></ul></ul><ul><ul><li>Allows you to target specific viewport sizes, device sizes and much more </li></ul></ul><ul><ul><li>Jeffrey Zeldman: “It’s what some of us were going for with ‘liquid’ web design back in the 1990s, only it doesn’t suck.” </li></ul></ul>

49.
RWD site – iPad - landscape Website created by CodeGeek.net: view it at http://codegeek.net/amscan-rwd

50.
RWD site – iPad - landscape Website created by CodeGeek.net: view it at http://codegeek.net/amscan-rwd

51.
RWD site – iPad - landscape Website created by CodeGeek.net: view it at http://codegeek.net/amscan-rwd

52.
Website created by CodeGeek.net: view it at http://codegeek.net/amscan-rwd

53.
Website created by CodeGeek.net: view it at http://codegeek.net/amscan-rwd

54.
RWD site – iPad - landscape Website created by CodeGeek.net: view it at http://codegeek.net/amscan-rwd

55.
RWD site – iPad – portrait orientation Website created by CodeGeek.net: view it at http://codegeek.net/amscan-rwd

56.
Responsive Web Design Example <ul><li>CodeGeek.net/amscan-rwd </li></ul>

57.
Mobile Website <ul><li>Designed specifically to meet the needs of your mobile audience </li></ul><ul><li>Stand-alone mobile site </li></ul><ul><ul><li>Can redirect via server-side code or JavaScript </li></ul></ul><ul><ul><li>http://bit.ly/kqYvjP for techniques </li></ul></ul><ul><li>One that utilizes some of your existing website’s content </li></ul><ul><ul><li>Utilize a WordPress plugin, e.g. WPTouch </li></ul></ul><ul><ul><li>or mobile theme </li></ul></ul><ul><ul><ul><li>Mobile theme: http://themeforest.net/item/1stgiantleap-mobile-template/139183 </li></ul></ul></ul><ul><ul><ul><li>Example http://breckenridgeadventuretours.com/ </li></ul></ul></ul><ul><ul><ul><li>By Debbie Campbell of Red Kite Creative </li></ul></ul></ul>

58.
Website created by Debbie Campbell @ Red Kite Creative

59.
Mobile version Website created by Debbie Campbell @ Red Kite Creative

60.
Mobile Website <ul><li>Content maintenance? </li></ul><ul><ul><li>If two different sites (web vs. mobile), extra work whenever content in common needs to be changed </li></ul></ul><ul><ul><li>If can do within a CMS then the common content between the two could come from the same source in the database </li></ul></ul>

61.
Mobile Frameworks <ul><li>You might want to prototype with a framework for rapid development. </li></ul><ul><li>JQTouch: targeted for iOS, makes Web apps look like iOS apps (list views, etc.) </li></ul><ul><li>JQuery Mobile: designed for iPhone, Android, WebOS, and more; includes touch and gesture support </li></ul><ul><li>Sencha Touch: designed for iPhone & Android; includes enhanced touch events </li></ul>

62.
Web Apps vs. Native Apps <ul><li>Web app </li></ul><ul><ul><li>Written in HTML and accessed via a web browser </li></ul></ul><ul><ul><li>All smart phones and many feature phones have web browsers </li></ul></ul><ul><li>Native apps </li></ul><ul><ul><li>Target specific device operating systems (iOS, Android, RIM, WebOS, Windows Phone 7, etc.) </li></ul></ul><ul><ul><li>Run natively and locally on the device rather than through a web browser </li></ul></ul>

63.
Native Apps - benefits <ul><li>It’s hot right now, lots of people downloading and buying apps </li></ul><ul><li>Easy to install – Apple users in particular are conditioned to the ease and convenience of the app store. </li></ul><ul><li>Easy to get paid – you could make a lot of money if you are selling your app </li></ul><ul><li>Great experience for users – apps can be very responsive </li></ul><ul><li>Can take advantage of all device sensors </li></ul><ul><ul><li>Location, accelerometers, camera, microphone, etc. </li></ul></ul>

64.
Native Apps - drawbacks <ul><li>Need a separate product for each platform </li></ul><ul><ul><li>Maintainability of code is co$tly </li></ul></ul><ul><ul><li>Takes lots of time and money to create separate apps for each platform </li></ul></ul><ul><ul><li>When new features are released the updates need to be made in multiple code bases </li></ul></ul><ul><ul><li>You can’t support all the smart phone operating systems out there. It’s just not possible. </li></ul></ul><ul><li>Apps may require approval </li></ul><ul><ul><li>Apple App Store – up to 2 week approval timeline </li></ul></ul><ul><ul><li>Including updates for bug fixes – time delay until users get the latest version </li></ul></ul><ul><li>Multiple versions to support “in the wild” </li></ul>

65.
Web Apps <ul><li>Many smart phones are now using Webkit-based browsers: </li></ul><ul><ul><li>iOS, Android, Blackberry 6 </li></ul></ul><ul><ul><li>Notable exceptions: Windows Phone 7, Symbian </li></ul></ul><ul><li>Webkit browsers support </li></ul><ul><ul><li>HTML5 including </li></ul></ul><ul><ul><ul><li>LocalStorage – allows offline use (in the browser!) </li></ul></ul></ul><ul><ul><ul><li>Geolocation </li></ul></ul></ul><ul><li>No approval needed from any app store </li></ul><ul><li>People are always using the latest version </li></ul>

67.
Devices (We’re in the home stretch)

68.
Devices & Your Strategy <ul><li>Which devices does your audience use? </li></ul><ul><ul><li>Stay at home moms? </li></ul></ul><ul><ul><li>Business people? </li></ul></ul><ul><ul><li>Creative types? </li></ul></ul><ul><ul><li>Students? </li></ul></ul><ul><li>Find out </li></ul><ul><ul><li>Check your analytics or server logs </li></ul></ul><ul><ul><li>Go to a mobile store and shop for your audience </li></ul></ul><ul><ul><li>Talk to your audience: ask, watch, record </li></ul></ul>

69.
Google Analytics

70.
Google Analytics

71.
Tips for Device Support <ul><li>Start with the devices your audience uses </li></ul>

72.
Mobile Strategy Checklist <ul><li>Context </li></ul><ul><li>User needs, goals, and tasks </li></ul><ul><li>You’ve figured out how to add value to their lives and mobile experience </li></ul><ul><li>Device research </li></ul><ul><li>Budget? </li></ul><ul><li>Select the approach: </li></ul><ul><ul><li>Responsive Design </li></ul></ul><ul><ul><li>Mobile site/app </li></ul></ul><ul><ul><li>Native App </li></ul></ul>

73.
Wrapping up <ul><li>The mobile context is unique </li></ul><ul><li>Know your audience </li></ul><ul><li>Keep it simple </li></ul><ul><li>Create Mobile Experiences </li></ul>

74.
How’d you get so good so fast? Flickr: Kaptain Kobold

75.
Resources - books <ul><li>Mobile Design and Development </li></ul><ul><ul><li>Brian Fling, 2009, O’Reilly </li></ul></ul><ul><li>Tapworthy: Designing Great iPhone Apps </li></ul><ul><ul><li>Josh Clark, 2010, O’Reilly </li></ul></ul><ul><li>Building iPhone Apps with HTML, CSS, and JavaScript </li></ul><ul><ul><li>Jonathan Stark, 2010, O’Reilly </li></ul></ul><ul><ul><li>Lots on PhoneGap </li></ul></ul>

76.
Resources - web <ul><li>LukeW.com: </li></ul><ul><ul><li>Check out his articles and presentations </li></ul></ul><ul><li>Responsive Web Design </li></ul><ul><ul><li>http://www.alistapart.com/articles/responsive-web-design/ </li></ul></ul>

77.
Where to find me <ul><li>Twitter: @ron_z </li></ul><ul><li>[email_address] </li></ul><ul><li>codegeek.net </li></ul><ul><li>Podcast: EinsteinAndSockMonkey.com </li></ul><ul><ul><li>@EinsteinMonkey </li></ul></ul><ul><ul><li>My web design/dev/ux podcast with Steve Martin @CleverCubed </li></ul></ul><ul><li>SocialMediaPilots.com </li></ul><ul><li>IgniteFortCollins.com and @IgniteFC </li></ul><ul><li>The Fort Collins Hive, shared office space for creatives: HiveFC.com </li></ul>

78.
Mobile is the new Godzilla Fort Collins Internet Professionals July 28, 2011

79.
<ul><li>“ … millions of people are now walking around with a gizmo in their pocket that not only knows where they are but also plugs into the Internet to share that info, merge it with online databases, and find out what - and who - is in the immediate vicinity… Simply put, LOCATION CHANGES EVERYTHING. This one input - our coordinates - has the potential to change all the outputs. Where we shop, who we talk to, what we read, what we search for, where we go - they all change once we merge location and the Web. ” </li></ul><ul><ul><li>– Mathew Honan, WIRED magazine, 1/19/09 </li></ul></ul>

80.
Going with an App? <ul><li>Take an honest look at the devices you can support </li></ul><ul><li>You cannot support everything </li></ul><ul><ul><li>At least 10 operating systems </li></ul></ul><ul><ul><ul><li>iOS, Android, RIM, WebOS, Windows Phone 7, Symbian, … </li></ul></ul></ul><ul><ul><li>Hundreds of device models </li></ul></ul><ul><ul><ul><li>iOS: iPhone vs. iPad </li></ul></ul></ul><ul><ul><ul><li>Android: phone OS versions fragmented, device capabilities vary, and phone vs. tablet </li></ul></ul></ul><ul><ul><ul><li>RIM: phone vs. tablet </li></ul></ul></ul><ul><ul><ul><li>… </li></ul></ul></ul>

81.
<ul><li>“ Supporting and testing for even a small percentage of the devices in the market will bury your resources… ” </li></ul><ul><ul><li>– Brian Fling </li></ul></ul>

82.
To App or not to App: Solutions <ul><li>Responsive Design (RWD) : Create one site for both web and mobile that adapts naturally </li></ul><ul><ul><li>Most flexible, works on all devices </li></ul></ul><ul><li>Mobile website (different than your main site) or HTML5 Web Application </li></ul><ul><ul><li>Works on all phones with a web browser </li></ul></ul><ul><li>Native App </li></ul><ul><ul><li>Need a separate one for each specific platform/device </li></ul></ul><ul><li>Hybrid : Web Apps that feel Native </li></ul><ul><ul><li>http://www.lukew.com/ff/entry.asp?1303 </li></ul></ul>