Trend of Eco-Friendly Web Design: The Indispensible “Mobile-First”

Frédéric Bordage, expert in sustainable digital technology and author of the book “Eco-conception web: les 115 bonnes pratiques : Doper son site et réduire son empreinte écologique” (“Web Eco-Design: 115 Good Practices: Boosting Your Site and Reducing Your Ecological Footprint”) believes that the “mobile-first” approach should be favored over others. This concept consists of designing an online website/service dedicated to mobile devices.

Creating interfaces for desktops should only be carried out if the functional and ergonomic benefits are justified. In this case, the Responsive Design + Server Side Components (RESS) architecture is recommended. “This configuration is based on RWD rules (automatic adaptation of the interface to the context of use), but selects server side resources that will be sent to the computer.” Therefore it makes it possible to avoid “unnecessarily consuming bandwidth” or “overloading the computer’s processor and memory for unnecessary processing”. As Frédéric Bordage points out, “It is a question of pushing the good practice of providing specific code to a particular browser to the extreme.”1

In addition to responsive design, rendering code with server-side components allows a website to easily adapt to screens of any size. One of the main hopes of web components is to be able to easily share and use them with other browsers. This sharing is possible because web components are based on standards that all major browsers strive to implement.2 Thus, adapting a website to different screen sizes becomes easier and more intuitive. This process also saves energy.

Be “Mobile Friendly”

To make a website display correctly on mobile devices, there are still a few things to watch out for regarding technical optimization. For example, you need to:

– Limit the loading time of its pages to 4 seconds maximum

– Reduce the weight of its web pages as much as possible and stay under 1.5 MB

– Lower its speed index to less than 1000 3

Images

To be able to meet these conditions, one is forced to follow tips that are potentially eco-friendly. One of them is to control the size of the images on a web page to limit its weight. As Frédéric Bordage explains, “An image of 350 x 350 pixels encoded in 24 PNG weighs 41 KB. Resized in the HTML code, the same displayed image as a thumbnail at 70 x 60 pixels still weighs 41 KB, whereas it should not exceed 3 KB! That’s 38 KB downloaded each time for nothing… “4 For videos, it will also be favorable to “allow for several formats (size, frame rate, audio compression, etc.) depending on the context in which the videos are played (desktop computer, Wi-Fi tablet, EDGE smartphone, etc.).”5

Since 2018, images in SVG format (Scalable Vector Graphics) have been popular because of their small and scalable characters. By nature, this image format is based on the XML-language. More specifically, it allows the resizing of images without any loss in quality, regardless of screen size. At the same time, an SVG file is compact, so it offers a great advantage in terms of mobile loading.6

Writing Fonts

Regarding fonts, you should limit yourself to one or two typographies. Indeed, fonts also have an impact on data consumption.7 Moreover, if the website’s design allows it, it would be wise to “favor standard fonts, because they are already included on the Internet user’s computer, so there is no need to download them. This saves bandwidth while speeding up the website display.”8 If a single glyph is sufficient, they do not need to use an image to have the same effect. The glyphs are included in the system fonts, so they do not need to be downloaded.

A Marketing Necessity

In France, petitions made on mobile devices exceeded those made on computers in 2017, according to Google. The “mobile-first” approach is therefore not only more environmentally friendly, it is also an indispensable digital strategy on the current market. “Mobile-first is a mobile-optimized web design concept that goes beyond Responsive Web Design. It consists of designing a site with a focus on the mobile version and gradually adapting the web design for larger screens.”⁹

Even for SEO, a “mobile-first” website is effective because it easily gets a better ranking in search results. In fact, since 2016, Google has been promoting websites with a mobile-friendly display.¹⁰

Think more intelligently

The « mobile-first » design could also lead the designer to think more intelligently about essential elements of the website and to reduce the non-essential elements due to the limited size of the mobile screen. Similarly to a small house, each square meter of space should be calculated to only place essential furniture and to not clutter up the area. Conversely, if you start by designing a website from a large screen (27 inches, for example), you risk putting too many elements on the page from the start. It will then pose difficulties for responsiveness. And even if you manage to squeeze all the content onto a laptop screen, the page may be too long. Therefore,the user will have to scroll through a good part of the content before accessing the one that interests them. This risks them losing their patience and making an unpleasant experience.

In the book « Relever le défi du Web mobile : bonnes pratiques de conception et développement » (“Taking Up the Challenge of the Mobile Web: Good Design and Development Practices”), François Daoust and Dominique Hazaël-Massieux also provide some advice: “Mobile browsers generally do not offer the possibility to directly access the beginning or the end of the page. A good mobile web page is therefore not too long: as an order of size, limit yourself as much as possible to five screen heights (i.e. about 2,000 pixels high on these medium resolution screens).”¹¹

This article has been written by Shu-Min Huang.