July 21, 2020 Smashing Newsletter: Issue #259

Editorial

Last week, we published our SmashingConf fully online schedule for 2020. We have had to accept that — with the best will in the world — in-person events will be almost impossible this year. We’re going to focus our efforts on making really special online editions of those conferences, that will bring us all together despite having to be physically apart.

Covid-19 means that we are all having to make decisions, despite not having good data about risk. We each have different levels of comfort with risk. Some folks have underlying conditions that give them additional reasons to worry; other folks are just scared and that’s OK. The unknown is scary, and we’ve been sitting with a big Unknown in terms of the virus and the impact on our lives for months now.

I read a couple of things this week, which I thought were really helpful in terms of decision-making around safety when interacting with other people. The first was a Facebook post from Paige Campbell Johns:

“I want to propose three general ground rules for interacting with people right now. The rules are: (1) When you make plans, make them very specific, and avoid changing them at the last minute. (2) Defer to the most cautious person in your presence. (3) Do not take it personally if someone is more cautious than you.”

You can read the full post where she elaborates in more detail, but I particularly loved the sentiment of defer to the most cautious person in your presence. That’s a simple kindness to help someone not feel bad because they are more worried than you are — for whatever reason.

The second was a tweet from Ultrarunner and 4x Obstacle Race Champion, Amelia Boone. She talks about why she puts a mask on when running past people even though she has done research and doesn’t think that outdoor transmission of the virus is all that likely:

“...if I can ease just one person’s mind or anxiety out on the trails by covering up my face, I will. Because I know how crippling that fear can be, and I wouldn’t wish that on anyone.”

We can consider both of these things in terms of our interactions with friends and family or strangers on the street. We can also consider them in the light of planning events, or work meetings and social outings as lockdown eases. In a work situation, there is more at stake. If an in-person meeting is planned, and one colleague is not ready to be in a room with a lot of people yet, can we accept that and still include them? How can we defer to the most cautious person at work, and help that person to feel safe even if we are comfortable with the risk?

I hope I’ll see you online at one of our events, and in-person just as soon as it is possible. In the meantime, stay safe and take care of the folks around you as we all try to navigate the rest of this exhausting 2020.

— Rachel Andrew (@rachelandrew)

Table of Contents

1. The State Of Things In 2020
2. Smashing Online Workshops 2020
3. The “Back” Button UX
4. What’s The Right Hosting Provider For You?
5. Diving Into HTML And CSS Vocabs
6. SVG Patterns For Data Visualization
7. Machine Learning And Design Resources
8. A Project About Type Specimens
9. Upcoming In Smashing Membership
10. Our Next Smashing Workshops

1. The State Of Things In 2020

With so much happening on the web every day, it’s difficult to keep track, but it’s even more difficult to pause for a moment, and a take a detailed look at where we actually are at the moment. Luckily, there are plenty of surveys and reports gathering some specific developments in a single place. State of CSS and State of JS highlight common trends in CSS and JavaScript. There are also studies on Design Systems in 2019, Front-End Tooling and Open Source Security.

It’s good to know where you stand not only in terms of skills, but also in terms of salaries: that’s where Levels.FYI Salaries helps, as well as UX Designer Salaries and Design Census 2019. Plus, make sure to review State of Remote Work 2020, highlighting trends of how to make remote work more efficient. Word of caution: some of them might be biased due to the demographics that they are targeting, so please take the insights with a grain of doubt. (vf)

2. Smashing Online Workshops 2020

As we all work remotely these days, oftentimes we experience weird “jumps” in productivity. Nobody is alone in this: one day we’d feel extremely productive, and another day we just can’t get anything done. It’s not different in our offices, too, but working alone just drains on our motivation and creativity.

We’ve launched our online workshops on front-end & UX to help all of us boost our skills online. The result, however, was much more than that. As our workshops span over 2–3 weeks, attendees find time to learn and do homework and make connections that wouldn’t be easy to build otherwise.

It’s wonderful to see small communities emerging within those workshops. Attendees sharing what they’ve learned, laughing, chatting, coding, designing together — waking up in the middle of the night to join and making friends in remote parts of the world. All these things are incredibly rewarding to see.

We’ve just announced new workshops recently — both on front-end development and design, such as designing for emotion, web security, front-end testing and many others. So please take a look, and perhaps join us as well. To learn, to grow, but also to get that kick of energy and motivation to create and design and build. We are all in this together, so let’s make the best out of it. (vf)

3. The “Back” Button UX

We often spend quite a bit of time to get a feature just right, or enhance the design with bold interactive features. We measure the impact of our decisions in A/B tests, study conversion and click-through-rates, analyze traffic and search for common funnel issues. But the data conveys just a part of the story. More often than not, customers have very different issues, often unrelated with our features or design.

The quality of an experience shows in situations when something goes unexpectedly. What happens when the customer accidentally reloads the page in the middle of a checkout, e.g. when scrolling up and down on a mobile phone? Does the payment form get cleared out as a user notices a name’s typo on a review page? What happens when a customer hits the “Back” button in a multi-step-process within our single-page-application?

