Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsively Responsive

June 28, 2013

Responsively Responsive

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


June 28, 2013

More Decks by Swwweet

Other Decks in Design


  1. A B

  2. 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
  3. A B

  4. A B

  5. 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
  6. What do the users want to accomplish? What do we

    have to offer them? Why would they complete this task?
  7. 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
  8. They are not a “deliverable”. They are an exploration tool.

    Abstraction can be difficult. Style tiles are great, but:
  9. 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
  10. 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
  11. prototyping phase may change accordingly to your typographic decisions and

    visual decisions (grids, etc). Responsively responsive: The media queries you set at the
  12. not work well across a variety of devices or conditions.

    The colors/sizes you chose might Responsively responsive:
  13. 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:
  14. 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