Beyond content with responsive design

6,187 views

Published on

Saasu's Chief Design Officer, Grant Young, presentation to the Designing for Mobility 2013 conference, held in Melbourne, 1 March 2013. Grant outlines the reasoning behind Saasu's choice of responsive design along with 7 early learnings derived from this process.

Downloadable slide deck (with speaker notes) on our blog at: http://blog.saasu.com/2013/03/04/beyond-content-with-responsive-design/

Published in: Design

Beyond content with responsive design

  1. DESIGNING FOR MOBILITY 2013Beyond Content with Responsive DesignPRESENTED BYGrant YoungChief Design Officer, Saasugrant@saasu.com@saasu @grantyoung Commercial in Confidence. © 2013 Saasu Pty Ltd. All Rights Reserved.
  2. 10,932 VALUE OF AUD TRANSACTIONS MANAGED USING SAASU $34,940,758,146 NUMBER OF GLOBAL SMALL BUSINESS CUSTOMERS BUSINESS SIZE (EMPLOYEES) Micro 88% Small 9% Medium 2% Large <1% 50+ NUMBER OF COUNTRIES SAASU USERS SINCE 2000 👥 WITH SAASU CUSTOMERS 📦  320 2x 1mio+INVENTORY ITEMS 227K+ INVOICES/MTH REGISTERED PARTNERS WINNER CEBIT INNOVATION AWARD 44.7k
  3. BACKGROUNDWhy responsive?
  4. SAVE SAVENative Web Hybrid In-app HTML/CSS
  5. Device ProliferationImage: Brandon Christopher Warren @ Flickr http://www.flickr.com/photos/brandoncwarren/4164759025/ adactio @ Flickr http://www.flickr.com/photos/adactio/6153558098/
  6. TE•TO•TOAYTM
  7. TE•TO•TOAYTM
  8. TE•TO•TOAYTM Test Early
  9. TE•TO•TOAYTM Test Often
  10. TE•TO•TOAYTMTest On All Your Target Machines
  11. CHOOSE YOUR SCOPEContextual vs. Fully Featured
  12. Cut featuresCut content, defersecondary informationEnlarge interfaceelements
  13. API
  14. Image: hellogeri @ Flickr http://www.flickr.com/photos/hellogeri/7290560120/ 9025/ The notion that you should create a separate, stripped- down version for ‘the mobile use case’ might be appropriate if such a clean mobile use case existed, but it doesn’t.
  15. What is “mobile”?
  16. IN PRACTICE7 things we’ve learnt along the way
  17. 1 Web apps are different to content sites
  18. Mobile firstImage: Leeks @ Flickr http://www.flickr.com/photos/observatoryleak/3187926964/
  19. Non-touch Touch-based 7” Tablet 9” Tablet Desktop/ Spreadsheets Paper (Print) POSSmartphone Smartphone Laptop
  20. Non-touch Touch-based 7” Tablet 9” Tablet Desktop/ Spreadsheets Paper (Print) POSSmartphone Smartphone Laptop
  21. Non-touch Touch-based 7” Tablet 9” Tablet Desktop/ Spreadsheets Paper (Print) POSSmartphone Smartphone Laptop Primary design target
  22. BENEFITS OF A ‘TABLET FIRST’ APPROACHDesign for the primary use caseDefer secondary contentTouch-friendly designImpetus to minimise data entryConsider the mobile-device context
  23. Simplified Progressivetranslation enhancement
  24. 1 Web apps are different to content sites2 Breakpoints shouldn’t match devices
  25. 320x480  1024x768  1024+ (Touch) (Touch/Non-touch) (Landscape, Non-touch)
  26. Small  Medium  Large(Touch) (Touch/Non-touch) (Landscape, Touch/Non-touch)
  27. 1 Web apps are different to content sites2 Breakpoints shouldn’t match devices3 Web apps are not native apps
  28. UIWindow1024 x 768
  29. 1 Web apps are different to content sites2 Breakpoints shouldn’t match devices3 Web apps are not native apps4 Work processes need to evolve
  30. PatternsImage: Thomas Hawk @ Flickr http://www.flickr.com/photos/thomashawk/33364362/
  31. 1 <div class="form-field auto-complete span1">2 <label for="date">Date</label>3 <input type="text" name="date" placeholder="" />4 <a href="#" class="icon">date</a>5 </div>67 <style>8 input[type=text] {9 -webkit-appearance: none;10 border-radius: 0;11 float: left;12 border: 1px solid #4b4b4b;13 width: 82%;14 padding: 0 15% 0 3%;15 height: 32px;16 }17 </style>
  32. 1 <div class="form-field auto-complete span1">2 <label for="date">Date</label>3 <input type="text" name="date" placeholder="" />4 <a href="#" class="icon">date</a>5 </div>67 <style>8 input[type=text] {9 -webkit-appearance: none;10 border-radius: 0;11 float: left;12 border: 1px solid #4b4b4b;13 width: 82%;14 padding: 0 15% 0 3%;15 height: 32px;16 }17 </style>
  33. 1 Web apps are different to content sites2 Breakpoints shouldn’t match devices3 Web apps are not native apps4 Work processes need to evolve5 Don’t think in pixels
  34. Pixels are evil...Image: Alex Dram @ Flickr http://www.flickr.com/photos/alexdram/3707617908/
  35. grid System: This is an example of the grid system in place for the webscreen application mock up for the iPad at 1024px wide.example (please note that this example application is not finalised artwork)MENU BAR80x80px5 grid boxes
  36. %
  37. 1 Web apps are different to content sites2 Breakpoints shouldn’t match devices3 Web apps are not native apps4 Work processes need to evolve5 Don’t think in pixels6 Grid frameworks only part of the solution
  38. Layout Grid
  39. Layout Grid
  40. Module Grid
  41. 1 Web apps are different to content sites2 Breakpoints shouldn’t match devices3 Web apps are not native apps4 Work processes need to evolve5 Don’t think in pixels6 Grid frameworks only part of the solution7 QA is hard
  42. 2x
  43. 3x
  44. 4x
  45. ?x
  46. 1 Web apps are different to content sites2 Breakpoints shouldn’t match devices3 Web apps are not native apps4 Work processes need to evolve5 Don’t think in pixels6 Grid frameworks only part of the solution7 QA is hard
  47. FIND OUT MOREwww.saasu.comCONTACTGrant YoungChief Design Officer, Saasugrant@saasu.com@saasu @grantyoung

×