Aaron StanushDrupalCon Denver | March 21, 2012

UX design for every screen

Aaron StanushCo-founder, designerFour Kitchens

aaron@fourkitchens.com

@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

trentwalton.com

Mostly fluid

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.