? Here are Lightful, we are currently working on a redesign of our website so we wanted to find out more about sustainable design and what this means for us.

Sustainable web design is an approach to designing and building the web that is principally concerned with reducing carbon emissions and energy consumption by the web products we build.

It is part of a wider consideration of how we use and work with digital technologies in a way that is better for people and the planet.

Despite working as a web developer for over a decade, it is only in the last year that I became aware of the idea of “sustainable web design” and started to think about applying it to my work.

The internet may not have an obvious, visible impact on the planet but every email sent, web page visited, photo uploaded or video streamed requires energy.

Energy is consumed by data centres where the increasing amounts of data we produce are stored, through networks that transfer this data around the world, and at home on our personal devices.

This is in addition to the energy and resources required in the manufacturing process of the devices themselves and the subsequent e-waste they produce at the end of their short life cycles.

There is a lot of scope for doing things better

, the internet’s data centres may already have the same CO2 footprint as global air travel and global communications technologies are predicted to be responsible for more carbon emissions than any country except China, India and the United States by 2025.

 is now using the internet, with video streaming making up the largest portion of internet traffic. YouTube accounted for 

 during the stay-at-home orders of the past year and Netflix took 11%. According to the 2017 Greenpeace 

 report, Netflix is also one of the least green, with few of the data centres they use being powered by renewable energy.

Meanwhile, the websites being built are becoming larger and less efficient. Over the last 5 years, the median web page size has grown by 40.7% on desktop and 107.6% on mobile.

Together these statistics paint a picture of a lot of things heading in the wrong direction but it does mean there is 

It’s great that so many people now have access to the internet and the possibilities unlocks but it does mean that it’s even more important for us to build the web in a way that is best for people 

Finding ways to make the new website more sustainable has been an important consideration for us throughout the development process. Some of the ways to achieve this have been upfront – in the tools and technologies we have chosen to use – and some will be ongoing through our testing and measuring of the site after launch.

We are using an architecture known as the 

. This is a fairly new approach to building websites that separates content management from the presentation layer of the website. When someone visits the site they will receive a set of static files delivered via a CDN. Compared to a traditional CMS-driven website – which may need to access a database and construct the page on the server for each visitor – this approach will use less energy while being faster and more scalable.

 means that we are able to utilise the experience and learning of the web community to build quickly and more efficiently.

Finally, keeping page sizes low is vital – we want to be well below the median figure cited above – so we are employing various techniques to do this:

Using newer image formats like WebP, which can be 

 resources so that images and other resources are only loaded if needed

Reducing our custom font size by using the smaller 

 our source code to remove unnecessary characters and white space

How can we measure the website’s impact?

 is a great tool that can give you a quick estimate of the carbon footprint of your website. It looks at 

The energy source used by the data centre

By performing calculations using a combination of these, it is possible to determine how much CO2 a single page view uses or – multiplied by the annual number of page views – how much CO2 your website emits annually.

More data transferred generally means more energy used so keeping track of page size is important.

If you are comfortable with using your browser’s developer tools you can determine this by looking for “KB transferred” in the “Network” tab. If you don’t fancy delving into the developer tools, Google’s 

 can also measure the page size of a given URL and will give you many more useful tips for improving the performance of your site.

In addition to page size, it’s also worth keeping an eye on the energy impact that your site has on a user’s device. This is especially relevant if your site has a lot of interactions and animations. Again, most browser developer tools have ways of recording and measuring the performance of a site as you interact with it and Safari is particularly good for this.

What’s the end goal for sustainable web design?

Sustainable web design is an idea that is still quite new to me and, from conversations I’ve had with colleagues, it seems that I am not alone. A good start would be to get more people talking about it to understand why it’s necessary and realise what’s possible.

Sustainability should be a consideration for every web project at each stage of the process and we need to be more aware of the impact of the digital services we use.

Building sustainably will overlap with many of the things we already know and care about – improving user experience, SEO, accessibility, performance, security and reducing costs – so won’t mean entirely new ways of working.

Though building a more sustainable website might be something to set you apart now, hopefully, in the future, this will become the norm.

If you’re interested in learning more, the first book I’d recommend would be Tom Greenwood’s 

 (2021). It’s very readable and has just been published so contains the most up-to-date data.

How Improving Website Performance Can Help Save The Planet

 by Jack Lenox provides a good introduction with some technical insights, the 

 site contains many more useful strategies and resources and the 

