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

Transcript

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