Author: Laurent DEVERNAY

After working for more than 15 years in web development, Laurent Devernay became a technical consultant in responsible digital technology at Greenspector. When he is not coaching organizations on the eco-design of their digital services, he teaches courses on digital sobriety technologies.

Analysis of the 10 sites nominated for mobile excellence by Awwwards

Posted on October 5, 2022October 6, 2022 by Laurent DEVERNAY

Reading Time: 7 minutes

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 :

Friendliness
Performance
Usability
PWA

Awwwards assigns a score for each of the above criteria, which is then used to calculate a total score.

At Greenspector, we decided to go further in the analysis of these sites to see if they met our sobriety criteria.

Additional analysis of sites at the bottom of the ranking

Betterup.com

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.

Datagrid.co.jp

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.

Webflow.com

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.

Additional analysis of top-ranked sites

Ladispensadelchianti.it

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).

Ingridparis.com

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.

Azzerad.com

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	Energie (mAh)	Données échangées (Mo)	CPU (%)	Empreinte eau (Litres)	Empreinte sol (m2)	Mémoire (Mo)
betterup.com	27	0,81	121	11,28	7,85	3,51	0,12	1,31	862,15
datagrid.co.jp	29	0,80	128	9,34	11,02	3,15	0,11	1,10	671,31
webflow.com	33	0,67	179	6,34	7,17	3,21	0,09	0,80	863,02
grege-interieurs.com	39	0,64	26	11,20	6,80	5,06	0,11	1,25	746,73
lamalama.n	42	0,71	21	9,71	13,42	4,71	0,10	1,09	828,77
once-lifetime.com	45	0,45	56	5,73	6,37	2,24	0,06	0,66	734,36
marcoambrosi.salon	52	0,41	47	5,81	4,75	2,44	0,06	0,67	701,52
blueyard.com	56	0,72	50	8,02	15,13	2,56	0,10	0,92	575,93
hskr.ru	60	0,30	23	5,45	1,82	2,71	0,05	0,61	682,42
azzerad.com	63	0,38	75	5,59	1,98	1,50	0,06	0,65	735,91
ingridparis.com	65	0,36	38	5,54	3,59	2,1	0,06	0,63	632,50
ladispensadelchianti.it	75	0,31	56	4,73	1,57	11,14	0,05	0,55	511,82

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.

Get in touch

Digital sobriety at Greenspector

Posted on August 24, 2022August 25, 2022 by Laurent DEVERNAY

Reading Time: 6 minutes

As we talk more and more about digital sobriety, it’s important to come-back to this notion. Especially it’s a part of greenspector activity.

Definition

Digital sobriety is a global approach of digital, respectful of the earth and people.

Since few years, this topic takes more and more extent. We see this notion almost everywhere but often limited in consideration of environmental impact. For many Eco-design has been the gateway into the digital sobriety.

Eco-design and digital environment impact consideration
Digital accessibility and inclusion
Attention economy
Respect for personal data and privacy protection
Cybersecurity
Ethics
Low tech and fight against technological solutionism

Eco-design and digital environment impact consideration

Various aspects of digital sobriety

Environmental impact consideration plays a crucial role in digital services. Beyond resources consumption related to their use (for example, energy needful to charge the battery), these services affect the user’s equipment: battery and components wear, memory and system surcharge… Those impacts motivate early change of latest and newer equipment.

However, today, the manufacturing of those equipments represents the phase of digital services with the greatest impact on the environment. It suits to create websites, mobile applications, and other digital services with as low impact as possible.

That’s why the repositories have been increasing. Examples include the GR491 of INR, the RGESN of DINUM, the 115 best practices or OPQUAST.

Add to this the law REEN as well as tools for evaluating the impact of digital services

Finally, we observe that the subject is gaining momentum and structuration. We can only delight even though there is a long way to go.

The benefits for users and companies are considerable. Overall, this approach improves the user experience (and in particular performance) as well as reduces development, maintenance and hosting costs. Similarly, the adoption of eco-design leads to the development of expertise, an improvement in brand image and constitutes a factor of attractiveness for customers but also for future employees

As a result, an eco-designed digital service will often have a smaller scope, which will facilitate its security, its compliance for accessibility and will tend to restrict the personal data collected.

