A Pragmatic Approach to Responsive Design
Upcoming SlideShare
Loading in...5
×
 

A Pragmatic Approach to Responsive Design

on

  • 5,910 views

Fiz and Jesmond's slides from their UXBristol 2012 workshop "A Pragmatic Approach to Responsive Design". ...

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

Statistics

Views

Total Views
5,910
Views on SlideShare
4,758
Embed Views
1,152

Actions

Likes
12
Downloads
54
Comments
0

16 Embeds 1,152

http://www.conseilsmarketing.com 966
http://2012.uxbristol.org.uk 126
http://www.brijj.com 10
http://uxb.konoha 9
http://lanyrd.com 8
http://us-w1.rockmelt.com 6
https://si0.twimg.com 6
http://stage.uxbristol.org.uk 5
http://www.linkedin.com 5
https://twimg0-a.akamaihd.net 3
http://www.cxpartners.co.uk 2
https://twitter.com 2
http://www.mindgum.co 1
http://sandi8416apr 1
http://eventifier.com 1
https://www.linkedin.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

A Pragmatic Approach to Responsive Design A Pragmatic Approach to Responsive Design Presentation Transcript

  • A Pragmatic Approach to Responsive Design Jesmond Allen @Jesmond Fiz Yazdi @UXFiz 1Thursday, 26 July 12
  • 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 2Thursday, 26 July 12
  • 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 3Thursday, 26 July 12
  • We mostly do this: UX And what do you do? Source: Morgan Stanley 4Thursday, 26 July 12
  • Planning 5Thursday, 26 July 12
  • 5 key questions 6Thursday, 26 July 12
  • 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? 7Thursday, 26 July 12
  • 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? 8Thursday, 26 July 12
  • 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? 9Thursday, 26 July 12
  • 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? 10Thursday, 26 July 12
  • 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? 11Thursday, 26 July 12
  • Doing 12Thursday, 26 July 12
  • Let’s look at a made up example: FizmondHolidays.com 13Thursday, 26 July 12
  • 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. 14Thursday, 26 July 12
  • Where to start? 3 step guide 15Thursday, 26 July 12
  • 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 16Thursday, 26 July 12
  • 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) 17Thursday, 26 July 12
  • 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 18Thursday, 26 July 12
  • 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 19Thursday, 26 July 12
  • 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. 20Thursday, 26 July 12
  • Top 5 tips 21Thursday, 26 July 12
  • 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 22Thursday, 26 July 12
  • Our favourite resources mediaqueri.es lukew.com bradfrostweb.com/blog/web/responsive-nav-patterns/ cxpartners.co.uk/ux-resources 23Thursday, 26 July 12
  • Thank you Fiz Yazdi Jesmond Allen @UXFiz @jesmond fiz.yazdi@cxpartners.co.uk jesmond.allen@cxpartners.co.uk 24Thursday, 26 July 12