New Front-End Adventures in Responsive Design
Full-day workshop • April 18
With HTTP/2, Service Workers, Responsive Images, Flexbox, CSS Grid, 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, co-founder 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.
In this workshop, you'll learn:
- responsive design patterns and innovative approaches to designing "responsive modules" such as tables, calendars, mega-drop-downs, dashboards, maps, forms, lightboxes and filters,
- architecting and building pattern libraries, style guides and design systems,
- content choreography, internationalization and localization issues,
- layout techniques (Flexbox and CSS Grid),
- resolution independence (SVG Gotchas),
- compressive and responsive images (optimization and techniques),
- web font loading strategy (options, strategy, code snippets),
- performance issues/strategy (best practices + HTTP/2 + HTTPS + prefetching techniques), including transition from HTTP to HTTPS,
- Service Workers, how to make use of them and how to keep maintenance sane,
- maintenance issues (e.g. dealing with legacy browsers),
- common front-end challenges and solutions,
- accessibility issues and techniques,
- gotchas when building responsive HTML email newsletters,
- tooling (performance, frameworks, testing, quality assurance).
This workshop is intended for professional front-end designers, developers and everybody else who is dealing with responsive design regularly or wants to better understand responsive design in general. You should at least be familiar with some basics of responsive design, HTML5 and CSS.
What hardware/software do you need?
To get the most out of the workshop, you'll need to bring a laptop with your preferred text editor.
Time & Location
This full-day workshop will be hosted at Fort Mason and will take place after the two days of Smashing Conference. The workshop will be running from 9:30am to 5:30pm on Thursday, April 18th.
About Vitaly Friedman
Vitaly Friedman loves beautiful content and does not give up easily. After working as a freelance designer and developer for 6 years, he co-founded Smashing Magazine, an online magazine for web designers and developers. Vitaly is the author, co-author and editor of all Smashing books.
He currently experiences issues describing what he does for living, but most of the time working with Smashing Cats, books, speakers and mid-size to large-scale consultancy projects in front-end and UX. Currently residing in the beautiful city of Vilnius, Lithuania.
Schedule for Thursday, April 18th
9:00 – Doors open, Registration
9:30 – Introduction & Kick-off
11:00 – Coffee Break
13:00 – Lunch
14:00 – Afternoon Session
15:30 – Coffee Break
17:30 – The End
Save 100 USD when signing up for the conference and a workshop!