Downloaded 100 times
Uploaded byIntergen
Responsive Design Workflow
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.
More Related Content
Similar to Responsive Design Workflow
Responsive Design Workflow
- 1. _MOBILE UX RESPONSIVE DESIGN WORKFLOW (SO FAR) MarkDelaney Experience Designer
- 2. Responsive Design Workflow (sofar) Device Diversity Responsive Web Design A Revised Workflow Content Strategy
- 3.
- 4.
- 5. 4.3” Screen: 4.3” with960 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” with720 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” with768 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” with920 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 40new devices released from major manufacturers in about a 7 week window
- 10.
- 11. Smart Phone 3.5” iPhone 3GS ResponsiveDesign – 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.
- 13. Smart Phone 3.5” iPhone 3GS ResponsiveDesign – 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” NokiaLumina 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‟ mtalking on a book” Responsive Design – A Workflow that Works | 15
- 16.
- 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 ResponsiveDesign – A Workflow that Works 7.9” Apple iPad Mini 8.9” Kindle Fire HD 9.7” Apple iPad | 18
- 19.
- 20. One Single Continuum Desktop Laptop Tablet SmartPhone 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 needone web design: A multi-device a.k.a responsive design
- 24.
- 25.
- 26. Responsive Web Design The3 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 TheFED 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 TheFED 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 isnot a panacea… Rather a great step in the right direction
- 30. Mobile is so muchmore than a small screen Source: www.flickr.com/photos/jurvetson/5201796697
- 31.
- 32.
- 33. Design Process A typicalwaterfall 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 perfectmock-ups makes it difficult near impossible to then think responsively —Mark Delaney, Designer
- 35.
- 36. Set better expectations Source:www.flickr.com/photos/carbonnyc/2154870998
- 37. Lead more productive design conversations Source:www.flickr.com/photos/zenilorac/698514624
- 38.
- 39. Test designs before committingto 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
- 42.
- 43.
- 44. Adaptive Content ■ Structuredcontent Small chunks of content that adapt to other devices. Responsive Design – A Workflow that Works | 44
- 45. Adaptive Content ■ Structuredcontent 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 ■ Structuredcontent 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 ■ Structuredcontent 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 likewater. 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
- 49.
- 50.
- 51.
- 52.
- 53. Mobile is notthe “light” version
- 54.
- 55. Mobile Last Degraded andretro-fitted? Responsive Design – A Workflow that Works | 55
- 56. Mobile First Progressively enhanced& future-friendly Responsive Design – A Workflow that Works | 56
- 57.
- 58. THE MOBILE WEB IS DIFFICULT …BUT IT‟S WORTH IT Source: Kathy Slamen Photography
- 59. Responsive Design Some ofthe things that we‟ve learnt along the way ■ Challenge traditional processes Responsive Design – A Workflow that Works | 59
- 60. Responsive Design Some ofthe 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 ofthe 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 ofthe 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 Istart?
- 64.
- 65. Develop your mobilestrategy… but in the meantime there are some useful things you can do today
- 66. Step 1 Review yourtraffic logs and determine what mobile devices are accessing your site today
- 67. Step 2 Test yoursite on those devices to determine where the experience breaks down
- 68. Step 3 Develop anaction plan to address common issues – e.g. small touch targets, large images…
- 69.
- 70. It‟s going tobe fun. www.flickr.com/photos/othree/5224045406
- 71. Thank you Email: mark.delaney@intergen.co.nz Mobile: 021 466027 Twitter: @TeamIntergen