For Earth Day, the team at Something Familiar have taken a deep dive into sustainable website design. Looking at what it truly means, common pitfalls and how to start making more eco conscious moves – without losing sight of your brand identity.

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.
  1. 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.
  2. 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.
  3. Make things move
    Elevate your website’s storytelling with scroll stopping motion. If you haven’t already, check out our Motion Manifesto, trust.
  4. To further this point, ramp up typography to really push how tone and messaging can be delivered without relying on heavy media.
  5. 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.
  6. 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.
  7. 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. ✌️

Save the date – Thursday May 9, 2024!

Mark your calendars because something exciting is coming your way! If you’re between the ages of 16 and 30, we’ve got an event tailor-made for you. Get ready to dive deep into the pressing issues of climate change and sustainability at our dynamic and engaging gathering.

Here’s a sneak peek of what’s in store:

Interactive Workshops: Prepare to roll up your sleeves and get involved in hands-on workshops where you’ll learn practical skills like upcycling to make a positive impact on the environment.

Open Discussions: Your voice matters! Join in on open discussions where you can share your thoughts, ideas, and concerns about climate change in a welcoming and inclusive environment.

But wait, there’s more! This event isn’t just about sharing information; it’s about empowerment. We’re committed to making climate action accessible to everyone, especially young people from lower-income and marginalised communities.

Get ready to be inspired, connect with like-minded individuals, and take meaningful steps toward a sustainable future. Stay tuned for more details coming soon!

Together, let’s make a difference.

For ways to support and get involved, you can get in contact via email [email protected]

Register your interest (16-30)

You’d be forgiven for thinking your web presence had a small, rather insignificant impact on the environment, but research shows this isn’t the case.

In fact, the average website produces 4.61 grams of CO2 for every page view. For websites that have an average of 10,000 page views per month, we’re talking approx. 553 kilograms of COeach year. For high-traffic websites and businesses with multiple domains, that figure represents just a fraction of the actual emissions you’re putting out.

That’s right. Your website has its own carbon footprint.

The internet consumes a lot of electricity: 240-340 TWh per year according to the IEA. In fact, if the internet was a country, it would be the world’s 4th largest polluter – ranking higher than the United Kingdom.

With businesses around the world committed to reducing their emissions and helping to fight climate change, it’s important we all take responsibility for our digital footprint, too.

By investing in more sustainable web design, we’ll also benefit from faster load times, a more enjoyable user experience, and a better chance of ranking higher in Google search results. Basically, everyone wins.

What is sustainable web design?‍

Sustainable web design is an approach to designing digital products and services that focuses on environmental impact first and foremost. It respects the principles of the Sustainable Web Manifesto, which calls for the internet to be clean, efficient, open, honest, regenerative, and resilient.

4 simple steps to website sustainability

To help you navigate the world of sustainable web design, we’ve put together a few top tips. For more comprehensive guidelines, download your FREE checklist.

  1. Embrace JEDI design

No, i’m not talking about harnessing the force. JEDI stands for justice, equity, diversity, and inclusion. Remember, not everyone’s surfing the web with perfect vision, the latest tech and lightning-fast connections. Justin Reyna put it perfectly when he said: “Not creating accessible products is just rude”. So let’s make the digital world enjoyable for all, not just a privileged few.

By striving to meet the highest possible accessibility standards, you can enhance code quality, which in turn boosts energy efficiency and elevates your SEO rankings –it’s a no-brainer.

  1. Simplify user journeys

Did you know that 90.6% of web pages get zero traffic from Google? That’s why it’s best to prioritise page quality over quantity. Simplifying the user experience doesn’t only serve to help people find what they’re looking for. It’s also more energy-efficient, because it reduces the number of wasted clicks needed to navigate your website.

  1. Reduce page weight

Lightweight pages load faster and consume less energy. Saving your assets in optimal formats and sizes, using video content efficiently, and embracing dark mode can all help.

  1. Choose green hosting

Last, but not least, switch to a hosting provider powered by 100% renewable energy, e.g. Krystal. Unsure about your current hosting? The Green Web Foundation’s checker can help.

How do you calculate your website’s carbon impact?

Whilst it’s relatively straightforward to track the environmental impact for most major industries (e.g. miles per gallon for cars or energy per square meter for homes), it’s not as simple to measure the amount of COproduced while browsing the internet. Fortunately, the team at Sustainable Web Design have created a comprehensive methodology for estimating emissions.

If you have any questions about your website’s sustainability, you can request a free website audit here and we will send you a breakdown of different areas that you could improve. Or feel free to contact us at [email protected], for a no obligation chat.

We’re thrilled to share the news that as of the 23rd of December 2023, The Discourse is a Certified B Corporation™.

