A mobile primer

An introduction to the mobile web, ways of creating mobile websites, web vs native and some of the pros and cons of the options available to a company tackling mobile for the first time.

Transcript

1. A MOBILE PRIMER Getting started with mobile, navigating the mobile minefield
2. A tale from… http://www.flickr.com/photos/iknow-uk/37684369
3. Some mobile experiences promise...
4. …more than they can deliver
5. Ensure your adventures in mobile end up like this:
6. Not this:
7. Why does mobile matter now? http://www.flickr.com/photos/observatoryleak/ 3187926964/
8. In December 2010, nearly 47 percent of mobile subscribers (browsed the mobile web, accessed applications, downloaded content or accessed The 2010 Mobile Year in Review - comScore, Inc - http://bit.ly/gEOkIM
9. Nearly half (48 percent) of U.S. phone owners can browse the full more than 90 percent of mobile subscribers in the U.S can browse full web or WAP The 2010 Mobile Year in Review - comScore, Inc - http://bit.ly/gEOkIM
10. The comScore 2010 Mobile Year in Review FEBRUARY 2011 !"#$%&'()*$+$*$&,'$-'*.&'/0102'3/4'5-6'7585-'#9':'1.5;&'"<'="*5%'!"#$%&'/,&;,! 1">;)&?')"@1)";&'!"#$A&-,2'B'@"0'5+C0'&-6$-C'D&)EFGHG2'7585-'65*5'<";'D&)EFGHG'"-%9! U.S. EU5 Japan Played Games 23.2% 25.3% 16.3% Accessed Search 21.4% 14.9% 31.5% Captured Video 20.2% 26.1% 15.8% Accessed Maps 17.8% 13.0% 17.1% Used Instant Messaging 17.2% 14.2% 3.6% Accessed Sports Info 15.8% 12.0% 18.2% Listened to Music 15.7% 25.0% 12.9% Accessed Bank Accounts 11.4% 8.0% 7.0% Accessed Financial News or Stock Quotes 10.2% 8.0% 16.5% Accessed Restaurant Info 10.0% 6.5% 9.7% Accessed Traffic Reports 8.4% 7.4% 14.0% Accessed Classifieds 7.3% 4.8% 3.6% Accessed Online Retail 6.5% 5.2% 8.5% Watched TV and/or Video 5.6% 5.7% 22.8% Accessed Travel Service 4.4% 4.6% 2.9% Social Media Use Continues to Grow on Mobile Devices Social networking was among the fastest growing activities for mobile users since December 2009. Over the last year the number of mobile users that accessed a social networking site at least once a month via The 2010 Mobile Year in Review - comScore, Inc - http://bit.ly/gEOkIM
11. What should we do first? http://www.flickr.com/photos/inf3ktion/42046238
12. Test, test, test
13. What devices should we test on? http://www.flickr.com/photos/origomi/ 47113865/
14. There are more than 60 different browser versions being deployed across mobile handsets from over a dozen vendors, making mobile technology increasingly The 2010 Mobile Year in Review - comScore, Inc - http://bit.ly/gEOkIM
15. http://www.alistapart.com/articles/smartphone-browser- landscape/ PPK will guide you http://www.quirksmode.org/
16. Research is key… http://www.flickr.com/photos/stuckincustoms/ 4326541391/
17. …but be sure to research the whole picture
19. http://www.comscoredatamine.com/category/ mobile/
20. specific software (original equipment manufacturer), and !"#$%&'()*+,$-."/+0$)/$1.+$2343$ 4"(*&+5$&"64&"*+$7"8)9+/0:$;</=>?@?$1"$A+&=>?@?$ 1 Apple iPhone 3GS 2 Apple iPhone 4 3 BlackBerry Curve 8530 4 LG - Cosmos 5 Motorola - Droid Top Purchase Considerations for Consumers in The 2010 Mobile Year in Review - comScore, Inc - http://bit.ly/gEOkIM
21. The 2010 Mobile Year in Review - comScore, Inc - http://bit.ly/gEOkIM 22.3 6.8 8.5 16.7 20.9 24.8 cturer installed base U.S Market Share, 3 month average ending D Sam LG Moto RIM Appl Othe
22. comScore datamine, 03/2011 - http://bit.ly/ e5UKIJ
23. Where do we get these phones from? http://www.flickr.com/photos/maynard/100749600/
26. Further reading • The 2010 Mobile Year in Review - comScore, Inc – bit.ly/gEOkIM • Research into use of mobile around the home l.yimg.com/a/i/us/ayc/pdf/ mobile_shopping_insight_deck.pdf • deviceanywhere.com • perfectomobile.com • Attend bdconf.com
27. “Our site could be easier to use on mobile. What next?”
28. Mobile Sites
29. CMS Device detection Desktop Mobile Template switching Device
31. http://wordpress.org/extend/plugins/wordpress-mobile- pack/
32. How can we reliably detect which device is coming?
33. http://deviceatlas.com/
35. http://
36. Responsive web design
40. http://mediaqueri.es
41. http://bit.ly/ i0dvaJ
42. Scale up from mobile to support the widest range of devices
43. http://www.flickr.com/photos/ieteam/2631072309/ A problem
44. Solve it with JS • https://github.com/scottjehl/Respond • http://code.google.com/p/css3- mediaqueries-js/
45. Or use conditional comments and multiple stylesheets http://adactio.com/journal/4494/
46. Consider…
47. Responsive requires all the data to be downloaded to all devices, even if it isn’t used
48. http:// tinysrc.net/
49. In a responsive design HTML will be the same and in the same order on all devices
53. How easy is it to navigate a single column…
55. Many sites will not translate into a responsive design without being redesigned
57. Further reading • YIBBUs Mobile web reference - yiibu.com/articles/mobile-web- reference/page-3.html • slideshare.net/bryanrieger/rethinking- the-mobile-web-by-yiibu • Our example of responsive web design – ribot.co.uk
58. If you decide on a templating solution, follow some simple rules…
59. Rule #1 – Don’t break the web
60. No need to send me to m.dallasfed.org or dallasfed.mobi
61. …but if you must, www.dallasfed.org/research should always link to the research page, even if it is m.dallasfed.org/research
62. Allow the user the option of viewing the full site – keeping the original page in place
63. Just because you can, doesn’t mean you should - keep things fluid
64. Find alternatives to Flash
65. Test again
66. What about the mobile
67. “Users are unlikely to want to view our portfolio on the small screen of a smartphone. However, they might want to get directions to our office or our phone number if they get lost.” Paul Boag – boagworld.com/technology/ making-mobile-mistakes/
68. “Personally, if I visit Headscape, I’m almost definitely looking for your portfolio…I’m just as likely to be browsing on my iPhone as I am on my laptop. In fact, I’m probably laying in bed reading my news feeds on my iPhone, in the US, where directions or phone listings for your offices are my last priority.” Scott Jehl
69. 13% 27% Where do you primarily access your financ At home At work Out and abo Mobile != in a hurry, on the move http://www.comscoredatamine.com/2011/03/home-tops-for-mobile-financial-
70. “We’ve been doing some informal research of people’s impressions of ‘mobile web sites’. The most common comment seems to be that people want all the content and all the functionality (but with a more appropriate layout of course). “ Stephanie Reiger
71. Perhaps the desktop site is the problem
72. Further reading • Convert flash to HTML5/CSS3 - http:// labs.adobe.com/downloads/ wallaby.html • Better still, create CSS3 animations directly - http://www.sencha.com/ products/animator/ • http://mark-kirby.co.uk/2011/the- mobile-context/
73. There is a way of providing context-specific content to mobile users…
74. Apps
75. “…but we don’t have the finances or in-house teams to
76. Web apps from a new URL
77. Web apps packaged as native apps
78. PhoneGap http://www.phonegap.com/
80. Target your key smart phone platforms
81. http://www.phonegap.com/case-
82. “Actually, we already have an iPhone developer. Should we go web or native?”
83. You get less reusable code in native apps
88. There are development pitfalls to be aware of with native apps
89. You get access to most device APIs from PhoneGap
90. …but what about that last 10%?
91. Pros of web and native Web • More resuable code • Easier to source great developers • Easier to create neutral looking apps • Faster to market Native • Full access to device APIs • Best performance • Easier to create native looking apps
92. How can we ensure people find our app?
93. Apps need promotion
94. “So should we do a mobile site or application?”
95. The 2010 Mobile Year in Review - comScore, Inc - http:// bit.ly/gEOkIM …or both? 82% of app users also use their browser 78% of browser users also use
96. The take-home • Mobile matters today • Test that your site works on target devices • All your URLs should resolve to the same core message, regardless of device • Use responsive or templates, but test thoroughly
97. Mark Kirby Mail me at Follow @markirby Blogs at mark-kirby.co.uk Lead developer at ribot.co.uk