SmashingConf Freiburg 2019
Day 1, September 9th, mmmm

NTT mm

L2019

Hello friends! :) Howdy!

Let’s take notes together. 🤝

Please be cool and friendly.

Notes from Day 2: https://smashed.by/fantasy

Where are you from? (as emoji)

🇫🇮🎑 🇪🇸🇩🇪🇮🇸🇮🇹🇨🇭🇱🇻🇧🇪🇺🇦🇷🇺🇸🇮🇵🇱

Who did you want to be when growing up? (as emoji)

👨‍🚀‍‍‍‍‍‍‍‍‍ 🤠 💃🧚‍♀️

What did you have for breakfast? (as emoji)

🥓 🍳🍞

09:50 — Joe Leech on Designing Powerful Experiences with Psychology

10:55 — Anna Migas on Effortless Performance Debugging

12:05 — Uri Shaked and Benjamin Gruenbaum on The Anatomy of a Click

14:30 — Val Head on Designing With Motion

15:40 — Rèmi Parmentier on Think Like An Email Geek

16:50 — Benjamin Hersh on Every Product Has A Voice

09:50 — Joe Leech on Designing Powerful User Experiences With Psychology

Joe is the author of the book Psychology of Designers. A recovering neuroscientist, then a spell as an elementary school teacher, Joe started his UX career 14 years ago. He has worked with organisations like MoMA NYC, Raspberry Pi, Disney, eBay and Marriott.

Joe is also Series Editor of Aspects of UX, a series of books on UX from SitePoint.com

——–––––

What do an overnight 40% drop in road accidents, a night in on the couch watching TV and a good night’s sleep have to do with digital product design?

Humans only have limited mental capacity and no-one is ever operating at 100%. We are all influenced by the world around us and by how our minds work. As designers we need to be able to understand this and design for it.

To help you understand how psychology can transform your designs, we’ll look at:

The micro: Psychology to optimize Interaction Design. How psychology can help design the perfect search UI and how to apply to psychology to design bullet-proof UIs.
The macro: Psychology to transform the User Experience.How to use psychology to create innovative user experiences and transform digital product design

——–––––

Questions:

Icons: floppy disk as vending machine for a generation, should icons retire or should they stay because they become universally understood?
You’ve been doing a lot of eCommerce work over all these years. What are some of the most underrated but fundamental problems you see happening on product pages or checkouts?
Asia and Europe in terms of UX: obviously they are very different, but what exactly is the difference?
When we start designing, we often land in the A/B testing trap; when we keep iterating and compare, and compare until we have the best measured result. But it's not necessarily a good UX: because we reach local maxima. How do we balance the two?
When it comes to user experience, what is the most crucial thing that you always look out for in usability tests — any clever tips and tricks from a seasoned UX professional?
Good understanding of psychology is the core of good UX, so what common misconceptions do we discover in user research? Often what's perfectly clear to us isn't clear at all to our readers. Example: Hamburger icon.
Carousels, yay/nay? Hamburger icon, yay/nay? Automatically playing video? Parallax? Single credit card input field? Floating label pattern? Answer: no carousels. Never put critical functions in the hamburger menu, keep them highlighted
What is the most useful usability or user experience finding or technique you have learned recently?
How do we know when breaking an existing mental model in favor of something new is the "best" thing for the users? In other words, how do we balance the initial backlash with the long term benefits? Often, senior managers and stakeholders
are VERY adverse to ANY negative feedback.
[Vitaly’s note] Speakers are at the Fireside Chat.
How do you build your user's mental model? Answer: research and on the ground, ethnographic field research
Travel booking website. How to handle good UX and budget? What I mean is: “show me beaches 3 hours awa”. But programmers will say, we have only cities in our services. Adding beaches will be too expensive.
Designing UX with a mental model in mind is only possible if you make lots of assumptions about the users which might make sense for a majority of users. It seems to make things harder for the rest because they don’t fit the pattern (e.g. they know exactly what they search).
Isn’t the hamburger menu *in the process* of becoming an accepted design axiom? The “internet generation” understands it and they will only increase in number over time. Stopping it might be unnecessary - as it will become understood by more and more. - answer - never put critical things in the hamburger menu.

Notes & key takeaways:

Doesn’t like clowns - does like saunas
People like to do two things at the same time
Multitasking is bad for mental health
People are bad at knowing what they really want
Hick’s law: time to respond is conditioned by number of choices (more choices = more time)
We humans are bad with declarative knowledge (points of compass..)
We humans are good at procedural knowledge (sequences)
People hate change because it breaks their procedural knowledge
Go find your user’s mental model
Models: non considered purchases vs. considered purchases

Links & Slides:

Slides: mrjoe.uk/cssday/
Recommended read: https://en.wikipedia.org/wiki/The_Design_of_Everyday_Things
https://strategyn.com/jobs-to-be-done/jobs-to-be-done-theory/

