Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

  • Login to see the comments

A Pragmatic Approach to Responsive Design

  1. A Pragmatic Approach to Responsive Design Jesmond Allen @Jesmond Fiz Yazdi @UXFiz 1Thursday, 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 2Thursday, 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 3Thursday, 26 July 12
  4. We mostly do this: UX And what do you do? Source: Morgan Stanley 4Thursday, 26 July 12
  5. Planning 5Thursday, 26 July 12
  6. 5 key questions 6Thursday, 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? 7Thursday, 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? 8Thursday, 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? 9Thursday, 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? 10Thursday, 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? 11Thursday, 26 July 12
  12. Doing 12Thursday, 26 July 12
  13. Let’s look at a made up example: 13Thursday, 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. 14Thursday, 26 July 12
  15. Where to start? 3 step guide 15Thursday, 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 16Thursday, 26 July 12
  17. 2. Prioritise your content 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 ??? description describing a particular holiday. (5 mins) 17Thursday, 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 18Thursday, 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 19Thursday, 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. 20Thursday, 26 July 12
  21. Top 5 tips 21Thursday, 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 22Thursday, 26 July 12
  23. Our favourite resources 23Thursday, 26 July 12
  24. Thank you Fiz Yazdi Jesmond Allen @UXFiz @jesmond 24Thursday, 26 July 12