Smart Responsive Design Patterns

Buy a combined ticket to attend two full-day workshops with Smashing Magazine Editor Vitaly Friedman, covering clever tricks and useful strategies for working on responsive websites.

£599 + VAT

This combined ticket will allow you to access two full day workshops on consecutive days. You can also choose to attend each workshop separately: UX & Design Patterns on 18 May, and Front-End & Performance on 19 May.


Smart Responsive Design Patterns: UX & Design Patterns

An intensive, full-day workshop with Vitaly Friedman (editor-in-chief of Smashing Magazine), covering practical techniques, clever tricks and useful strategies you need to be aware of when working on responsive websites.

From responsive modules to clever navigation patterns and web form design techniques; this workshop will provide you with everything you need to know today to start designing better responsive experiences tomorrow.

The workshop is intended for intermediate/advanced designers and developers who have an understanding of responsive design and how it works.

Most techniques are borrowed from mid-size and large-scale real-life projects, such as large eCommerce projects, online magazines and web applications. We won’t cover the basics, instead, the workshops covers more advanced techniques used in responsive design.

Topics covered

  • Effective tools and techniques that can support and enhance your personal workflow when working on any responsive design project
  • An overview of clever practical techniques for improving UX of responsive sites including navigation and search
  • Responsive Design Patterns and innovative approaches to designing ‘responsive modules’ such as mega-drop downs, tables, calendars, multi-level menus, maps, carousels and web forms
  • How to apply clever patterns such as improved off-canvas navigation, assistant pattern, smart URL design, priority+ pattern, vertical media queries, ‘view mode’ approach, lazy loading, autocomplete, type-ahead search, filters, portrait/landscape orientation change, inventory-based sliders, the country selector and responsive iconography
  • How to craft delightful interfaces with smooth transitions, clever animations and improve perceived performance along the way
  • How to optimise responsive websites for better mobile UX, faster data input and higher conversion rates
  • Design anti-patterns to avoid when designing a responsive site to prevent running into performance issues and “slow UX decay”
  • How the design processes should adapt in terms of the project management, deliverables, performance budgets, team organisation and strategy.

Prerequisites

No laptop needed, just bring lots of creativity!


Smart Responsive Design Patterns: Front-End & Performance

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

These workshops 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.