Teckenkodning, typografi & färgschema
Förstå hur teckenkodning och grundläggande typografi och färgval påverkar textens korrekthet och gränssnittets läsbarhet. Genomgången kopplar webbstandarder och utvecklingsmetoder till konkreta webbsidor och mindre projekt.
- Nivå 1
Förstå → Se exempel → Träna
Förstå
Kärnan
UTF-8 gör att många språk och tecken kan representeras konsekvent. Typografi och färgschema påverkar hierarki, läsbarhet och visuellt uttryck.
Så arbetar du
Ange korrekt teckenkodning och bygg en tydlig typografisk hierarki innan dekorativa detaljer läggs till.
Nyanser och begränsningar
Ett estetiskt färgschema kan fortfarande ge dålig läsbarhet om kontrasten mellan text och bakgrund är för låg.
I ett webbprojekt
Koppla kunskapen till ett tydligt användarbehov, en definierad struktur och konkreta kvalitetskrav. Bygg i små steg och kontrollera både funktion, standarder, tillgänglighet och dokumentation innan projektet avslutas.
Exempel
Exempel
- En sida använder UTF-8 så att å, ä och ö visas korrekt och väljer textstorlek och kontrast som fungerar i längre stycken.
- Förklara därefter vilket webbtekniskt val som är viktigast för att lösningen ska bli robust, begriplig och ändamålsenlig.
Så gör du
- 1Bestäm innehållets struktur och semantik i HTML.
- 2Separera presentationen i CSS.
- 3Bygg layouten så att den kan anpassas till olika skärmar.
- 4Optimera bilder, media, typografi och teckenkodning.
- 5Kontrollera resultatet i relevanta viewport-storlekar.
Vanliga misstag
Vanligt misstag
Att använda HTML-element enbart efter hur de ser ut.
Bättre
Välj HTML efter semantisk betydelse och använd CSS för presentation.
Struktur och utseende har olika roller.
Vanligt misstag
Att använda onödigt stora mediefiler.
Bättre
Anpassa format, dimensioner och komprimering efter användningen.
Filstorlek påverkar laddningstid.
Fundera
Vilket val skulle vara viktigast att kunna motivera när du arbetar med teckenkodning, typografi & färgschema?
Träna
Övning
Beskriv hur du skulle använda kunskapen om teckenkodning, typografi & färgschema i ett mindre webbprojekt.
Sammanfattning
- Förstå hur teckenkodning och grundläggande typografi och färgval påverkar textens korrekthet och gränssnittets läsbarhet.
- Använd webbstandarder och välj teknik efter dess avsedda roll.
- Testa funktion, tillgänglighet och interoperabilitet systematiskt.
- Dokumentera viktiga tekniska, juridiska och etiska val i projektet.
Relaterade genomgångar
Fortsätt med något som hänger ihop med den här genomgången.
HTML – struktur & semantik
Använd HTML för att beskriva innehållets struktur och betydelse med lämpliga element.
Läs genomgångenCSS – presentation & separation
Använd CSS för färg, typografi, avstånd och layout utan att blanda presentation med HTML-strukturen.
Läs genomgångenResponsiv design – grunder
Anpassa webblayouten till olika skärmstorlekar och tillgängligt utrymme.
Läs genomgången