Eco-design also tends to ignore mechanisms aimed at capturing attention (infinite scroll, autoplay of videos, excessive notifications, etc.). This also constitutes an ethical advance: the user is no longer just a consumer who must be retained by all possible means. We gain their trust and support by first providing them with quality service, tailored to their expectations.

Finally, by placing the user at the center of considerations, digital sobriety tends to avoid technological solutionism. This will avoid (among other things) going to digital services when it does not seem necessary. Sometimes a good old SMS can replace a website or a mobile application: a low-tech solution can meet user needs just as well (sometimes even better).

At a time when more and more services (including public ones) are becoming digital, the accessibility of digital services is a central subject, in a process of inclusion and access to services for all. Unfortunately, this important subject does not yet receive all the attention it needs, although many tools exist and are being developed. The standard (RGAA) is now in its fourth version and the legislative framework extends to public structures as well as companies whose turnover exceeds 250 million euros. It offers a concrete approach to WCAG: a complete panel of W3C recommendations for accessible web content. Verification tools are numerous, even if they are not sufficient to verify all the criteria.

Yet, even today, 97.4% of the most used websites have at least one accessibility error. The compliance with administrative procedures is also far from what one might expect. Accessibility nevertheless remains an essential subject for digital sobriety technology and contributes to ensuring the usability of digital services as well as their sustainability.

Beyond the penalties incurred by companies in the event of non-compliance with obligations, the benefits of this approach are numerous :

Ensure that everyone can access the services and information offered under good conditions.
Reach as wide an audience as possible, in particular via the curb cut effect.
Develop internal expertise (retention of employees and attractiveness for recruitment).

The attention economy is a field relatively little known as such, although it is already deeply rooted in our daily lives. These are all the mechanisms (design, design, functional, and others) that make us addicted to our smartphones and certain apps. We are talking here about captological mechanisms (or deceptive patterns): infinite scroll, notifications, modals, autoplay, etc. Through these design choices, the time spent on our mobiles increases, and our attention span decreases. The stake around our attention is above all financial. All this is detailed in the book The Goldfish Civilization and structures such as Designers Ethiques have already taken up the subject.

This problem is all the more fundamental since we find ourselves faced with tools designed to spend as much time as possible on them, even though their use has a non-negligible environmental impact (via the wear and tear of the terminals, their energy consumption but also by ultimately pushing consumerist behavior, in particular through massive exposure to advertisements). It should be noted that in addition to these harmful impacts on the environment and the individual, there are ethical considerations since this system often results in greater collection of personal data.

Regarding personal data, the question is not new, but the implementation of the GDPR was an important turning point. The aim here is to regulate the capture and storage of personal data of European citizens but also by European companies. This complex subject is particularly linked to micro-targeting (targeted advertising based on data collected on the Internet user) and is all the more dizzying in that it involves companies buying and reselling personal data (data brokers, all against a background of surveillance and political issues as in the case of Cambridge Analytica). More recently, the subject of personal data has returned to discussions following the questioning of the use of Google Analytics and Google Fonts, particularly in France. Not to mention the leaks of personal data that occur very regularly.

Cybersecurity is present everywhere, through security breaches and other incidents that we hear about regularly. Today, it would seem aberrant or even irresponsible to offer a digital service that is not secure. However, this area requires many skills as well as constant monitoring. Again, digital sobriety can reduce the attack surface of a digital service. In return, care must be taken to ensure that the protection of the user does not force him to update his applications and software too often, under penalty of tending towards software obsolescence. Likewise, open source makes it possible, via total transparency, to prevent the presence of vulnerabilities.

Ethics is a complex but necessary subject in the digital field. It is often at the heart of discussions, especially on the vast subject of algorithms and machine learning, for example in the case of self-driving cars. In order to design a digital respectful of individuals, the question of ethics is inseparable.

Finally, technological solutionism, largely theorized by Evgeny Morozov, warns that digital is not always an appropriate solution. This awareness is all the more essential when we seek to reduce the environmental impact of digital technology.

Digital sobriety as part of the Greenspector’s work.

