Sustainable Web Design In 20 Lessons

Hvad indeholder bogen

1. 01

   Grundlæggende bæredygtigt webdesign

   Opdag hvad bæredygtigt webdesign egentlig betyder — både for miljøet og for de mennesker, der bruger nettet. Denne åbningslektion dækker, hvordan websites bidrager til CO₂-udledninger, hvorfor etisk design er vigtigt, og hvordan manipulerende praksisser som falsk hastværk og automatiske konverteringer skader brugerne. Du vil forstå det fundament, som alt andet i denne bog bygger på.

2. 02

   Forstå CO₂-aftryk

   Lær hvor konceptet CO₂-aftryk stammer fra, hvilke drivhusgasser der er involveret, og hvorfor det er så kompliceret at måle et websites præcise udledninger. Du udforsker værktøjer som WebsiteCarbon og EcoGrader til at estimere dit sites påvirkning, forstår hvilke faktorer der indgår i beregningen, og lærer at spotte greenwashing, når virksomheder fremsætter vildledende miljøpåstande.

3. 03

   Grøn webhosting

   Valget af den rigtige webhost kan være en af de største bæredygtighedsbeslutninger, du tager. Denne lektion forklarer forskellen mellem grøn og grå strøm-hosting, hvordan man evaluerer udbydere, og hvorfor hosting drevet af vedvarende energi ikke behøver at koste mere. Du vil også se forskning, der viser, at bæredygtige websites giver servere mulighed for at håndtere mere trafik med mindre hardware.

4. 04

   Content delivery networks

   Lær hvordan content delivery networks forkorter den afstand data rejser, reducerer serverbelastning gennem caching og tilføjer et sikkerhedslag mod angreb som DDoS. Denne lektion dækker, hvornår et CDN giver mening, afliver myten om at kun-lokale sites ikke har gavn af et, og guider dig trin for trin gennem opsætningen af Cloudflare.

5. 05

   Sidevægt-budgetter

   Et sidevægt-budget giver dit team et fælles mål for, hvor tungt hver side må være. Lær hvordan man sætter et realistisk budget, hvorfor det er vigtigt for bæredygtighed og performance, og hvordan forskellige filtyper bidrager til sidens størrelse. Inkluderer indsigter fra Tom Greenwood hos Wholegrain Digital om, hvordan budgetter har fungeret i virkelige kundeprojekter.

6. 06

   Indhold der dør

   Anslået 90 % af al data, der nogensinde er skabt, tilgås aldrig igen — men det bruger stadig energi, hvor det ligger på servere. Denne lektion udfordrer dig til at være kritisk over for det indhold, du publicerer, opdatere det forældede og fjerne det, der ikke længere er relevant. Du lærer, hvorfor det er essentielt for et bæredygtigt web at behandle indhold som et ansvar og ikke en engangsopgave.

7. 07

   Tilgængelighed

   Tilgængelighed og bæredygtighed deler det samme fundament: at nå flere mennesker med mindre spild. Lær om kognitiv, visuel, auditiv, motorisk og tale-tilgængelighed, WCAG-overensstemmelsesniveauer, og hvordan semantisk HTML gør dit site naturligt tilgængeligt for skærmlæsere og hjælpeteknologi. Inkluderer praktiske testtips til at verificere, at dine implementeringer virker.

8. 08

   Minimalistisk og letvægtsdesign

   Minimalisme på nettet betyder at vise kun det, der hjælper dine besøgende med at forstå dit indhold — intet mere. Lær hvorfor mange billeder ikke beskriver det indhold, de ledsager, hvordan whitespace skaber bedre design, og hvordan typografi kan erstatte tungt billedmateriale. Du ser virkelige eksempler på oppustede versus rene websites og lærer at stille spørgsmål ved hvert element, du publicerer.

9. 09

   Mørk/lys tilstand og farver

   Mørk tilstand kan spare op til 47 % batteri på OLED-skærme, og over en milliard smartphones bruger OLED i dag. Lær forskellen mellem LCD og OLED, hvorfor blå pixels bruger mere energi end røde eller grønne, og hvordan en mørk-tilstand-først tilgang med CSS prefers-color-scheme lader besøgende vælge, hvad der fungerer for dem, uden ekstra JavaScript.

10. 10

    Billedoptimering

    Billeder er den tungeste og mest udbredte medietype på nettet. Denne lektion guider dig gennem skalering, komprimering og lagring af billeder i det rigtige format — med et stærkt argument for WebP frem for PNG og JPG. Du følger med i Adobe Photoshop for at optimere billeder til web og lærer, hvorfor selv dit CMS kan modarbejde dig.

