Responsively Responsive

0fe2973fa8d27d96547e43322341183a?s=47 Swwweet
June 28, 2013

Responsively Responsive

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

0fe2973fa8d27d96547e43322341183a?s=128

Swwweet

June 28, 2013
Tweet

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

  26. None
  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!

  36. None
  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
  55. None
  56. None
  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