Sustainable web design / sustainable website
The climate crisis means that there has been more focus on; environment and consumption, and digital everyday life is also a place where you can make a difference to several different ways.
In this blog entry we look at; what a sustainable design and a sustainable website really are, as well as what you and your web agency can do to ensure a climate-friendly website.
What is a sustainable design / a sustainable website?
We talk both about sustainable web design, which makes certain demands on the way you design a page, as well as about sustainable web pages or sustainable websites, where there are a few more parameters, such as .eg web host, code, content and other things we see more closely about; in this blog entry.
På the same way that you can help the environment in many other industries, such as is there also good opportunities to help the environment by thinking sustainability into the design and the web page when you need to have a web page made. Whether it is a small website, a webshop or a full system such as ticket system or booking, så can you do something.
As we see på in this blog entry you can see everything from which systems you choose, to colors, search optimization, image formats, video formats and much more. In other words, there is a good opportunity to do something yourself, and together with your design agency/web agency/SaaS provider
How do you get a climate-friendly website?
We see here på some of the many things you can do, some of which have great importance, while others have less importance. Some are also easily implemented, while others may require larger changes in e.g. the design line.
Web page size
The size på the web page can be important, both because a large web page can take up more space and thus require more server space, but especially also; because the load can be larger.
Often, however, it is not the physical size, such as e.g. number of pages or number of products, since in modern systems it is well optimized in a database and does not take up much space, and since it only becomes a problem when it is loaded by many users (who view the page). It is more about the way the systems are built on; (how much is loaded and how heavy it is), as well as about one's content in the form of e.g. pictures and videos, which we will get closer to; Further down.
The reason load times matter is that although it is not about many kb or mb, soå they are loaded every single time a user visits the page, and it therefore requires a lot of resources for servers and data sending, etc., which therefore requires strøm
In the next few points we look at; what to see can actually do.
Avoidance; some open source solutions, as well as too many plugins
Several open source solutions often load more than necessary, including e.g. WordPress and Magento. This applies in particular when plugins are added where often not much importance has been placed on; load times or optimization. This means that those systems are often heavy, and thus require more resources from the servers, and are therefore ultimately less environmentally conscious. At the same time, the speed also affects the user experience.
It is illustrated very well by a simple Google search on Wordpress slow, where there are no less than 77,700,000 results
It may therefore be a good idea to do after an optimized SaaS (Software as a Service) system, where the speed is optimized and the system is constantly updated and follows the times, so you ensure it always loads quickly.
Good search optimization / less load
Some may think what good search optimization has to do with less load, but this is due to, among other things, that Google in the technical part of search optimization has added requirements for fast loading time, which makes speeds på web pages to an important parameter in search optimization.
It is, among other things, something Google has done to create less load på their servers, but alsoå to help the environment and ensure fewer servers and less data to be moved - and thus less power consumption.
This part is constantly being optimized and improved, and it is therefore important that you choose a system where there is:
- Updates within technical SEO
- Continuous optimization and updates of the system and plugins
Mobile first
Today, the majority of all views take place on; a smartphone. Therefore mobile first and responsive web design is alsoå super important parameters.
Partly it ensures that you start by designing for smartphones in order to get a good user experience, and when there can be programmed soå the website is also set up; for smartphones first. This means that everything that has to be loaded extra on eg. tablet and computer do not load when you are on; a smartphone. This makes it both faster and more user-friendly, but at the same time it also ensures a more sustainable website. Since the vast majority of users come from smartphones, så you save loads of a lot of data, and thus alsoå strøm.
Color choice
Although it may sound strange to some, så has colors too importance when talking about climate - e.g. uses a blue color more energy than a red and green color. It is really about how much light is needed to reproduce a given colour.
However, there are many other things that also comes into play, and some screens are also far brighter than others, strong; it theoretically means that a green color på a very bright screen may well use less current than a blister; on a less bright screen. A large part of the optimization here also lies in with the manufacturers are the screens, and they are also; became far better with årene.
One disadvantage of optimizing here is that soå will color palettes will be severely limited, and some companies will be forced to develop completely new visual identities. It will alsoå means several uniform pages.
But if you create a new climate-friendly website and a new visual identity, så can you consider more climate-friendly colors such as green or red, as well as using gray; and dark colors more than the light ones.
Dark mode
Another way where you don't need to make climate-friendly colors, but where you can still ensure that the page will be more climate-friendly, is to provide the option of dark mode.
If the user has the option to put the page in dark mode, just as you know from, for example, apps on; smartphones, så do you want to that way they could keep the original version. This will give the users the opportunity to choose a dark mode version if they wish. You must again be attentive to; that recognizability can disappear, since web pages are opposed to many apps, after all; has sales for oslash, and is fighting for the places on Google - which alsoå makes the brand important. Websites are the opposite of apps, after all, not something users have consciously chosen to save, and you can therefore be quite aware; seconds to convince a user to choose your web page over another.
Så you have to consider whether it is something you want - but the possibility could be there.
Variable or få fonts / fonts
Fonts or typefaces can alsoå contribute to ensuring a more climate-friendly website.
It can happen on several ways
- Limit the amount of fonts
- Choose 1-3 fonts for the entire page - also gives; better design and ease of use
- Limit the variety of fonts (bold, bolder, normal, thin, etc.)
- If you don't use variable fonts
- Use variable fonts
- Så you don't have to download every single variation of the font - especially smart if you want to use many variations
- Use familiar fonts
- By using fonts that are known and widely used, så they will often be preloaded by the user from e.g. Google fonts
It's again basically about picking up så some data out onå page as possible, since this data is shown to all users who visit your website.
Icons
When using icons on a web page, så is it alsoå smart to use icon libraries such as Font Awesome.
There are still many web pages that use image icons, and they take up far more than the icon libraries that you can use. This again means greater load, even though there are far fewer icons on the page than, for example, Font Awesome offers.
By using Font Awesome from the CDN, they can also be loaded in cache from other sites.
Website structure / minimize views
In the above points, we have looked a lot at; content on the individual pages, but something that alsoå is super important is the structure.
It is about bringing made a structure where you minimize views and clicks that must be made to get to a given place.
If you e.g. must show 4 pages to get to the bottom page you need to go to, either because you click on from the pages, or because of clutter in the structure, soå much more will be loaded than is necessary.
Therefore work on a simple structure in the menu (typically only a sublevel), and regarding the flow you want the user to go through, and make sure there are not a lot of popups and the like.
It definitely helps the climate, and makes it easier and more user-friendly for the user.
Image format
For a long time, jpg and png have been the leading formats for web pages, but now .webp has arrived. Webp has the great advantage that it takes up much less space without on compromise with quality. At the same time, it is a flexible format that has both the advantages that jpg and png have traditionally had each year. The problem with .webp has been that it has not been supported by e.g. Safari if you had MacOS 11 Big sour or less. You have been able to make a fallback to a jpg image, but så should you have 2 versions of the same image på the server. However, MacOS 11 Big sour is still becoming an old version, and you can therefore d.d. where the article is written well start using .webp images in most places.
Online tool to convert to .webp (not tested - own responsibility)
Image compression
Another thing that alsoå is important, and as Google alsoå Important in search optimization is whether your images are compressed. The systems always compress images, but rarely; much that you yourself are capable of.
If you would therefore like to have a fast and not least sustainable site, especially; could it be an advantage to compress your images yourself before they are uploaded
There are 2 parameters in image compression, and what you can do depends on the format
- The size
- The quality
The size is important for bitmap/raster images (jpg, png, .webp, etc.), as it is important for the physical size of the image file. Therefore adapt it to where it is to be used.
For vector formats such as e.g. svg is the mathematically calculated graphic, and the size can therefore adapt.
The quality indicates how detailed the image is - the worse the quality - the fewer details and the more grainy. It again depends a lot on the format what can be said.
Image details
Another thing you can do with advantage is to do a little image processing before uploading the image. This is especially true if you have a very detailed image.
The more details an image has, the more space the image takes up. Therefore, it often pays to blur the image on; places where it has no meaning. It can both produce some nice effects, and at the same time you also get more climate-friendly images.
Video format
Just like with images, there have also been new video formats that are better than, for example, mp4 for web. This applies, among other things, to webm format which compresses video more without losing quality.
Video compression
A great sinner ofå the web - perhaps even the biggest climate culprit - is videos. Videos take up a lot of space, and often excessively large videos are uploaded - especially background videos on the pages.
It is super important that videos are compressed and adapted before they are posted online, and that you keep them short (especially background videos where users don't see much).
Videos can be compressed by many different ways
- Professional programs Premiere made by Adobe
- Free programs such as HandBrake
- Online services compress-video-online, convertio.co and freeconvert.com
- Own responsibility - we use programs and have not tested them
Especially with background videos, you can compress extra strongly, as they are usually not the details that are in focus here.
If you use videos that explain something about since, så can advantageously use e.g. Youtube. Partly soå they make sure to compress the video, and partly you can promote a channel with videos there too.
Marketing and ad optimization
One thing that does not directly concern your website itself is your marketing and your advertising.
We are aware that it is super important to you, but there are ways to be climate conscious here as well, which is a win/win scenario, as it is also can ensure you more effective marketing.
The things you must pay attention to; (most people probably do it in advance) is:
- It's not about many visitors - it's about the right visitors
- Conversions are more important than hits
- Remove keywords in ads that don't sell - better fewer and higher conversion
- Remove ads that don't convert properly and try something else
- Make blog posts that match your customers' needs
In other words, it is about spending less money on; impressions that do not result in sales. It benefits the concurrent environment as it is a waste of server power and power.
Climate-Friendly Ticket System
If you are looking for a climate-friendly ticket system, Flex4Business ApS can also help with that.
We have written a blog post about climate-friendly ticket systems, and here you can see how we ensure that our SaaS ticket system is more climate-friendly than many other solutions you can choose
Do you want a sustainable site?
Flex4Business ApS has extensive experience in sustainable web designs and sustainable web pages, and we can help you with this both in the design process, with the technical and with the content of the website. the web page.
We also do even more things onå our own site to ensure it is sustainable.
Flex4Business ApS - sustainable website
At Flex4Business, we have chosen to optimize på the sustainability of the website, and we will continue to do so.
We have made an active choice not to optimize all places, and will include review; what we do and don't do. However, we can easily help if you want to go; all in.
Flex4b.com
- Flex4b.com uses the Flex4B system, which is an optimized system that does not load a lot that is not used
- Search optimization: It is a high priority and we are doing well in load time, and thus data load
- Mobile First: All web pages are made with the Flex4B system, Mobile First incl. our own
- Colour selection and dark mode: We have chosen not to have dark mode since få still using it på web pages and as we become less recognizable. However, we use green, which is not one of the worst, and in the administration also; dark contrasting colors (dark grey)
- Fonts: We only use one font på since, and only in få variations.
- Icons: We use Font awesome for icons
- Structure: We have a simple structure with one click for most and most important things
- Optimization of images: Our images are optimized to fill så as little as possible to ensure low load time
- Image format: We've started using .webp, but haven't done it in general, as it's not supported by Safari on operating systems earlier than MacOS 11 Big Sour
- Video optimization: Our videos are optimized for the web, and thus greatly reduced in size
- Marketing and ads: We adapt ads soå specifically as possible to avoid users who have no interest but still click and load the page
Flex4Business ApS naturally also helps the environment on many other ways - not least in our incredibly flexible working model where people can work from home most of the time.
Do you need a sustainable design / sustainable website?
Would you like to hear more about the possibility of bringing a sustainable design / a sustainable website?
Do you need a climate-friendly website?
We can help you all the way, regardless of whether you simply want improvements or want to all-in.
Our Flex4B system is optimized and ready for you to create a sustainable website
