Takeaways from Smashing Conference Barcelona

30 October 2016

I finally managed to find some time and attend another conference within my field of work. I chose to go to Barcelona and attend the Smashingconf this week.

I think the conference struck a perfect balance of design and technology. It was engaging and I left it with a feeling of inspiration and motivation. I also got to meet some new friends from all corners of the world. I took notes during the talks to kind of summarize my experience.

Day 1, October 25th 2016

To Hell for Type – Marcin Wichary

There must be compromises, not loading a web font can be worth it for the performance.

Designing Meaningful Animation - Val Head

Use the 12 principles of animation.
CSS default transition timing keywords are very limiting, use cubic-bezier instead.
Similar objects should be animated in similar ways.
Create a sense of choreography.
Animation has the ability to create an impression of reduced load times.

Designing for Display - Jessica Svendsen

There are two types of designers in New York. Those who design systems and those who design content.
“Clarifying is our business, obscuring is our pleasure.”
“I’m always trying to turn things upside down to see if they look any better.”
The best jobs require the least amount of recruitment.
Only work with designers who have a point of view about design. And are willing to fight for it.
Be a generalist for as long as possible.
Avoid briefs or people who asks you to “make something beautiful.”
Someone will always be technically better than you. It’s your ideas that matter.
Just because you can doesn’t mean you should.
Make sure what you’re making is meaningful.

How to Find What Design Factors Influence Conversion Rates - Tammy Everts

Performance changes peoples perception of your site.
The exact same website; a slower experience leads to huge negative impact.
Poor performance affects how people perceive your brand.
Conversion is just one part of the relationship with your customers.
It’s hard to draw a straight line from performance to your business.
Which metrics matter?
The web is the web. People don’t compartmentalize what kind of experience they get.
Most important metrics for Amazon is start render and repeat visits.
Direct traffic is more patient. Traffic through search is slightly less patient. Traffic coming from Facebook is highly likely to drop off if website is slow. Performance is perception.
Pages with more scripts are slightly less likely to convert.
The number of DOM elements matter a lot.
Sessions that convert has fewer images than those who don’t.
A two second improvement in median load time almost doubled conversion.
Every site and app is different.
Performance issues are unpredictable.
Even small design changes can make a big difference.

The Tail and its Dog - Stephen Hay

Start with storytelling before making the components it consists of.
Ask yourself, “What if?”
Try to use oblique strategies.
Ask yourself, “What problem does this solve?”
“How can we tell this story differently?”
Clients don’t understand components. Clients understand screens.
Zoom out to get the bigger picture.
We get too involved in the little bits.
Don’t forget the screen.
Let’s only talk about the problem. Sameness will disappear if we explore the problems.

How Testers Can Be a Liability for Your Team - Ulrika Malmgren

Testing is a bit like being a detective.
Everyone relaxes when a tester is on the team.
You don’t test quality in – you need to build it in.
Work on your communication.
How well you can trust your team members affect performance.
See testers as ambassadors for quality.

A Smashing Case Study - Sara Soueidan

Not only should the image be a good candidate for SVG, but SVG should also be a good candidate for the image.
Use object for SVG when it needs to have real text as fallback.
Referencing an SVG within inlined SVG for accessibility reasons since SVG code could bloat the markup.
When you’re using a div, you lose the relationship between elements in the document.
Markup is everything.
Think about it from a no-CSS perspective.
The web is accessible by default.
Give SVG’s a textual context by providing a title.
Don’t treat accessibility as an afterthought.
Test accessibility on a component level.

Resilience - Jeremy Keith

HTTP, URLs and HTML was the underlying principles for the WWW-project.
The fault tolerance of HTML is what allows it to grow.
JavaScript is the most fragile part of the stack.
Give yourself technical credit by creating a robust foundation and enhance from there.

Day 2, October 26th 2016

Predicting the Future - John Allsop

Be careful of what must change for your predictions to come true.
Native apps are a remnant of the Jurassic period of computer history, a local maximum that is holding us back.

Selling Design Systems - Laura Elizabeth

Style guides can be time consuming monsters so you’ll really want to make sure it’s going to be worth the investment.
Smaller teams doesn’t have the same need for a design system.
Design systems are only valuable if kept up to date.
If it’s working for you, don’t change your ways just because everyone else is doing it.
It’s pointless having a pattern library if nobody uses it.

Responsive Web Apps with Container Queries - Jonathan Snook

Designers see a feature through all platforms.
Goal #1 – Evolve the design. Goal #2 – Support mulTiple devices.
Can anybody within the team change features?
Each page can be art directed individually.
Web applications have components in mulTiple contexts needing to respond differently.
With container queries, you only have to know the interplay within a single object.
Allow anyone to make product-wide design changes quickly and easily.
Make the right things easy and the wrong things hard.

Real Art Direction on the Web - Jen Simmons

Art direction gives you a sense of what the experience will be.
Don’t make a framework out of CSS Grid.
CSS Grid is a framework - built directly into the browser.
CSS – That’s how you make your layout fast!
It works and it doesn’t work at the same time. It’s quantum CSS.

Designing Choice - Adrian Zumbrunnen

The way we ask questions changes the answers we get.
The value of an option is defined by its surroundings.
Friction can improve design and make people more deliberate.

Conversion Rate Optimization Techniques in eCommerce - Christian Holst

68.81% cart abandonment rate.
Top reason is that extra costs are too high.
Average sites have 39 basic checkout problems.
It’s not the number of steps in a checkout flow which has negative impact.
Most important is what users have to do and how they’re asked to do them.
Form fields matter more than steps.
46% of checkout forms require a phone number.
11.6% misinterpret a review step for an order receipt.
Can lead to permanent brand damage.
Have a second “Place Order” button at the top of the page.
18.75% of all user accounts abandoned.

The Website Obesity Crisis - Maciej Ceglowski

“Kudos to Apple for the two middle fingers they always give to the web.”
Website obesity is a universal problem for online journalism.