WORKSHOP: 7 Elements to Responsive design

7 Key Ingredients to Responsive Design

HELLO, I’M SHANNAH

WHO ARE YOU? •  Consultants?

•  Designers working at agencies or studios?

•  Designers working inside companies?

•  Marketing or business professionals concerned about digital delivery?

•  Developers starting to engage with UX?

h"p://ga

lleryhip.com/chicago

-­‐bean-­‐winter.h

tml  

NO ‘LUCK’ IN THESE 7…

1.  What is responsive?

2.  Design team

3.  Users

4.  Content

5.  Accessibility

6.  Look and feel

7.  Test, test, test

WHAT IS RESPONSIVE?

•  One site, many viewports

•  One experience

•  Device agnostic

•  Table stakes

h"p://brad

frost.com

/blog/mob

ile/the-­‐m

any-­‐faces-­‐of-­‐m

obile-­‐first/  

DESIGN TEAM •  Who

•  How many

•  Where

Love/Break-up Letter

USERS

•  Who are they?

•  What do they want to

achieve?

•  What is their context of use?

•  How are they important to

the project?

Proto-persona Worksheet

Proto-persona Spectrums

Empathy Map

CONTENT •  More important than ever

•  Make it the first thing you tackle

•  Having a good handle on content will make your responsive project MUCH easier

Home Page Cut & Paste

Cores & Paths

ACCESSIBILITY

•  It’s the law (in many places)

•  Good accessibility = good SEO

•  Perceivable, operable,

understandable, robust

h"p://www.keepcalm-­‐o-­‐m

a<c.co.uk/p/keep-­‐calm-­‐and

-­‐read-­‐wcag/  

GOV.UK – Built Accessible

LOOK AND FEEL •  Emotion

•  Brand

•  Usability

Creative Gut Test

Banff Centre Website (launching soon!)

TEST, TEST, TEST

•  Test across touchpoints

•  Test as often as possible

•  Try to test in the browser

TO RECAP… •  One site, many views

•  Design team

•  Users

•  Content

•  Accessibility

•  Look and feel

•  User testing!

THE FUTURE?

•  Integration with wearable devices

•  Gesture interaction

•  Vocal/aural user interfaces

•  Brain sensing technology

THANK YOU SO MUCH!

[email protected] [email protected]

@umatters www.usabilitymatters.com