9 Responsivt design

I dette kapitlet lager du nettstedet til Fotoklubben. De fleste ser på bildene på mobilen, så nettstedet må virke både på mobil og på PC. Lagre alt du lager i dette kapitlet i mappen kap09-responsivt.

9.1 Nettsiden på mobil

fotoklubben/index.html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fotoklubben</title>
  <link rel="stylesheet" href="stil.css">
</head>

En nettside er responsiv når den tilpasser seg skjermen, slik at den er lett å bruke på mobil, nettbrett og PC. Kodelinje 3 er viktig for at det skal virke.

  1. Les koden ovenfor. Hvilken kodelinje er ny for deg?
  2. Lag mappen fotoklubben med index.html og stil.css. Forsiden skal ha en <header> med en meny, og Månedens bilde i et <figure>. Skriv <head> uten kodelinje 3 først. Gi siden farger, skrift og en meny med flexbox.
  3. Åpne forsiden, og åpne utviklerverktøyene. Slå på mobilvisningen med , eller med knappen som ser ut som en mobil og et nettbrett. På Mac trykker du . Velg en mobil fra lista øverst. Hvordan ser siden ut?
  4. Legg til kodelinje 3 i <head>. Last inn siden på nytt i mobilvisningen. Hva er forskjellen? Hva tror du kodelinje 3 forteller mobilen?

<meta name="viewport"> skal stå i <head> på alle sidene du lager. Uten den virker heller ikke mediespørringene i 9.3 som de skal.

  1. Prøv flere ulike mobiler og nettbrett i lista. Hva fungerer godt, og hva fungerer dårlig på forsiden?
  2. Klikk på og dra i kanten av mobilvisningen for å gjøre skjermen smalere og bredere. Ved hvilken bredde begynner siden å se rotete ut?

9.2 Mobil først

Kode A
main {
  width: 900px;
  margin: 0 auto;
}
Kode B
main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1rem;
}

Det er lettest å lage en responsiv side for mobil først. Når det er plass til mer, legger du til regler for større skjermer. Faste bredder, som width: 900px, er det vanligste problemet på mobil.

  1. Les kodebitene ovenfor. Hvordan ser <main> ut på en mobil som er 360 piksler bred med hver av dem?
  2. Gi <main> regelen fra Kode A en stund. Se på siden i mobilvisningen. Kan siden rulles sidelengs?
  3. Endre til regelen fra Kode B. Hva gjør padding: 0 1rem på mobil?
  4. Gå gjennom stil.css, og finn alle regler med width eller height i piksler. Trenger du dem? Erstatt dem med max-width, eller fjern dem.

Lag skissen av en side for mobil først, med alt innhold i den rekkefølgen det skal leses. Bestem deretter hva som skal stå ved siden av hverandre på en stor skjerm.

  1. Hva er viktigst for en som besøker Fotoklubben fra mobilen? Står det øverst?

9.3 Mediespørringer