11. 11

    Videooptimering

    Video er en af de mest forurenende indholdstyper, du kan tilføje til et website. Lær hvorfor autoplay altid bør slås fra, hvordan man komprimerer videoer med værktøjer som VideoProc, hvilke formater man bør bruge, og en teknik til kun at loade videoer, når en bruger klikker — ved at erstatte den indlejrede video med en letvægts billed-placeholder for at spare båndbredde.

12. 12

    Skrifttypeoptimering

    Brugerdefinerede skrifttyper kan tilføje hundredvis af kilobytes til hvert sideload. Lær forskellen mellem TTF, OTF, WOFF og WOFF2, hvorfor WOFF2 bør være din standard til web, og hvordan man fjerner unødvendige tegn med FontSquirrel. Du opdager også, hvorfor standard systemskrifttyper måske er det mest bæredygtige og læsbare valg af alle.

13. 13

    HTML-optimering

    Ren, semantisk HTML er skelettet i et bæredygtigt website. Denne lektion dækker 'less is more'-filosofien — undgå dybt indlejrede wrappers og div-suppe, brug beskrivende markup der hjælper browsere og hjælpeteknologi, minificér din HTML, og hvorfor inline styles og scripts gør mere skade end gavn. Du lærer også, hvorfor at kode fra bunden slår frameworks.

14. 14

    CSS-optimering

    CSS er en essentiel del af ethvert website, og optimering betaler sig hurtigt. Lær om afvejningerne mellem enkelte stylesheets og scoped CSS, hvorfor frameworks som Bootstrap tilføjer massive mængder ubrugt kode, hvordan man identificerer og fjerner CSS, man ikke længere har brug for, og hvorfor genbrugelige komponenter og minificering af stylesheets gør en målbar forskel.

15. 15

    JavaScript-optimering

    JavaScript rangerer lavt blandt programmeringssprog i energieffektivitet — hvilket gør optimering afgørende. Lær at holde din markup slank, foretrække vanilla JavaScript frem for tunge biblioteker som jQuery, bruge async og defer til at styre indlæsning, gemme DOM-referencer, samle DOM-ændringer og bygge komplette elementer, før de indsættes på siden for at minimere genrenderinger.

16. 16

    React- og Svelte-optimering

    React er kraftfuldt men tungt. Lær praktiske optimeringsteknikker inklusiv code splitting, production mode builds, React Fragments, useMemo, useRef, og hvorfor CSS-animationer overgår JavaScript-animationer. Du ser også, hvordan virtualisering af lange lister forhindrer browseren i at fryse. Til sidst møder du Svelte — et lettere compiler-baseret alternativ, der producerede en bundle næsten halvt så stor som Reacts.

17. 17

    Trackere og HTTP-forespørgsler

    Tredjeparts-trackere genererer enorme mængder data, tilføjer unødvendige HTTP-forespørgsler og krænker dine besøgendes privatliv. Denne lektion undersøger tracking-industrien — fra analyse til reklame — forklarer, hvilke oplysninger trackere indsamler om dine brugere, og argumenterer for at fjerne dem helt. Du lærer også, hvorfor reklamer kan stå for en enorm del af internettets trafik.

18. 18

    Service workers og caching

    Service workers fungerer som en reverse proxy mellem dit website og netværket og muliggør kraftfulde caching-strategier, der reducerer serverforespørgsler og indlæsningstider. Lær om network-first, stale-while-revalidate og cache-fornyelsesmønstre. Selvom service workers har et stort potentiale for bæredygtighed, diskuterer denne lektion også ærligt de udfordringer, der stadig mangler at blive løst.

19. 19

    API'er

    API'er driver næsten alle moderne websites og apps, men de kræver servere, der kører døgnet rundt. Lær hvordan du gør dine API'er mere bæredygtige gennem caching på browser-, CDN- og serverniveau. Denne lektion udforsker også, om serverless-arkitektur er grønnere end traditionelle servere, og hvilke programmeringssprog der bruger mindst energi og hukommelse.

20. 20

    E-mails og nyhedsbreve

    Hundredvis af milliarder e-mails sendes hver dag, og en enkelt billedtung e-mail kan udlede helt op til 50 gram CO₂. I denne afsluttende lektion lærer du, hvordan man optimerer e-mail-billeder, hvorfor rene tekst-e-mails ofte overgår HTML-nyhedsbreve i leveringsrate, og hvordan man anvender bæredygtighedsprincipperne fra tidligere kapitler — som sidevægt-budgetter og indholdsbeskæring — på sin e-mail-strategi.