ux design for every screen
DESCRIPTION
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).TRANSCRIPT
![Page 1: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/1.jpg)
Aaron StanushDrupalCon Denver | March 21, 2012
UX design for every screen
![Page 2: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/2.jpg)
Aaron StanushCo-founder, designerFour Kitchens
@aaronstanush
![Page 3: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/3.jpg)
A new process
![Page 4: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/4.jpg)
![Page 5: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/5.jpg)
![Page 6: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/6.jpg)
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.
![Page 7: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/7.jpg)
How we’ve been doing it for the last decade
• Requirements and planning
• Site maps, user workflows, wireframes
• Comps
• Build and style the website
![Page 8: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/8.jpg)
The new way
• Requirements and planning
• Content strategy (mobile first!)
• Design systems > comps
• Prototyping is key
• Build. Design. Iterate. Design. Build. Iterate.
![Page 9: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/9.jpg)
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
![Page 10: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/10.jpg)
What’s the plan?Future Friendly + Mobile first
![Page 11: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/11.jpg)
![Page 12: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/12.jpg)
![Page 13: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/13.jpg)
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.
![Page 14: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/14.jpg)
User > Content > Mobile
![Page 15: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/15.jpg)
Content strategy
![Page 16: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/16.jpg)
“The mobile web”
![Page 17: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/17.jpg)
flickr.com/photos/svenreed/5919406108
![Page 18: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/18.jpg)
• 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
![Page 19: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/19.jpg)
markboulton.co.uk/journal/comments/a-richer-canvas
Mark Boulton
Start designing from the content out, rather than the canvas in.
![Page 20: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/20.jpg)
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!?
![Page 21: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/21.jpg)
Now your content is ready to travel
![Page 22: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/22.jpg)
Having the content first would be great, but...
![Page 23: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/23.jpg)
http://24ways.org/2011/extracting-the-content
Page tables
![Page 24: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/24.jpg)
The page is dead.Long live the content.
![Page 25: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/25.jpg)
Design strategy
![Page 26: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/26.jpg)
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.
![Page 27: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/27.jpg)
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.
![Page 28: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/28.jpg)
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.
![Page 29: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/29.jpg)
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.
![Page 30: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/30.jpg)
Mobile UX best practices
![Page 31: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/31.jpg)
Best practices=
Best experience
![Page 32: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/32.jpg)
![Page 33: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/33.jpg)
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.
![Page 34: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/34.jpg)
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.
![Page 35: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/35.jpg)
Layout
• Design for screens not devices = Breakpoints
• Be fluid, liquid, flexible.
• Think in proportions not pixels.
• Consider device orientation.
![Page 36: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/36.jpg)
![Page 37: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/37.jpg)
lukew.com/!/entry.asp?1514
Responsive layout patterns
mediaqueri.es
![Page 39: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/39.jpg)
Layout shifter
foodsense.is
![Page 40: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/40.jpg)
?
![Page 41: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/41.jpg)
stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
![Page 42: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/42.jpg)
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.
![Page 43: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/43.jpg)
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.
![Page 44: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/44.jpg)
Mobile text
• Make it readable.
• Consider the flow of text.
• Be aware of typeface characteristics.
• Use font hosting services wisely.
![Page 45: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/45.jpg)
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.
![Page 46: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/46.jpg)
Gestures
• There is a need for universal conventions.
• Consider competing OS and browser gestures.
• Provide alternatives to gestures.
![Page 47: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/47.jpg)
Designing for touch
• Design for humans, embrace the physicality of touch.
• Size and space elements appropriately (40px rule)
• Not every device is touch capable.
![Page 48: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/48.jpg)
Tools
![Page 49: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/49.jpg)
flickr.com/photos/11855464@N00/6829899789
![Page 50: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/50.jpg)
abookapart.com/products/responsive-web-design
Responsive design is...
• Fluid grids
• Responsive media
• Media queries
![Page 51: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/51.jpg)
Fluid grids
• goldengridsystem.com
• github.com/davatron5000/Foldy960
• csswizardry.com/fluid-grids
• gridsetapp.com (Coming soon!)
![Page 52: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/52.jpg)
Wireframing/prototyping
• Whiteboard!
• Balsamiq
• InDesign
• Axure
• ?
![Page 53: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/53.jpg)
Responsive media
• Images
• Slideshows
• Videos
• fitvidsjs.com
• Text
• fittextjs.com
![Page 54: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/54.jpg)
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
![Page 55: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/55.jpg)
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
![Page 56: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/56.jpg)
Prototype frameworks
• foundation.zurb.com
• twitter.github.com/bootstrap
• goldilocksapproach.com
• html5boilerplate.com/mobile
• stu!andnonsense.co.uk/projects/320andup
![Page 57: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/57.jpg)
Touch frameworks
jquerymobile.com sencha.com
![Page 58: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/58.jpg)
Testing for every screen
![Page 59: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/59.jpg)
Test on real devices
bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank
![Page 60: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/60.jpg)
labs.adobe.com/technologies/shadow
Adobe Shadow
![Page 61: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/61.jpg)
BrowsterStack.com
![Page 62: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/62.jpg)
opera.com/developer/tools
![Page 63: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/63.jpg)
blaze.io/mobile
![Page 64: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/64.jpg)
MattKersley.com/responsive
![Page 65: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/65.jpg)
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
![Page 66: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/66.jpg)
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.
![Page 67: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/67.jpg)
Selling responsive
![Page 68: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/68.jpg)
cloudfour.com/first-thing-you-should-do-to-optimize-your-desktop-site-for-mobile
Do your clients need a responsive website?
No.
![Page 69: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/69.jpg)
Your clients’ usersdon’t care whether a site
is responsive or not.
![Page 70: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/70.jpg)
bradfrostweb.com/blog/web/responsive-web-design-missing-the-point
They do need toget stu! done.
Fast.
![Page 71: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/71.jpg)
Credits
Consider this
• The desktop-only era is over.
• The power of the URL.
• Why not provide the best experience to your users?
![Page 72: UX design for every screen](https://reader030.vdocuments.mx/reader030/viewer/2022020207/54c7b3a84a7959c66e8b4595/html5/thumbnails/72.jpg)
All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.