Finally, I’d recommend taking a look at the annual 

 for more research and stories on the issues facing the internet.

As we continue to explore more about sustainability in web design, we’ll share more of our learnings and tips to get you started.

Learning more about sustainable web design

Guest post by Felicity Hamilton – Junior Designer at Social Misfits Media

As a social media manager, you’ll undoubtedly have many strings to your bow. Whether you’re juggling multiple clients, stakeholders or roles (aside from managing your company’s social presence!), a lot is expected from you. One day you could be a copywriter, the next official photographer, the next analysing and reporting. Arguably the most daunting of all is when your design skills are called upon to knock up a quick social media asset, such as a Twitter card or Facebook banner, especially if your design experience is limited. Here, to remedy any self-doubt about your 

 is a handy 101 for creating effective social media assets as a small team or solo social media manager.

The first thing to consider is the purpose and goal of your design. Ask yourself: who is your target audience on social? What are you hoping to communicate with them? Scribble this at the top of your notepad or sketchbook. This will inform your design decisions and help you create something relevant and effective.

Does your company or client have pre-existing brand guidelines?

Before coming up with any ideas, it’s important to check the brand guidelines. Often these can be found with a quick Google search. It will list any colour codes, what fonts to use, how to use their logos and any rules they follow. Make sure you download any assets you might need from these pages to make sure they are up to date and in-line with the organisation’s brand. If you’re working with a smaller organisation, they might not have any brand guidelines online. Don’t panic! You can send a quick email and ask for clarification on colours, fonts and anything else that might be important for you to include in your asset.

Make sure you’re designing something in the correct size for the platform. Both in its dimensions, DPI (quality) and file size. There’s no use in making something amazingly considered if it’s totally the wrong size. Lightful, our sister company, have 

 where you can stay up to date with platform guidelines on dimensions.

This is the part that might seem scary if you’re a design novice – key graphic design concepts. However, don’t let this throw you off balance – they provide a helpful framework for creating a design that’s easy on the eye. If you think of each individual element as having its own flavour contributing to the overall personality of design, you’ll be able to use them to your advantage.

: Graphic Design has a lot to do with the relationship between objects on a page. If objects are close, they appear to be related. A small object will look even smaller next to a large object. A serif or cursive font will stand out more next to a sans serif font. Consider how each element is complementing those around it.

: This is all about prioritising what’s on your page. What information is the most important? How can you make it really pop on your page? Consider using different fonts, colours, layouts. Test out different ways of doing it in your sketchbook before you settle on the one, and don’t be afraid to shuffle your design around if it’s not working.

: Chances are your organisation already has brand fonts – so stick to these! You can most likely download them online or request them from your client. In the event that you’re looking to choose new fonts, pick one that is clear and easy to read such as a sans serif and then add a ‘hero’ font – something with personality. You can also go to websites like 

 to find dream pairings and give you some inspiration. Make sure text is minimal on a social asset and easy to read!

: Similarly, your organisation probably has brand colours. Find their colour codes and make sure you’re using these exact colours. If you want to add colour to your design, 

 is a great (and free!) online tool for checking complementary shades to existing colours, as well as tints and shades. Also, consider how the colours you’re using might evoke an emotional response. Are you trying to excite? – maybe use a high contrast neon. Are you trying to relax? – perhaps go for baby blues and lilacs. If you use colour intelligently, it can really add to your asset.

 This refers to the overall weighting of objects across your asset. You might assume that it’s either balanced, or it’s incorrect. However imbalanced designs can work just as well. If you’re trying to show how big something is, you might want to heavily weight your design to one side of it. If you want to show a regimented order, you might want to perfectly spread the weight throughout the whole page. Test this out in a sketchbook with a quick thumbnail to see what works best.

We all have our uncreative days. If you’re drawing a blank, the best way to get your creative juices flowing is by finding some inspiration. Next time you’re on the tube or at a bus stop, look at the ads – why do they work? Stay switched on and you’ll learn so much just from observation. There are also great design blogs such as 

 which has great design work to inspire you. Pinterest is also great for some asset inspiration. Pinch little ideas from different designs to make something new and fun! You can then test out these ideas on your social – what designs perform well? – How can you expand on this? Social is all about being inspired, testing, learning and growing. You can always build upon what’s worked well and