Achieving our certification is up there as one of our most significant achievements to date. Joining the B Corp movement has given us the opportunity to interrogate what it means to be a ‘good’ business, and while we’ve always believed that our mission to use design as a force for good was the right way to approach our work, the B Corp process has allowed us to validate this belief internally and open the wider business to external scrutiny.

Having now completed our certification, we’re proud to be a part of a community of over 2250 B Corps in the UK and over 7650 internationally, all committed to using business as a force for positive change. Our experience, not without its frustrations, has given us confidence that the B Impact Assessment process is rigorous, and a good way to help judge claims that a business may make to be doing things the right way. That’s not to say that it’s right for everyone, flawless, or by any means the most important thing that an organisation can do, but we do believe that the approach to business that is advocated by B Lab and the B Corp movement will pave the way for a new standard across the world, where it comes to balancing the interest of people and the environment with profit.

We were fortunate enough to have an incredible amount of support along the way, both through professional consultants and existing B Corps always willing to share their advice and experience. To pay this forward, we have compiled our thoughts and advice into the article below, hoping that it helps, inspires and motivates others. We’ve covered the reasons we applied in the first place, what we’ve learned about certification as a small business, what we wish we knew from the start, and our improvement plans for the next three years prior to recertification.

If you’re currently going through the process yourself, or even thinking about starting, we hope you find this useful and please feel free to reach out with any questions.

To B or not to B (why we applied)…

Since first registering our company in 2020, design as a force for good has been central to our ethos. Day to day we see how design can empower purpose-led businesses and charities, and while we’ve always tried to make a positive impact with our work, our B Corp certification has enabled us to validate our policies, processes and impact based on the stringent criteria set by B Lab.

In case you don’t know, B Lab is the non-profit network behind B Corp that is working to transform the global economy to benefit all people, communities and the planet. Achieving the certification has required us to adhere to high standards of social and environmental impact, public transparency, and legal accountability; a set of standards which we are pleased to have met. For a young(ish) business, it’s provided a benchmark to which we can hold ourselves accountable and ensure that our business truly is a force for good, both internally and externally. It also signals to anyone that doesn’t already know us, who we are and what we stand for.

Although not our primary motivator, it’s worth mentioning that certified B Corps tend to outperform their competitors in both ESG and financial performance, seeing an impressive turnover growth of 26% between 2017 & 2020, compared to a national average of 5% (B Lab, 2021). This proves the claim that doing business the right way and making money are not mutually exclusive, and this mindset is starting to redefine the way people perceive success in the business world.

The journey from A to B (Corp)

The B Corp certification involves a thorough review of how your company impacts various stakeholders. The review path will vary depending on the nature and size of the company, and the impact assessment will review the following areas:

  • Governance (policies and practices)
  • Workers (employee well being)
  • Community (local economic and social well-being)
  • Environment (the planet)
  • Customers (the value that you create)

Your total score must be above 80 for certification and the review is conducted in two phases – assessment and verification. The B-Impact Assessment is the initial ‘health check’ and submission of intent to become a B Corp, verification is a detailed audit by B Lab into the claims you’ve made and the documentation provided. As we learnt during our own audit, scores can fluctuate, so we recommend aiming for at least 90 points at the assessment phase if you can.

Completing the B Corp certification has been challenging but very worthwhile. It helped us to understand the policies and processes that we needed in the business to achieve high standards of social and environmental impact. That’s not to say that it is the only thing that a business should do in order to be ethical or sustainable, there are many businesses out there that have chosen not to certify and this takes nothing away from the incredible work they do.

As a small business, without a dedicated sustainability lead or ESG department, it has been the perfect tool and process to help us level up. It has enabled us to understand what we are doing right, in addition to what we need to improve and how projects such as the design for good grant can be developed further to create the change in the world that we want to see.

However, it wasn’t all smooth sailing, so if you’re on the journey to B-Corp yourself there are a few things we wish we knew from the start that would have helped us on the way…

Managing expectations (timescales):

Becoming a B Corp is no walk in the park; it’s a time-consuming and labour-intensive process. This isn’t just a checkbox exercise, the B Impact Assessment delves into every aspect of a company’s social and environmental footprint, and the devil is in the detail. Providing substantial evidence is a challenge, so the more adept you are at documenting your processes and your wider impact, the smoother this journey will be.

We submitted our application in March 2023, but the heavy lifting started to happen in the summer and over the last few months of the year, where we needed to dedicate a substantial number of hours each week to get everything ready in time for our interview. As a team of creatives we have mastered the art of procrastination, so our advice to anyone embarking on this process is to carve out dedicated time each week to chip away at the work, as it’s not something you can easily achieve as a casual side project. More on this below…

