Learning from Smashing Conference and making a demo
I got to attend the Smashing Conference in Toronto last week, and it was such a privilege to watch so many brilliant people share and show their work. Smashing’s rule against slides - encouraging presenters to do their thing live instead - meant that coming out of the conference I had a lot of practical knowledge to apply. The collaborative Google Doc notes for the sessions were great too, encouraging people to focus on the stage rather than their laptops, and encouraging a sense of community.
Zuri Group paid for my ticket to the conference and asked me to share what I saw with the team. I was partway through writing up a report when I realised that really wasn’t in the spirit of the conference - so instead I decided to combine and apply my favourite lessons from the conference in to my
bread-and-butter as a non-profit web developer — the donation form.
I’ll outline the big features below, and you can follow along with the sample form (you can find the source code here).
From the conference
- Prioritize accessibility
The core of Marcy Sutton’s Accessibility Audit Live talk was “designing inclusively helps everyone,” and I tried to keep that in mind for this build. The aXe browser plugin that she and her team built is a real help! The colour-contrast notes and ARIA warnings were especially great.
Avoid input placeholders
I’ve heard that placeholders were bad practice before, but it’s still an attractive design. Marcy hammered it home and convinced me it was time to get away from it. I took the new input design from Google’s Material Theming guidelines which is a good compromise — we start with a label set inside the field, which moves above the field when it’s focused or has content.
Manage focus
We do a pretty good job managing what’s on screen for many users, hiding things that they don’t need to see behind multiple steps or modals. But we always assume that our users will see what’s on screen and be able to click or tap on things (thanks to mobile users, we don’t generally use hover states for content anymore). I added a bit of JavaScript to set focus on the first input on load, and on the first useful input when the user advances a step or tries to advance with invalid fields. Every developer’s gotten complaints about the browser-standard dotted border for focused fields, so I replaced it with a blue halo for buttons and blue border for text inputs.
User control of animations
My final takeaway from Marcy’s talk was her note that some users can get nauseous with motion animations on the screen. She suggested providing a button to disable them, as well as respecting the prefers-reduced-motion media query (currently just supported by Safari on OSX). In this example, we’re only showing animations on the text label and we handle all animations using CSS, so this is very easy to manage.
Inline styling/Progressive enhancement
Tim Kadlec’s Performance Audit Live and Harry Robert’s Third Party Performance Auditing providing great tips on using Chrome’s dev tools, Webpagetest, and Request Map Generator to find the big pain points for loading speed. I didn’t have time to run through these audits in detail, but I applied some key takeaways: inlining CSS required to get our page ready and interactive (page structure and visible fields), and deferring things we don’t need straight away (jQuery, other JS, and the remaining CSS).
Mix-blend-mode
Lea Verou’s Even More CSS Secrets was a hilarious and fun celebration of all the great things we can do with pure CSS these days. Everything from using emojis as backgrounds through SVG to descendant grids for nicer layouts - there were a lot of great tips I’m itching to use. Unfortunately, donation forms are one of the watering holes for older browsers on the internet, so I couldn’t use most of them here.
I used mix-blend-mode here as a treat for browsers where it works (yay progressive enhancement!), but mostly so I could talk about how much I enjoyed this talk.
Checkout psychology
My key takeaway from Joe Leech’s Checkout UX Audit Live was to follow design axioms and to build great experiences on top of that, and that’s what I tried to do. In this build, every button looks clearly like a button, the steps follow a standard checkout order, and we label the submit button with the actual donation amount. We also stick with a clear colour scheme — green for go (submit button, validation pass) and red for stop (invalid fields).
Design quickly
Finally, Dan Mall’s First Minutes of Design was a fantastic look at his process of getting going quickly and still getting great results. His steal-imitate-remix-invent cycle helped me ramp this up quickly, and generated great ideas for future enhancements.
Great things we’re already doing
As always with Zuri Group, I built this form to be responsive — in this case, eschewing the standard, Bootstrap breakpoints in favour of fluid sizing (thanks to Dan for the reminder that it’s a legitimate way to build).
Following standards set by the vendors we work with, I also built this single form to support different types of donations (single, monthly, and by installments) and custom donation amounts. We also gracefully handle server-side errors — when the user lands on the form with values set, we set the state of the form following the values already set (i.e. we hide the credit card fields if the form starts with payment type on PayPal)
Other fun things from the conference
The Smashing Conference packed an extraordinary number of great sessions over just two days. Gemma O’Brien’s Beyond Fonts: Elevating Lettering to Art was an inspiration, and made me want so badly to get back in to calligraphy. Nadieh Bremer’s Creating an Effective & Beautiful Data Visualization From Scratch was a fantastic illustration of designing based on data and goals (rather than type of chart), and for D3. And Seb Lee-Delisle’s laser-projections and applause-powered Flappy Bird were real crowd pleasers.
I had a fun and enlightening time at the Smashing Conference. I can’t wait to boost my client work with what I’ve learned and seeing the real conversion benefits they can provide. And I can’t wait to go to another Smashing event next time they’re in Canada!
