Workshops

On Monday, we’re running four hands-on workshops:

• Next Steps With CSS Layout with Rachel Andrew,
• Designing Delightful Animations For The Web with Chris Gannon,
• Smart Responsive UX Design Patterns with Vitaly Friedman,
• How To Translate Wireframes Into Accessible HTML/CSS with Deque.

Graffiti Walk

Join us the day before the conference for some graffiti exploring and already meeting some people before the conference starts!

Jam Session

The night before the conference kicks off, we’re hosting a warm-up event with our dear friends from Shopify, with drinks, a speaker panel and talks from your fellow attendees. We hope you’ll join us to connect ahead of the main event!
Please register so we know you're coming!

Morning Run

Join speakers and attendees for a 5k run! We'll meet at the HTO Park West at 7 AM and run 5k to a cool island with views back towards Toronto! We'll be running for around 30-40 minutes.

Let's Build A Design System!

Build a design system in less than an hour? That's crazy. But not entirely impossible. In this session, Brad will demonstrate how to use Pattern Lab to simultaneously build both a design system's front-end components and several screens of a real pilot project.

Throughout the talk, he'll discuss topics like front-end code architecture, designing in the browser, modular development best practices, designing with dynamic data, and more.

Let’s Write A Vue App From Scratch

Are you curious about how to build apps in Vue, but never quite had the time to dig in? Join Sarah, a Vue core team member, as she builds an app from scratch, using Nuxt.js, her own Vue snippet extension in VS Code, and an API! We’ll see how far we can get and all the mistakes we can make in 45 min to creating a functional application with routing, server side rendering, animations, and more!

JAMstack: Silly Name. Serious Stuff.

Do we really need this JAMstack thing? And what even is it?

In this session, we’ll demystify this buzzwordy term, and explore how this approach to simplifying the technology stack can lead to shorter development times, with better performance and greater security.

We’ll see how the JAMstack is placing more power, more confidence, and more capabilities in the hands of designers authors and front-end developers.

And we’ll show how serverless functions can augment this stack to let us rapidly build interfaces and APIs to power sites that we’d be brave enough to share with the world.

For SmashingTV Vitaly Friedman interviewed Phil about JAMstack. Get a little preview about what he will be speaking about in Toronto.

Build Bridges, Not Walls—Design For Users Across Cultures

As Internet access expands to the far corners of the world, product makers have the chance to see their work used by millions of people worldwide.

To create products for international users, we must be aware of the full range of human diversity with respect to language, culture and other forms of human difference. If the product doesn’t adapt to users’ differences and the rapidly changing world, our work will not truly meet the users’ needs.

Join this talk to hear how Jenny designed for users in Europe, North- and South America, Asia, and Southeast Asia.

For SmashingTV Jason Pamental interviewed Jenny Shen about localization and internationalization. Get a little preview about what she will be speaking about in Toronto.

Make It Move! Create A Web Animation From Scratch

Web animators are often handed a vector file (and sometimes even a flat JPEG) and asked to make it move. This can be quite daunting because of the many processes and decisions required to create and build a web animation from scratch. In this session, Chris will live code an SVG and JavaScript animation. He'll show you how he prepares, structures and exports graphics and he’ll talk about the various creative, design and coding decisions he makes along the way. Hopefully, they'll contribute to a delightful animation! ;-)

You’ll learn how to create and structure graphics for web animation, how to make and balance creative and technical decisions, how tiny details can make a big impact in animation, and a bit of Greensock functionality along the way.

Help! I’m your Ailing Website. The Digital Policy & Standards Rehab Hour.

We always optimistically embark on developing any new website full of hope and visions of greatness. As time passes and the spectrum of content publishers and managers increases, the site starts to suffer for ailments. Inconsistent branding, unpredictable navigation, multiple content platforms, or poor search performance are typically the result. Brand degradation, legal and regulatory troubles, and low team morale are also common. But what can you do about any — or all — of these?