10:55 — Anna Migas on Effortless Performance Debugging

Anna works as a Software Engineer at the web security company, Castle. She is always trying to find ways to make people fall in love with coding and has a long history of organizing coding workshops for WebMuses and Rails Girls.

In her spare time she is into skateboarding, travelling and reading books.

——–––––

The website is already live. You are really proud of how it turned out, but then you notice that something is off… After some time you realize that the problem might lie in performance: things take too long to load, there are moments when you see awkward content jumps and at times scrolling feels painful. Sounds familiar? This talk is for you.

During the session we will talk about the causes of painful performance and look into simple and actionable steps how to make a website more performant with a little effort. Most of the examples will be based on a real-life debugging experience. We will dive into the undiscovered areas of Developer Tools and into the basic performance auditing. I will help you understand how browser rendering works and why it can be one of the causes of flawed interaction performance. To leave you with some ideas about where to start your debugging, I will also provide you with examples of UI patterns that are bound to slow down your experience, if implemented incorrectly.

Questions:

Performance tooling: Lighthouse, WebPageTest, Speedcurve
What are “frames” in the context of the profile timeline? ✓ Noted! (Answer - rasterised form of the DOM content after a change - turned into pixels for display on display device)
How do you tackle “flash of unstyled content/text (FOUC/FOUT)” like in your example (no text, images jumping around)? ✓ Noted!
What is the difference between Simulated and Applied Slow 4G slowdown (Lighthouse Audits)? ✓ Noted!
How do you keep updated on performance debugging tools? ✓ Noted!
What are common performance problems you find quite often on the web? ✓ Noted!
What's your strategy for setting up a decent performance baseline of a new project? How does it differ if it's a website or a native/hybrid app?
How do you maintain a performance strategy long term?
How do you visualize the impact of performance?
Any obscure performance tricks, tools and techniques that you've found extremely valuable in your projects?
Are there times when performance is at odd with other goals of a site?
What perf stuff is outside of developer control?
What are the worst perf bottlenecks/offenders?
Low hanging fruit stuff
CAN YOU PLEASE EXPLAIN: what is layer?? <= good question!

The perf tab is so intimidating!

Blocking assets, defer, comparing audit
Red=bad

Text anchoring for loading images
Lazy loading! Download script at all later?
Webassembly, case study on perf optimization, 20x improvement. When to use/when not to use?
Lazy loading now available in Chrome: what's next?
Browsers expose more and more internals to tweak things. Where will it lead us to?
Is performance optimization even possible without webpack these days?
What's your strategy for choosing the right framework for the job?
Should every website include a service worker to cache assets these days?
What are some of the common performance bottlenecks you see appearing over and over, and how would you deal with them?
What's your tooling in general and how do you go around debugging? Any trade secrets you can share?
Experimental solutions: Rawact / KV storage
Guess.js: are we running out of ideas of what we can do to improve performance?
We can load css files in the document body now? I feel old. ✓ Noted!

Notes & key takeaways:

You can throttle CPU speed and data transfer rate in Chrome dev tools
Lighthouse Audits are available to Puppeteer btw.
If you don’t need a script `defer` is better than `async`
`background-image` files will still be downloaded even if the `display` of the element is set to `none`.
Add font-display swap to web fonts
Use padding-bottom trick for unloaded image container to block space so content does not get pushed down before image is loaded
There is native lazy-loading support in chrome
You can show layers in Chrome Dev Tools

Links & Slides:

Critical css path generator: https://jonassebastianohlsson.com/criticalpathcssgenerator/
Lazy load library: https://github.com/verlok/lazyload
Native lazy-load: https://web.dev/native-lazy-loading
https://jakearchibald.github.io/jank-invaders/
Website with lots of layers: https://alexfox.dev/laxxx/
Which css property triggers rendering/paint/layout: https://csstriggers.com/

12:05 — Uri Shaked and Benjamin Greunbaum on The Anatomy of a Click

Uri Shaked is a Google Developer Expert for Web Technologies. He loves combining his passion for the web with his love for hardware electronics and robotics in challenging and amusing IoT projects, which he shares with the world in his blog, as well as travelling around the world and speaking in conferences and meetups. Among his interests are reverse engineering, hardware hacking, neuroscience, playing music and Salsa dancing.

——–––––

Benjamin Greunbaum. Developer @ Testim.io. Speaker. Open source and community lover, Node.js core collaborator, core team at Bluebird, Sinon, MobX and some other open source libraries. Also a bit of a programming language nerd.

——–––––

Have you ever wondered how many things actually happen when you click a button on a webpage? In just a split of a second, an amazing amount of things are happening: an electric circuit is closed, a USB packet is sent, an interrupt handler fires in the OS, which then dispatches the event to the browser's event loop, which eventually executes some JavaScript code. And this is just a small part of the whole story.

