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
• 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