How can digital designers make choices to minimise their environmental impact? In this blog, we explore what actions we can take to create websites that are both engaging and better for the planet.
What is sustainable or low carbon website design?
Sustainable website design is all the noise these days, and for good reason. Historically, web design practices have failed to consider the environmental consequences of maintaining a website. With an average of 1.76g of CO2 emitted per page view, the cumulative impact becomes significant. For instance, a site with 100k page views per month emits approximately 2,112kg of CO2 annually! A car travelling 8,000 miles emits roughly the same amount of CO2, which is mad.
*Source
So what exactly is Sustainable web design?
It refers to the practice of creating websites with minimal negative impact on the environment, both in terms of resource consumption and emissions. This approach considers the entire lifecycle of a website, from design through to development, hosting, maintenance and user interaction.
On top of environmental impact, sustainable design also involves two other important aspects:
- Social Responsibility
Practising user-friendly accessible design, paired with respectful, inclusive content ensures it’s suitable for a wide range of audiences. - Economic Sustainability
Taking this considered approach during the design phases could also streamline the development process, and minimise the page processing power. Ensuring the site is lightweight, future proof and built to last.
As cliche as it sounds we need to make a change. But how do we meet our green goals – without compromising our brand impact and website design?
It’s all about Sustainable Design Considerations
In this article we are focussing on the first phase of a website lifecycle – the initial design decisions you can implement to minimise your site’s environmental impact. This phase seems to be an area where little discussion is currently focused, but it comes hand in hand with development, so decisions made here are crucial.
We’re here to put you onto a few tips and tricks so you can get practising sustainable web design in no time. You’d be surprised what can be achieved through strategic design decisions.
Here’s are some things to consider when approaching your new sustainable website design:
- Over-application of ‘best’ practice.
Yes you can remove video, and yes you can use system fonts… but should you? We don’t want to lose the soul of your brand as a result of this practice, so remain conscious about your objectives. Keep it chill. - Set your objectives
Addressing what needs to be done to improve your impact at the end of a project can lead to non-optimal solutions – think first. - Do your research
Design-focused resources for sustainable impact are few and far between, so when you come across design inspiration that’s also incredibly sustainable – save it and share it. - Carbon calculator hype
Yes, these are helpful and insightful, but it’s important to not prioritise your score over experience or business objectives. Also at the time of writing, these calculators seem to only measure initial page-load, which is not always an accurate reflection of page size.
To summarise, and maybe over simplify this topic, having a low-impact website typically means stripping things back. So using smaller images, removing video, less content on a page, avoiding multiple fonts etc.
But how can you do this without diluting your brand? It’s a challenge that we have been facing so we created a methodology that aligns impact and expectations.
Determine how far you want to give your website a green glow-up.
At Something Familiar, we’ve adapted a tiered approach to sustainable web development – The Gold, Silver Bronze approach. By understanding your business positioning and communication priorities we can build a sustainable website, without impacting your brand presence.
We’ve sourced some excellent example websites to see where they fall on our scale. All of these websites demonstrate excellent design and brand impact, but offer varying levels of sustainable web design.
GOLD: Lean and Green
Those who have achieved sustainable website zen! Exemplary brand communication and aesthetic, whilst upholding impressively low page weight. Sacrifices are evident in the absence of motion and video, with minimal utilisation of photography, opting primarily for a typography or vector-based design approach. However, these sacrifices are executed with meticulous consideration and attention to detail.
Genesis
https://eatgenesis.com/
A 100% plant based alchemy restaurant concept.
Design notes:
- The trippy illustrations are light on the load time. Fun and super memorable.
- On desktop the cursor becomes a source of subtle light – encouraging interaction with the illustrations.
- It’s simple – a responsive one pager. Due to the optimised content it responds very well to different screen breakpoints.
- The dark colour scheme consumes less power on devices – see more on the benefits of dark mode here.
- Carbon rating: A
- First visit from Beacon – CO2: 0.026g / SIZE: 82.24 KB
Happy Base
https://happybase.monwest.nl/en
Offering up creative services and coaching.
Design notes:
- Media placement is minimal, light and small. Used strategically where it counts for warmth, adding depth to content.
- The annotations and scribbles feel like an effective on-brand wayfinding device, encouraging scroll exploration.
- Confident use of strong heading typography, combined with shapes – instead of images.
- Carbon rating: B (which goes to show you can still have a great score, without being just a one pager.)
- First visit from Beacon CO2: 0.388g / SIZE: 1.03 MB
Doing Good: The Something Familiar Impact Report
https://impact-2023.somethingfamiliar.co.uk/
It wouldn’t be right if we plug our own B Corp impact report microsite now would it 😜
Design notes:
- We made it our challenge to get to A+. 94% cleaner of all web pages globally on the website carbon calculator (a real challenge when you want to show off everything achieved in the last 12 months)
- Our stickers go a long way to inject personality. Light little Lottie Files to compliment each chapter, SF style.
- We used a low code page builder, Bricks Builder, built with clean bloat free code.
- Our use of video was minimised by looping short autoplay clips rather than playing entire video content.
- Carbon rating: A
- First visit from Beacon – CO2: 0.131g / SIZE: 420.56 KB
SILVER: Sustainable standard
Could this be the ideal equilibrium? Introducing distinctive and captivating features that depart from typographic and flat styling, incorporating depth and distinctive Javascript interactions and animations. Meticulous attention is given to the utilisation of video and highly optimised images.
Flayks
https://flayks.com/
Portfolio site of designer/art director Félix Péault
Design notes:
- The layout is incredible and highly engaging. This is partially due to super confident use of typography – it does a lot of the work in place of heavy media.
- Video is used strategically, and only plays when within your viewport.
- Carbon rating: B
- First visit from Beacon – CO2: 0.131g / SIZE: 420.56 KB
Flying Papers
https://www.flyingpapers.com/
Beautifully branded cannabis products.
Design notes:
- The jiggy illustrated characters are really cute and memorable – helps to feel immersed in their brand-world.
- Lovely experience on mobile, a scalable approach that feels consistent to the big screens.
- Clever use of variable fonts and viewport responsive design to keep the ratio of content to whitespace even.
- Carbon rating: C
- First visit from Beacon – CO2: 0.634g / SIZE: 1.69 MB
Pest Stop Boys
https://peststopboys.co.uk/
A contemporary pest control service.
Design notes:
- Illustrations utilising that vibrant colour palette eliminate the need for any images on the site.
- Simple, subtle interactions go a long way: the transitions, rollover links and on-scroll illustration movement is fun.
- The cursor in the hero encourages exploration and puts the brand in centre focus, without using heavy media.
- Carbon rating: C
First visit from Beacon – CO2: 0.627g / SIZE: 1.97 MB
BRONZE: Luxury over low-carbon
Basic in terms of sustainability, but bespoke in terms of design impact. These sites offer incredible experiences to their users and have won Awwwards for their work, but this comes at the sacrifice of page weight. Keep in mind though that these sites have different objectives and are aimed at a smaller audience.
Mita
https://www.joinmita.com/
A new app to share and invest in artists.
Design notes:
- A slick, contemporary site to that’s bespoke down the small details, even the cookie consent looks legit.
- It’s media rich, and has to be to sell the features and benefits of the platform.
- It also prioritises aesthetic over accessibility – which is a reflection of the audience it’s targeting.
- This won an Awwwards SOTM (site of the month,) which is a huge accolade.
- Carbon rating: E
- First visit from Beacon – CO2: 1.105g / SIZE: 3.48 MB
Opal Tadpole
https://opalcamera.com/opal-tadpole
Plush little cameras and webcams
Design notes:
- Premium, elevated experience is priority over tip-top accessibility.
- Silky smooth product renders are essential to show off the webcam specifications.
- Plenty of immersive (but necessary) images and video to sell the product ramp up the page weight.
- Carbon rating: F
- First visit from Beacon – CO2: 6.539g / SIZE: 20.58 MB
Bearbrick Audio
https://bearbrick.audio/
Iconic collectibles from Medicom – now speaker-fied.
Design notes:
- The dynamic apple-esque landing page serves up a really enjoyable experience to scroll through.
- It’s media rich and interactive in order to convert – but also helps to sell the storytelling piece about Bearbrick ‘finding its voice’.
- The on scroll animations and high quality assets are necessary to reflect the price point associated with collectable culture. Also helps to reinforce the value of the Medicom/Bearbrick brands.
- Carbon rating: F (but a design: A)
- First visit from Beacon – CO2: 7.307g / SIZE: 19.45 MB
So what action can you take?
Here’s some simple design-focused moves you can make now to start reaching green glowup. Ideally, these should all be actioned or considered at the beginning of a project.
- Variable fonts
Reduce the amount of fonts being loaded on your site. A variable font ecompasses a slew of weights within one file, vs. the old days of loading 5-6 heavy separate files. - Be strategic with media
Beyond compressing/optimising your media, think about its value and positioning. Immersive images and video assets should be saved for key parts of communication. - Make things move
Elevate your website’s storytelling with scroll stopping motion. If you haven’t already, check out our Motion Manifesto, trust. - To further this point, ramp up typography to really push how tone and messaging can be delivered without relying on heavy media.
- Main character: mobile
Designing mobile first might not be your thing, but regardless of order – get your mobile design optimised. Cater to accessibility on small devices to make the experience just as beaut.
- Make accessibility breezy
Get Stark (plugin) involved in your design process to eliminate any accessibility risks. It’s a lovely little plugin in Figma you can use to review typography, palettes and contrast. It’s all aligned with the WCAG (Web Content Accessibility Guidelines) too. - Lastly, try to avoid accessibility overlays
Here’s a great explainer why.
To wrap up.
With all this in mind, think about where your website to sit on the sustainable spectrum. Ultimately, the outcome is reaching a happy medium that meets objectives, delivers a killer experience and practises sustainability.
Or if you want us to do it – get in touch. ✌️