Media & prestanda
Optimering av bilder, en genomtänkt designidentitet och välvalda webbfonter.
0% klart · 8 frågor
Att slänga in en ooptimerad 5 MB-bild rakt i HTML-strukturen är enkelt, och direkt skadligt för din sajt. Den som sitter på mobil med dålig täckning betalar priset i väntetid. Och att öppna färgväljaren utan ett designbeslut slutar med hex-koder som inte hänger ihop, en sida som känns hemmagjord utan att du riktigt kan peka på varför.
I det här området hanterar du det som gör en sida tung och det som gör den snygg, som två sidor av samma hantverk. Du optimerar bilder som är lagliga att använda, fattar designbeslut innan du rör koden och omvandlar besluten till variabler och typsnitt som resten av din CSS vilar på.
- 1 Bildformat & upphovsrätt Välj rätt digitalt format, undvik Retina-fällan på mobiler och hitta lagliga CC0-bilder.
- 2 Designstilar & identitet Analysera ett riktigt varumärkes brand-identitet: tre adjektiv, en stilpersonlighet och rätt typsnitt och färger.
- 3 CSS-variabler Deklarera designbeslut som CSS-variabler, ett enda ställe att ändra färger och avstånd oavsett hur många element som använder dem.
- 4 Typsnitt & webbfonter Ladda in Google Fonts rätt, välj ett fontpar och förstå varför ordningen i head-taggen påverkar laddningshastigheten.