Being Mobile

3,462 views

Published on

Slides from the DrupalCamp Toronto 2012 version of this presentation.

Published in: Business
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,462
On SlideShare
0
From Embeds
0
Number of Embeds
139
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • \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
  • Being Mobile

    1. Photo: Steve Rhodes (ari) Martin Kuplens-EwartBeing Mobile Product Designer, BraveNewCode
    2. Hi, I’m Martin
    3. In the next half-hour… Why Mobile 10 Rules Tactics Questions Matters
    4. Photo: clarkmaxwellWhy 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 ROICount all conversions!
    23. Photo: Jason Cosper (boogah)Bonus:M obile ROICount all conversions!• Mobile Sales
    24. Photo: Jason Cosper (boogah)Bonus:M obile ROICount all conversions!• Mobile Sales• Phone Calls
    25. Photo: Jason Cosper (boogah)Bonus:M obile ROICount all conversions!• Mobile Sales• Phone Calls• Store Locator Clicks
    26. Photo: Jason Cosper (boogah)Bonus:M obile ROICount 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-EwartBraveNewCode Inc.@mkuplens | @bravenewcode | bravenewcode.com

    ×