At a time when the effects of climate change, the transformation of the oceans and the loss of biodiversity are increasingly felt, many questions are being asked about the environmental footprint of digital technologies.

If not reducing our overall energy consumption, the massive digitization of our lives and production processes has only accelerated the production of greenhouse gasses. 

This is where Low-Tech comes into play, a trend that is characterized by the implementation of simple, fast, inexpensive technologies that are accessible to all and use common and local means. It promotes open, accessible and sustainable techniques and technologies, integrating environmental protection from the design phase.

What does a Low-Tech website look like?

Ecodesign is about UX, as well as templates, typography, colors, background, images ...

The simplification of the UX is an important point in the design of a Low-Tech site. It allows to limit the number of clicks, to fluidify the navigation and thus to shorten the users' path. The graphic codes of the interface design must also be simple and clean, in order to make the site as minimalist as possible. You can recognize a Low Tech site from far away and what could be considered as a basic site some time ago is now a site with a very identifiable and virtuous Ux-Ui approach.

What are the best practices to consider?

In the design of a Low-Tech site, there are several points to consider, such as

• The number of pages: publish as few pages as possible, reduce them or favor the one-page.
• The typographies: use typographies from web libraries and Police System. The best format is WOFF and WOFF2.
• Colors: 3 colors maximum are recommended, colors and not greedy (best method: two-color process), with a black background at 100%, no texture and use the RGB colors the least consuming.

But we must also pay attention to several other important components such as 

• The choice of features: eliminate non-essential features. Namely, 70% of the features requested by users are not essential and 45% are never used.
• Mobile-first design: because of the size of the screen, this one forces us to go to the essentials and to simplify the UX and the number of features.
• The preference for static sites: limit interface animations, animated GIFs, carousels in Autoplay, because they consume a lot of energy.
• Lazy Loading recommendation: progressive display of information. Avoid Chatbot, Widgets and Plugins (news feed, social networks, Google Maps, interactive map, embedded videos, ...)

Eco-design affects all aspects of the site, from its globality to its micro-details:

• Search: prefer assisted input to auto-completion.
• Drop-down list: check the relevance of the available choices.
• Form: use only if necessary and limit the fields (only the required ones).
• Pagination: avoid infinite scrolling and recommend pagination or a "See more" button instead. 
• Alerting: do not continuously request alerts (e.g. useless confirmation emails).
• Wording: in order to reduce its impact, write your text clearly and concisely, and use bulleted lists rather than blocks of text, for faster reading. Choose words that more accurately reflect the impact of digital technology (e.g., use the word "download" rather than "play a video").

Content processing and natural referencing

If the site is properly optimized for search engines, the user will find more easily what he is looking for and will avoid unnecessary navigation. An eco-designed site will therefore have a better chance of arriving at the top of the search results. 

The lightness of the content (image and text) in terms of quantity and quality is also a crucial point for SEO and a pleasant and fluid user experience.

But how to adapt the images and content of my site?

In a minimalist approach, the content (text and images) is an important point to take into account when designing. In addition to selecting the visuals that will be used, it is necessary to deal with the weight of the files and respect some good practices. 

Images

It is important to favour adapted dimensions, screening, monochromy and reduced quality which allow a lighter weight. 

• Create light visuals.
• Limit the number of images and videos on the page.
• Insert a smaller image block (Conteners).
• Usecase team pages: think about group photos rather than individual ones. 
• Interesting ideas: Offer a configuration option with or without image. Or display the image on click.

Optimization of file size

To reduce the ecological impact, it is important to optimize the weight of the files:

• Vector: prefer vector to image, as well as Glyph.
• Videos: do not use automatic video playback, limit the time to 1'30 and banish video background.

In order to keep page weights as small as possible, we can choose to display them on the index of articles only when the user wishes it, or not to display them on this same index when the articles are old (older than 4 months).

Compression

Think of compressing the contents according to their uses, in the options proposed by default and favour the least energy consuming options.

• Images: download the image in its smallest size (by default).
• Media: media not downloaded / automatically viewed (avoid auto-play videos).
• Documents to download: optimize and compress documents (pdf) and provide a summary if the document is very long.

Image compression as well as the right export format, allows to reduce the loading time and the footprint on the hosting servers.

• Compressing the image: simplify the photo code in a way that is imperceptible to the human eye. 
• Good export formats: photo (jpg or webp), image (svg), icon (glyphs, css style).
• Pictograms: cut icons with erased edges.

Responsive Image

Don't forget to provide a selection of image formats and sizes to the browser so that it can choose which one to load depending on the terminal used or the connection speed.

Thus, to create an effective low-tech website, it is essential to use readable fonts and contrasting colors to improve readability. This will help users navigate the site easily and understand the content quickly. Next, it is important to use simple icons and images to help with navigation. Users should be able to quickly understand where they are on the site and how to access other pages. Also, to collect user information, it is important to use short and simple forms. Users should be able to fill out forms easily without being overwhelmed with too much information. 

Finally, it is important to use clear buttons and calls to action to direct the user to the next steps. Users need to know exactly what to do to continue navigating the site. It is also important to test the site with users to get feedback and ideas for improvement.

To learn more about Low-Tech, Green code and eco-design, or how to adapt the images and content of your website or how to prepare your hosting to consume less and be more Eco-Friendly, contact us.