The workshop provides a comprehensive overview of smart responsive design patterns, advanced front-end techniques, clever UX patterns, optimization for critical rendering path and robust performance tricks — a treasure of actionable, hands-on takeaways to apply in your project. We'll be looking at many case studies and real-life examples of projects using these techniques effectively today.
The workshop has two main parts:
- the first half of the day is dedicated to design/UX, the RWD workflow ("designing systems"), content choreography, design patterns, responsive components (tables, calendars, navigations, forms etc.) and delightful UX,
- the second half covers technical considerations, front-end techniques, performance strategies and optimization for the critical rendering path.
In this workshop, you'll learn:
- 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,
- Front-end strategies for scalable, resolution-independent graphics and maintainable CSS code with SVG and icon fonts,
- Responsive design patterns and innovative approaches to designing "responsive modules" such as tables, calendars, multi-level menus, maps and Web forms,
- Clever performance tricks, smart lazy loading and dealing with Web fonts,
- Testing, debugging and maintenance techniques for responsive sites as well as lessons learned from Smashing Magazine's own redesign in 2012,
- Technical issues (and solutions) for responsive advertising and responsive email newsletters,
- How the design processes should adapt in terms of the project management, deliverables, performance budgets, team organization and strategy.
This workshop is intended for professional 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 might want to bring a laptop but it's not absolutely necessary.