It’s a new day, and today starts out with Tom Greenwood explaining zero waste web design.
Because this year I used Twitter’s threading / topics feature, it’s giving me 2 tweets in each embed I do here. I’m embedding every other tweet for readability. There’s a PDF at the bottom of the page in case this all collapses.
☞ Can you apply a “zero waste” save-the-earth approach to modern web design and development? Author Tom Greenwood @eatwholegrain says yes and shows how as #AEAOT Fall Summit Day 2 begins.https://t.co/Cncp2JY1sD @AnEventApart @ABookApart #webdevelopment #design #ux #conference pic.twitter.com/xc1uIfVSsj
— zeldman (@zeldman) October 12, 2021
Waste is expending something carelessly, extravagantly, or to no purpose. There’s no waste at all in nature. All resources have a use and a value, used again and again. Waste is a modern invention. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
By the 1980s we were very much a consumerist society, the idea of throwing away things and causing mountains of waste.
Daniel Knapp(?) came up with the idea of total recycling. They founded a salvage operation for up cycling and repurposing things #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Corporations don’t help much on these goals.
by the end of the 20th century this became a mainstream issue. The zero waste life-style movement tried to find ways to not create trash. There’s a sector of shops and products around this. Fit your own waste in a mason jar. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Certifying as a b corporation made Tom think hard about whether they were actually meeting the highest standards of social and environment impact as a digital agency. “It’s not relevant” was the message they got.
Started researching the environment impact of the web #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
https://t.co/JdPOF4Mn0c helps you determine how much energy your website is burning. Old, old-fashioned simple websites were much lower impact than new exciting fancy websites. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
The average webpage is 400% bigger on desktop and 1200% bigger on mobile. Websites are becoming more and more bloated, consuming all the gain in efficiency. Additional bloat in our webpages eat up the gains in efficiency.
Are modern websites full of waste? #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Zero waste in the web: better performance, improved accessibility and inclusivity, reduced hosting costs, easier maintenance, improved user experience, improved set and pro, and reduced energy and carbon emissions. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
First fundamental question: do we need this? This site, this page this image, this content. What could we lose? Can we do the same with less? What can we lose that makes people feel like they’re gaining something? #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Some web designs make it look like we’re more obsessed with how we look than what’s useful. Focus on the information users want. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
“Detail is data, and data is energy.” – @eatwholegrain #AEAOT #ZeroWasteWebDesign
— zeldman (@zeldman) October 12, 2021
Webp and avif files are 30%-50% smaller than jpg files. There’s growing browser support for these file formats. Not using webp in many cases is a wasteful thing to do. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
SVGs can be a really really efficient way to show images. Hand optimizing them in Illustrator (or a text editor) can cut as much as 97% of the size of the image.
Tweak the number of colors.
[I love using photoshop’s old-school “save for web” to reducing file sizes.] #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Dark mode in apps uses less battery and is more efficient. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Alternatives to video: interactive animations using airbnb’s open source animation engine is more accessible, provides better control, and is less wasteful. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
What are the things in our code and designs consuming energy and CPU? How can we make things more efficient?
System fonts are free, zero waste. Not stored, not transferred over networks, already on devices. https://t.co/vIoA4pjaNx only uses system fonts. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Trim your CSS! 555 color declarations on https://t.co/hLurnTH6QB. Especially on websites that have been around for a while, we often find we have dirty css. Modular reusable styles in a design system can help with this. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Minimal GA is a tracking script that provides most of the data that Google Analytics provides, but at 1.5kb instead of 17kb. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
jQuery uses 30kb, and 77% of the web uses it. The entire sustainable web manifest webpage uses 27kb including a contact form. Simple forms without jquery save lots of data. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Static web technology is more efficient than dynamically serving pages. Strattic serves static files, and switches off the CMS. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Those of us who work in digital tend to work in more expensive places with faster connections. The average device in the world is a motorola moto e6, and high-speed internet is not the norm. #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
If you’re not for zero waste, how much waste are you for? #aeaot
— Anne Gibson (@perpendicularme) October 12, 2021
Here’s a PDF of this post (which might not be accessible because I’m using print-to-PDF to generate it, my apologies) in case Twitter kicks it and all the tweets disappear. An Event Apart OT 2021 Zero Waste Web Design by Tom Greenwood – Perpendicular Angel Design