fotoklubben/stil.css
header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 600px) {
  header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

En mediespørring lar deg bruke ulike regler for ulike skjermbredder. Reglene inne i @media (min-width: 600px) brukes bare når vinduet er minst 600 piksler bredt.

Nedenfor ser du den samme siden på en mobil som er 360 piksler bred, og i et bredere vindu.

Mobil, 360 px
PC
  1. Les koden ovenfor. Gjett hvordan toppen av siden ser ut på en mobil, og hvordan den ser ut på en PC.
  2. Erstatt regelen for header i stil.css med reglene ovenfor. Gjør vinduet smalt og bredt. Ved hvilken bredde endrer toppen seg?
  3. Endre 600px til 900px. Hva skjer? Endre tilbake.
  4. Lag en mediespørring som gjør <h1> større når vinduet er minst 600 piksler bredt.

Nedenfor ser du fire mediespørringer. Bare én av dem er riktig.

Kode A
@media (min-width: 600) {
  h1 { font-size: 3rem; }
}
Kode B
@media (min-width: 600px)
  h1 { font-size: 3rem; }
Kode C
@media (min-width: 600px) {
  h1 { font-size: 3rem; }
}
Kode D
@media min-width: 600px {
  h1 { font-size: 3rem; }
}
  1. Finn kodebiten som er riktig. Forklar feilen i hver av de tre andre.

Legg mediespørringene nederst i stilarket, eller rett under regelen de endrer. Står mediespørringen foran regelen for mobil, vinner regelen for mobil, fordi den står sist.

9.4 Bilder som tilpasser seg skjermen

fotoklubben/stil.css
img {
  max-width: 100%;
  height: auto;
}

Et bilde som er bredere enn skjermen, gjør at hele siden kan rulles sidelengs. Regelen ovenfor gjør at et bilde aldri blir bredere enn boksen det står i. height: auto sørger for at bildet beholder formen sin når det blir smalere.

  1. Legg et stort bilde, gjerne et du har tatt selv, inn som Månedens bilde. Ikke bruk width. Se på siden i mobilvisningen. Hva skjer med bildet?
  2. Legg til regelen ovenfor i stil.css, og se på siden på nytt.
  3. Endre height: auto til height: 200px. Gjør vinduet smalt. Hva skjer med bildet? Endre tilbake.

Fotoklubben vil vise tre av de nyeste bildene i kort under Månedens bilde. Bildene har ulik form, og kortene blir ujevne. Med aspect-ratio og object-fit kan du gi alle bildene samme form.

fotoklubben/stil.css
.nye img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
  1. Lag en <div class="nye"> med tre <figure>-elementer, og legg kortene på rad med flexbox, slik du lærte i 8.5. Bruk tre bilder med ulik form.
  2. Legg til regelen ovenfor. Hva gjør aspect-ratio: 4 / 3? Endre object-fit: cover til contain, og forklar forskjellen.

Et bilde som er tatt med mobilen, kan være over 4000 piksler bredt og flere megabyte stort. Gjør bildet mindre i et bildeprogram før du bruker det på en nettside, slik at siden laster raskt også på mobilnettet.

9.5 Grid for kort og bildegallerier

fotoklubben/stil.css
.galleri {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

Med display: grid deler du en boks inn i et rutenett. grid-template-columns bestemmer kolonnene, og 1fr 1fr 1fr gir tre like brede kolonner.

  1. Les koden ovenfor, og gjett hvordan seks bilder i en <div class="galleri"> kommer til å se ut.
  2. Lag siden galleri.html med seks bilder i en <div class="galleri">. Legg til regelen i stil.css. Siden skal se omtrent slik ut:
Nettleser
  1. Endre 1fr 1fr 1fr til 2fr 1fr 1fr. Hva skjer? Prøv også 200px 1fr. Hva tror du fr betyr?
  2. Se på galleriet i mobilvisningen. Er bildene store nok?
  3. Lag galleriet for mobil først: én kolonne på mobil, og tre kolonner med en mediespørring når vinduet er minst 600 piksler bredt.

Med repeat og minmax kan nettleseren selv finne ut hvor mange kolonner det er plass til, uten mediespørringer.

fotoklubben/stil.css
.galleri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}

  1. Erstatt regelen for .galleri med regelen ovenfor. Gjør vinduet smalt og bredt. Hva skjer med antall kolonner? Hva betyr minmax(12rem, 1fr)?

  2. Lag siden bli-med.html med samme <head>, <header> og stilark som de andre sidene. Merk opp teksten nedenfor med tre <section> med hver sin <h2>. På mobil skal de stå under hverandre, og på PC ved siden av hverandre.

bli-med.txt
Bli med i Fotoklubben

Fotoklubben møtes hver onsdag etter skolen i rom 204. Alle kan være med, og du trenger ikke eget kamera.

Hva gjør vi?
Vi går på fototurer, lærer å redigere bilder og har en utstilling hver vår.

Hva koster det?
Det er gratis å være med. Klubben låner ut kameraer.

Hvordan blir jeg med?
Send en e-post til fotoklubben@skolen.example, eller kom innom på onsdag.
Mobil, 360 px
PC

Bruk flexbox når elementene skal stå på én rad eller i én kolonne. Bruk grid når elementene skal stå i både rader og kolonner, og ha like brede kolonner, som i et galleri.

Spør KI

Forklar forskjellen på flexbox og grid i CSS. Gi meg tre eksempler fra nettsider jeg kjenner, der det ene passer bedre enn det andre.

9.6 Teste på mobil og med forstørret tekst

fotoklubben/stil.css
nav a {
  display: inline-block;
  padding: 0.75rem;
}

På mobil trykker man med fingeren, så lenker og knapper må være store nok. Mange forstørrer teksten, og WCAG krever at siden kan brukes med teksten forstørret til 200 prosent.

  1. Regelen ovenfor gjør lenkene i menyen større å trykke på. Legg den til, og sammenlign med hvordan lenkene var før i mobilvisningen.
  2. Zoom inn til 200 prosent i nettleseren med . Kan du fortsatt lese all teksten, og bruke alle lenkene? Zoom tilbake med .
  3. Snu mobilen i mobilvisningen, slik at skjermen blir liggende. Fungerer siden fortsatt?
  4. Åpne siden på din egen mobil hvis du kan. Spør læreren hvordan du gjør det på skolen.

Utviklerverktøyene viser bare omtrent hvordan siden ser ut på en mobil. Test på en ekte mobil før du leverer en nettside til en kunde.

Test Slik tester du
Siden har ingen sideveis rulling mobilvisningen, 360 piksler bred
Teksten er lett å lese mobilvisningen og en ekte mobil
Lenkene er lette å trykke på en ekte mobil
Siden kan brukes med teksten forstørret zoom til 200 prosent
Bildene tilpasser seg skjermen gjør vinduet smalt og bredt
Siden virker på PC fullt vindu
  1. Test begge sidene til Fotoklubben med tabellen ovenfor. Rett det som ikke virker.
Spør KI

Jeg har laget en nettside for en fotoklubb, og har testet den på mobil. Lag en sjekkliste med ti punkter jeg bør teste for å finne ut om siden virker godt på mobil. Forklar kort hvorfor hvert punkt er viktig.

Oppsummering

I dette kapitlet har du laget et nettsted som virker både på mobil og på PC, med mobil først, mediespørringer, bilder som tilpasser seg og et galleri med grid.

Mobil først

fotoklubben/index.html
<meta name="viewport" content="width=device-width, initial-scale=1">
fotoklubben/stil.css
header {
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) {
  header {
    flex-direction: row;
    justify-content: space-between;
  }
}

Merk deg følgende:

  • <meta name="viewport"> må stå i <head> på alle sidene.
  • Skriv reglene for mobil først, og legg til regler for større skjermer i mediespørringer med min-width.
  • Unngå faste bredder i piksler. Bruk max-width.

Bilder

fotoklubben/stil.css
img {
  max-width: 100%;
  height: auto;
}

Grid

fotoklubben/stil.css
.galleri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
}
Kode Betyr
1fr 1fr 1fr tre like brede kolonner
2fr 1fr to kolonner, der den første er dobbelt så bred
repeat(auto-fit, minmax(12rem, 1fr)) så mange kolonner som det er plass til, minst 12rem brede

