Eco-ontwerp
Als milieubewust bedrijf hebben we ervoor gekozen om samen te werken met het bureau WebSenso om een eco-ontworpen website te ontwikkelen. Deze collectieve aanpak stelt ons in staat om digitale prestaties en ecologische verantwoordelijkheid met elkaar te verzoenen.
Daarom hebben we een site ontwikkeld die aan uw behoeften voldoet en tegelijkertijd onze digitale voetafdruk minimaliseert.
HOE HEBBEN WE DAT GEDAAN?
- Strak ontwerp : we hebben alle onnodige elementen verwijderd
- Essentiële inhoud : elk stukje informatie is zorgvuldig geselecteerd
- Geoptimaliseerde bronnen : gecomprimeerde afbeeldingen, lichtgewicht code, enz.
WAT IS ECODESIGN?
Web-ecodesign is een benadering die gericht is op het verminderen van de milieu-impact van een website gedurende zijn hele levenscyclus. Het bestaat uit het ontwerpen van sites die minder energie verbruiken en meer respect hebben voor het milieu, door middelen en code te optimaliseren en de voorkeur te geven aan groene hosts. Deze aanpak minimaliseert niet alleen de ecologische voetafdruk, maar verbetert ook de prestaties en gebruikerservaring.
Belangrijke indicatoren en benchmarks
Eco-index
EcoIndex is een gratis tool voor het beoordelen van de milieu-impact van websites. Het is ontwikkeld door de vereniging GreenIT en Nxtweb en stelt gebruikers in staat om de ecologische prestaties van hun webpagina’s te meten. EcoIndex analyseert criteria zoals paginagewicht, complexiteit en aantal zoekopdrachten en kent vervolgens een score van 100 en een cijfer van A tot G toe.
GTmetrix
GTmetrix is een tool voor het analyseren van webprestaties. Het evalueert de laadsnelheid en optimalisatie van websites door gedetailleerde statistieken en aanbevelingen voor verbetering te bieden.
GTmetrix gebruikt verschillende statistieken, zoals laadtijd, totale paginagrootte en aantal verzoeken. Het genereert uitgebreide rapporten met prestatiescores en biedt specifieke suggesties om de site te optimaliseren. Hoewel de nadruk vooral ligt op prestaties, draagt GTmetrix indirect bij aan ecodesign door lichtere en efficiëntere locaties aan te moedigen.
De standaard “115 good practices in web eco-design” ontwikkeld door het Green IT Collective.
Deze uitgebreide gids biedt een gestructureerde aanpak voor het ontwerpen en onderhouden van milieuvriendelijke websites. Het bestrijkt de gehele levenscyclus van een webproject, van specificatie tot end-of-life, inclusief ontwerp, implementatie, productie en gebruik.
De 115 best practices zijn onderverdeeld in zes hoofdsecties : Specificatie, Ontwerp, Implementatie, Productie, Gebruik, Ondersteuning / Onderhoud / Einde levensduur. Elke praktijk wordt op een beknopte manier gepresenteerd en biedt
ONZE SITE IN EEN PAAR BELANGRIJKE PUNTEN
Niveau van eco-design van de site bage-pontdevaux-tourisme.com
- Paginagewicht: Aanzienlijk verminderd
- Laadtijd: Geoptimaliseerd
- CO2-uitstoot: Geminimaliseerd
- Eco-index score:
- Startpagina: C
- Juridische mededeling: B
- Indicateurs GTmetrix :
- Startpagina: A (96%)
- Juridische kennisgeving: A (99%)
- Website Koolstof Calculator:
- Homepage: B (schoner dan 71% van alle webpagina’s)
- Juridische kennisgeving: A+ (schoner dan 94% van alle webpagina’s)
Het VVV-kantoor van Bagé Pont de Vaux zet zich in voor digitale soberheid
Door het project te lanceren om zijn bage-pontdevaux-tourisme.com website te herontwerpen, heeft ons bedrijf zich geëngageerd tot een serieuze en solide ecodesign-aanpak door de steun van het bureau in te roepen WebSenso dat gebaseerd is op betrouwbare normen en indicatoren op het gebied van web eco-design. WebSenso heeft ook meerdere kwaliteitsexpertise op dit gebied om specifieke doelstellingen te bereiken: het creëren van een lichtgewicht, efficiënte en milieuvriendelijke online aanwezigheid, toegankelijk, en er tegelijkertijd voor zorgen dat aan de behoeften van onze gebruikers wordt voldaan.
Streng geselecteerde keuzes
- Verminder het gewicht van webpagina’s: asynchroon laden van afbeeldingen, weinig lettertypen, vooraf laden van lettertypen…
- Beperk het aantal verzoeken naar de server zoveel mogelijk, zonder alle functionaliteit op te offeren
- Gebruikerstrajecten verder optimaliseren
- De manier waarop we onze inhoud ontwerpen herzien
- Optimalisatie van onze technische praktijken (aggregatie, minificatie, responsieve afbeeldingen,…)
Vanaf het begin van het project, een ontwerpmethode aangepast aan onze uitdagingen!
WebSen’SCORE: een collaboratieve beoordelingstool gemaakt door WebSenso
Met WebSenso gebruikten we WebSen’SCORE, een innovatieve assessmenttool waarmee we:
- Evalueer onze impact : Beginnend met een initiële score van X/5, verkenden we samen de verschillende mogelijke en aanbevolen ontwerpopties.
- Neem weloverwogen beslissingen : Via een interactief proces werd elke keuze besproken en had deze een directe impact op onze eindscore: X/5
Deze tool vergemakkelijkte onze dialoog en hielp ons de implicaties van onze beslissingen op het gebied van ecologisch ontwerp te begrijpen .
Gebruikersgerichte ontwerpmethodologie met UX-ontwerp
UX-design speelt een cruciale rol bij het verminderen van de milieu-impact van websites door middel van verschillende belangrijke benaderingen: vereenvoudiging en minimalisme, prestatie-optimalisatie, verbeterde navigatie, toegankelijkheid, vermindering van visuele vervuiling…
UX Design-methoden zoals focusgroepen en het sorteren van kaarten die worden uitgevoerd in het kader van het bage-pontdevaux-tourisme.com redesign-project, helpen om user journeys te optimaliseren en inhoud op een efficiënte en intuïtieve manier te structureren. Deze workshops zijn bedoeld als aanvulling op de technische uitdagingen van ecodesign met behoud van een hoge kwaliteit van de gebruikerservaring.
Participatief ontwerp betrekt gebruikers bij het ontwerpproces en maakt het mogelijk om samen oplossingen te creëren die nauwkeuriger aan hun behoeften voldoen. Deze aanpak beperkt de verspilling van middelen door de ontwikkeling van onnodige of complexe functies te vermijden die de site belasten.
Deze methode , aanbevolen en geleid door WebSenso , neemt actief deel aan ecodesign. Ze hebben ons geholpen ons te concentreren op gebruikersgerichte praktijken om reizen en contentontwerp te optimaliseren.
Ontwikkeling
Geoptimaliseerde caching
Om laadtijden en resourceverbruik te verminderen, hebben we efficiënte caching geïmplementeerd. Statische bestanden (CSS, JS, afbeeldingen) worden aan de gebruikerszijde opgeslagen om te voorkomen dat ze bij elk bezoek opnieuw worden geladen.
Lichtgewicht HTML-structuur
De HTML-code is opgeschoond om onnodige elementen te voorkomen. Een vereenvoudigde structuur verkleint de paginagrootte en versnelt de interpretatie van browsers.
Asynchroon laden van resources
Niet-kritieke items, zoals afbeeldingen, video’s en widgets, worden lazy loading geladen met behulp van lazy loading-technieken. Dit verbetert de prestaties en verkort de initiële laadtijd.
Geoptimaliseerde serververzoeken
Uitwisselingen met de server zijn verminderd door onnodige verzoeken te beperken en gegevens waar mogelijk te groeperen. Het gebruik van geoptimaliseerde query’s, gecombineerd met response caching, verkort de responstijd en verbetert de paginaweergave.
Integratie
Optimalisatie van activa
Om de site lichter te maken, werden alleen de noodzakelijke lettertypen geïntegreerd, met geoptimaliseerde formaten zoals WOFF2. Kritieke resources maken gebruik van preloading, en pictogrammen zijn gegroepeerd in een enkele sprite om aanvragen te beperken. De beelden, gecomprimeerd en geconverteerd, combineren lichtheid en visuele kwaliteit.
Minder externe afhankelijkheden
We hebben het gebruik van bibliotheken van derden, zoals jQuery, verminderd en geven de voorkeur aan native oplossingen en aangepaste CSS. Dit vermindert het gewicht van de site en biedt volledige controle over de code.
Standaard, krachtige code
De code volgt de huidige standaarden en CSS Lint-regels. Dit vereenvoudigt het afspelen, verbetert de prestaties aan de browserzijde en zorgt voor een betere duurzaamheid.
Vermindering van de impact op het milieu
We hebben de kracht van de animaties beperkt, de DOM geoptimaliseerd en efficiënte caching mogelijk gemaakt. Deze keuzes verminderen het energieverbruik en verbeteren tegelijkertijd de gebruikerservaring.
Partners zijn in een ecologisch verantwoorde aanpak is essentieel. De expertise van WebSenso in combinatie met onze visie heeft het mogelijk gemaakt om een krachtige, duurzame site te creëren die in lijn is met onze waarden.