In fact, the unexpected “Back” button behavior often has severe usability issues, and some of them are highlighted in Baymard Institute’s article Design Patterns That Violate “Back” Button Expectations. It’s worth testing the “Back” button for overlays, lightboxes, anchor links and content jumps, infinite scroll and “load more” behavior, filtering and sorting, accordions, checkout and inline editing.

We can use the HTML5 History API, or specifically history.pushState() to invoke a URL change without a page reload. The article goes into detail highlighting common issues and solutions to get things just right. Worth reading and bookmarking, and coming back to every now and again. (vf)

4. What’s The Right Hosting Provider For You?

Whether we want to set up a new online shop, or find a decent host for our service, we often have to find our way through busy landing pages, feature comparison tables, customer reviews and pricing plans. Not to mention all the shiny asterisks and legalese on customer support, up-time-guarantees, cancellation conditions and terms of service. However, it’s still been difficult to choose the best host by the quality of their service, and compare them against each other (e.g. looking into how fast they actually are in comparison).

Until Is My Host Fast Yet? came along. The little project gathers data on the real-world server response (Time to First Byte) latencies, as experienced by real-world users navigating the web. It’s heavily focused on Chrome, utilizing Chrome User Experience Report, but still can provide a good estimate of what you should be expecting — both on desktop and on mobile. If you need a few more detail about all (and further) hosts, Hosting Tribunal has got you covered as well, with detailed reviews and comparisons of each host. (vf)

5. Diving Into HTML And CSS Vocabs

If you often find yourself looking up the correct word to use for that one particular thing in your CSS and HTML code, we’re sure you’ll bookmark the following resources right away. Thanks to Ville V. Vanninen, you can now learn the difference between doctypes, attribute names, tags, media features — all in an interactive way.

You’ll find a nice interactive list of CSS terms as well as another useful one dedicated to HTML vocabulary where you can click on any of the terms shown on the right side to highlight the relevant parts in the code sample presented on the page. The lists are also available in different languages. (il)

6. SVG Patterns For Data Visualization

Whenever we are dealing with maps or data visualization, we need to find a way to highlight differences about regions or areas shown within it. Doing so manually require a remarkable amount of effort, and Ricardo Scalco’s Textures.js helps getting the work done faster.

The library is built on top of d3.js, and allows you to create any kind of patterns very quickly. It supports lines, colors and textures, circles, paths, and you can create custom patterns as well. A lovely little library to use when you need to add some distinct visual highlighting for some areas in your data visualization. (vf)

7. Machine Learning And Design Resources

Are you familiar with the basics of Machine Learning and how to apply in to the products you are building right now, or how to design meaningful experiences in an era with products and services driven by AI? Well, with so much going on, it’s good to have some useful resources which can help you catch up with things and stay up to date.

ML + Design is just the place. Curated by Vlad Kyshkan, it is a collection of resources for intersection of design, user experience, Machine Learning (ML) and Artificial Intelligence (AI) including articles, books, guidelines and tools to experiment. If you’d like to share resources or examples that you find useful and suitable to add to the list, you are welcome to make suggestions. (il)

8. A Project About Type Specimens

What are type specimens? How are they used? Who makes them? Knowing how complex the decision-making process around typography can sometimes be for designers, Mark Boulton decided to launch a project in order to help provide guidance on how to best present a typeface for evaluation — in both digital and print. Meet Type Specimens.

This curated list has become a valued community resource and is updated on a daily basis. You can browse through various specimens and even sign up to the weekly newsletter. Also, if you’re wondering what sort of tasks you need to keep in mind when choosing a font, Mark has a list of top tasks that anyone is welcome to use and adjust accordingly. (il)

9. Upcoming In Smashing Membership

Our new practical guide Click! How to Encourage Clicks Without Shady Tricks is finally here! This book is bound to help you build trust, increase conversion, and boost business KPIs effectively — without alienating people along the way. The eBook (PDF, ePUB, Kindle) is, and always will be, available to Smashing Members for free.️

• “Enterprise Accessibility” with Jerome Hardaway— July 21 at 19:00 London time (Today!)
• “Inspired Design Decisions With Bradbury Thompson” with Andy Clarke— July 28 at 17:00 London time
• “Getting Projects Out The Door Faster And Less Painful” with Kristina Podnar— August 6 at 14:00 London time
• “End-to-end Testing With A Real Browser” with Umar Hansa— August 13 at 19:00 London time

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉

10. Our Next Smashing Workshops

In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.

We also have online workshops that are designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.

Design Workshops

• Designing for Emotion with Aarron Walter (July 28–29)
• Behavioral Design Workshop with Susan and Guthrie Weinschenk (Aug 17–31)
• Designing for a Global Audience with Yiying Lu (Aug 20 – Sep 4)
• Smart Interface Design Patterns with Vitaly Friedman (Sep 22 – Oct 6)

Front-End Workshops

• Web Application Security with Scott Helme (Aug 6–14)
• Front-End Testing with Umar Hansa (Aug 19 – Sep 3)
• Jamstack! with Jason Lengstorf (Sep 1–16)
• The CSS Layout Masterclass with Rachel Andrew (Sep 10–11)
• Vue.js: The Practical Guide with Natalia Tepluhina (Sep 17 – Oct 2)

Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.