workshop: 7 elements to responsive design
TRANSCRIPT
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
