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