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. After this session, you should leave with the confidence to argue the importance of responsive design to your client or boss – and that the with the proper strategy, the extra effort and costs can be justified (and hopefully minimized).

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

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

3. A new process

6. To design responsive
websites effectively
and responsibly, I had
to completely redefine
the way I view the web.
Trent Walton
trentwalton.com/2012/02/02/redefined

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. Designing the mobile
app first forced us to
strip down to essentials.
Bill DeRouchey, Banksimple
fastcodesign.com/1663315/banksimple-wants-to-shake-up-banking-with-cutting-edge-ui-design

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. Start designing from the
content out, rather than
the canvas in.
Mark Boulton
markboulton.co.uk/journal/comments/a-richer-canvas

20. Future friendly content
• What are the types of content and why?
• Make it modular
• What’s really important?
• How will the tool organize this stuff?
alistapart.com/articles/future-ready-content

21. Now your content is ready to travel

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

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

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 differ 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 UX priorities
• Understand how people use their devices and why.
• Content > navigation
• Best experience doesn’t necessarily mean limiting
choices.
• Maintain clarity and focus.
Mobile First, Luke W.

34. What makes for a good
experience?
• Make it readable.
• Make it relevant.
• Keep forms to a minimum.
• Avoid modal overlays.
• Make it snappy.
mobilewebbestpractices.com

35. Layout
• Design for screens not devices = Breakpoints
• Be fluid, liquid, flexible.
• Think in proportions not pixels.
• Consider device orientation.

37. Responsive layout patterns
lukew.com/ff/entry.asp?1514 mediaqueri.es

38. Mostly fluid
trentwalton.com

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. 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.
globalmoxie.com/blog/buttons-inspired-ui-hack.shtml

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. Responsive design is...
• Fluid grids
• Responsive media
• Media queries
abookapart.com/products/responsive-web-design

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
• stuffandnonsense.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. Adobe Shadow
labs.adobe.com/technologies/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. 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.
Luke Wroblewski, Mobile First

67. Selling responsive

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

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

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

71. Consider this
• The desktop-only era is over.
• The power of the URL.
• Why not provide the best experience to your
users?
Credits

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.