Responsive Design Workflow
Download as PPTX, PDF14 likes3,709 views
The document outlines a workflow for responsive web design that accommodates various devices including smartphones, tablets, and desktops. It emphasizes the importance of a flexible grid layout, media queries, and adaptive content to create a seamless user experience across diverse platforms. The author encourages challenging traditional processes and optimizing designs for mobile-first experiences to meet the evolving needs of users.
Responsive Design Workflow
- 1. _MOBILE UX RESPONSIVE DESIGN WORKFLOW (SO FAR) Mark Delaney Experience Designer
- 2. Responsive Design Workflow (so far) Device Diversity Responsive Web Design A Revised Workflow Content Strategy
- 5. 4.3” Screen: 4.3” with 960 x 540 & 256 ppi Browser: Chrome for Android (Chrome 18) OS: Google Android 4.0 Motorola Droid RAZR M Responsive Design – A Workflow that Works | 5
- 6. 4.3” 5.5” Screen: 5.5” with 720 x 1280 & 276 ppi Browser: Android Webkit OS: Google Android 4.1 Motorola Droid RAZR M Samsung Galaxy Note II Responsive Design – A Workflow that Works | 6
- 7. 4.3” 5.5” 7.9” Screen: 7.9” with 768 x 1024 & 163 ppi Browser: Apple Safari 6 OS: iOS 6 Motorola Droid RAZR M Samsung Galaxy Note II Responsive Design – A Workflow that Works Apple iPad Mini | 7
- 8. 4.3” 5.5” 7.9” 12.5” Screen: 12.5” with 920 x 1080 & 163 ppi Browser: IE 10 OS: Microsoft Windows 8 RT Motorola Droid RAZR M Samsung Galaxy Note II Responsive Design – A Workflow that Works Apple iPad Mini Dell XPS 12 | 8
- 9. Close to 40 new devices released from major manufacturers in about a 7 week window
- 11. Smart Phone 3.5” iPhone 3GS Responsive Design – A Workflow that Works 4.0” HTC Windows Phone 8S 4.3” 4.5” Motorola Droid RAZR M Nokia Lumina 920 4.7” LG Nexus 4 | 11
- 12. Notice a trend?
- 13. Smart Phone 3.5” iPhone 3GS Responsive Design – A Workflow that Works 4.0” HTC Windows Phone 8S 4.3” 4.5” Motorola Droid RAZR M Nokia Lumina 920 4.7” LG Nexus 4 | 13
- 14. 3.5” Motorola Droid RAZR M 4.5” Nokia Lumina 920 Responsive Design – A Workflow that Works 4.7” 5.3” 5.5” LG Nexus 4 Samsung Galaxy Note Samsung Galaxy Note II | 14
- 15. “Yeah, nah, I‟ m talking on a book” Responsive Design – A Workflow that Works | 15
- 17. Tablet 9.7” Apple iPad Responsive Design – A Workflow that Works 10.1” Acer Iconia Tab W510 Dell XPS 10 Asus Vivo Tab RT | 17
- 18. Tablet 7.0” Google Nexus 7 Responsive Design – A Workflow that Works 7.9” Apple iPad Mini 8.9” Kindle Fire HD 9.7” Apple iPad | 18
- 19. Notice a trend?
- 20. One Single Continuum Desktop Laptop Tablet Smart Phone 3” 5” 7” 9” 11” 13” 15” 17” 19” 21” 23” 25” 27” Size Continuum Source: LukeW.com Responsive Design – A Workflow that Works | 20
- 21. iPhone Wrist Responsive Design – A Workflow that Works | 21
- 22. Smart TV Responsive Design – A Workflow that Works | 22
- 23. You only need one web design: A multi-device a.k.a responsive design
- 26. Responsive Web Design The 3 core ingredients ■ A flexible, grid-based layout The benefits of creating a liquid layout are becoming too great to ignore Responsive Design – A Workflow that Works | 26
- 27. Responsive Web Design The FED ingredients ■ A flexible, grid-based layout The benefits of creating a liquid layout are becoming too great to ignore ■ Media queries Allow you to gather data about site visitors and use it to apply the appropriate styles Responsive Design – A Workflow that Works | 27
- 28. Responsive Web Design The FED ingredients ■ A flexible, grid-based layout The benefits of creating a liquid layout are becoming too great to ignore ■ Media queries Allow you to gather data about site visitors and use it to apply the appropriate styles ■ Flexible images and media Being able to create flexible images is an important consideration when trying to create a flexible layout Responsive Design – A Workflow that Works | 28
- 29. Responsive Design is not a panacea… Rather a great step in the right direction
- 30. Mobile is so much more than a small screen Source: www.flickr.com/photos/jurvetson/5201796697
- 33. Design Process A typical waterfall approach to task planning Project Kick-off Meeting and User Research IA, Interaction Design and Wireframes High Fidelity Visual UI Designs (PSDs) Front-End Development and Testing Conduct internal and external stakeholder research, establish project goals and design direction. Planning IA and creating wireframes to determine content and layout for key page templates Detailed PSD mock-ups of key page templates to illustrate visual UI design („look and feel) HTML & CSS is created for key templates to be handed over to the development team. Discover Define Responsive Design – A Workflow that Works Design Deliver | 33
- 34. Designing only pixel perfect mock-ups makes it difficult near impossible to then think responsively —Mark Delaney, Designer
- 36. Set better expectations Source: www.flickr.com/photos/carbonnyc/2154870998
- 37. Lead more productive design conversations Source: www.flickr.com/photos/zenilorac/698514624
- 39. Test designs before committing to them Source: www.flickr.com/photos/jcfrog/4692750598
- 40. Staying lean & collecting feedback often Minimises the time heading down the wrong path
- 41. Responsive Workflow User Research & Collaborative Sketches Low-fi HTML Prototype Sketches can involve the whole team & can help everyone communicate. HTML & CSS templates can begin as soon as initial wireframes are complete Content Analysis, Modelling & IA Planning content, IA, & templates should occur prior to design details. Discover & Define Define & Design Visual Design & Style Prototype Front-End Development and Testing Style prototyping can begin as soon as consensus forms around content & components allowing for the concurrent, but independent exploration of style. As low fidelity & style prototypes evolve, they can converge into a single higher fidelity prototype ready for testing & final sign-off. Define & Design Define, Design & Deliver Static or Interactive Wireframes Design & Deliver Model key pages, map content & define components & variations. Design & Deliver Responsive Design – A Workflow that Works | 41
- 44. Adaptive Content ■ Structured content Small chunks of content that adapt to other devices. Responsive Design – A Workflow that Works | 44
- 45. Adaptive Content ■ Structured content Small chunks of content that adapt to other devices. ■ Presentation-independent content Raw content without formatting. Responsive Design – A Workflow that Works | 45
- 46. Adaptive Content ■ Structured content Small chunks of content that adapt to other devices. ■ Presentation-independent content Raw content without formatting. ■ Reusable content Content that is used on multiple platforms and in many formats. Responsive Design – A Workflow that Works | 46
- 47. Adaptive Content ■ Structured content Small chunks of content that adapt to other devices. ■ Presentation-independent content Raw content without formatting. ■ Reusable content Content that is used on multiple platforms and in many formats. ■ Meaningful metadata Data that describes the content for easy interpretation. Responsive Design – A Workflow that Works | 47
- 48. “Content is like water. You put water into a cup it becomes the cup. You put water into a bottle it becomes the bottle”. Josh Clarke – Seven Deadly Mobile Myths
- 53. Mobile is not the “light” version
- 55. Mobile Last Degraded and retro-fitted? Responsive Design – A Workflow that Works | 55
- 56. Mobile First Progressively enhanced & future-friendly Responsive Design – A Workflow that Works | 56
- 58. THE MOBILE WEB IS DIFFICULT … BUT IT‟S WORTH IT Source: Kathy Slamen Photography
- 59. Responsive Design Some of the things that we‟ve learnt along the way ■ Challenge traditional processes Responsive Design – A Workflow that Works | 59
- 60. Responsive Design Some of the things that we‟ve learnt along the way ■ Challenge traditional processes ■ You can’t wing content Responsive Design – A Workflow that Works | 60
- 61. Responsive Design Some of the things that we‟ve learnt along the way ■ Challenge traditional processes ■ You can’t wing content ■ Optimize for touch Responsive Design – A Workflow that Works | 61
- 62. Responsive Design Some of the things that we‟ve learnt along the way ■ Challenge traditional processes ■ You can’t wing content ■ Optimize for touch ■ Design for mobile first Responsive Design – A Workflow that Works | 62
- 63. Where do I start?
- 65. Develop your mobile strategy… but in the meantime there are some useful things you can do today
- 66. Step 1 Review your traffic logs and determine what mobile devices are accessing your site today
- 67. Step 2 Test your site on those devices to determine where the experience breaks down
- 68. Step 3 Develop an action plan to address common issues – e.g. small touch targets, large images…
- 70. It‟s going to be fun. www.flickr.com/photos/othree/5224045406
- 71. Thank you Email: mark.delaney@intergen.co.nz Mobile: 021 466 027 Twitter: @TeamIntergen