Your SlideShare is downloading. ×
UX design for every screen
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

UX design for every screen

2,936
views

Published on

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

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

Published in: Design, Technology

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,936
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
76
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. UX design for every screenAaron StanushDrupalCon Denver | March 21, 2012
  • 2. Aaron StanushCo-founder, designerFour Kitchensaaron@fourkitchens.com@aaronstanush
  • 3. A new process
  • 4. To design responsive websites effectively and responsibly, I had to completely redefine the way I view the web. Trent Waltontrentwalton.com/2012/02/02/redefined
  • 5. How we’ve been doing it forthe last decade• Requirements and planning• Site maps, user workflows, wireframes• Comps• Build and style the website
  • 6. The new way• Requirements and planning• Content strategy (mobile first!)• Design systems > comps• Prototyping is key• Build. Design. Iterate. Design. Build. Iterate.
  • 7. 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
  • 8. What’s the plan?Future Friendly + Mobile first
  • 9. Designing the mobile app first forced us to strip down to essentials. Bill DeRouchey, Banksimplefastcodesign.com/1663315/banksimple-wants-to-shake-up-banking-with-cutting-edge-ui-design
  • 10. User > Content > Mobile
  • 11. Content strategy
  • 12. “The mobile web”
  • 13. flickr.com/photos/svenreed/5919406108
  • 14. • 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
  • 15. Start designing from the content out, rather than the canvas in. Mark Boultonmarkboulton.co.uk/journal/comments/a-richer-canvas
  • 16. 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
  • 17. Now your content is ready to travel
  • 18. Having the content first would be great, but...
  • 19. Page tableshttp://24ways.org/2011/extracting-the-content
  • 20. The page is dead.Long live the content.
  • 21. Design strategy
  • 22. 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.
  • 23. 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.
  • 24. 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.
  • 25. 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.
  • 26. Mobile UX best practices
  • 27. Best practices =Best experience
  • 28. 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.
  • 29. What makes for a goodexperience?• Make it readable.• Make it relevant.• Keep forms to a minimum.• Avoid modal overlays.• Make it snappy.mobilewebbestpractices.com
  • 30. Layout• Design for screens not devices = Breakpoints• Be fluid, liquid, flexible.• Think in proportions not pixels.• Consider device orientation.
  • 31. Responsive layout patternslukew.com/ff/entry.asp?1514 mediaqueri.es
  • 32. Mostly fluidtrentwalton.com
  • 33. Layout shifterfoodsense.is
  • 34. ?
  • 35. stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
  • 36. 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.
  • 37. 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.
  • 38. Mobile text• Make it readable.• Consider the flow of text.• Be aware of typeface characteristics.• Use font hosting services wisely.
  • 39. 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
  • 40. Gestures• There is a need for universal conventions.• Consider competing OS and browser gestures.• Provide alternatives to gestures.
  • 41. Designing for touch• Design for humans, embrace the physicality of touch.• Size and space elements appropriately (40px rule)• Not every device is touch capable.
  • 42. Tools
  • 43. flickr.com/photos/11855464@N00/6829899789
  • 44. Responsive design is... • Fluid grids • Responsive media • Media queriesabookapart.com/products/responsive-web-design
  • 45. Fluid grids• goldengridsystem.com• github.com/davatron5000/Foldy960• csswizardry.com/fluid-grids• gridsetapp.com (Coming soon!)
  • 46. Wireframing/prototyping• Whiteboard!• Balsamiq• InDesign• Axure•?
  • 47. Responsive media• Images• Slideshows• Videos • fitvidsjs.com• Text • fittextjs.com
  • 48. 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
  • 49. Viewports = Media queries@mediascreenand(max*device*width:2480px){ .column{ float:none; }}‣ Media type: screen (desktop, phone, tablet)‣ Query for media feature: width, height, orientation, pixel density
  • 50. Prototype frameworks• foundation.zurb.com• twitter.github.com/bootstrap• goldilocksapproach.com• html5boilerplate.com/mobile• stuffandnonsense.co.uk/projects/320andup
  • 51. Touch frameworks jquerymobile.com sencha.com
  • 52. Testing for every screen
  • 53. Test on real devicesbradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank
  • 54. Adobe Shadowlabs.adobe.com/technologies/shadow
  • 55. BrowsterStack.com
  • 56. opera.com/developer/tools
  • 57. blaze.io/mobile
  • 58. MattKersley.com/responsive
  • 59. 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
  • 60. If you start to hearcustomers asking foryour desktop webexperience to be morelike the simple, easy-to-use mobile one—you’redoing it right. Luke Wroblewski, Mobile First
  • 61. Selling responsive
  • 62. Do your clients need a responsive website? No.cloudfour.com/first-thing-you-should-do-to-optimize-your-desktop-site-for-mobile
  • 63. Your clients’ usersdon’t care whether a site is responsive or not.
  • 64. They do need to get stuff done. Fast.bradfrostweb.com/blog/web/responsive-web-design-missing-the-point
  • 65. Consider this • The desktop-only era is over. • The power of the URL. • Why not provide the best experience to your users?Credits
  • 66. All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.