Oppgaver

Oppgave 9.1

oppg1-rett-feil/stil.css
.galleri {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr
  gap: 1rem;
}

@media (min-width: 600px)
  .galleri {
    grid-template-columns: 1fr 1fr;
  }
}

Galleriet skal ha én kolonne på mobil og tre på PC. Koden ovenfor har to feil som gjør at den ikke virker, og én feil i hvor mange kolonner galleriet får. Lag mappen oppg1-rett-feil med en side og stilarket, og rett feilene.

Oppgave 9.2

  • }
  • grid-template-columns: 1fr 1fr;
  • @media (min-width: 600px) {
  • .galleri {
  • }

Sett sammen kodelinjene til en mediespørring som gir galleriet to kolonner når vinduet er minst 600 piksler bredt.

Oppgave 9.3

Lag mappen oppg3-bunntekst med en side som har en bunntekst med tre deler: adresse, åpningstider og kontaktinformasjon. På mobil skal de tre delene stå under hverandre, og på PC ved siden av hverandre.

Oppgave 9.4

Lag mappen oppg4-galleri med en side som skal se slik ut på en mobil:

Mobil, 360 px

På en PC skal artiklene stå i to kolonner, og på en stor skjerm i fire kolonner.

Oppgave 9.5

Test forsiden til Fotoklubben i mobilvisningen, med tre ulike mobiler og ett nettbrett. Beskriv hva som fungerer godt, og hva som bør bli bedre.

B-oppgaver

Oppgave 9.6

Kopier mappen klubb fra kapittel 8 over til mappen kap09-responsivt. Gjør nettstedet klart for mobil. Bruk mobil først, med minst én mediespørring. Test alle sidene med tabellen i 9.6.

Oppgave 9.7

Lag mappen oppg7-sidekolonne med en side som har en meny øverst, en sidekolonne til venstre og hovedinnhold til høyre. På mobil skal sidekolonnen legge seg under hovedinnholdet.

Med grid-template-areas kan du gi områdene i rutenettet navn, og plassere dem på nytt i en mediespørring.

Oppgave 9.8

Velg en nettside du bruker ofte. Bruk mobilvisningen i utviklerverktøyene til å finne ut ved hvilke bredder layouten endrer seg. Inspiser siden, og finn mediespørringene i stilarket.

Oppgave 9.9

Undersøk elementet <picture> og attributtet srcset. Lag mappen oppg9-picture med en side der nettleseren laster ned et lite bilde på mobil og et stort bilde på PC. Bruk fanen Network til å vise at det virker.