#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: - [Free 2h-Workshop: Designing Search UX In 2024]( (limited seats) 🌎 with Vitaly Friedman — Feb 29 - [Front-End & UX Online Workshops]( on design systems, complex UIs, CSS, Figma and accessibility. - [SmashingConf Freiburg 2024]( 🇩🇪 — Sep 9–11 - [SmashingConf New York 2024]( 🇺🇸 — Front-End & UX, Oct 7–10 - [SmashingConf Antwerp 2024]( 🇧🇪 — Design & UX, Oct 28–31 Happy reading, everyone — and we hope you’ll find these resources helpful to create more sustainable products and services at your work! — [Vitaly]( --------------------------------------------------------------- 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 Workshops]( 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: - [Smashing Hour: The Magic Of CSS]( with Kevin Powell. Feb 15 - [Resilient & Maintainable CSS]( Dev with Miriam Suzanne. Feb 26 – Mar 12 - [Smashing Meets: The Future Of Design Systems]( with Brad Frost. Feb 27 - [Free 2h-Workshop: Designing Search UX In 2024]( (limited seats) 🌎 with Vitaly Friedman — Feb 29 - [Interface Design Patterns (Spring 2024)]( UX with Vitaly Friedman. Mar 8 – Apr 5 - [Scalable CSS Masterclass]( Dev with Andy Bell. May 9–23 - [Smart Interface Design Patterns Video Course]( UX 10h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 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? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Check out all books →]( [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 - [A Guide To Designing For Older Adults]( - [29 Days Of Inspiration (February 2024 Wallpapers Edition)]( - [The Feature Trap: Why Feature Centricity Is Harming Your Product]( - [A Simple Guide To Retrieval Augmented Generation Language Models]( - [CSS Blurry Shimmer Effect]( --------------------------------------------------------------- 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 rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](