Using CSS [and HTML5/ARIA] to enhance the user experience of forms (w/case studies)
Presentation for 2016 CSS Dev Conference in San Antonio, TX (October 17, 2016)
Generate a Living Style Guide from CSS - CSSDevConf 2016Matt Vanderpol
Tips, tricks, and tools to generate a living style guide from comments in a CSS/Sass/Less/Stylus file. Sample working project at http://bluemallard.net
Animation is key component of beautiful and useful product design. Salesforce, Google, and IBM all feature motion design in their design systems, and there’s every reason you should, too. When designers and developers agree upon constraints, they can create UI components faster and present a unified, polished look and feel users appreciate.
Communicating animation is all about identifying patterns and setting boundaries and behavior expectations. This means:
- creating custom easings that reinforce branding and physics
- choreographing scalable timing values
- creating a vocabulary of reusable components
- combining those components into unique yet universal animation patterns.
Whether your project is big or small, if it has a style guide, you will want to include motion design. In this talk, you will learn how to bring animation to heel.
Creating Beautiful, Accessible, and User-Friendly FormsClarissa Peterson
Forms are often a key part of websites: they allow users to buy things, sign up, participate, communicate, and get things done. But why are so many online forms confusing, cluttered, and difficult to use? In this session, you'll learn which HTML elements and attributes to use to make sure your form is accessible, understandable, and shows up correctly on the screen. You'll find out the best way to style a form with CSS to make sure it looks good on any browser, device or screen size. You'll learn how to validate form data and provide useful error messages — but also how you can help users fill in the correct information before submitting. And you'll find out what you need to do so that your forms are easier to complete on touch screens.
Presented at CascadiaFest, Web Unleashed, and CSS Dev Conference in 2016. Presented at Mobile+Web DevCon, UX Camp Edmonton, and ConFoo Vancouver in 2017.
Using CSS [and HTML5/ARIA] to enhance the user experience of forms (w/case studies)
Presentation for 2016 CSS Dev Conference in San Antonio, TX (October 17, 2016)
Generate a Living Style Guide from CSS - CSSDevConf 2016Matt Vanderpol
Tips, tricks, and tools to generate a living style guide from comments in a CSS/Sass/Less/Stylus file. Sample working project at http://bluemallard.net
Animation is key component of beautiful and useful product design. Salesforce, Google, and IBM all feature motion design in their design systems, and there’s every reason you should, too. When designers and developers agree upon constraints, they can create UI components faster and present a unified, polished look and feel users appreciate.
Communicating animation is all about identifying patterns and setting boundaries and behavior expectations. This means:
- creating custom easings that reinforce branding and physics
- choreographing scalable timing values
- creating a vocabulary of reusable components
- combining those components into unique yet universal animation patterns.
Whether your project is big or small, if it has a style guide, you will want to include motion design. In this talk, you will learn how to bring animation to heel.
Creating Beautiful, Accessible, and User-Friendly FormsClarissa Peterson
Forms are often a key part of websites: they allow users to buy things, sign up, participate, communicate, and get things done. But why are so many online forms confusing, cluttered, and difficult to use? In this session, you'll learn which HTML elements and attributes to use to make sure your form is accessible, understandable, and shows up correctly on the screen. You'll find out the best way to style a form with CSS to make sure it looks good on any browser, device or screen size. You'll learn how to validate form data and provide useful error messages — but also how you can help users fill in the correct information before submitting. And you'll find out what you need to do so that your forms are easier to complete on touch screens.
Presented at CascadiaFest, Web Unleashed, and CSS Dev Conference in 2016. Presented at Mobile+Web DevCon, UX Camp Edmonton, and ConFoo Vancouver in 2017.