At Greenspector, digital sobriety is at the heart of our business. Even if our primary concern remains the reduction of the environmental impacts of digital services, all this is accompanied by considerations related to digital sobriety technology. The inextricable links between the different aspects of this subject mean that it is essential to guarantee a global approach so as not to miss an area for improvement, or even to avoid providing a recommendation that would harm the users in one way or another (deterioration of accessibility, security risk, etc.). If the impact is not always directly measurable or the seemingly minimal gain from the point of view of sobriety, other axes such as accessibility, the absence of captological mechanisms, and respect for privacy will contribute to making a more resilient product. This is why (and this is just one example among many), we encourage our customers not to directly integrate content from third-party services such as Youtube, Twitter, and others.

Get in touch

For this, Greenspector supports its customers in the eco-design of products throughout the life cycle of the project, but also in the measurement of consumption and the monitoring of impacts over time, in addition (for example) to an improvement process. These are the principles that we also apply to our own products.

In order to work for a digital system that respects people and the planet, it seems essential to apply these values right down to the proposed working framework: allow everyone the possibility of teleworking as much as necessary, insist on the right to disconnect and give everyone the opportunity to adapt their schedules to their own needs. There is also the desire to free up time for everyone to carry out digital monitoring, to create spaces to share the results of this monitoring and to support the development of skills.

Resources to go further

The resources to become aware of digital sobriety are multiplying, but here are already two good starting points :

Does a sober site have to be ugly?

Posted on July 11, 2022July 12, 2022 by Laurent DEVERNAY

Reading Time: 8 minutes

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.

Quick access
Eco designed Sites Ranking
Methodology
Ranking Analysis
Conclusion

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.

Here are the lists in question:

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.

Find out how Greenspector assesses the environmental footprint of a digital service.

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?

The reasoning is pretty much the same for:

https://www.wholegraindigital.com/ (EcoIndex B, EcoScore Greenspector 58… and some animations, some of which are continuous)
https://www.ec-lyon.fr/ (EcoIndex B, EcoScore Greenspector 59… and a carousel that should be avoided)
https://becolourful.co.uk/ (EcoIndex A, EcoScore Greenspector 60)
https://heylow.world/ (EcoIndex A, EcoScore Greenspector 62)
https://flowty.site/- (EcoIndex B, EcoScore Greenspector 63)
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.treebal.green is a much richer variant graphically and for all that quite sober.

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.

Metaverse and Digital Sobriety

Posted on June 22, 2022June 22, 2022 by Laurent DEVERNAY

Reading Time: 5 minutes

The concept of the Metaverse isn’t new, and some may even remember Second Life, some consider it to be its first manifestation. The idea is to offer a virtual environment via what is now called XR (eXtended Reality), a mixture of augmented reality (a bit like Pokemon Go) and virtual reality (the older ones will think of the film The Lawnmower Man but we will prefer the example of Oculus Quest).

In October 2021, Meta (formerly called Facebook) announced that it was going all out on the subject of the Metaverse. A huge amount of investment is needed to create 10,000 jobs and train those who will work in this field. Many large companies have followed suit so as not to miss out.

The ultimate goal would be to provide users with a potentially 3D immersive environment where they could find their favourite brands and interact with whoever they want without leaving their homes.

Coupled with cryptocurrencies and NFTs, the metaverse would even be one of the pillars of Web3.

Like connected glasses, this is a digital Arlesian, and we are entitled to wonder if this new attempt will be successful this time. Except that the real question is whether the metaverse is compatible with current issues related to digital, which we find in particular through Responsible Digital.

Metaverse and Digital Sobriety

By taking up the main challenges of Responsible Digital, let’s see what we can expect from the metaverse.

Accessibility

While more than 96% of websites have at least one accessibility error, the accessibility of the web as it exists today remains very problematic. Likewise, remember that access to the web remains complicated for a large part of the world’s population, whether due to an outdated device, an insufficient internet connection or simply insufficient skills to be able to fully use the digital tools. Including these three issues, Digital illiteracy affects 17% of the French population.

In such conditions, it’s a safe bet that the metaverse will not come to fix things. In the metaverse, those who are unable to access the web in satisfactory conditions today will probably be left out. Not to mention that the prerequisites in terms of the device power and internet connection may be much higher (but we will come back to this later).

Security

