With the arrival of digital technology and in particular the web, many people predicted that this would greatly limit the volume of printing. In reality, the opposite has happened as these new technologies, coupled with the democratisation of personal printers, have made it easier for everyone to print. In passing, this can be seen as an illustration of the rebound effect or Jevons’ paradox.
It should be borne in mind that printing is still used for personal or business purposes for the transmission or storage of information.
We will therefore look here at how to make the printing of website content as low impact as possible. We won’t discuss the printer, paper or inks used (printing in draft quality, double-sided, multiple sheets per page, etc). Instead, we will look at good design practices that can make printing less impactful and the printed content more readable.
To begin with, let’s look at what the existing guidelines mention on this subject.
The GreenIT.fr collective’s repository of 115 good practices in web ecodesign proposes BP_027: “Provide a print CSS”. The brief example provided already covers a good part of the recommendations that we will detail in the rest of the article.
This is partly in line with what we will now see in terms of recommendations.
Limit the number of pages
Often, when trying to print a simple web page directly, the number of sheets used seems disproportionate. This is the case, for example, when printing an electronic ticket, such as a train ticket. There are a number of ways of overcoming this:
Reduce page margins
Reduce the spacing between elements
Reduce the size of titles and texts
Linearise content
Remove peripheral content (decorative images, contextual elements such as blocks presenting similar articles or the latest articles, menus, top and bottom of the page, navigation elements, etc)
Limiting ink surfaces
If we saw in the previous good practice how to limit the amount of paper used, it is also possible to limit the use of ink. If a dark mode is in place, make sure that the background is white when printed. Again, it may be worth removing unnecessary visuals such as decorative images.
Some fonts are specially designed to reduce the amount of ink used in printing. Take a look at Ryman Eco or tools like EcoFont.
Another option is to allow the user to print the content without the images. In some contexts, images can help with comprehension, but you might as well give the user the choice of printing a page with or without the images.
As mentioned in the 115 best practices for web eco-design, the easiest way is to set up a stylesheet dedicated to print and used for the whole website. For this, I invite you to read the Smashing Magazine article “Print stylesheets in 2018“.
Conclusion
In order to facilitate the printing of website content, we have seen here the best practices to implement. The development costs are limited but the benefits for users can be substantial. It is indeed essential to keep in mind all the contexts of use of a website.
Awwwards references websites that stand out from the crowd in terms of their conception, user experience and design. It is a true reference for web designers and web developers around the world. The concept is simple : every day, designers submit their websites to Awwwards. The site is submitted in the “Site of the day” category. It is judged by members of the Awwwards community of designers, developers and agencies. The best site of each day of the year appears in the book “The 365 Best Websites Around the World”. Every month, a site is elected “Site of the month”. At the end of the year, during a ceremony, the jury chooses the best of the year.
The Awwwards site has grown since its creation in 2009. The nominees are divided into 6 groups:
Sites of the Day
Sites of the Month
Sites of the Year
Developer
Mobile Excellence
Honorable
There are also site themes called Categories, of which there are 26.
Pretty sites but not necessarily sober ?
Our curiosity led us to analyze 10 sites nominated on Awwwards. We have selected sites nominated in the “Mobile Excellence” group. These sites are judged on 4 criterias :
More than 200 HTTP requests to load the page and then 1 request about every 10 seconds. The requests point to about 50 domains.
These queries can be found on the RequestMap (a tool created by Simon Hearne):
While the presence of the cookie banner is legitimate, the chatbot obscures a good part of the display, which is problematic for an Awwward-awarded site. Is this chatbot really necessary? Shouldn’t it open (and load) only on user request?
It should also be noted (but unfortunately this is often the case) that about thirty requests are triggered as soon as cookies are accepted.
When scrolling, the number of requests and the amount of data transferred increase considerably following the direct integration of a Vimeo video. The use of the facade pattern would have been more judicious. We also notice a carousel which is difficult to use on mobile (swipe only).
The lazy-loading is well implemented but we note various superfluous visual effects (in particular parallax) which still come to weigh down the site, in particular with scrolling.
When we scroll down to the bottom of the page, we are at more than 400 HTTP requests and more than 12 MB of data transferred.
Finally, the Wave plugin detects about 40 accessibility errors and about 30 contrast errors.
We had previously discussed the subject of sober sites, but here we are typically on a site where a very busy design and too many third-party scripts greatly degrade the user experience. This is particularly true when we look at the measurements during the pause stages:
Ideally, there should not be any data transfers or such sharp spikes in the battery discharge rate. This may be due to third party services or animations.
For this site, the loading never really ends, as the Firefox developer tools show:
The stats here (including loading time) never stop increasing.
The site is undoubtedly interesting from the point of view of pure design but it is a site that is absolutely not usable:
-The perpetual movements (without the possibility of control) will make it inaccessible for some users. -The continuous requests to about fifteen domains will put a strain on the data plan of some users. -Contrast errors are indeed present and keyboard navigation is more than laborious.
All this results in an environmental impact more than consequent with continuous data transfers and solicitation of the battery of the smartphones used, even in background.
The remarks on the two previous sites apply largely to this one. When loading, there are more than 200 requests for 2 MB transferred. Indeed, there are more than 57 domains, which corresponds well to the slogan of the site proposing to make your website a marketing asset.
If the size of the images is rather well controlled, most of the weight of the site comes from the JS with more than 100 requests of which a dozen are more than 100 kb each.
The lazy-loading of the images does not seem to have been implemented and the design of this homepage seems to be much too heavy anyway.
On the other hand, the errors reported by the Wave plugin are almost non-existent.
In short, there is still work to be done in order to make this homepage more sober, to better integrate certain elements but also to limit the use of third party services.
This site is rather light (just over 1 MB) and fast to load. We still get 60 HTTP requests for the first load, spread over 15 domains.
This homepage is visually rich but remains clear. The images are optimized (especially through the use of webp format). It is regrettable that lazy-loading is not implemented.
The cache is globally well managed, which is a very good thing.
On the other hand, we notice that the fonts are rather large, for a total of 5 requests. It would be better to use system fonts or a variable font to limit the number of requests.
Also, from an RGPD perspective, it would be best to avoid Google fonts or host them yourself.
Some accessibility errors appear with Lighthouse.
Animations should be limited to the scroll and cursor movement effects seem superfluous (even harmful for the user).
This site is apparently quite sober. No requests to third party services and globally optimized images but too many. The implementation of lazy-loading (preferably natively) would be a very good thing.
The loading time is made longer by the default loading of a 1 MB video and about 20 requests for the fonts alone.
On the other hand, the cache is implemented on almost all elements.
Even if Wave reports few accessibility errors, animations should be less present at the scroll on the page. Currently, they make the scroll step the most impactful step from the point of view of the battery discharge speed.
The trend observed so far seems to be confirmed: many images (optimized but most of them are loaded twice) and many animations.
15 queries just for fonts but not many queries to third party services.
In short, a site that would benefit from being a little more sober in its presentation and from going further in the technical optimization to avoid that the efforts (especially image optimization) are cancelled out by bad practices (such as double loading of images).
On the Wave side, some accessibility errors come up but mostly contrast problems.
Data projection to measure environmental impact
We went further in the analysis by carrying out a data projection in order to obtain additional details, notably on the CO2 impact, the water footprint and the soil footprint.
Here, energy, data exchange, CPU and memory usage are directly measured on the device. The environmental impact and Ecoscore (based on the measurements but also on the application of good practices) are calculated. You will find the details in the dedicated article on the blog. It is thus possible to compare the different sites, classified here according to their Ecoscore (the higher the better).
version
ecoscore
CO2 impact (gEqCO2)
requests
Energy (mAh)
Data exchange (Mo)
CPU (%)
Water footprint (Litres)
Surface footprint (m2)
Memory (Mo)
hskr.ru
60
0,30
23
5,45
1,82
2,71
0,05
0,61
682,42
ladispensadelchianti.it
75
0,31
56
4,73
1,57
1,14
0,05
0,55
511,82
ingridparis.com
65
0,36
38
5,54
3,59
2,11
0,06
0,63
632,50
azzerad.com
63
0,38
75
5,59
1,98
1,50
0,06
0,65
735,91
marcoambrosi.salon
52
0,41
47
5,81
4,75
2,44
0,06
0,67
701,52
once-lifetime.com
45
0,45
56
5,73
6,37
2,24
0,06
0,66
734,36
grege-interieurs.com
39
0,64
26
11,20
6,80
5,06
0,11
1,25
746,73
webflow.com
33
0,67
179
6,34
7,17
3,21
0,09
0,80
863,02
lamalama.n
42
0,71
21
9,71
13,42
4,71
0,10
1,09
828,77
blueyard.com
56
0,72
50
8,02
15,13
2,56
0,10
0,92
575,93
datagrid.co.jp
29
0,80
128
9,34
11,02
3,15
0,11
1,10
671,31
betterup.com
27
0,81
121
11,28
7,85
3,51
0,12
1,31
862,15
Conclusion
When the design of sites must be judged or compared, those that come out on top are often sites offering a profusion of images and other visual effects such as animations or video. Even if these design choices can be more attractive or entertaining, they often harm accessibility but also environmental impacts… and therefore, ultimately, the users themselves.
Even when looking for sites specifically dedicated to sustainability, one finds examples with numerous accessibility errors or transferring files larger than 5 MB when loading.
On the Awwwards site, usability is indeed one of the criteria taken into account. However, a quick look at the scores shows that even for betterup.com, which has many accessibility errors, the usability score is often very high. It is normal that a subjective element, often linked to personal experience and the perception one has of such creations, comes into play. Nevertheless, an objective measure should allow to relativize and nuance the statement, as well for accessibility as for sobriety (even performance). These additional constraints could be a source of creativity and give rise to innovative user experiences while remaining respectful of users and the planet.
It is not easy to choose the right type of image to reduce environmental website impact. We can focus on image size or on display performance (are they two related ?). This may be the right approach. However, an energy measurement will be a more precise element if you really want to measure the actual consumption and move towards reducing the environmental impact.
Test 1 Default quality given by Sqoosh (https://github.com/GoogleChromeLabs/squoosh/) : JPEG original (560KB), JPEG@q75 (289KB), WebP@q75 (206KB), AVIF@q30 (101KB)
Test 1: Target quality of 25kB : Original (716KB), JPEG@q10 , WebP@q5, AVIF@q19
Measurement protocol
We display the images one by one in a Chrome browser on a real device (Samsung Galaxy S10).
We use Greenspector tools to measure energy consumption and other metrics (CPU, performance…).
We perform a measurement throughout the display of the image and this 3 times to have stable measurements.
The measurements are made under different Wifi, 3G and 2G network conditions.
Results
On image 1 for test 1, we obtain the following energy consumption measurements:
If we observe more closely the behavior in WiFi, we can better appreciate the differences in consumption with the confidence interval.
In Wifi, the consumption is relatively similar between the types of image. JPEG consume little more than other format. It is followed by WebP format and then by AVIF.
In 3G and 2G, the difference in consumption is noticeable and AVIF consumes less energy than Webp.
These behaviors are explained by the smaller file sizes in AVIF and Webp.
On image 2, the behavior is the same:
In image 3, there is almost no difference between the formats. The image is small and we find ourselves in an operation close to wifi (fast transfer):
The behavior is the same with image 2 which is at 45kB:
This is the same behavior for image 3:
It is necessary to monitor the new formats (JPEG XL, Webp2…) as well as the optimization of the algorithms because even if the gains in size are significant, the decoding processing could potentially gain even more efficiency. Indeed, here is for example the CPU processing for image 1 on test 1, where AVIF consumes more CPU than the other formats.
Recommendations:
In any case, it is necessary to compress images with lower quality, regardless of the image format. A quality >85% is useless. Energy consumption is reduced by a factor of 2 for qualities that remain high, and reduced by a factor of 6 for low qualities.
Even if the energy consumption is relatively similar between the formats, the gain provided by AVIF and Webp is much greater for less efficient connections. The choice of AVIF and Webp will be preferable because the users are not connected with broadband! In addition, the gain in terms of data exchanged will be interesting to limit the overall size of the site.
The choice between Webp and AVIF is not easy and will depend on the type of images and visitors. Additionally, Google is working on WebP version 2, and formats like JPEG XL are coming to compete with AVIF. However, considering the benefits of Webp other than the environmental impact, we recommend the use of WebP more.
For information, here is the taking into account of the AVIF format in the browsers:
As well as the Webp format:
In any case, optimize your images, compress, reduce the size and lazy-load!
Today, we focus on a question that comes up very often when we address the question of web eco-design or digital sobriety: is an eco-designed site necessarily ugly? Often, the request consists of obtaining examples of “pretty and eco-designed sites” (preferably with a purpose similar to the current project). Specialists in web accessibility have no doubt encountered this type of question frequently. It is already not easy to define what would be, in absolute terms, a “pretty” site. The concept is itself very subjective.
We will therefore proceed differently. We will first compile a list of sites that are sober. There are lists and directories for this, which will be listed later. After compiling the list, we will do a quick analysis to exclude sites that are not as sober as advertised (too much data transfer, too many requests, etc.). Finally, we will use the Greenspector tool to decide between them (by classifying them and identifying those that are more impactful at first sight).
Finally, armed with this list, we will look at what they look like and try to identify design trends, depending on their purposes (an information site does not necessarily look like an e-commerce site or a web agency, for example). Moreover, it will provide an opportunity to keep in mind other aspects of Digital Sobriety, such as accessibility. Having a site that is light and pleasant to look at does not make sense if it is unusable for part of the population.
The purpose here is to offer a list of websites with a lower environmental impact. Everyone is free to find those that seem attractive to them and that correspond to their expectations (in terms of purpose, target, etc.). Thus, this list could be a source of counter-arguments concerning eco-designed sites which would necessarily be ugly. It can also be a way to find sources of inspiration in order to design eco-designed and attractive sites.
Where are the sober sites?
We have chosen to go through the lists and catalogues of sober sites, with the bonus of other sites crossed elsewhere.
There are probably others, but this is already a good starting sample. If you have others in mind or want to test your site’s sobriety, do not hesitate to contact us.
A first analysis was carried out with this first list (more than a hundred references in the end). This is mainly based on the Network tab of the DevTools to watch the HTTP requests and the amount of data transferred.
In the end, only about forty sites are left, which are then used for a benchmark with the Greenspector tool.
Sober sites: the verdict by measurement
The benchmark of the selected sites makes it possible to classify them according to their respective EcoScores (the idea being to obtain an EcoScore as close as possible to 100).
Ranking
URL
Ecoscore
Energy (mAh)
Data (Mo)
Requests HTTP
Carbon Impact (gEqCO2)
Water Surface (Litres)
Land use (m²)
1
https://kuroneko.io/fr/
94
4.24
0.14
2
0.18
0.04
0.46
2
https://lesraisonnees.co/
94
4.08
0.21
11
0.19
0.04
0.45
3
https://brawcoli.fr/
92
4.08
0.13
11
0.19
0.04
0.45
4
https://solar.lowtechmagazine.com/
92
4.35
0.35
17
0.21
0.04
0.48
5
https://www.pikselkraft.com/
91
4.35
0.11
3
0.19
0.04
0.48
6
https://amap-chelles.net/
90
4.59
0.34
4
0.2
0.04
0.5
7
https://primitive.wildandslow.fr/
90
4.1
0.16
11
0.19
0.04
0.45
8
https://productfornetzero.com
90
3.99
0.17
14
0.19
0.04
0.44
9
https://www.mountain-riders.org/
90
4.31
0.23
19
0.21
0.04
0.48
10
https://fairness.coop/
89
4.28
0.09
14
0.2
0.04
0.47
11
https://jeudi.am/
89
4.47
0.15
20
0.22
0.04
0.5
12
https://www.boavizta.org/
89
4.26
0.27
9
0.2
0.04
0.47
13
https://lowtechlab.org/fr
87
4.09
0.22
6
0.18
0.04
0.45
14
https://www.gov.uk/
87
4.35
0.24
15
0.21
0.04
0.48
15
https://www.treebal.green/
87
4.19
0.8
17
0.21
0.04
0.47
16
https://www.boutique-natali.com/
86
4.84
0.44
25
0.25
0.04
0.54
17
https://designersethiques.org/
85
4.06
0.28
17
0.2
0.04
0.45
18
https://oceanfifty.com/
85
4.63
0.42
14
0.22
0.04
0.51
19
https://anelym.fr/
84
4.64
0.17
23
0.23
0.04
0.52
20
https://lowimpact.organicbasics.com/eur
84
4.65
0.74
33
0.26
0.04
0.53
21
https://www.europeansleeper.eu/en
84
4.33
0.73
31
0.24
0.04
0.49
22
http://www.biocoopmontreuil.fr/
83
4.75
0.53
23
0.24
0.04
0.53
23
https://www.licoornes.coop/
82
4.37
0.17
28
0.22
0.04
0.49
24
https://empreintedigitale.fr/
81
4.26
1.14
26
0.24
0.04
0.48
25
https://www.international-alert.org/
81
4.67
0.83
28
0.25
0.04
0.53
26
https://www.laboutiquedupartage.fr/
81
4.77
0.31
20
0.23
0.04
0.53
27
https://www.light-communication.fr/
81
4.53
0.19
13
0.21
0.04
0.5
28
https://dolo.biz/fr/
80
4.81
1.19
15
0.25
0.04
0.53
29
https://www.polybion.bio/
80
4.88
1.02
10
0.24
0.04
0.54
30
https://zugvoegelfestival.org/
79
4.26
0.52
44
0.25
0.04
0.49
31
https://pathtech.coop/
77
4.55
0.66
6
0.21
0.04
0.5
32
https://dalkia.fr/
76
4.28
0.89
38
0.25
0.04
0.49
33
https://sustainablewebdesign.org/
76
4.88
1.02
43
0.29
0.05
0.56
34
https://palaeyewear.com/
74
4.51
1.19
78
0.32
0.05
0.54
35
https://themarkup.org/
73
5.27
1.13
14
0.26
0.05
0.58
36
https://www.ademe.fr/
72
4.75
0.64
26
0.25
0.04
0.53
37
https://theadccawards.ca/
71
5.46
0.29
6
0.24
0.05
0.6
38
https://flowty.site/
63
6.91
0.35
21
0.32
0.06
0.77
39
https://heylow.world/
62
6.14
0.35
19
0.29
0.05
0.68
40
https://becolourful.co.uk/
60
6.15
0.23
15
0.28
0.05
0.68
41
https://www.ec-lyon.fr/
59
5.06
0.81
43
0.29
0.05
0.58
42
https://www.wholegraindigital.com/
58
8.65
0.65
25
0.41
0.08
0.96
43
https://daviddaumer.com/
50
7.83
0.32
13
0.35
0.07
0.86
For each of its websites, measured on an S7 smartphone (Android 8), the measurements were carried out using our Greenspector Benchmark Runner, allowing automated tests to be carried out. The measurements were taken at the end of June 2022.
Scenario details: – Loading the website – Page scroll – Inactivity website in foreground – Website inactivity in the background
Each measurement is the average of 3 homogeneous measurements (with a low standard deviation). The consumption measured on the given smartphone according to a wifi type network may be different on a laptop PC with a wired network for example. For each of the iterations, the cache is first emptied.
By classifying the results (by EcoScore) and looking at the extremes, we already notice two things:
Some sites have scores above 80 or even 90. This is a rare occurrence and highlights sites that have made an effort to maintain digital sobriety.
Some sites have an abnormally “low” EcoScore. Thus, these are rather light sites, but they are still impactful.
https://daviddaumer.com/ (EcoScore Greenspector 50): few requests on the page, little data transfer. We look with EcoIndex, and the score A is obtained (which is the best possible score). EcoScores drop due to animations that continuously drain the device’s battery. Therefore, by displaying this page, the battery is discharged faster, which increases its wear and predicts the need to replace the battery. It induces heavy environmental impacts, most of which come from the device fabrication. The impact of CSS and JS processing should be limited. Are animations necessary? What are their accessibility and attention capture impacts?
https://theadccawards.ca/ (EcoIndex A, EcoScore Greenspector 71) : the environmental impact of the animations here is far from negligible, the site is also very light and sober. On the other hand, this abundance of visual effects seriously harms the usability of the site, in particular from the point of view of accessibility.
In the end, the examples illustrate the need to consider all factors before claiming that a site is sober or has benefited from eco-design. It is good to make efforts to reduce the number of requests and the amount of data transferred. On the other hand, JS or CSS treatments (more particularly animations) can cancel out a good part of the benefits thus obtained. Especially (and I insist on this point) that these animations potentially have a detrimental effect in terms of capturing attention but above all accessibility. On this subject, I invite you to refer, among other things, to criterion 13.8 of the RGAA (On each web page, is each moving or flashing content controllable by the user?). The most glaring example here is https://heylow.world/ with its very present animations which further impair readability for all users.
Analysis of the ranking of sober sites
We started with what to avoid to produce an eco-designed website that is visually pleasing without sacrificing usability. Let’s now take a closer look at the sites to extract relevant examples.
We can already consider the list of sites with an EcoScore > 70% as sites on which a sobriety effort has been made. It remains to be seen what can make them attractive and which ones to highlight.
Note: to avoid possible bias, we haven’t included the Greenspector site has not been included (even if its EcoScore is around 72).
E-commerce
The list contains 3 e-commerce sites:
https://lowimpact.organicbasics.com: as of this writing, the standard site is under maintenance. In the “low impact” version, the choice of sobriety is clearly displayed. The focus is on simple shapes (via SVG) and solid colours. On the other hand, it is regrettable that this version is not the default version of the site. This significantly undermines the impact of this approach.
https://palaeyewear.com: the homepage is rather light and pleasant. It includes the classic elements for such a site: a video (integrated soberly), some products, consumer opinions, some news, an impact report, etc. Several good efficiency practices are not respected but this page is doing better than most other e-commerce sites. Everything gets complicated when you access a product sheet. Here, more than 100 requests and several MB of data are transferred. The eco-design effort should therefore have been pushed further, in particular by basing itself on a user journey (navigation and purchase of a product) rather than only on the home page.
https://www.boutique-natali.com: On this page, we also find several elements specific to this type of site (current promotions, reinsurance elements, products highlighted, etc.) in addition to highlighting the eco-design approach implemented. The same sobriety can be found on the product sheets. Admittedly, some types of products sold online probably require more images (for example in the field of fashion or cosmetics) but in my opinion, this is a good basis for thinking about designing an online store. light and pleasant to use.
Magazines and online press
https://themarkup.org is a sober and elegant site at the same time, which is all the more remarkable for the online press. These sites are usually weighed down by advertising and trackers, among other things, which is not the case here. An important site to keep in mind is an example of an eco-designed online press site. Be careful, however, the lightness of this site compared to other similar sites is partly due to choices of an economic model. Once again, this highlights the role that all the actors of a project have to play on the subject of digital sobriety.
https://solar.lowtechmagazine.com: This is probably one of the best-known examples. The radical choice of environmental impact reduction is clearly displayed here. This will not necessarily be unanimous (notably because of dithering).
We find a similar logic on the Designers Ethiques site (layout similar to an old-fashioned paper newspaper for a more sober result) or even (for the structure) on that of Pikselkraft. The Low-tech Lab site, if it takes up certain elements, goes to a page richer in content and with a less rigid structure. The home page then seems more attractive and the content easier to identify.
Others sites
https://lesraisonnees.co: a scroll-based one-page site. An agency site with classic content but produced in a very sober and efficient way, very clear. A very good example.
https://brawcoli.fr: the classic elements are grouped together on a single page, putting well before what this restaurant offers.
https://primitive.wildandslow.fr: we find in the list of many agency sites or freelancers specialising in the creation of sober sites (which is logical and even reassuring). The idea is generally to present everything on a single page with solid colours and few images (all optimised). Primitive by Wild&Slow is quite representative while standing out, among other things, for areas with non-linear contours. In other cases, the emphasis is on geometric shapes rather than more complex images.
https://www.mountain-riders.org is a good example of using the principles seen above with a very contrasting graphic charter for a clean and attractive final rendering.
Although it may seem less attractive than others, https://www.gov.uk shines with its lightness and accessibility. Great efforts have been made here at the level of information architecture. It is in any case interesting to have here an example of accessible and sober public service.
Even if continuous and ubiquitous animations are to be avoided, some lightweight sites use them sparingly:
In any case, it is advisable to keep in mind the accessibility as well as the fact that this type of addition is only cosmetic. For some sites like https://dolo.biz/, the attractiveness of the home page relies heavily on the animations but everything remains efficient and rather pleasant (even if it will not necessarily be practical for everyone’s navigation, in particular, the keyboard).
In a totally subjective way, I also retain https://zugvoegelfestival.org for the choice of colours and navigation on the home page. It is just unfortunate that the various navigation elements on the site are not available (at least by click) upon arrival on the site.
And a last special mention for https://sustainablewebdesign.org which uses geometric shapes, and bright colours and emphasises accessibility while being a mine of information on web eco-design.
Conclusion
The ranking presented here should give you a better idea of what is possible with a sober website. This list is expected to grow over time and serve as an inspiration for those who wish to create sober websites.
One must consider accessibility when using a site and dig as deep as necessary into the notion of sobriety if the feeling one can get is partly subjective.
Security is an essential part of responsible digital. It is not uncommon to wonder how to protect your site, especially when you allow the possibility of sending content from your website: form (in particular contact), comments, etc. We know that a good part of the activity on the web is not due to humans (How much of the internet is fake?). Nobody wants to undergo an injection or other malicious act via their website.
At the end of the 90s, a miracle solution appeared in the form of CAPTCHA. Today, we find this component almost everywhere. You may need to copy difficult-to-read characters, click on photos with different elements, or click on a box to confirm that you are not a robot.
But what about its environmental impact? How to reconcile it with digital sobriety? That’s what we’re going to see here!
Looking for the best solution
The CAPTCHA meets the need to secure the data submitted by Internet users on your site.
The problem is that this way of doing things, among others with reCAPTCHA, is often laborious for users. Additionally, the user journey is longer, which increases the environmental impact of digital services when it does not result in abandonment altogether. Especially for users with disabilities who may find it impossible to complete the task. Not to mention the additional requests (CSS, JS and other iframes) necessary to integrate this type of component into a page.
Thus (and this is an essential point of responsible digital), the search for the soberest CAPTCHA takes accessibility into account first.
Identify the entry time to exclude entries that are too fast
Use a filter (regular expression or other) to identify suspicious responses
Randomly add a question that a bot will not necessarily be able to answer (“Which animal is barking?”, “How much is one plus one?”, “How many d’s in pudding?”, etc.). By leaving the possibility of refreshing the question in case of difficulty for the user.
The honeypot (to which we will return)
In the end, it is the honeypot solution that seems the most adequate in most cases. Detailed elsewhere on a Canadian government site, it consists of adding a hidden field in the form concerned. This field should be set to be filled out only by bots. It does this by hiding it from users and assistive technologies while giving bots code elements that make them think it’s a required field. This means that when validating the form, responses with this field filled in should not be taken into account. While the honeypot requires some thought for flawless implementation, it remains very light and elegant because it keeps the focus on the original goal: to prevent bots from sending data through a digital service. Rather than impacting the user to ensure that he is not a robot, we leave the user journey intact to focus on bot detection.
Conclusion
The example of CAPTCHA proves to be representative of a responsible digital approach. In order to improve the security of a digital service, we are first interested in the accessibility of possible solutions (the free and widely used solution not being here again necessarily the best) to finally ensure via digital sobriety that the chosen solution does not degrade the environmental impact of the service.
Greenspector may use cookies to improve your experience. We are careful to only collect essential information to better understand your use of our website.
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
