A Pragmatic Approach to Responsive Design
11 likes4,828 views
The document outlines a pragmatic approach to responsive design, detailing planning and execution with a focus on five key questions to guide the process. It emphasizes the importance of understanding user demographics, development team capabilities, and deliverables required to ensure a successful responsive project. The authors provide a step-by-step guide and share lessons learned from their experiences in responsive design.
A Pragmatic Approach to Responsive Design
- 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