A quick summary
This is as much for me to remember as it is to share with others. I haven’t been to Smashing Conference before but I’ve been a reader of the site for a long time. What is SmashingConference? A two-day event (four if you include the workshops) for web design and development. It’s very hands-on and seeing presentation slides full of code is not unusual.
Day 1
Denys Mishunov on “Deconstructing Performance”
Perceived speed of page load and how the Weber–Fechner law applies to how users view changes and time differences in web design. Users won’t be able to perceive differences less than 20%, so if your optimization or features affect page load less than 20% +/- it won’t be noticed by the average user. He also explained the two mental modes of user behavior: active (acting/involved) vs. passive (waiting). Using a combination of optimistic UI and pre-loading techniques you can create the illusion of speed.
Laura Elizabeth on “Selling Design Systems”
An in-depth look at the design systems debate: positives, negatives and do we even need one? Pattern libraries and design systems can bridge the divide between design and development. It creates a shared document that both parties are responsible for maintaining and evangelizing. Building a design system is not as simple as lego: these are complex organisms and require care and discipline to manage. If your design system isn’t solving pain points and adoption is limited (or your team is small) the benefits won’t be as clear.
Mark Robbins on “CSS and Interactive Email”
I’ve see Mark’s work with the RebelMail product in the past. It’s a pretty amazing product and this presentation was an impressive display of how far email can go. There are three levels of email: static (what most people send and see everyday), limited (some interactive elements but no webkit support), interactive (fully interactive with hacks). RebelMail allows you to create complex shopping cart, carousel or quizzes within email and before this talk, I never really understood how this worked. Mark pulled back the curtain and explained the black magic of CSS modified radio buttons that work like a old-school binary switch block. Even still, my mind is kind of blown by all of this. Then he shared his experimental work. First, he showed a mini web store, wrapped inside a cart abandonment email. You could view product detail pages, change colors on items and increment the totals within your cart: all from an email. Next, he showed off some 3D experiments and wowed the crowd with an execution of a 3D shooter in an email window. His last magic trick was that his entire presentation, was in fact, all inside of an email.
Nadieh Bremer on “Hacking the Visual Norm”
Data visualization is hard and making it pretty and readable is even more difficult. Nadieh shared her journey from astronomer to data pro and some of her missteps along the way. I’ve heard a lot about R, but Nadieh’s work with D3 makes me see this as the future.
Nathan Curtis on “And You Thought Designing Buttons Was Easy”
Buttons seemed like the lead here, but the chat was more about design systems and how something that seems simple, like buttons, is in fact not simple at all. Not every element of your site needs to be present in a design system: just the shared pieces that need to be consistent. The big four of any design system are: typography, color, iconography and space. In Nathan’s experience modern teams are centralizing system design to best leverage the power of these systems, but if they aren’t supported from the executive level getting buy in across an organization is complex and often requires a lot of political work. If you favor ‘community over control’ a design system can get support and input from a wide group of users.
Marcy Sutton on “The Links vs Buttons Showdown”
This was interesting, but to be super honest, a lot of this material wasn’t something I geek out over. The main takeaway for me was something that calls back to my architecture education, “material honesty. A link should act like a link and a button should act like a button. Accessibility, screen readers and other considerations reinforce the need for an honest approach.
Christian Holst on “Conversion Rate Optimization Techniques in eCommerce”
I’ve been doing a fair amount of work in checkout flows so this talk was directly in my wheelhouse. There are over 130 elements that Christian looks at when measuring a checkout flow–he dug into 5 of these. Checkout length is not as important than how many fields are present in a checkout. The ideal number of fields: 7. Forms should be a simple and direct as possible, remove extra fields or suppress them behind links. Privacy is still important to users. If you must have sensitive data (like a phone number) give the user a clear reason why. Review or summary screens are often mistaken for a receipt by users–they just leave, thinking their order is complete. Error messages that are unclear drive users crazy. In one project, they created 100 error messages for a single form field. He explained that on the back end, they know exactly why a form may not validate, so why not share that with the user. He explained that in some checkouts they have been able to generate more than 30% increase in conversion rates with these 130+ check points.
Jason Grigsby on “Why You Should Build A Progressive Web App Now”
Native web apps vs. progressive web app: do we need one, why? Jason broke down the old debate and explained that this comparison is not apples to apples and explained the benefits of progressive web apps. Not every user is going to download, or even needs, your native web app. This creates a lot of new (maybe, old) questions: what is an app? what do users expect in a mobile app? He’s seen huge success in India and other markets where bandwidth is more of an issue. Best comment during Q&A: “We’ve remade the web in our own image, which, in America, is sadly, obese.”
Day 2
Mystery Speaker: Sara Soueidan on “And So The Mystery Begins…” (a look at how the new Smashing Magazine design came to be)
This talk was a detailed dive into the process of building the new Smashing Magazine.com. Sara was the front-end developer on the team and work collaboratively with Dan Mall and others to bring this to life. The layout, while appearing very simple, was very complex in terms of layout and her honest description of the pains gave everyone a great look behind the scenes. She touched on SVG, accessibility, typography and much more.
Erika Hall on “Beyond Measure”
Data lies not because humans created the data, but more often it how our pattern-matching brains interpret that data. Ericka used many examples to shine light on qualitative vs. quantitative data and how humans analyze, digest and create stories from data.
“We are imperfect humans designing things for other imperfect humans.”
Human beings have many cognitive biases that skew our views of data. People often look for data that matches their preconceived ideas. She calls ‘customer satisfaction’ metrics a joke, “Never ask people what they like,” you need to understand how they actually behave.
Tin Kadoic on “Taking Responsive a Step Further”
From the design sprint to finished product in 18 months: a look at the process of building the new Rosetta Stone for mobile.
- Design is not just UI or UX, it’s the entire thought process that shapes an idea and includes every touch point.
- Design sprint goal for Day 1: Agree on success metrics
- Look outside of your world/competition for inspiration: Tin mentioned the on-boarding for a game called Two Dots
“Designers that care about the business results are the ones that will be the most successful” John Maeda
Jessica Svendsen on “Designing For Display”
Jessica Svendsen is the graphic designer’s graphic designer. There is a lot of generic design going around, how do you find the differences, or in Jessica’s word, the “imperfections” that make a design interesting.
She claims to be a generalist, which I find very interesting. The current job market is hyper-specialized and I’ve found that generalists have a harder time finding good work. I applaud the thought, but it’s hard in real life.
She showed her process and work for the Charlie Rose show, the Pentagram Papers, and more. Her work is visually challenging and has a level of polish that designers drool over.
“When you make something no one hates, no one loves it.”
Sarah Drasner on “Storytelling in the Age of JavaScript”
Stories engage the human brain in a natural way. In web metrics, we are hyper focused on a result or KPI–how do we make getting there worth while? Google projects are encouraged to have one goal. I can’t tell you how many projects I’ve worked on where the goals list is ten items long. Users need clarity: why are they being guided in a certain way? A lack of clarity creates anxiety.
Loaders are on such touch point for users. A user will wait much longer if a loading element has personality or humor, but animation and humor require precise timing. Don’t just use Google’s material design because then you will take on that personality and not your own.
“The best way to make your site compelling is by actually making it compelling.”
Rachel Andrew on “Laying Out The Future With Grid And Flexbox”
Flexbox was only mentioned here in comparison and this was really a deep dive on CSS Grid. With that said, Rachel gave a deep and compelling look at this recent addition (to most browsers) and how we can start using these tools.
Flexbox does a column or a row: CSS Grid does both at once.
There was also a strong callout to make our voices heard with the browsers makers. As designers if we don’t speak up and tell them what we need then they will not adopt or build those tools.
Tim Kadlec on “Unseen”
This was one of the best explanations about why web accessibility matters and what we can do about it. This isn’t a subject that designers love: but Tim gave some really great insights that helped make this real for everyone. One example: Target was sued for $6 million dollars by blind users. They were not using header tags, alt tags and a few other standard elements.
But, the bigger concept that he hit on was that all users have some level of disability at some point. If you use a laptop in the sunlight, you will have issues if the site doesn’t have proper contrast. If you are in a noisy bar, you won’t be able to hear. If you are holding a baby you only have one arm to use your computer. There are levels and we all pass through them from time to time.
He insists that you don’t need to be an expert to tackle these issues. They are moving too fast. If you try and do the right things for all users the entire user base will benefit. There is no accessibility fix that creates a negative experience for other users.
Summary
That’s a lot of information, I know. It was a packed two days and it will take a little while to process all of the information and even longer to implement some of these ideas. I would definitely attend Smashing Conference again. They do a really great job and the speakers are amazing. The event isn’t stuffy and everyone, including the speakers, are approachable and friendly.
I also should mention that the collaborative Google notes were a huge help in jogging my memory on certain details and without those notes this summary would not be what it is. Thanks to those who contributed to that awesome effort.