Responsiv design – grunder
Anpassa webblayouten till olika skärmstorlekar och tillgängligt utrymme. Genomgången kopplar webbstandarder och utvecklingsmetoder till konkreta webbsidor och mindre projekt.
- Nivå 1
Förstå → Se exempel → Träna
Förstå
Kärnan
Responsiv design innebär att layout, mått och ibland innehåll anpassas så att sidan fungerar på olika enheter. Flexibla mått och media queries är vanliga verktyg.
Så arbetar du
Börja med en enkel flexibel layout och lägg till brytpunkter först där innehållet faktiskt behöver en annan struktur.
Nyanser och begränsningar
Responsiv design är mer än att göra allt mindre. Läsbarhet, touchytor och innehållsordning behöver också fungera.
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
- Tre kolumner på stor skärm kan bli en kolumn på mobil när utrymmet inte längre räcker.
- 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 responsiv design – grunder?
Träna
Övning
Beskriv hur du skulle använda kunskapen om responsiv design – grunder i ett mindre webbprojekt.
Sammanfattning
- Anpassa webblayouten till olika skärmstorlekar och tillgängligt utrymme.
- 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ångenBilder & media för webben
Välj lämpliga format och dimensioner för bilder och media så att kvalitet, prestanda och användning balanseras.
Läs genomgången