Being Mobile
•
7 likes•1,603 views
Slides from the DrupalCamp Toronto 2012 version of this presentation.
Recommended
More Related Content
Viewers also liked
Viewers also liked (18)
Similar to Being Mobile
Similar to Being Mobile (12)
Recently uploaded
Recently uploaded (20)
Being Mobile
- 1. Photo: Steve Rhodes (ari) Martin Kuplens-Ewart Being Mobile Product Designer, BraveNewCode
- 3. In the next half-hour… Why Mobile 10 Rules Tactics Questions Matters
- 4. Photo: clarkmaxwell Why Mobile Matters
- 5. Photo: clarkmaxwell Why Mobile Matters • Reputation
- 6. Photo: clarkmaxwell Why Mobile Matters • Reputation • Sales
- 7. Photo: clarkmaxwell Why Mobile Matters • Reputation • Sales • It’s not going to stop…
- 8. 10 Rules
- 9. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 10. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 11. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 12. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 13. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 14. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 15. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 16. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 17. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 18. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 19. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 20. 10 Rules • Be Quick • Streamline Conversion • Simplify Navigation • Make it Local • Make it Thumb-Friendly • Join the Dots • Design for Comprehension • Give Choice • Keep it Accessible • Listen, Learn, Iterate
- 21. Photo: Jason Cosper (boogah) Bonus: M obile ROI
- 22. Photo: Jason Cosper (boogah) Bonus: M obile ROI Count all conversions!
- 23. Photo: Jason Cosper (boogah) Bonus: M obile ROI Count all conversions! • Mobile Sales
- 24. Photo: Jason Cosper (boogah) Bonus: M obile ROI Count all conversions! • Mobile Sales • Phone Calls
- 25. Photo: Jason Cosper (boogah) Bonus: M obile ROI Count all conversions! • Mobile Sales • Phone Calls • Store Locator Clicks
- 26. Photo: Jason Cosper (boogah) Bonus: M obile ROI Count all conversions! • Mobile Sales • Phone Calls • Store Locator Clicks • Store Sales …
- 27. Photo: Steve Rhodes (ari) Tactics
- 28. Photo: Steve Rhodes (ari) Tactics • Responsive Theme • Separate Mobile Site • Server-Side Optimization / Dynamic Serving
- 29. Tactics • Responsive Theme • Separate Mobile Site • Server-Side Optimization / Dynamic Serving
- 30. Tactics • Responsive Theme • Separate Mobile Site • Server-Side Optimization / Dynamic Serving
- 31. Tactics • Responsive Theme • Separate Mobile Site • Server-Side Optimization / Dynamic Serving
- 32. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization
- 33. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization
- 34. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 35. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 36. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 37. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 38. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 39. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 40. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 41. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 42. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 43. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 44. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 45. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 46. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 47. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 48. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 49. Comparing Options Responsive Separate Mobile Server-Side Theme Site Optimization Ten Rules 6.5 / 10 8 / 10 9 / 10 Initial Investment $ - $$$ $$$ $ - $$ Content Maintenance $ $$$ $ - $$ Layout Iteration $$ $ $
- 50. What do I suggest?
- 51. In Review… Why Mobile Mobile ROI 10 Rules Tactics Matters
- 52. Questions?
- 53. Thank you. Martin Kuplens-Ewart BraveNewCode Inc. @mkuplens | @bravenewcode | bravenewcode.com
Editor's Notes
- \n
- • Product Designer for BraveNewCode\n• Fifteen years in user experience strategy, design, and development\n
- \n
- Why it matters (to your clients!)\nReputation\n67% of mobile users more likely to buy from mobile-optimized\n61% will go elsewhere if not mobile-optimized\n50% will abandon brand loyalty!\n\nSales\n75% of mobile users engage actively - view pages, buy, etc.\n~20% of mobile site visits lead to a phone call\n\nNot going to stop\n- Mobile use on the rise, by 2015 more mobile web use than desktop\n
- Why it matters (to your clients!)\nReputation\n67% of mobile users more likely to buy from mobile-optimized\n61% will go elsewhere if not mobile-optimized\n50% will abandon brand loyalty!\n\nSales\n75% of mobile users engage actively - view pages, buy, etc.\n~20% of mobile site visits lead to a phone call\n\nNot going to stop\n- Mobile use on the rise, by 2015 more mobile web use than desktop\n
- Why it matters (to your clients!)\nReputation\n67% of mobile users more likely to buy from mobile-optimized\n61% will go elsewhere if not mobile-optimized\n50% will abandon brand loyalty!\n\nSales\n75% of mobile users engage actively - view pages, buy, etc.\n~20% of mobile site visits lead to a phone call\n\nNot going to stop\n- Mobile use on the rise, by 2015 more mobile web use than desktop\n
- \n
- \n
- - Users expect instant-on from mobile devices\n- Mobile pages must load quicker than desktop\n
- - Use analytics to identify priority content\n- Reduce navigation options & minimize scrolling/zooming\n- Search is critical for complex sites\n
- - Where possible links and buttons should be large, centered\n- Increase active click area (e.g. entire content excerpt, not just title)\n- Make labels active\n
- - Content-background contrast should be high\n- Rewrite content for easyreading\n- Size elements for the screen\n\n
- No Flash! (Need I say it?)\nAllow your layout to adapt to vertical/horizontal orientation\n
- - Make action triggers obvious\n- Provide click-to-call phone numbers\n- Reduce steps where possible (for ecommerce, consider making ‘same as billing’ the default for shipping)\n- Trim forms, omitting nice-to-have fields\n- Make data entry easier with check boxes, lists, and scroll menus\n
- - Clickable phone number!\n- If clicks-and-bricks, show location/store locator on landing page\n- Include maps/directions, use device location to give direction to nearest branch\n- If retail, allow for stock checks at nearby locations\n
- - Enable users to move between devices without repeating tasks\n- Simplify, but avoid eliminating application functionality on mobile \n
- - Guide smartphone users to your mobile interface\n- Give them the ability to escape to full desktop view\n- Remember their preference\n
- - Use analytics to tweak content selection and layout\n- Perform user tests to validate assumptions\n- Keep working on the mobile site to address changing needs and demands\n
- Priceline.com\nVisit duration up 45%\nPage views up 300%\nMobile conversions up 31%\n
- Priceline.com\nVisit duration up 45%\nPage views up 300%\nMobile conversions up 31%\n
- Priceline.com\nVisit duration up 45%\nPage views up 300%\nMobile conversions up 31%\n
- Priceline.com\nVisit duration up 45%\nPage views up 300%\nMobile conversions up 31%\n
- Priceline.com\nVisit duration up 45%\nPage views up 300%\nMobile conversions up 31%\n
- \n
- - One build (easy to sell b/c currently sexy)\n- One set of content\n- Lots of Frameworks & ready-made themes\n- Strong branding\n- User locked to mobile view\n- Hiding & scaling assets == big downloads for mobile, consumes RAM\n- Can’t iterate mobile effectively, requires impact on desktop\n\nBigYouth: 6MB mobile homepage (some handwritten mobile optimizations)\n
- - Allows content & copy geared to mobile\n- Useful when dealing with third-party vendors & SaaS integrations\n- Often a solution provided by external vendors\n- Mobile-sized images == no excess downloads\n- Free to iterate mobile features & interface\n- User can switch freely\n- Increased maintenance burden, duplicate content entry\n- Require second set of templates\n\nPriceline: 400KB mobile homepage\n
- Note: BraveNewCode does this with WPtouch\n\n- Simplified maintenance (one set of content)\n- Uses built-in CMS tools to optimize media before shipping\n- No hidden DOM elements\n- User can switch freely\n- Tools may have limited branding support, reputation for making sites “samey”\n- Requires further theme development\n\nT+L: 600KB mobile homepage, but full content available. No switch.\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- Ten rules:\nResp. score down on quick (large file transfers), streamlined conversion (.5), choice, iteration.\nSep. score down on joining dots, giving choice (user locked in)\n\nInvestment:\n- Responsive cheap when pre-built, expensive for custom\n- SSO: cheap when tools are robust, expensive if have to code for branding\n\nContent Maintenance:\n- SSO more expensive if tools don’t automate optimization or relying on 3rd party\n\nIteration:\n- Responsive: have to test across the board for each significant change\n
- \n
- - Mobile Matters, because sales and reputation are increasingly dependent on mobile-optimized sites\n- 10 Rules: Be Quick; Simplify Navigation; Make it Thumb-Friendly; Design for Comprehension; Keep it Accessible; Streamline Conversion; Make it Local; Join the Dots; Give Choice; Listen, Learn, Iterate.\n- Tactics: Responsive, Separate, Server-side Optimized - each with advantages and disadvantages. Must assess based project-by-project.\n
- \n
- \n