Smashing Magazine - #442: Sustainable Front-End and UX

Product design guidelines for sustainable UX, podcasts, books, newsletter, checklists, UX patterns and front-end optimizations. Issue #442 Feb 6, 2024 View in the browser

Smashing Newsletter

Konbanwa Smashing Friends,

When we think about digital sustainability, we usually think about image compression and network payload. However, sustainable experiences go way beyond that. It’s not just about the delivery of the content but also deleting waste, optimizing how data is stored and using sustainable design patterns.

In fact, most environmental costs occur during content production and content consumption. So, they need to be carefully designed and orchestrated. In this newsletter, we look into just that — how to design and build more sustainable digital experiences for everyone.

SmashingConf Antwerp 2024
Meet SmashingConf Antwerp (Oct 28–31, 2024), a friendly conference on design and UX, which is easily accessible by train from almost anywhere in Europe.

And as always, here’s a little reminder about a few community events, workshops and conferences we’re tirelessly working on for 2024 — with early-bird tickets and friendly bundles for teams:

Happy reading, everyone — and we hope you’ll find these resources helpful to create more sustainable products and services at your work!


1. Product Design For Sustainability

Every product has an impact on the environment. So, how can we keep this impact as small as possible and design more sustainable solutions that are better for society and the planet? In his post “Product Design for Sustainability,” Artiom Dashinsky explores practical examples of how products can shape behavior and help make the world more sustainable.

Product Design for Sustainability

As Artiom shows, making a positive change often doesn’t take much effort. It can be as simple as encouraging users to opt for a direct flight instead of one with layovers when booking a ticket or displaying data about product durability to help customers make smarter purchases. Interesting insights into how small design decisions can contribute to a more sustainable world while at the same time improving UX and sales. (cm)

2. Getting Started With Digital Sustainability

The internet accounts for around 4% of global carbon emission — the equivalent of the output of the entire aviation industry. Given this figure, individual sustainability effort might seem like a drop in the ocean, but, as Michelle Barker shows in her “Introduction to web sustainability,” with thousands or even millions of people using a digital product, the positive impact that web designers and developers can make is bigger than one might think.

Introduction to web sustainability

In her post, Michelle not only helps you better understand how digital technology harms the planet but also shares actionable tips for web professionals to improve digital sustainability. For example, how to reduce the amount of data stored and transferred and the amount of power consumed by a user’s device. A great primer on why sustainable design matters and how you can get started. (cm)

3. Sustainability UX Checklist

The EU Science Hub’s Sustainable Product Policy estimates that over 80% of all product-related environmental impacts are determined during the design phase. But how can design teams ensure that sustainability is at the core of every design choice they make? To help their designers develop sustainable design habits, IBM published “IBM Design for sustainability.”

IBM Design for sustainability

At the heart of the framework is the idea that the user, community, and social value should outweigh any negative environmental and social impact — in the present and the future. To achieve this vision, experiences need to be inclusive, easy to learn and use, and efficient for both users and power consumption.

The sustainability checklist PDF suggests practical tips for optimizing designs to meet these goals. It’s no rocket science but small things to remember that will help improve performance, speed, and responsiveness. (cm)

4. Upcoming Workshops and Community Events

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:

5. Sustainability Podcasts, Books, And Newsletters

As awareness for sustainable design is growing, there are wonderful, dedicated people out there who have already acquired a wealth of expertise in the field. One of them is Sandy Dähnert. In her podcast Green the Web, she shares everything you need to know about sustainable UX/UI design and how to manage all kinds of challenges as a sustainable designer or business owner.

Sustainable UX

Another great podcast on the topic comes from Gerry McGovern: World Wide Waste. In each episode, Gerry interviews a prominent thinker about what we can do to make digital as sustainable as possible. World Wide Waste is also the title of Gerry’s book on how digital is harming the planet and what we can do about it.

Tom Greenwood’s book Sustainable Web Design also explores how we can make greener decisions that are not only better for the planet but also for users. You’ll learn more about low-carbon design choices, how to optimize your development processes for energy efficiency, and how to advocate for sustainable practices in your team or organization.

Last but not least, a helpful resource to stay up-to-date on sustainable design is the SustainableUX newsletter that James Christie sends out. It offers a broad view on sustainable design, covering everything from how we work to the energy-use implications of our products and understanding behaviors around climate issues. (cm)

From our sponsor

A Newsletter Helping Engineers Flex Their Product Muscle

Product for Engineers is a newsletter from PostHog dedicated to helping engineers improve their product skills. Subscribe for free to get curated advice on building great products, lessons (and mistakes) from PostHog, and deep dives into the strategies of top startups.

6. Sustainability Kits

How can we create meaningful experiences without losing sight of the environment? To help you and your team make sustainable design decisions tailored to your project’s needs, Elisa Fabbian, Rachele Pedol, and Margherita Troilo created the Sustainability Figma Kit. Consisting of a learning guide, action cards, and a flowchart, it aims to help digital designers move from human-centered design to a more sustainable, life-centered design approach.

