Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX design for every screen

UX design for every screen

In this session, we will explore the how the recent explosion of devices has disrupted the process of designing a website that we've crafted over the past decade.

When designers only have one instance of website (i.e., desktop) to design, the layout is uniform. The header, content area, sidebar, and footer all remain static. Furthermore, the elements are relatively uniform as well. Buttons, navigation, typography, and images are all basically the same across across the various pages. But if you are designing a responsive website – one whose look and feel adapts depending whether you're using a phone, laptop, or tablet – then these elements and especially the layout begin to diverge.

First presented at DrupalCon Denver 2012


Aaron Stanush

March 21, 2012

More Decks by Aaron Stanush

Other Decks in Design


  1. Aaron Stanush DrupalCon Denver | March 21, 2012 UX design

    for every screen
  2. Aaron Stanush Co-founder, designer Four Kitchens aaron@fourkitchens.com @aaronstanush

  3. A new process

  4. None
  5. None
  6. trentwalton.com/2012/02/02/redefined Trent Walton To design responsive websites e ectively and

    responsibly, I had to completely rede ne the way I view the web.
  7. How we’ve been doing it for the last decade •

    Requirements and planning • Site maps, user workflows, wireframes • Comps • Build and style the website
  8. The new way • Requirements and planning • Content strategy

    (mobile first!) • Design systems > comps • Prototyping is key • Build. Design. Iterate. Design. Build. Iterate.
  9. What’s changed? • There is no more “page” • Comps

    are no longer golden • Elements are no longer static • Prototyping happens much earlier • Designers and developers working closer • Higher level of client communication
  10. What’s the plan? Future Friendly + Mobile first

  11. None
  12. None
  13. fastcodesign.com/1663315/banksimple-wants-to-shake-up-banking-with-cutting-edge-ui-design Bill DeRouchey, Banksimple Designing the mobile app rst forced

    us to strip down to essentials.
  14. User > Content > Mobile

  15. Content strategy

  16. “The mobile web”

  17. flickr.com/photos/svenreed/5919406108

  18. • There is no mobile web • the-haystack.com/2011/01/07/there-is-no-mobile-web • The

    myths of mobile context • globalmoxie.com/jhc/prez/mobile-context-myth-fowd.pdf
  19. markboulton.co.uk/journal/comments/a-richer-canvas Mark Boulton Start designing from the content out, rather

    than the canvas in.
  20. alistapart.com/articles/future-ready-content Future friendly content • What are the types of

    content and why? • Make it modular • What’s really important? • How will the tool organize this stu ?
  21. Now your content is ready to travel

  22. Having the content first would be great, but...

  23. http://24ways.org/2011/extracting-the-content Page tables

  24. The page is dead. Long live the content.

  25. Design strategy

  26. Responsive UX design • Workflows aim for the best user

    experience. • Wireframes can help organize layout and convey content flow. • Design systems save time and create patterns. • Prototypes help the team fail faster. They can also provide client value.
  27. Workflows and wireframes • Responsive is all about providing the

    best experience. • These can di er between devices. • Wireframes are (probably) still necessary • Making sense of this “no more page” nonsense.
  28. Design systems • styletil.es (@SamanthaToy) • Build a style guide/pattern

    library • A comp is (probably) still necessary, but not for every page at every viewport. • Goal: Get the design into the browser quickly.
  29. Prototyping • The browser is where the responsive magic happens.

    • A “living” design allows for richer discussions between developers and designers. • Clients will “get it” sooner. • Fail fast. Succeed fast.
  30. Mobile UX best practices

  31. Best practices = Best experience

  32. None
  33. Mobile First, Luke W. Mobile UX priorities • Understand how

    people use their devices and why. • Content > navigation • Best experience doesn’t necessarily mean limiting choices. • Maintain clarity and focus.
  34. mobilewebbestpractices.com What makes for a good experience? • Make it

    readable. • Make it relevant. • Keep forms to a minimum. • Avoid modal overlays. • Make it snappy.
  35. Layout • Design for screens not devices = Breakpoints •

    Be fluid, liquid, flexible. • Think in proportions not pixels. • Consider device orientation.
  36. None
  37. lukew.com/ /entry.asp?1514 Responsive layout patterns mediaqueri.es

  38. trentwalton.com Mostly fluid

  39. Layout shifter foodsense.is

  40. ?

  41. stuffandnonsense.co.uk/blog/about/ we_need_a_standard_show_navigation_icon_for_responsive_web_design

  42. Navigation • Content > Navigation • Don’t try to make

    your dropdowns a work of art. • Put fixed toolbars at the top. • Consider OS and hardware buttons.
  43. Responsive images • How do your images scale for various

    widths and orientations? • Reduce the number of images if you can. • Be careful of using huge images.
  44. Mobile text • Make it readable. • Consider the flow

    of text. • Be aware of typeface characteristics. • Use font hosting services wisely.
  45. globalmoxie.com/blog/buttons-inspired-ui-hack.shtml Gestures • Buttons are a hack. • Make gestures

    obvious. • Current conventions: Tap and swipe (pull down?) • Don’t: Make your users read a manual. • Do: Use visual cues like coachmarks.
  46. Gestures • There is a need for universal conventions. •

    Consider competing OS and browser gestures. • Provide alternatives to gestures.
  47. Designing for touch • Design for humans, embrace the physicality

    of touch. • Size and space elements appropriately (40px rule) • Not every device is touch capable.
  48. Tools

  49. flickr.com/photos/11855464@N00/6829899789

  50. abookapart.com/products/responsive-web-design Responsive design is... • Fluid grids • Responsive media

    • Media queries
  51. Fluid grids • goldengridsystem.com • github.com/davatron5000/Foldy960 • csswizardry.com/fluid-grids • gridsetapp.com

    (Coming soon!)
  52. Wireframing/prototyping • Whiteboard! • Balsamiq • InDesign • Axure •

  53. Responsive media • Images • Slideshows • Videos • fitvidsjs.com

    • Text • fittextjs.com
  54. Responsive images • w3.org/community/respimg • filamentgroup.com/lab/ responsive_images_experimenting_with_context_ aware_image_sizing • adactio.com/journal/4997

    • markboulton.co.uk/journal/comments/responsive- advertising
  55. Viewports = Media queries @media'screen'and'(max*device*width:2480px)'{ .column'{ float:'none; } } ‣

    Media type: screen (desktop, phone, tablet) ‣ Query for media feature: width, height, orientation, pixel density
  56. Prototype frameworks • foundation.zurb.com • twitter.github.com/bootstrap • goldilocksapproach.com • html5boilerplate.com/mobile

    • stu andnonsense.co.uk/projects/320andup
  57. Touch frameworks jquerymobile.com sencha.com

  58. Testing for every screen

  59. Test on real devices bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank

  60. labs.adobe.com/technologies/shadow Adobe Shadow

  61. BrowsterStack.com

  62. opera.com/developer/tools

  63. blaze.io/mobile

  64. MattKersley.com/responsive

  65. Responsive UX process • Users > content > mobile •

    Focus creates clarity and usability • Use design systems • Get to prototypes quickly • Cohesive designer/developer unit • Iterate with the client early and often
  66. Luke Wroblewski, Mobile First If you start to hear customers

    asking for your desktop web experience to be more like the simple, easy-to- use mobile one—you’re doing it right.
  67. Selling responsive

  68. cloudfour.com/first-thing-you-should-do-to-optimize-your-desktop-site-for-mobile Do your clients need a responsive website? No.

  69. Your clients’ users don’t care whether a site is responsive

    or not.
  70. bradfrostweb.com/blog/web/responsive-web-design-missing-the-point They do need to get stu done. Fast.

  71. Credits Consider this • The desktop-only era is over. •

    The power of the URL. • Why not provide the best experience to your users?
  72. All content in this presentation, except where noted otherwise, is

    Creative Commons Attribution- ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.