Dear Friend,

Many of us have been in the industry for a while now, and we’ve heard about human psychology, and compelling microcopy and scarcity and social proof. So it’s not uncommon to land on a page that does a fantastic job at pushing just the right buttons to drive sales and sign-ups. But just as landing pages are often very good at conversion, the products that these landing pages promote often perform very poorly at retention.

At the heart of it usually lie performance and accessibility issues, difficult onboarding, a flawed pricing model, or just the lack of a clear value proposition. We roll up our sleeves and tackle these issues with user interviews, design iterations and A/B tests — often successfully, sometimes not so much. We talk about the right features and the right placement of these features. However, one consideration that’s often missed in this process is the right timing to prompt a particular action.

Common user frustrations, as discovered in our user interviews this year — mostly related to user input. Plain text view.

Asking for an email on an eCommerce site is a good example. We could easily generate leads with a slightly annoying newsletter pop-up for first-time visitors. We would surely gather some sign-ups, and we might even decide to show the pop-up for people coming from search engines as well.

But what kind of email addresses would we get there? How many of them will probably be barely used, abandoned, and filled with irrelevant notifications and marketing campaigns? As business owners we don’t want just email addresses — we want good email addresses, the ones that customers check frequently, and that they open regularly; with a mailing list that has high opening rates and low bounce rates.

In the end, it’s all about finding the right time and the right way to ask the right questions, without too much hassle. Plain text view.

To achieve that, perhaps we need to give customers a chance to build trust and interest first, e.g. by looking at a few product pages, or tutorials, or a few videos on the site. We need to ask for an email only when we know that we are likely to get a good one in response. So rather than asking where is the right place to show a newsletter pop-up, wouldn’t it be more useful to ask when is the right time to ask for an email?

When will your visitors know just enough to respond positively to whatever action you encourage them to take? Perhaps next to the price on a product page, so customers could “qualify” for free shipping or a little discount? Perhaps when the email matters most — just when they are about to pay, or when they’ve just paid?

Perhaps the right question isn’t where but when. Be it password, location permissions, push notifications, the data needed to get started, or moving users into the funnel. Timing matters.

Happy experimenting!
Vitaly (@smashingmag)

---

Table of Contents

1.	Enhancing User Experience With CSS Animations
2.	Getting React Server-Side Rendering Right
3.	Tips And Tricks For Debugging JavaScript
4.	New Front-End & UX Workshops
5.	A Little Game To Improve Your Pen Tool Skills
6.	Free CSS And SVG Background Patterns
7.	New On Smashing Job Board
8.	Our Current Most Popular Articles

---

1. Enhancing User Experience With CSS Animations

Animations have become a popular way to improve the user experience in the last years. But how do we make sure that our CSS animations and transitions will be meaningful to users and not just decorative eye candy? Stéphanie Walter gave a talk about enhancing UX with CSS animations at the virtual Shift Remote conference back in August. In case you missed it, she summarized everything you need to know in a blog post accompanying the talk.

Starting with a reminder of CSS syntax to build transitions and animations, Stéphanie explores why certain animations work better than others. She shares tips for finding the correct timing and duration to make UI animations feel right and explains why and how animations do contribute to improving the user experience. And since great powers bring along great responsibility, she also takes a closer look at how you can make sure your animations don’t trigger motion sickness. A great reference guide. (cm)

---

2. Getting React Server-Side Rendering Right

When Josh Comeau pushed updates to his website, he noticed a strange issue. Everything looked perfect in development, but in production, the bottom of his blog was all messed up, with content in places where it wasn’t intended to be. Josh discovered that his React component was rendering in the wrong spot. The reason: a fundamental misunderstanding about how React works in a server-side rendering context.

To clear the misunderstanding up for good, Josh summarized everything you need to know about it in his blog post “The Perils of Rehydration”. An eye-opening explanation of how server-side rendering works, why the original logic can be problematic, and how a different approach can accomplish the same goal. (cm)

---

From our sponsor

New Design Engineering Handbook By InVision

Explore the new hybrid practice of design engineering in InVision’s latest release, written by industry leaders from Indeed, Mailchimp, The New York Times, and Minted. You will learn how design engineering, an essential discipline to creating great products, brings together form and function while accelerating innovation, and much more!

---

3. Tips And Tricks For Debugging JavaScript

Bugs happen, and when they happen, it’s good to know how to tackle them in a smart way. If you need to debug JavaScript code, Sean Higgings wrote a handy article to help you find the right debugging approach and master the challenge while adhering to best practices.

Sometimes you might want to log events to the console when debugging JavaScript events. For those occasions, Matthias Kupperschmidt shares a nifty trick that prevents sending and tracking browser events multiple times — perfect for when you want to see how many submit events a form sends out, for example. (cm)

---

4. New Front-End & UX Workshops

We’ve been running online workshops since April this year, and it's always an incredible experience with wonderful attendees from all over the world coming together to learn something together. That’s Smashing Workshops: live 2.5h-sessions with practical examples, video recordings and a friendly Q&A.

Live and interactive: 2.5h-sessions, spanning across days or weeks.

We’ve just announced our new front-end & UX workshops on front-end in 2021, forms, SVG animation, CSS and HTML email. There are still some early-birds left, with a lil' friendly discount, so take a look and perhaps join us as well. (vf)

---

5. A Little Game To Improve Your Pen Tool Skills

How well do you master the Pen tool? If it causes you headaches when working with Photoshop, Illustrator, XD, or other tools, the Bézier Game helps you take your skills to the next level, in a quick and fun way.

After completing the quite self-explanatory tutorial stage, the challenge begins: In the first level, an unassuming (but quite tricky) little car shape is waiting for you to redraw it using the least amount of nodes possible. Each node and each curve that snaps into place reveals a little piece of the rainbow-colored path and brings you a step closer towards becoming a Pen tool master. Don’t despair if you can’t make it on the first try. As with everything, practice makes perfect. (cm)

---

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Earn your master’s degree online.

---

6. Free CSS And SVG Background Patterns

CSS and SVG make it easy to create background patterns that are beautiful and performant. If you need a bit of background inspiration or are looking for a quick copy-paste solution to add the code for a background pattern to your project, we came across two handy resources recently.

Jim Raptis’ CSS Background Patterns features copy-paste CSS code for free geometric backgrounds. To tailor the patterns to your liking, you can select back and front colors, opacity, and spacing. Decent Patterns by Chris McGrane works similarly but with SVG. The 80 patterns in the collection are made up of single unicode characters. A quick and easy way to shape the personality of a project. (cm)

---

6. New On Smashing Job Board

• Senior Creative Software Engineer (Unreal Engine)
  at Leviathan (Chicago)
• Lead UX Designer
  at Polyient Games (Phoenix)
• Senior Web Developer
  at P3 (United States)

---

7. Our Current Most Popular Articles

• What’s New In Vue 3?
• Best Practices For E-Commerce UI Design
• Global Digital Accessibility Developments During COVID-19

---

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf), Rachel Andrew (ra) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Follow us on Twitter • Join us on Facebook

---