Smart Responsive Design Patterns: Front-End & Performance

Full-day workshop with Smashing Magazine Editor Vitaly Friedman. Learn strategies for crafting fast, resilient and flexible responsive design systems.

19 May
Avonmouth House, London (map)

This workshop can be attended individually or as part of a two day package with Smart Responsive Design Patterns: UX & Design Patterns.


With HTTP/2, Service Workers, Responsive Images, Flexbox, SVG, WAI-ARIA roles and Font Loading API now available in browsers, we all are still trying to figure out just the right strategy for designing and buildings responsive websites efficiently. We want to use all of these technologies and smart processes like atomic design, but how can we use them efficiently, and how do we achieve it within a reasonable amount of time?

This full-day front-end workshop, Vitaly Friedman, editor-in-chief of Smashing Magazine, will equip you with strategies for crafting fast, resilient and flexible responsive design systems by utilising all of those wonderful shiny web technologies we have available today. We’ll also talk about dealing with legacy browsers and will cover a few dirty little front-end techniques that might ensure that your responsive websites will stay relevant, flexible and accessible in the years to come.

The workshop is intended for intermediate/advanced designers and developers who have an understanding of responsive design and how it works. We won’t cover the basics — instead, the workshops covers more advanced techniques used in responsive design.

Topics covered

  • content choreography, internationalisation and localisation issues
  • layout techniques (flexbox)
  • resolution independence (SVG)
  • compressive images (optimization and techniques)
  • responsive images (technical perspective)
  • responsive iframes and media: audio, video (incl. subtitles)
  • accessibility issues
  • performant components (carousels, video etc.)
  • deferring and lazy-loading JavaScript (techniques, tools)
  • dealing with web fonts (options, strategy)
  • performance issues/strategy (best practices + HTTP/2 + HTTPS + prefetching techniques)
  • maintenance issues (e.g. dealing with legacy browsers)
  • responsive HTML email newsletters
  • tooling (performance, frameworks, testing, quality assurance)
  • (optionally) offline support/experience + debugging

Prerequisites

No laptop needed, just bring lots of creativity!

Training venue

This workshop will take place at Avonmouth House – a purpose-built training venue located between Borough and Elephant & Castle in London. We offer dedicated WiFi and provide breakfast on arrival, drinks and snacks throughout the day, plus a sit-down hot lunch.

See venue on the map

Course tutor

Vitaly Friedman

Vitaly Friedman loves beautiful content and does not give up easily. From Minsk in Belarus, he studied computer science and mathematics in Germany, discovered the passage a passion for typography, writing and design. After working as a freelance designer and developer for 6 years, he co-founded Smashing Magazine, a leading online magazine dedicated to design and web development. Vitaly is the author, co-author and editor of all Smashing Books. He currently works as editor-in-chief of Smashing Magazine.

Vitaly Friedman

By registering for this event, you agree to our Terms and Code of Conduct.