June 27, 2023 Smashing Newsletter: Issue #411
This newsletter issue was sent out to 212,473 subscribers on Tuesday, June 27, 2023.
Editorial
Sustainability is often considered a technical challenge related to optimizing images, videos, and fonts. But what does it mean for designers? How can we guide our design decisions through the lens of sustainability? That’s what today’s newsletter is all about.
In this issue, we’ll take a closer look at sustainable design principles and how to build them into the product design process. You’ll learn how to discuss sustainability as a team, how to develop carbon-reduction ideas, and how to assess if your sustainable design process is working. And if you’re looking to establish yourself in a career in sustainable design, there are some valuable tips waiting for you, too.
Later today, we’ll be running a Smashing Hour on Design & UX with Oliver Reichenstein, who is an amazing designer, agency owner, and conference speaker, and does great things with iA. Join us for a friendly get-together (free, online) — we’d love to see you there!
Sustainability will also be one of the topics we’ll cover in our next SmashingConf Antwerp 🇧🇪 (Oct 9–11) — along with plenty of practical sessions and workshops around design, UX, research, design patterns, and complex enterprise UX. Friendly, approachable, and affordable. Get your ticket!
But first, let’s dive a bit deeper into sustainable design, shall we? Happy learning!
Have a smashing day and until next time,
— Cosima
1. Sustainability Guide
Do you want to provide more sustainable offerings for your customers but are unsure how to do it? The Sustainability Guide from SVID is an overarching framework for sustainable design and development practices that contains sections wholly dedicated to methods and design principles centered around sustainability.
The design section illustrates the system-wide lifecycle of the design process, describing it as a circular system where everything in a product design is interconnected and linked by environmental criteria that are embedded at all stages. The methods section is an archive of tools, resources, case studies, and expert advice that can be used to educate a team, as well as kickstart a team into sustainable environmental practices. Perfect for anyone who works or wants to work in a more sustainable way.
2. Sustainable Design Strategies
The crux of sustainable design strategies, according to Leyla Acaroglu, is ensuring that the tools we use in a design workflow and how we use them today do not have a negative impact on the planet in the future. But how can we ensure that?
In her “Quick Guide to Sustainable Design Strategies,” Leyla shares an eco-design strategy that helps you build sustainability considerations into the product design process, from manufacturing and recyclability to efficiency and modularity. By including these considerations in the design lifecycle, it is possible to develop products and services that reflect sustainable practices, such as a product’s ability to dematerialize, how easily it can be recycled, how long it lasts, whether it can be dissembled by customers, and to what extent it can be repurposed for other uses.
3. EcoCards Game Workshop Toolkit
One of the most challenging hurdles to adopting a sustainable design process is figuring out how to discuss the topic as a team. Getting everyone on the same page about what it means to design sustainably and how to establish a process for it is paramount for any team. That’s what makes the EcoCards Game Workshop Toolkit such a valuable resource.
The toolkit is a collection of three card-based games to facilitate team discussion on sustainable design practices. Each game is framed as a “workshop” meant to take place at different stages in the design process, detailing the game rules with a series of steps using a plain deck of playing cards to move the discussion forward. The EcoCards are available in English and French.
4. Sustainability Innovation Framework
The ClimateSprint method that Sebastian Gier and his team at sustainability startup Footprint created helps teams leverage planet-centric thinking to develop carbon reduction ideas for their business. In the Sustainability Innovation Framework, you’ll find everything you need to run your own ClimateSprint.
The process is mapped to traditional design thinking, helping you start work by aligning objectives and documenting assertions before tying them to user needs. What makes this framework particularly useful is that it helps prioritize the generated ideas by their environmental impact.
5. Upcoming Workshops and Conferences
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.
As always, here’s a quick overview:
- The React Performance Masterclass Dev
with Ivan Akulov. June 29 – July 13 - Data Visualization Masterclass Dev
with Amelia Wattenberger. July 4–18 - Figma Workflow Masterclass UX
with Christine Vallaure. July 20–28 - Advanced JavaScript Masterclass Dev
with Christophe Porteneuve. Aug 16–30 - Interface Design Patterns UX Training UX
with Vitaly Friedman. Sep 8 – Oct 6 - Smart Interface Design Patterns Video Course UX
9h-video + Live UX Training with Vitaly Friedman - Jump to more workshops →
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Image Optimization by Addy Osmani
- Jump to all Smashing Books →
6. Website Carbon Calculator
How large is the carbon footprint of your site? The Internet uses electricity, of course, but it also relies on data centers that distribute information and the energy to power each and every device that receives that information. Even a small website has a carbon footprint.
The Website Carbon Calculator is one way to determine just how big the impact of your site is on the environment. Employing a methodology that takes energy-consuming attributes into account, the free calculator estimates the amount of carbon dioxide produced by a particular website. To inform its calculations, it looks at the weight of images on a page, whether web fonts are integrated, and any front-end frameworks in use, among other considerations.
7. Team Sustainability Retrospective
OK, so perhaps your team has adopted a sustainable design process that aims to reduce carbon emissions. How do you know it’s working? That’s the purpose of the Team Sustainability Retrospective, a Miro template produced by Paddy Dhanda.
Rather than high-fiving your team for implementing a sustainable system, this set of templates will help you assess whether or not your efforts are paying off in a streamlined five-step process. This way, your team can re-group after the implementation of the design process and properly measure its impact with data that form actionable insights for improving the process even further.
8. Climate Tech Guide For Designers
If you’re looking for help establishing yourself in a career in sustainable design, Enrique Allen’s Climate Tech Guide for Designers is for you. It is less about teams adopting sustainable design standards than it is a resource for helping you make a decision about where you work and who you work for.
How passionate is the company about climate? What problems is the company trying to solve, and are the solutions based on climate technology and considerations? These are the types of questions that will allow you to find the right fit for your career. The guide goes beyond company considerations by offering advice on positioning yourself for a career in climate technology, capping things off with an extensive list of companies that demonstrate sustainable practices.
9. New in Smashing Books 📚
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?
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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁
You can always unsubscribe with just one click.
Previous Issues
- UX Writing
- New Front-End Techniques
- Useful Front-End Techniques
- Design & UX Gems
- New Front-End Adventures In 2025
- Inclusive Design and Neurodiversity
- UX Kits, Tools & Methods
- How To Measure UX
- New In Front-End
- Web Accessibility
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.