A ‘universal’ component is a universally usable component that contributes to and enhances the overall user experience of the interface. It is an accessible, flexible component that embraces best practices in terms of UX design, and code. Ideally, it has no dependencies and can be customized and plugged in to any (or many) environment(s).

You’ll learn how to:

You will learn about best UX considerations and practices when designing universal patterns and then apply those learnings to work our way through building components with accessibility baked right in. Components we’re going to cover in the workshop include (but are not limited to):

• navigation systems (mobile navigation, pagination, breadcrumbs)
• SVG icons
• Semantic and accessible color swatches for design systems
• form elements and styling
• tooltips
• content accordions
• and, if time allows, maybe a few more.

We’ll look into UX design best practices, CSS styling, enhanced functionality and accessibility with JavaScript, adding delightful behavior with SVG, all in the context of a progressively enhanced interface and experience.

By the end of the workshop, you will have built a mini library of reusable, universal components meeting the best UX practices, and that you can plug into almost any front-end project and use right away.

Whom is it for

Designers and front-end developers with at least basic knowledge of CSS and SVG. Please bring your laptop to the workshop.

---

Time & Location

This full-day workshop will be hosted at the Microsoft Technology Center and will take place before the two days of Smashing Conference. The workshop will be running from 9:30am to 5:00pm on Thursday, October 25th.

Microsoft is the Workshop Sponsor for SmashingConf2018, hosting workshops in the and Microsoft Times Square facility. Note: Your workshop fee covers event costs and speaker payment – Microsoft does not receive any proceeds from your ticket fee.

Schedule for Thursday, October 25th

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:00 – The End, Networking

Save $100 when signing up for the conference and a workshop!