Fiz and Jesmond's slides from their UXBristol 2012 workshop "A Pragmatic Approach to Responsive Design". Workshop take aways - 5 key questions to ask your client/stakeholder - 3 steps to starting your design - Top 5 things we've learnt - 3 workshop exercises to put theory in to practice

1. A Pragmatic Approach to Responsive Design
Jesmond Allen @Jesmond
Fiz Yazdi @UXFiz
1
Thursday, 26 July 12

2. A pragmatic approach to responsive design
Planning
• Conversations you’ll need to
have
• What answers you’re hunting
for
5 key questions to ask,
and the answers you’re
looking for
2
Thursday, 26 July 12

3. A pragmatic approach to responsive design
1. Planning 2. Doing
• Conversations you’ll need to • How to start designing
have responsively
• What answers you’re hunting • How to layout designs and
for reflow them across different
sized screens
5 key questions to ask, 3 step guide to starting
and the answers you’re your design
looking for Top 5 things we’ve learnt
3
Thursday, 26 July 12

4. We mostly do this: UX
And what do you do?
Source: Morgan Stanley 4
Thursday, 26 July 12

5. Planning
5
Thursday, 26 July 12

6. 5 key questions
6
Thursday, 26 July 12

7. 1. Why would you like a
responsive site?
Who is advocating it
within the business?
Any why?
What do they think a
‘responsive’ site is?
Are they in a key
position?
What does a successful
responsive project look
like to them?
7
Thursday, 26 July 12

8. 2. Who are your users, and what
devices are they using today?
What do their
current analytics What mobile/tablet/big
say? screen usage do they
want in the future?
What do they know about user
behaviours across different channels?
How do they plan to meet these needs?
8
Thursday, 26 July 12

9. 3. What are your plans for
content?
What about images? What
about more complex
Have you content like infographics,
started thinking tables?
about this?
Can we get direction on this
from workshops, content
documents, what? Do we need to
consider other
languages?
9
Thursday, 26 July 12

10. 4. What are the development
skills in your team?
Are you using a
Have they done CMS and can
this before? they tame it?
Do they want to
do this?
Are they How do these
available to us? skills effect what
we can design?
10
Thursday, 26 July 12

11. 5. What deliverables would you
like to see from us?
Wireframes? HTML
prototypes?
Snap points and fluidity? Something else?
Visual design
concept &
style tiles?
How will they use
the deliverables?
11
Thursday, 26 July 12

12. Doing
12
Thursday, 26 July 12

13. Let’s look at a made up example:
FizmondHolidays.com
13
Thursday, 26 July 12

14. FizmondHolidays.com
A travel website aimed at friends looking for an fun holiday.
They’ve seen an increase in their mobile traffic but desktop
is still their priority.
We’ve agreed to design in one snap point - producing
wireframes for desktop and mobile. We’ll design desktop to
be touch-friendly to accommodate tablet use.
14
Thursday, 26 July 12

15. Where to start?
3 step guide
15
Thursday, 26 July 12

16. 1. What are the key user tasks?
How can we support these tasks across
different devices and contexts of use?
Narrow choice
Find lots of Decide on
suitable holiday and
holidays purchase
Share with other
travellers
16
Thursday, 26 July 12

17. 2. Prioritise your content
FizmondHolidays.com product page candidate content:
Logo Customer Holiday image Phone number
reviews gallery
Holiday Holiday
overview Main holiday Email and share location map
image links
Main navigation Similar holidays
Holiday price
Search
‘Book now’
button
Holiday name Put these content features in
Full holiday order of priority for a page on
??? FizmondHolidays.com
description
describing a particular holiday.
(5 mins)
17
Thursday, 26 July 12

18. 3a. Lay out your content...
Use Post-it
notes and pens
to add content
features to your
blank wireframe
(10 mins)
... as a smart phone wireframe
18
Thursday, 26 July 12

19. Simple reflow strategies
1 1 1 1
2 2
2 2
3 3
3 4 3 5
5 6 7 8
4 6 4
4
5 5
7 6
6
7
7
8
19
Thursday, 26 July 12

20. 3b. Layout your content...
... as a desktop wireframe Use Post-it
notes and pens
to add content
features to your
blank wireframe.
Do you need to
change anything
on your mobile
design?
(10 mins)
Remember your reflow approach. As the designs are responsive,
content must largely remain the same and in the same order.
20
Thursday, 26 July 12

21. Top 5 tips
21
Thursday, 26 July 12

22. Top 5 things we’ve learned
1. Involve developers at the earliest possible stage. Their
enthusiasm and understanding is crucial to a successful project.
2. Most clients have a budget that allows for minimal snap points
and minimal reflow wizardry
3. Don’t scare the horses - most clients still think desktop-first
4. Whichever layout you start with, don’t do all your templates at
that size before moving on to the next snap point - they will all
influence each other
5. You don’t need to wireframe up every single template at every
size in order to provide enough information for build to begin
22
Thursday, 26 July 12

23. Our favourite resources
mediaqueri.es
lukew.com
bradfrostweb.com/blog/web/responsive-nav-patterns/
cxpartners.co.uk/ux-resources
23
Thursday, 26 July 12

24. Thank you
Fiz Yazdi Jesmond Allen
@UXFiz @jesmond
fiz.yazdi@cxpartners.co.uk jesmond.allen@cxpartners.co.uk
24
Thursday, 26 July 12