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
Aaron StanushDrupalCon Denver | March 21, 2012
UX design for every screen
Aaron StanushCo-founder, designerFour Kitchens
@aaronstanush
A new process
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.
How we’ve been doing it for the last decade
• Requirements and planning
• Site maps, user workflows, wireframes
• Comps
• Build and style the website
The new way
• Requirements and planning
• Content strategy (mobile first!)
• Design systems > comps
• Prototyping is key
• Build. Design. Iterate. Design. Build. Iterate.
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
What’s the plan?Future Friendly + Mobile first
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.
User > Content > Mobile
Content strategy
“The mobile web”
flickr.com/photos/svenreed/5919406108
• 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
markboulton.co.uk/journal/comments/a-richer-canvas
Mark Boulton
Start designing from the content out, rather than the canvas in.
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!?
Now your content is ready to travel
Having the content first would be great, but...
http://24ways.org/2011/extracting-the-content
Page tables
The page is dead.Long live the content.
Design strategy
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.
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.
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.
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.
Mobile UX best practices
Best practices=
Best experience
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.
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.
Layout
• Design for screens not devices = Breakpoints
• Be fluid, liquid, flexible.
• Think in proportions not pixels.
• Consider device orientation.
lukew.com/!/entry.asp?1514
Responsive layout patterns
mediaqueri.es
Layout shifter
foodsense.is
?
stuffandnonsense.co.uk/blog/about/we_need_a_standard_show_navigation_icon_for_responsive_web_design
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.
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.
Mobile text
• Make it readable.
• Consider the flow of text.
• Be aware of typeface characteristics.
• Use font hosting services wisely.
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.
Gestures
• There is a need for universal conventions.
• Consider competing OS and browser gestures.
• Provide alternatives to gestures.
Designing for touch
• Design for humans, embrace the physicality of touch.
• Size and space elements appropriately (40px rule)
• Not every device is touch capable.
Tools
flickr.com/photos/11855464@N00/6829899789
abookapart.com/products/responsive-web-design
Responsive design is...
• Fluid grids
• Responsive media
• Media queries
Fluid grids
• goldengridsystem.com
• github.com/davatron5000/Foldy960
• csswizardry.com/fluid-grids
• gridsetapp.com (Coming soon!)
Wireframing/prototyping
• Whiteboard!
• Balsamiq
• InDesign
• Axure
• ?
Responsive media
• Images
• Slideshows
• Videos
• fitvidsjs.com
• Text
• fittextjs.com
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
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
Prototype frameworks
• foundation.zurb.com
• twitter.github.com/bootstrap
• goldilocksapproach.com
• html5boilerplate.com/mobile
• stu!andnonsense.co.uk/projects/320andup
Touch frameworks
jquerymobile.com sencha.com
Testing for every screen
Test on real devices
bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank
labs.adobe.com/technologies/shadow
Adobe Shadow
BrowsterStack.com
opera.com/developer/tools
blaze.io/mobile
MattKersley.com/responsive
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
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.
Selling responsive
cloudfour.com/first-thing-you-should-do-to-optimize-your-desktop-site-for-mobile
Do your clients need a responsive website?
No.
Your clients’ usersdon’t care whether a site
is responsive or not.
bradfrostweb.com/blog/web/responsive-web-design-missing-the-point
They do need toget stu! done.
Fast.
Credits
Consider this
• The desktop-only era is over.
• The power of the URL.
• Why not provide the best experience to your users?
All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.