A More Responsive Workflow
•
0 likes•1,231 views
It wasn’t all that long ago that we made a giant shift in how we design and develop for the web. We slowly stopped using table-based layouts and switched to semantic markup and CSS. Today we're facing another shift; making our websites responsive. Our processes, workflows, and tools break down when faced with an infinite array of devices, resolutions, and feature sets. Designing from content, systematic thinking, separating layout from atmosphere, progressive enhancement, and project deliverables are just a few of the topics that Brandon Gray, a maker of awesome stuff for the web at AKQA, will cover to help you tame the modern web creation process. The web is growing up fast, it's time our process grows up with it!
Recommended
More Related Content
Viewers also liked
Viewers also liked (15)
Recently uploaded
Recently uploaded (20)
A More Responsive Workflow
- 1. A More Responsive Workflow
- 2. Hello! This is me Where I work. @BrandonGray @AKQA
- 3. Whatchu Talkin Bout Willis?
- 4. What is it? How should the content display when viewed on a television? How do we resize images for various resolutions? What are the advantages of this? How do we figure out what those break points should be? What are the “break points” for the site? What are the disadvantages? Which interface design patterns work best for small screens? How and when do we involve the client? How many comps do I need to create for each page? How much more time is this going to require? How do we support “retina” displays? What size do I start my Photoshop document at? How much more does this cost? How do we translate ideas amongst team members? What devices are we targeting?
- 5. The World As We Know It
- 8. Waterfall Process Born From Print Design Research Wireframe Design Develop Launch
- 9. “Pages”
- 10. “Lock-Up”
- 11. “The Fold”
- 12. You make me feel so comfortable. 1024 x 768
- 13. Welcome to the party! Eh, maybe we’ll invite you... but probably not. Who the? GTFO!
- 15. Feeling slightly less comfortable...but still pretty comfortable.
- 17. “The fastest way to break the cycle of perfectionism and become a fearless mother is to give up the idea of doing it perfectly - indeed to embrace uncertainty and imperfection.” - Arianna Huffington
- 18. Tesla Type-S - 17” touch display
- 19. Samsung Galaxy Skin - Flexible AMOLED Display • Extremely wide landscape view • “Retina” quality resolution • Potential for new types of interactions with a truly flexible device
- 20. A Whole New World.
- 22. Our job now is to create solutions that are flexible and designed with the future in mind.
- 23. 1. Starting With Content 2. Thinking in Systems 3. Beyond the Box 4. Separating Layout From Atmosphere 5. Separating Content From Context 6. Enhancing for Feature Sets 7. Collaboration 8. Deliverables
- 24. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- 25. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here. Content here.
- 26. “Content precedes design. Design in the absence of content is not design, it’s decoration.” - Jeffrey Zeldman
- 27. 1. Starting With Content 2. Thinking in Systems 3. Beyond the Box 4. Separating Layout From Atmosphere 5. Separating Content From Context 6. Enhancing for Feature Sets 7. Collaboration 8. Deliverables
- 31. 1. Starting With Content 2. Thinking in Systems 3. Beyond the Box 4. Separating Layout From Atmosphere 5. Separating Content From Context 6. Enhancing for Feature Sets 7. Collaboration 8. Deliverables
- 33. Common “Desktop” Resolutions 800 x 600 1366 x 768 1024 x 768 1440 x 900 1280 x 768 1600 x 900 1280 x 800 1680 x 1050 1280 x 1024 1920 x 1080
- 34. Common “Mobile” Resolutions 64 x 98 101 x 67 120 x 115 128 x 120 132 x 176 176 x 164 222 x 261 240 x 400 400 x 800 640 x 480 64 x 112 101 x 80 120 x 116 128 x 121 136 x 120 176 x 176 230 x 240 240 x 427 432 x 240 640 x 960 64 x 128 101 x 111 120 x 117 128 x 127 136 x 176 176 x 178 230 x 310 240 x 428 450 x 854 640 x 1136 80 x 120 102 x 80 120 x 120 128 x 128 140 x 160 176 x 180 232 x 323 240 x 432 480 x 272 720 x 1280 95 x 76 104 x 80 120 x 124 128 x 131 144 x 135 176 x 182 240 x 160 240 x 440 480 x 320 768 x 1024 96 x 44 104 x 208 120 x 126 128 x 141 144 x 136 176 x 183 240 x 224 240 x 480 480 x 360 800 x 352 96 x 64 108 x 82 120 x 127 128 x 143 144 x 140 176 x 184 240 x 235 256 x 240 480 x 427 800 x 480 96 x 65 110 x 72 120 x 128 128 x 144 144 x 144 176 x 185 240 x 240 256 x 384 480 x 540 800 x 600 96 x 68 111 x 100 120 x 130 128 x 146 144 x 156 176 x 186 240 x 255 320 x 194 480 x 640 800 x 1280 96 x 72 111 x 106 120 x 143 128 x 160 144 x 176 176 x 187 240 x 260 320 x 199 480 x 690 854 x 480 96 x 76 112 x 64 120 x 144 128 x 176 144 x 262 176 x 192 240 x 266 320 x 204 480 x 760 960 x 544 96 x 78 112 x 76 120 x 145 128 x 220 150 x 100 176 x 198 240 x 269 320 x 240 480 x 800 1024 x 480 96 x 84 112 x 84 120 x 160 128 x 256 150 x 170 176 x 200 240 x 270 320 x 256 480 x 845 1024 x 600 96 x 89 112 x 128 123 x 69 130 x 130 160 x 120 176 x 208 240 x 272 320 x 320 480 x 854 1024 x 768 96 x 90 116 x 122 125 x 96 132 x 65 160 x 128 176 x 220 240 x 274 320 x 400 480 x 860 1136 x 640 96 x 91 116 x 181 128 x 50 132 x 126 160 x 160 176 x 229 240 x 275 320 x 480 480 x 862 1280 x 768 96 x 95 118 x 114 128 x 64 132 x 128 160 x 180 176 x 240 240 x 292 324 x 352 480 x 864 1280 x 800 96 x 96 118 x 128 128 x 80 132 x 136 160 x 198 177 x 223 240 x 298 345 x 800 480 x 960 96 x 104 118 x 256 128 x 83 132 x 142 160 x 240 178 x 220 240 x 300 352 x 416 480 x 1024 96 x 113 119 x 64 128 x 92 132 x 144 162 x 176 208 x 104 240 x 302 360 x 120 540 x 960 96 x 120 120 x 72 128 x 95 132 x 147 162 x 178 208 x 208 240 x 320 360 x 400 600 x 800 98 x 64 120 x 80 128 x 96 132 x 156 162 x 216 208 x 320 240 x 345 360 x 480 600 x 1024 100 x 120 120 x 96 128 x 97 132 x 158 174 x 132 216 x 162 240 x 352 360 x 640 640 x 200 101 x 54 120 x 108 128 x 100 132 x 160 176 x 144 220 x 113 240 x 375 384 x 288 640 x 240 101 x 64 120 x 110 128 x 112 132 x 162 176 x 157 220 x 176 240 x 378 400 x 240 640 x 320 101 x 65 120 x 112 128 x 115 132 x 163 176 x 160 220 x 220 240 x 384 400 x 427 640 x 360
- 35. Common Smartphone & Tablet Resolutions 240 x 320 256 x 384 360 x 400 480 x 540 600 x 800 800 x 600 240 x 345 320 x 194 360 x 480 480 x 640 600 x 1024 800 x 1280 240 x 352 320 x 199 360 x 640 480 x 690 640 x 200 854 x 480 240 x 375 320 x 204 384 x 288 480 x 760 640 x 240 960 x 544 240 x 378 320 x 240 400 x 240 480 x 800 640 x 320 1024 x 480 240 x 384 320 x 256 400 x 427 480 x 845 640 x 360 1024 x 600 240 x 400 320 x 320 400 x 800 480 x 854 640 x 480 1024 x 768 240 x 427 320 x 400 432 x 240 480 x 860 640 x 960 1136 x 640 240 x 428 320 x 480 450 x 854 480 x 862 640 x 1136 1280 x 768 240 x 432 324 x 352 480 x 272 480 x 864 720 x 1280 1280 x 800 240 x 440 345 x 800 480 x 320 480 x 960 768 x 1024 1536 x 2048 240 x 480 352 x 416 480 x 360 480 x 1024 800 x 352 2048 x 1536 256 x 240 360 x 120 480 x 427 540 x 960 800 x 480
- 36. “Popular” Resolutions 320 x 480 768 x 1366 1280 x 768 480 x 320 800 x 480 1280 x 800 480 x 800 800 x 1280 1280 x 1024 600 x 1024 960 x 640 1366 x 768 640 x 960 1024 x 600 1440 x 900 640 x 1136 1024 x 768 1600 x 900 720 x 1280 1136 x 640 1680 x 1050 768 x 1024 1200 x 1920 1920 x 1080 768 x 1280 1280 x 720
- 37. iOS Resolutions 320 x 480 960 x 640 480 x 320 1024 x 768 640 x 960 1136 x 640 640 x 1136 1536 x 2048 768 x 1024 2048 x 1536
- 38. “The most popular size is every size.” - Jeffrey Zeldman
- 39. 1. Starting With Content 2. Thinking in Systems 3. Beyond the Box 4. Separating Layout From Atmosphere 5. Separating Content From Context 6. Enhancing for Feature Sets 7. Collaboration 8. Deliverables
- 41. Anyone Can Sketch. Everyone Should.
- 46. Wait...What Do You Mean “Dead”?
- 47. GET EXTREME!
- 48. 1. Starting With Content 2. Thinking in Systems 3. Beyond the Box 4. Separating Layout From Atmosphere 5. Separating Content From Context 6. Enhancing for Feature Sets 7. Collaboration 8. Deliverables
- 49. You Do Not Know Me.
- 50. You Do Not Know My Intent.
- 51. You Do Not Know My Environment
- 52. You Do Not Know My Circumstance.
- 53. You Do Not Know My Circumstance. Oh please! Like you haven’t done it.
- 54. Do Not Limit The Content! Mobile users expect to be able to do all of the things they would be able to do on a desktop.
- 55. 1. Starting With Content 2. Thinking in Systems 3. Beyond the Box 4. Separating Layout From Atmosphere 5. Separating Content From Context 6. Enhancing for Feature Sets 7. Collaboration 8. Deliverables
- 58. 1. Starting With Content 2. Thinking in Systems 3. Beyond the Box 4. Separating Layout From Atmosphere 5. Separating Content From Context 6. Enhancing for Feature Sets 7. Collaboration 8. Deliverables
- 62. Tear Down That Silo!
- 63. 1. Starting With Content 2. Thinking in Systems 3. Beyond the Box 4. Separating Layout From Atmosphere 5. Separating Content From Context 6. Enhancing for Feature Sets 7. Collaboration 8. Deliverables
- 65. But It’s A Prototype! It’s Not Finished!
- 66. “A change gonna come” - Sam Cooke
- 67. “A change gonna has already come” - Not Sam Cooke
- 68. Growing Up
- 69. “Innumerable confusions and a profound feeling of despair invariably emerge in periods of great technological and cultural transitions. Our “Age of Anxiety” is, in great part, the result of trying to do today’s job with yesterday’s tools–with yesterday’s concepts.” - Marshal McLuhan
- 71. Thanks!