If you’re really struggling and need something fast, use online tools. If you have access to Adobe Creative Suite, they have an online resource called 

 specifically designed for creating social assets. There are lots of pre-made templates in here for you to get a head start on your design. Canva is also great for creating designs online. Apply the rules and ideas you’ve come up with to a pre-existing template and chances are it’ll come out perfect.

With any luck, this article will have helped make your role as a hardworking community manager with a million things to worry about, a touch less chaotic. I know this is a lot of information to absorb at once, so you can keep this article open in a tab to refer back to it if you need to. The last secret bit of advice for you is just to give it a go! Be confident, trust your instincts and don’t get caught in the ‘I’m not creative’ trap. As with anything, the more you throw yourself into it, the better you’ll be. The worst thing that can happen is you’ll have to rework something – which happens to every designer almost every day. So with that in mind, go forth and make some wonderful social media assets. They’re going to be amazing.

Design 101 for the Solo Social Media Manager

My name is Vikram and I’m a Canadian ex-pat living in the UK. I was hired by Lightful in late June 2019 as a 

. My reasons for wanting to join such a company are manyfold, but primarily stem from wanting to do something that makes a 

 When I say this, I really do mean ‘difference’ in terms of making life better for all, not for fulfilling a generic company vision!

And I found Lightful to be this company — one that seeks to truly enhance altruistic voices and #reclaimsocial. This isn’t just a side goal or a company vision stuck in a drawer somewhere, it is quite literally our product offering.

 is a relatively common term if you are in digital, but if you aren’t, it may not be. As an exciting, burgeoning field, User Experience slides here and there, fluidly encompassing ever more activities and areas. As such, it can, unfortunately, be used as a bit of a buzzword by some people.

But there is a core to UX, one that is academically rigorous and has been developed over the latter part of the 20th century. UX comes from the belief that systems should be designed to respond to how humans 

 humans to behave. A UXer works to research how users behave, what they need, and then works to design systems that accommodate these behaviours and needs.

In understanding our customers we aim to tweak old features of the 

 to ensure that their usability and effectiveness are maximised, while also innovating new features that make social media posts and campaigns easier to do create, and more effective. We’ve already seen this happen; our tweaked social media post layouts are simpler to comprehend yet also more functional.

I’ve worked with our team to build a “

 that involves rigorous research, prototyping, and evaluation of prototypes. This provides insight into new changes or features we can take into development and allows us to deeply understand what needs we are addressing and to what extent.

But UX isn’t only applicable to digital product development. It can be applied to almost anything – take my onboarding here at Lightful. Thoroughly done, it involved key UX principles.

There’s no question that anyone’s first few weeks in a new job are busy, and this is doubly true for a startup. Yet Lightful pioneered a robust new onboarding process that managed to soften a good deal of the bumps one encounters when joining a new company. My first 3 months have been full, but intelligently structured.

There’s a term that we use in UX called “Zone of Proximal Development”. This means timing experiences 

to get users to learn things that are just ahead of what you expect them to already know. Too advanced, they will be confused. Too simple and they will be annoyed. Too much, and they’ll be overwhelmed. As I see it, my onboarding at Lightful followed this approach.

Prior to joining I was invited to spend a day hanging out with the team – this actually proved really useful as it was a non-stressful way to get to know people, have some time to consider how I best fit with the team, and where I might want to take UX activities. I learned basic things about the company without needing to worry about deep diving.

I was given a work buddy too — Priscilla (she’ll often be your buddy too if you use our platform’s chat function!). She showed me around the organisation and ensured that I had everything I needed. There are times where you may need help at a level that only someone who has been through a similar process understands. Work buddies understand the (sometimes silly!) questions you may need to ask – they know what you may find confusing!

Bamboo HR was also used, which is an online Human Resources tool. This provided me with a checklist of key people to speak to about the different areas of our company, and key documents to look over. Formalising it in this way made 

 a key activity – not an optional one for when everyone has time – that slowly ramped up my overtime. From a UX perspective, this might be considered helping me construct a ‘mental model’ of the company, its activities and personnel.

I’ve been loving my time at Lightful and am honestly excited about some of the innovative features we have in the pipeline. We’re going to be testing some of these features and new prototypes, so 

if you’re involved in 3rd sector social media activities and interested in feeding back on our features, please contact me by clicking 

A UX perspective: My first few months at Lightful