Have you ever looked into the source code of Chromium? Linux? What about the internals of a TCP/IP packet? Sit back, relax, and enjoy the show of two curious web developers who are enchanted by the complex world that awaits behind the scenes of the front end!

Questions:

Understanding everything that’s happening behind the scenes might seem like a daunting exercise. How much of it do you think a designer or developer needs to know, e.g. what happens when you type a key on a keyboard or when you hit the URL in the browser?
The technology is evolving all the time, and so is HTTP/2 and QUIC (HTTP/3). What fundamentals aren’t changing and what is changing? How to keep track of what’s going on?
What skills would you recommend for developers to acquire to stay relevant within the next couple of years?
What are some of the things you wish you’d known earlier in your career? Or “Gotcha!”-moments which changed the way you build and code every day? - Answer: learn how your tools work. Look at the source code.
How does a click differ from a touch?

Notes & key takeaways:

Links & Slides:

14:30 — Val Head on Designing With Motion

Val Head is a web animation expert, author, and Design Advocate at Adobe. She is the author of Designing Interface Animation, published by Rosenfeld Media, teaches CSS Animation on lynda.com, and curates the weekly UI Animation Newsletter.

——–––––

In this session Val will bring an interface to life with web animation. She considers both UX and branding, to take it to that next level of polished design. Utilizing CSS animation, SVG and JavaScript to pull off our animated vision, she’ll take it from design idea to execution whilst considering the accessibility implications too.

You’ll learn how to move from design to code with animations, and how to get the all important motion details like timing and easing just right.

Questions:

Any rules of thumbs that differentiate a good animation from a truly great animation?
Anime.js, which timeline do you use most of the time?
Responsive animations / master animations and UI animations
What's your process/tooling like?
What's the most complicated animation you've ever designed, and how much time did it take to produce?
What common issues do you see appearing over and over when it comes to animation on the web?
New tool by AirBnB for designing animations: Lottie — what tools would you recommend?
How do you debug an animation when you feel that something isn't quite right?
What are you missing on the web? What could be done to further improve animation? Tools/processes?
Does the library allow for ease in / ease out functions?
Have you used / do you recommend after effects + lottie?
CSS animation vs. JavaScript animation: when to use what?
Is everything better with motion?
Responsive animation: is it sometimes necessary to change the animation due to the viewport screen or any other condition?
It looks like everybody is trying to use some sort of animation to add this extra level of delight to an online experience. What are the common mistakes you see being done every now and again?
Any rules of thumbs or advice re: animation that works well most of the time? E.g. a specific kind of animation that for some reason is easier to make just right compared to others?
What are the gotchas or common problems appearing with animation — things that are really difficult to get done well/right?
“How do you do elegant, grown-up subdued without doing stuffy?”
There is a lot of mystery surrounding easing in animation. What’s the right easing, and how do you find just the right spot — is it only a matter of experience?
How do you prototype/test/debug animation / add animation to a mock-up/UI?
What about web browser compatibility. Do these animations work with current Chrome, Firefox, Safari and MS Edge?
Why would you use JS animations when there are keyframe animations in CSS?
Akuji @Akuji93 How much animation is too much animation? How to hit the sweet spot about that?
What do you mean by “Triggering”? Epilepsy? What kind of medical problems should we consider in motion design?

Notes & key takeaways:

CSS is the gateway drug of animation
Share the animation effort - design the transition for your developer, not just the start and end points.
Anticipation - an opposite movement that anticipates the effective movement - the element briefly moves away from its endpoint before moving forward
Overshoots - the element goes past its endpoint and springs back
Overlapping action almost always looks better
https://webkit.org/blog/7551/responsive-design-for-motion/
https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity/

Links & Slides:

easings.net - easing equations
cubic-bezier.com - UI to edit bezier curves
https://animejs.com

15:40 — Rémi Parmentier on Think Like An Email Geek

Rémi Parmentier is a french front-end developer working at his own small web development agency, Tilt Studio. He loves to learn, and enjoys even more to teach.

This led him on a joyful quest to understand and demistify HTML emails coding. Rémi runs workshops, gives talks and writes articles on his blog to help others code better HTML emails. Rémi also likes collecting Game Boy consoles and listening to Sufjan Stevens.

——–––––

Coding HTML emails is a beast of its own, often perceived as relying solely on outdated practices. And for a good reason, email client quirks can make even the most clever front-end developer crazy. Emails are still part of your user's journey, from commercial newsletters to transactional emails.

The first step to thinking like an email geek is to understand how email clients change our code and why this happens. From technical and security constraints to user experience enhancements, every quirk is there for a reason.