Digital illiteracy has a substantial impact on security: if individuals are not sufficiently prepared to use digital tools, they are exposed to risks they cannot control. There is no doubt that the metaverse will come with new attack opportunities. We can already imagine to what extent such an immersive universe and today also linked to major brands can offer new vectors for phishing. It is also to be feared that, in order not to interfere with the immersion or the comfort of the users, safety takes a back seat.

Capturing (and manipulation) attention

Attention capture (see French CNUM report in PDF) consists of setting up design mechanisms (scatological mechanisms or dark patterns) to retain the user’s attention for as long as possible. In the metaverse, one can imagine that this will only get worse, one of the objectives being immersion. We are exposed to more than 5000 advertising stimuli each day, especially via the web. Based on the list of companies contributing to the metaverse, this is unlikely to succeed.

How, under these conditions, will our filter bubble evolve? Is there not a risk of seeing the influence of certain digital players on the political context increase? Should we be worried about Meta taking over the subject of the metaverse (in short: yes)?

Here are just a few questions among many others (on the moderation of this new shared space, the rights to the content that will be (re-)produced there, etc.).

Digital Sobriety

It is interesting to consider the metaverse from the angle of environmental impacts.

You will quite easily find experts extolling the merits of the metaverse to unclog the roads, project yourself into spacious offices at a lower cost, perform surgeries from the other side of the world, etc.

It’s always thrilling to hope that someone will come up with a product that solves a whole host of issues we didn’t even know existed. In this specific case, I would be in favour of the Design is the Problem approach. Nathan Shedroff explains how to rethink design in order to come up with truly sustainable solutions. He takes the example of the Segway PT, a personal, electric and removable/repairable transport device. Presented in this way, one would think that it would be a good idea for the planet. Except that the real concern of this device is that it does not meet a real user need. Indeed, public transport, cycling and walking can ideally replace it, with a much lower impact and financial cost. Any resemblance to electric scooters is purely coincidental (or not).

The metaverse poses the same problem in its very concept: it seeks to meet a myriad of diverse and varied needs, even though less impactful and costly alternatives exist. Only its technical and innovative varnish promotes its adoption and leads large companies to blindly embark on it.

In order to assess the environmental impact of the metaverse, several elements must be considered.

On the one hand, generating and displaying an immersive virtual environment is very resource-intensive. Below 90 fps, the user is exposed to nausea and dizziness. In addition, in recent years, everyone has been able to discover increasingly magnificent 3D virtual environments (largely through video games). It, therefore, seems essential to align with these types of visuals, which will be costly both for their products and for their display.
On the other hand, the use of the metaverse (in particular taking into account the elements indicated in the previous point) will probably require better user equipment (even new user equipment) as well as an internet connection with a very high speed (would not be -what to display a virtual environment while holding the 90 fps). Knowing that very logically (and this is also what we have clearly seen with video games), renderings and attendance should (if all goes well for the metaverse) increase over time, encouraging the race to renew equipment.

Even as initiatives are multiplying to reduce the environmental footprint of digital technology, the arrival of the metaverse, therefore, represents a major risk.

Conclusion

Efforts to extend Responsible Digital principles to the web are increasingly intense, and the work is already colossal. The arrival of Web3 and more particularly of the metaverse risks making these principles all the more essential but also more difficult to enforce. It seems (for once) easier to generate jobs and spend crazy sums for a concept whose usefulness remains to be proven than to work to make the web less impactful and more accessible for all.

The metaverse may indeed be designed with an eye to efficiency, or may even follow certain principles of Responsible Digital (though I seriously doubt this). In any case, the very nature of the project suggests that sobriety is not considered. It is all the more regrettable as the Digital Responsible itself contains the elements and principles that would help the achievement and adoption of the metaverse. However, the priorities seem to be different, and we can only regret to see once again the means of concentrating on something that will probably not contribute to making the web better. In the end, the metaverse seems to go against the efforts needed to mitigate climate change.

CAPTCHA and digital sobriety

Posted on May 9, 2022May 10, 2022 by Laurent DEVERNAY

Reading Time: 3 minutes

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.

The accessibility of CAPTCHAs is a recurring problem, and there are many solutions. The main watchword here is not to use CAPTCHAs. Thus, form security should no longer be the responsibility of users. The subject has been previously discussed, among others at Orange.

There are several possibilities:

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.

Resources to go further

How to make CAPTCHA accessible to everyone

Cleaning up bad bots (and the climate)