A friend of mine recently took me to the Barbican in London to see Lee Krasner’s new exhibition, 

. Each room began with an inspiring quote from the artist herself, one of which really stood out for me:

‘You can have giant physical size with no statement on it… And vice versa, you can have a tiny painting which is monumental in scale.’

While Lee Krasner is talking specifically about paint on canvas, this insightful statement is crucial for any great design. Design can only be successful when it effectively communicates with its audience. Whether this communication takes place through a powerful image on social media or a friendly typeface reflective of your organisation’s identity, great design, no matter its size can be monumental in scale.

Creating content for a daily Facebook post or for an upcoming blog article? Either way, it’s important to take time to define your project goals before you begin designing your content. A great starting point is to think about the kind of message you want to relay to your audience. Do you want your content to:

Promote a product, service, workshop or event?

The right kind of design for your content can make a big difference in the way you share an idea with your audience.

Visuals are consumed more easily than text, that’s why communicating an idea through a visual (whether it be through a banner, photo, or poster) can be much more effective than just using words.

With videos, you can bring any concept to life. Not only are they a great way to engage your audience, but they provide a wider range for story-telling than a static graphic.

Need to share your latest research? Charts, diagrams, maps, and graphs are great for quickly digesting and understanding complex data.

Visual hierarchy is one of the most powerful and fundamental principles of design. This is when extra visual weight is given to the most important element of your design so that your audience is drawn to a focal point. The key to defining your content’s hierarchy is to first identify what information is most important to your audience. If you’re designing an e-invite for an upcoming event, you might put location, time and date at the top of the message. Here are a few ways to create effective visual hierarchy in your content.

: Use larger or bolder fonts weights to highlight key information

: Place key messaging higher on the page than the other design elements

: Use colour to attract attention to an element in the page

: Elements sitting close to each other give the impression that they are related

: Don’t be afraid to give a little breathing space to a part of your design to draw attention to it.

Typography should complement your purpose. Not only does it communicate your core message, but it also says a lot about your identity. A more whimsical font isn’t going to be appropriate if you’re telling your audience about something serious. While selecting fonts can be time-consuming and can be quite expensive, there are many affordable options and resources available:

Google offers more than 900 free commercial use fonts as well as recommended font pairings.

Looking for something a bit more playful? Creative Market sells many affordable decorative options.

Typewolf can help recommend the perfect font combination for your next design project.
I have been using Typewolf for years as inspiration for my own projects.

Shout out to Lightful’s platform team lead, Joseph Race for introducing me to this font manager, you can try and install fonts all from the cloud!

Creating content that is accessible doesn’t need to be complicated or expensive. Here are a few simple tips I like to keep in mind.

Always provide sufficient contrast between foreground and background

 are fantastic resources to ensure your design always has sufficient contrast between foreground and background for typography and colour.

Don’t use colour alone to make important information understandable

When you’re communicating something pertinent, showing an action, or prompting a response, don’t use colour as the only visual cue. People with low visual acuity or colour blindness will have a hard time understanding your content. Instead, try using colour to highlight or complement what is already visible.

Light font weights and small text sizes can be quite challenging to read for those who are visually impaired, especially on small screen sizes and older monitors. A good rule of thumb is always to keep your font sizes above 16px and stick with font weights above 400 (normal).

Believe it or not, this is one of the hardest things to master as a designer. Fewer distractions in your design can offer more room for your idea to shine through.

My dad once said to me “You need to first understand the basics before adventuring into something new”. This is something I have carried with me since the beginning of my career. Tools such as 

 are great resources to inspire, learn, and experiment.

When selecting typography a general rule of thumb is to not use more than three fonts. The fonts you select should create harmony, not conflict with each other. Try pairing a serif font such as Playfair Display with a sans serif font such as Source Sans Pro to achieve greater contrast and a personal touch.

Remembering Krasner’s advice, practice restraint when it comes to effectively communicating with your audience. Using multiple call-to-actions in design can not only overwhelm users but also dilute your message. Try using a single call to action that packs a punch. I like to write call-to-actions that are not only instructional but also delightful.

Join the Lightful design team over the next coming months to learn best practice tips and tricks to amplify your organisation’s impact!

Category: Design

See other ways Lightful can help

Trusts and foundations

Charities and nonprofits

Educational institutions

Government and public sector

Products

Solutions

Learning

Contact us

Want to learn more?