A Pragmatic Approach to Responsive Design
24
A Pragmatic Approach to Responsive Design Jesmond Allen @Jesmond Fiz Yazdi @UXFiz 1 Thursday, 26 July 12
-
Upload
cxpartners -
Category
Technology
-
view
115 -
download
5
description
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
Transcript of A Pragmatic Approach to Responsive Design
A Pragmatic Approach to Responsive DesignJesmond Allen @JesmondFiz 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
Thursday, 26 July 12
3
A pragmatic approach to responsive design
1. Planning
• Conversations you’ll need to have
• What answers you’re hunting for
2. Doing
• How to start designing responsively
• How to layout designs and reflow them across different sized screens
5 key questions to ask, and the answers you’re looking for
3 step guide to starting your designTop 5 things we’ve learnt
Thursday, 26 July 12
4Source: Morgan Stanley
We mostly do this: UXAnd what do you do?
Thursday, 26 July 12
5
Planning
Thursday, 26 July 12
6
5 key questions
Thursday, 26 July 12
7
1. Why would you like a responsive site?
Who is advocating it within the business? Any why?
Are they in a key position?
What do they think a ‘responsive’ site is?
What does a successful responsive project look like to them?
Thursday, 26 July 12
8
2. Who are your users, and what devices are they using today?
What do their current analytics say?
What do they know about user behaviours across different channels?How do they plan to meet these needs?
What mobile/tablet/big screen usage do they want in the future?
Thursday, 26 July 12
9
3. What are your plans for content?
Have you started thinking about this?
Can we get direction on this from workshops, content documents, what?
What about images? What about more complex content like infographics, tables?
Do we need to consider other languages?
Thursday, 26 July 12
10
4. What are the development skills in your team?
Have they done this before?
Do they want to do this?
Are they available to us?
How do these skills effect what we can design?
Are you using a CMS and can they tame it?
Thursday, 26 July 12
11
5. What deliverables would you like to see from us?
Wireframes? HTML prototypes? Something else?
Visual design concept & style tiles?
How will they use the deliverables?
Snap points and fluidity?
Thursday, 26 July 12
12
Doing
Thursday, 26 July 12
13
FizmondHolidays.com
Let’s look at a made up example:
Thursday, 26 July 12
14
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.
FizmondHolidays.com
Thursday, 26 July 12
15
Where to start?3 step guide
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?
Find lots of suitable holidays
Narrow choice
Share with other travellers
Decide on holiday and
purchase
Thursday, 26 July 12
17
FizmondHolidays.com product page candidate content:
Logo
Main navigation
Phone number
Main holiday image
Holiday image gallery
Holiday overview
Holiday price‘Book now’ button
Full holiday description
Holiday location map
Similar holidays
Email and share links
Customer reviews
Search
Holiday name
???
2. Prioritise your content
Put these content features in order of priority for a page on FizmondHolidays.com describing a particular holiday. (5 mins)
Thursday, 26 July 12
18
3a. Lay out your content...
... as a smart phone wireframe
Use Post-it notes and pens to add content features to your blank wireframe (10 mins)
Thursday, 26 July 12
19
Simple reflow strategies
12
3 4
5 6 7 8
12
3
4
5
6
7
8
12
3
4
5
6
7
12
3
4
5
6
7
Thursday, 26 July 12
20
Remember your reflow approach. As the designs are responsive, content must largely remain the same and in the same order.
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)
Thursday, 26 July 12
21
Top 5 tips
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
Thursday, 26 July 12
23
Our favourite resources
mediaqueri.es
lukew.com
cxpartners.co.uk/ux-resources
bradfrostweb.com/blog/web/responsive-nav-patterns/
Thursday, 26 July 12
24
Thank you
Fiz Yazdi
@UXFiz
Jesmond Allen
@jesmond
Thursday, 26 July 12