Sustainability Figma Kit

Another toolkit that helps you explore sustainable development goals and integrate sustainable values into your work is the Sustainable UX Toolkit produced by the Sustainable UX Network. In a four-step process, it walks you through concept to presentation, providing useful considerations, best practices, and even templates you can use right away. (cm)

7. Sustainable UX Tools And Resources

Making sustainability default in all product design processes.” That’s the mission of the Sustainable UX Network (SUX). To make it easier for designers to find the right tool for their situation or context, SUX published SUX Network, a resource collection all around sustainable design.

SUX Network resources

The collection features practical resources to support you in all phases of the design process, from strategy and discovery through definition and ideation to information architecture, UI design, testing, and analysis. The resources include practical tools, books, inspiring talks, communities, podcasts, case studies, courses, events, and more. One for the bookmarks.

Also be sure to keep an eye on the SUX Playbook, a yet-to-be-released work in progress by the same folks. It is set to provide guidelines, best practices, and examples to help you and your team adopt an environmentally-centered design approach. (cm)

8. The Smashing Library 📚

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.

In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?

Success At Scale
Also meet our newest Smashing Book: Success At Scale. Print shipping in early March, eBook now available. Pre-order your copy or browse the complete library.

9. Recent Smashing Articles

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

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

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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#441: Legacy Systems and UX Migration

Tuesday, January 30, 2024

How to manage legacy code base, UX migration, redesign and how to design with legacy systems. Issue #441 • Jan 30, 2024 • View in the browser Smashing Newsletter Labą dieną Smashing Friends, Legacy isn

#440: Interface Design

Tuesday, January 23, 2024

Design better animations, typography, icons and use Gestalt principles in product design. Issue #440 • Jan 23, 2024 • View in the browser Smashing Newsletter Konbanwa Smashing Friends, Interface design

#439: Accessibility and Inclusive Design

Tuesday, January 16, 2024

Playbook for universal design, accessible target sizes and tools for accessible design, annotations and brand colors. Issue #439 • Jan 16, 2024 • View in the browser Smashing Newsletter Latha math

#438: Free Books and Guides

Tuesday, January 9, 2024

With books, templates and guides for product designers and front-end engineers. Issue #438 • Jan 9, 2024 • View in the browser Smashing Newsletter Boa noite Smashing Friends, Roll up your sleeves! In

#437: New Ways of Working in 2024

Tuesday, January 2, 2024

New work practices for 2024, UI Stack, “How to work with me”-manuals and useful tools for Figma and SVG. Issue #437 • Jan 2, 2024 • View in the browser Smashing Newsletter God kveld Smashing Friends,

You Might Also Like

The Color Secrets Pros Swear By

Thursday, July 11, 2024

View in your browser | Update your preferences ADPro Keeping Up With Color It seems there's a new hot topic in color every week. This year alone, we've seen the “unexpected red” theory take

What’s Behind a Microtrend?

Tuesday, July 9, 2024

View in your browser | Update your preferences ADPro If you've ever wondered about the next big decor moment or debated dipping a toe into TikTok, AD's Senior Digital Design Editor Sydney Gore

#464: Friendly Little Helpers

Tuesday, July 9, 2024

Radio time machine, reverse dictionary, micropedia and templates on how to say No and Goodbye with grace. Issue #464 • July 9, 2024 • View in the browser Smashing Newsletter Gamarjoba Smashing Friends,

Accessibility Weekly #404: Overlays Misunderstand Accessibility

Monday, July 8, 2024

July 8, 2024 • Issue #404 View this issue online or browse the full issue archive. Featured: Overlays misunderstand accessibility "Accessibility overlays are a peculiar approach to accessibility

Reflections from Config

Sunday, July 7, 2024

Issue 202: Thoughts from the annual Figma conference ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Athena Calderone and Young Huh’s Savviest Social Media Advice

Tuesday, July 2, 2024

View in your browser | Update your preferences ADPro As we head into the July 4th holiday, we're revisiting some of our most popular business tips. Among our faves: This conversation on social

#463: Data Visualization

Tuesday, July 2, 2024

Data visualization in design systems, visual data visualization vocabulary, decision trees, color scales and accessible charts. Issue #463 • July 2, 2024 • View in the browser Smashing Newsletter Hello

Accessibility Weekly #403: In Detail - 1.4.11 Non-Text Contrast

Monday, July 1, 2024

June 24, 2024 • Issue #403 View this issue online or browse the full issue archive. Featured: In detail: 1.4.11 Non-Text Contrast (User Interface Components) "The Web Content Accessibility

Spotlight: Kate Syuma

Sunday, June 30, 2024

Issue 201: A conversation on scaling at Miro, Growthmates, and advising ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Inside Balsamiq: our new approach to internal product training

Thursday, June 27, 2024

Streamlining our team's product knowledge ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