Responsively Responsive

Presentation by @htmlboy and @martuishere at WebVisions Barcelona, on June 2013.

Transcript

1. RESPONSIVELY RESPONSIVE @htmlboy @martuishere
2. ¡HOLA!
3. We are Javier & Marta We are also @htmlboy & @martuishere
4. We work at Swwweet.com We work mostly for our cats.
5. WE DESIGN WEBSITES
6. WE DESIGN WEBSITES RESPONSIVE
7. We’ve made every mistake over the past two years.
8. Adaptive non-fluid layouts Responsive as an add-on Mobile as an afterthought Ignoring real devices
9. We’ve learned our lessons the hardest possible way.
10. Organizing media queries Best use of pre-processors Navigation patterns Serving appropriate images
11. Organizing media queries Best use of pre-processors Navigation patterns Serving appropriate images (not really)
12. Our work gets better as we learn all this. Or so we hope.
13. But we’ve struggled with one particular thing...
14. WORKFLOW
15. A B
16. Our old workflow: mockups code wireframes
17. This is known as “waterfall” development. Because you’d want to put them in a barrel and throw them over a waterfall. Mike Monteiro · Design Is a Job
18. A B pain
19. Our shoehorned workflow: sketches visuals prototype
20. A B
21. It wasn’t quite working, we needed something better…
22. RESPONSIVELY RESPONSIVE
23. Workflows need flexibility as much as websites do.
24. A B
25. A WARNING
27. There’s no perfect workflow, you have to go and explore for yourself.
28. The time of neatly organized process charts and workflows is behind us. Building for the web has become a journey with infinite potential for forks and bumps in the road. Let’s make sure that our process and organization ready us for what lies ahead. Trent Walton · bit.ly/responsively_1
29. START WITH THE CONTENT Step #1
30. no, really no, really
31. START WITH THE CONTENT
32. No more lorem ipsum! Make a content inventory Create any content you need
33. No more lorem ipsum! Make a content inventory Create any content you need
34. What do the users want to accomplish? What do we have to offer them? Why would they complete this task?
35. Prioritize that content. Post-it notes are great for this!
37. Discuss with your clients, and be prepared to change everything.
38. Conversations always produce better designs
39. JUMP INTO HTML Step #2
40. Static pictures aren’t websites. And neither are static grey boxes.
41. Wireframe in the browser, simply labelling boxes to their content.
42. Go from this:
43. To this: Logo Main article Article Article
44. Start mobile first and build the rest of the layouts from there.
45. Logo Main article Article Navigation Article Article
46. WORK THE VISUALS Step #3
47. Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance. Organizing blocks of text and combining them with pictures, isn’t that what graphic designers, usability specialists, information architects do? So why is it such a neglected topic? Oliver Reichestein · bit.ly/responsively_2
48. Always start with the basics: pick your fonts, scale, colors.
49. Design visual languages that you can take further than mockups.
50. A small set of visual assets can go a long way.
51. Styletil.es Style tiles
52. They are not a “deliverable”. They are an exploration tool. Abstraction can be difficult. Style tiles are great, but:
53. Style tiles bit.ly/responsively_3
54. Regardless of any particular process or tool we may choose, it’s interesting to note that our visual design explorations are now happening alongside the research and ideation phases undertaken by our UX colleagues. Having front-end developers be part of the same conversation, helps massively too. Paul Lloyd · bit.ly/responsively_3
57. On what’s best for your brand On what’s best for your content On what’s best for your user Base all your design decisions
58. Translate this visual language into your prototype. Yay, a website!
59. BE PREPARED TO CHANGE EVERYTHING
60. BE PREPARED TO CHANGE EVERYTHING BE FLEXIBLE
61. BE PREPARED TO CHANGE EVERYTHING BE FLEXIBLE
62. RESPONSIVELY RESPONSIVE Step #4
63. prototyping phase may change accordingly to your typographic decisions and visual decisions (grids, etc). Responsively responsive: The media queries you set at the
64. not work well across a variety of devices or conditions. The colors/sizes you chose might Responsively responsive:
65. tons of images (i.e. band width), and you might need to find something else that you can replicate with CSS. Your visual assets might need Responsively responsive:
66. If your beautiful design requires 400 HTTP requests and weighs 10MB, it's not designed for the web.
67. All these changes are OK! The web is alive, you don’t have to be afraid.
68. Don’t work in hermetic silos, best products come from collaboration.
69. content strategists designers developers REAL AWESOMENESS
70. satisfies all the user’s needs is easy and pleasant to use responds quickly in any context A good site is only good when it
71. ALL THE TEAM SHOULD WORRY ABOUT THESE 3 THINGS. ALL OF THE TIME.
72. A BRAVE NEW PROCESS Summing up
73. Our new workflow: content prototype visuals
74. REPEAT REPEAT REPEAT
75. content strategists designers developers WORK TOGETHER
76. BE FLEXIBLE, BE...
77. RESPONSIVELY RESPONSIVE
78. THANKS! @htmlboy @martuishere
79. QUESTIONS? @htmlboy @martuishere