Those constraints then allow email geeks to invent new ways to use HTML and CSS. From building responsive layouts without media queries to creating interactive emails without any JavaScript—"Life finds a way" to quote my favorite mathematician.

Questions:

Should we curse Microsoft for eternity because they switched from IE as rendinger engine to freaking Word?
Which e-mail clients should we prioritize testing on? Answer: whatever is your target. For business, outlook otherwise gmail is very popular.
Can we use web fonts and SVG in our emails today?
Everybody is talking about interactive emails these days, mostly based on AMP Email — what’s that, and what’s the state of support for it?
Are there any email clients around that support full html/css3? Are there any trends to get more support from the suppliers, especially Microsoft?
Will anything change in terms of broader supper of fancy new CSS features like CSS Grid in email? How does evolution of HTML Email standards work (if at all)?
Why is email html not a W3C standard? Are there any chances to get one in the future?
What are some of the common issues that you keep running into with email all the time? What are your little techniques and workaround that usually help?
Anything we need to keep in mind when building with Gmail in mind?
Are there any tools for testing the quality of an email? Any resources/templates to use when building one?
What would you recommend to do to avoid landing in spam folder?
What are some of the things you’d recommend to stay away for sure in HTML email?
How do you support old versions of Lotus Notes, if at all?
Why do you do this to yourself?
How about Thunderbird’s “simplified HTML” (or am I the only one who uses that)?
How do you start building a responsive email? Gmail-first / mobile-first / desktop-first?
How do you handle blocking of external content and forced text view?
Is there a "Share this result by email" option on caniemail.com?

Notes & key takeaways:

If you can use plain text do it… but the result will not be very usable (no links and really bad for accessibility)
E-mail is hard
HTML Email isn’t “worse” than building webpages - it’s just a different job.
Everything is possible but nothing works everywhere
Every e-mail has approximately 15.000 potential renderings
E-mail clients change e-mails:

links on urls, phone numbers, addresses and even music names
styles (remove and prefix css styles)
animations

Outlook support for html/css is very limited
Outlook is different (custom properties, VML…)
HTML mail processors are like web browsers were in ca. 1995, just worse.

Links & Slides:

16:50 — Benjamin Hersh on Every Product Has A Voice

Ben Hersh designs to make the world a more thoughtful and creative place. He is currently a product designer at Dropbox and previously led design for a team at Medium. Ben came to design by way of visual art and cognitive science research at Stanford.

——–––––

When you read the words scattered over an app or website, you experience them as if spoken. This voice is every bit as real as color or motion on a digital screen — it’s an illusion, and it’s there for you to design. Words are often the most important design element in a product, but designers rarely handle them with the same care or conviction that we have for visual patterns. We can do better.

I will share simple guiding principles to help you design better with words. I find lessons and inspiration in neuroscience, fairy tales, and examples from across the web.

——–––––

Questions:

As a lover of words - what is your favorite book?
How do you apply your principles to information that is fundamentally complex and information-dense? Explaining how an FMRI machine works, for example.
How do you balance being too witty/smart and being clear?
Humility is rare and therefore valuable — role of ethics/privacy/respect these days?
Say thank you to someone
There are many conversations about the role of copywriting on the web, yet often it’s forgotten or dismissed in a feature-focused environment. Why is that? How do we ensure that microcopy is respected and considered in both corporate and feature development-driven settings?
Can you describe a “writer-design”-collaboration? How would you organize a workflow and how would you integrate copywriting decisions into a design workflow?
Good copy is also about consistency: how do you ensure a consistent voice and tone among a diverse team at Dropbox?
What resources — books, articles etc. — would you recommend for people interested in mastering copywriting for product interface design?
What are you most excited about these days for the web?
Language is a key to many subtle cultural differences. Is internationalization something you take into account?
We develop a complex business web application and have often team discussions about our own internal wording to express what we are doing. Do you have any tips on how to find a clear language and how to publish it to the customers, if we are ourselves unclear about the right words? -> conversations with the people you design for.

Notes & key takeaways:

Cookies are beautiful (but not to the GDPR)
Words matter
Every product has a voice:

Be clear (tell a story): tell the reader what they need to know
Be a friend (be polite, say thanks, help to accomplish stuff)
Be expressive (use typography, word choice)

Clarity is the foundation, second is “Supportive”, “Expressive” the top of the pyramid
Reading = effort
Storytelling reduces complexity

A story follows a natural rhythm

Politeness is rare on the internet. It’s appreciated by your users.
Typography changes the way how you read a message.
Voice of Platform and Voice of Writer (example of Medium) should be differentiable
Read all your copy out loud and read it to someone else and watch his face

Links & Slides:

Books: Don’t make me think (Steven Krug)
~UX Writers (Group on Facebook)

Notes from Day 2: https://smashed.by/fantasy