In this fun (and funny) session, you will be engaged in roleplaying and discussion on the most common and challenging issues a website faces, and how to leverage policies and standards — the do’s and don’ts of digital — that can nurse it back into good health. We will focus on proven tactics for creating and documenting sound policy and standards, applying design and development thinking across the organisation, and many other tools and tactics which will help nurse your website back to health.

Authentic Digital Design, By The Numbers

Today’s world is full of open, and airy, beautiful, tediously identical, and unusable designs. Trends shouldn’t be taken too far, and we can easily make modern interfaces that work.

Being authentically digital doesn’t just mean removing gradients and woodgrains. We have learned how people really use their mobile phones and tablets, and Steven has leveraged his research into an easy to remember, human-centered design system. Let’s keep our principles in mind, and design for how people look, see, touch, and expect their various devices to work for them, so they find, understand, and transact better.

After Party

Ah, the legendary SmashingConf parties! Grab your team members, or make some new friends, and we’ll have a wonderful night of competition, networking and fun.

Our amazing sponsor Speedcurve will take excellent care of us with free bowling, snacks and a couple of drinks on them!

This party is only for Smashing attendees, please don’t forget to bring your badge and a photo ID. Hope to see you at The Ballroom!

Morning Run

Join speakers and attendees for another 5k run! We'll meet again at the HTO Park West at 7 AM and run 5k using another cool route! We'll be running for around 30-40 minutes.

Out Of This World 🚀

Do you already know who the Mystery Speaker is?

Diving Into Service Workers, Live

The service worker is the host to a bunch of APIs; caches, clients, fetches, requests and responses. Each service worker recipe uses a little of each to produce different effects for your application.

In this session, Phil Nash will take a regular website and apply various service worker strategies to make it work offline. We'll see the tools available for building and debugging with service workers, take a tour through testing, and bring it all together to make better, more resilient application experiences for our users.

For The Love Of The Grid

CSS is more powerful than ever but designs that match its growing potential are lagging behind. How do you retrain yourself to propose layouts that weren't feasible before? How do you wrap your mind around actually building them?

To explore the opportunities made possible by CSS Grid, Jules challenged herself to recreate and reimagine static graphic design works for the web. In this session, she will code a CSS Grid demo from a beautifully complex, previously impractical work of print design.

Seeing The Pages For The Components

While laser focused on creating component-driven sites, it’s all too possible to lose sight of something our industry once prioritized: making cohesive pages. In this pursuit, Dan will take you into his workflow for retroactively connecting components by experimenting with a number of visual and coded approaches.

In this session, we’ll use these techniques to collectively live-design our way to better flowing pages. Dan will help identify common symptoms of non-cohesive designs, methods for exploring minimal and expressive connections, and we’ll discuss how component connectivity can be worked into a design system.

The Secret Lives Of Color Systems

Design systems are built on top of many other systems, and each part has to be designed in context with the rest. Color is no different, and it's often particularly challenging to work with.

In this talk Diana will be sharing her journey into color, from the technical challenges to how people respond to it. She'll show you the work behind updating large scale web applications like GitHub, testing the interaction of color with other parts of a design system, creating color naming conventions, color contrast, and using color systems outside of the product UI.

Move Fast & Don’t Break Things

Performance is a high priority for any site of scale today, but it can be easier to make a site fast than to keep it that way. As a site's features and design evolves, its performance is often threatened for a number of reasons, making it hard to ensure fast, resilient access to services.

In this session, Scott will draw from real-world examples where business goals and other priorities have conflicted with page performance, and share some strategies and practices that have helped major sites overcome those challenges to defend their speed without compromises.

Photo Walk

If you don’t want your SmashingConf to end yet, join us for a relaxing photo walk! We'll be exploring the neighborhood and take some cool photos.

Workshops

On Thursday, we’re running five hands-on workshops:

• Lightning Fast Web Performance with Scott Jehl,
• Intro To Vue.js with Sarah Drasner,
• The Design System Process (Sold-Out) with Brad Frost,
• New Front-End Adventures with Vitaly Friedman,
• Hacking Lizard Brain — Improving Visual Experience on the Web with our friends at Cloudinary.