New Adventures in Responsive Web Design
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?
In this workshop, Vitaly Friedman, editor-in-chief of Smashing Magazine, will be looking into a strategy for crafting fast, resilient and flexible responsive design systems by utilizing 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 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.
This workshop will cover
- Content choreography, internationalization and localization 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
Schedule
10:00 — Building a Pattern Library + Modular Design Strategy
11:00 — Break
11:15 — Flexbox Techniques
12:15 — Lunch Break
13:00 — Responsive Images + Web Fonts Loading
14:15 — Break
14:30 — Performance, HTTP/2 and Offline UX (Service Workers)
15:45 — Q&A + Open End
The workshop will include at least 10 front-end challenges that attendees will have to solve in a short amount of time. When you leave the workshop, you’ll be equipped with a good number of techniques and solutions applicable to your next responsive project right away.
The workshop includes lunch and coffee.
