Responsive Design Workshops – creativestyle – Munich

Two weeks ago I participated in a workshop on Responsive Web Design which were led by Vitaly Friedman. The workshop itself was organized by creativestyle and took place in our office in Munich. Together with almost 30 people, I have spent 10 incredible hours discussing about different kind of techniques, solutions, design patterns and useful tools that shape the work on RWD.

Vitaly, editor-in-chief of Smashing Magazine did a wonderful job, talking about many exciting topics. Once you start following the Web design world, you know that there are a lot of topics appearing on the news, but you don’t really focus on the details. Personally, I think it’s always good to take the time to chime in, dig deeper and discuss problems & solutions. And such workshops are a great opportunity for those who share my opinion.

There were lots, lots of topics that we’ve covered on the day of the RWD workshops organized by creativestyle. Not to go into details too much, we have discussed 3 main topics:

1. Design and UX

2. Technical challenges

3. Responsive: Pros & Cons

If I had to pick the most interesting ideas, I would absolutely highlight:

  • the Atomic Design by Brad Frost – lots of people say that this approach really works. I will definitely try it out very soon!
  • Styleguides – there are lots of tools that help creating living styleguides and I think this would be really useful in many, many projects which we have already conducted. Styleguides also help with delivering designs for the client in the responsive world.
  • Responsive Typography which requires consideration of many variables, screen sizes and reading distance. Beginning your work with mobile is most usually a good idea.

– body {font-size: 100%; }

– line-height: 1.46;

– line-length ÷ line-height = 24.9;

– <p> spacing ÷ line-height = 1.43;

– use the keyphrase agh!iIl10O to test

  • Create optimistic interfaces. It means such interfaces which immediately present results to user. This could be done via faking, preloading, prefetching and so on.
  • Create Responsive tables. Sometimes it’s better to hide some columns. Filter or simply show different representation of data.
  • Icons: SVG is on rise. Overall SVG icons delivers better, more reliable results comparing to icon fonts. Use Grumpicon, SVG sprites, SVG Stacks.
  • Mobile Input: Typing is hard & time consuming. Try to save user’s time with autocompletion, smart defaults and good choice of form components. Luke Wroblewski has a very good coverage of this techniques.
  • Flexbox, syntax might be complicated, but its working in modern browsers. Flexbox helps with many common layouts issues. For some examples look here.
  • Responsive Images: Use Picturefill – Version 2 is a strict polyfill of the Picture element so its future proof!
  • Speed: use SPDY / HTTP 2.0, because the  gains for free
  • Responsive emails: it’s possible! Use display: table-* properties for reordering the content.

There were far more topics covered. It’s amazing that so many new tools, techniques and solutions get created almost every day and people share them with eachother.

Let’s keep it that way, to make the web – the responsive web – a better place!