Asking for help (just do it):

One highlight of our B Corp certification journey was the incredible sense of community that embraced us. We were showered with invaluable advice and support from a number of remarkable individuals, and a huge shout-out to Ecolibrium, Pieminster, Skylark Media and Enviral for their advice and encouragement on the way. If you’re navigating this process, don’t hesitate to reach out to existing B Corps for guidance, as you’ll be pleasantly surprised by the amount of support you receive.

It’s also worth highlighting that there are some incredible consultancies dedicated to assisting businesses in achieving B Corp certification. The advice and support we had in the early stages of the process from Namoi Lawson (a local B Leader), Andy Hawkins (Business on Purpose) and Will Powell (Future Shift) was invaluable, there’s no way we would have achieved certification without them. Our advice to anyone reading this, given affordability, is to enlist professional support as early as possible. Had we done this much earlier in the process we easily could have halved the amount of time it took to complete.

While we may not have all the answers, we’d be more than happy to share our learnings and support you along the way. The B-Corp journey is still very fresh in our minds so feel free to reach out with any questions you may have.

Be adaptable (as things will change):

We submitted our impact with a stellar initial score, only to watch it dip during the verification stage due to technicalities around our impact business model – a bit of a buzzkill, to be honest. It was an aspect we had been warned about but not really considered, and although we were frustrated by elements of the outcome, it’s given us confidence that the process is becoming much more rigorous. If you find yourself in a similar situation, don’t let it demotivate you. Expect some fluctuations during the verification stage as it’s all part of the process.

The B Corp certification is a serious test of your ability to document and validate any claims you make as an organisation to be ethical, sustainable and impactful. A few of our clients like WECIL and Frank Water, proved to be game-changers for us when it came to measuring the wider impact of our work. While it’s a lengthy journey, it’s also a valuable opportunity to re-engage with your clients and beneficiaries, understand where you are and benchmark your business against best in class criteria. Admittedly, the process took much longer than expected, but without a doubt, it’s been worth the effort and we’ve emerged as a stronger and more mature business for it.

Over the last 12 months, our Project Manager Holly Smith was invaluable to getting our certification over the line. Here’s what she had to say about it…

“B Corp was a great learning curve for me. It gave me such a great insight into the accreditation itself but also about what being a “good” business looks like. It was great to get into the detail of what The Discourse really stands for and how the business meets the standards that B Corp sets out. It was great to work through the company’s aspirations with Ed, to understand what we do now but more importantly, how much better we have the potential to be and how we’re going to get there.

There is a lot of work to be done throughout the whole process. It is time consuming and you really need to manage it as a project. You need to understand how different areas interlink and what you need to deliver in order to meet the criteria. Then comes the part where you need to ensure you have the processes and structure internally to stand it all up and ensure it becomes a continuous way of working and doing business. B Corp isn’t about ticking a box and becoming accredited, it’s about changing your business to benefit people and the planet, and aspiring to change it even more going forward.

I am particularly passionate about the Community and Workers part. It’s good to see the commitment from the business to treat its people fairly and also to do good in the community.

If I had to do something differently, I would treat it as a project right from the start. It wasn’t until we were quite far along, that we realised how many deliverables there were. I would create a detailed plan from the start, with date commitments and timeframes. It would have made things much clearer and I think we would have completed the process much quicker too.”

Our results (and plan for the future)

Achieving our Impact Assessment score of 91.8 has made it clear how much we have to be proud of already. Within the five B impact areas, Governance and workers emerged as our strongest areas, which makes us proud of how the business has matured in just over three years. Our mission-locked, impact business model secured a decent number of points, underscoring the very essence of why The Discourse was founded – to support businesses and charities in shifting the narrative in society and industry. Our fair employment policies and our offices at The Future Leap, a carbon neutral business hub, were a huge asset, as it meant we were able to track, monitor and record lots of our environmental impact.

Becoming a B Corp doesn’t mean that a business is perfect, far from it, and there is always room for development. As well as working on our customer stewardship, environmental footprint and our support for underserved populations, we are significantly increasing the amount of work we deliver each year through the Design for Good grant.

For us, B Corp Certification is a commitment to accountability, transparency and continuous improvement. Attaining the status is a fantastic endorsement of what we achieved, but the real driver for us becoming a B Corp is looking forward – it sets the future direction of The Discourse as a progressive and ethical design agency, and represents our ongoing efforts to leverage our business as a positive force in every aspect.

Conclusion:

We hope you found this helpful, we will be giving regular updates on our involvement with the community so follow us on LinkedIn and Instagram, and sign up to our newsletter to keep up to date. If you’re a business working towards their B Corp or have any questions about the process, please don’t hesitate to get in touch.