8 – Webblayouter

En stor skillnad mellan webben och ett tryckt material är att på webben syns samma innehåll på olika sorters skärmar – allt från små mobilskärmar till stora datorskärmar. Innehållet kan dessutom läsas upp för någon med nedsatt syn.

Webblayouter måste vara flexibla och kunna anpassa sig efter innehåll och vilket utrymme som finns.

Det vanligaste upplägget är att lägga bilder och text i byggblock där bredderna specas till en min- och maxbredder. Webbläsaren försöker sedan fylla upp skärmen från vänster till höger (eller höger till vänster i vissa länder). När material inte får plats mer radbryts det.

Enkolumnslayout till vänster (tex. mobil) och två till höger (tex. dator eller liggande iPad)

Fundera på: Genom att ändra storlek på fönstret i webbläsaren kan du bilda dig en relativt bra uppfattning om hur sidan kommer se ut på andra storlekar. Testa detta på ett par olika sidor och bilda dig en uppfattning om vad som händer med sidorna.

Det finns några olika verktyg eller strategier för att få layouten att anpassa sig efter innehåll och skärm.

I dagsläget använder vi främst Flexbox för enklare layouter och Grids för mer komplexa. Båda teknikerna är bara några år gamla och har vuxit fram från tidigare layout-strategier där de två vanligaste var att använda CSS-egenskapen float för att låta byggblock flyta runt på rätt ställe och innan dess använde vi komplexa HTML-tabeller för att bygga upp layouter.

Tabellerna var omöjliga att få responsiva och floats blev lätt hopplöst komplexa.

I dagsläget är det Flexbox och Grids som är vettigast att lära sig. Övriga tekniker kommer du troligen bara stöta på när du behöver uppdatera äldre webbar. Det finns tyvärr väldigt många äldre system kvar så du kanske behöver lära dig de senare.

När du bygger en layout börja med att lägga ut byggblocken i HTML och sätt sedan egenskaper på dem i CSS. Börja gärna med att bygga det för mobil men titta hela tiden på hur de olika delarna ändras för större skärmar.

Bygg ett block i taget. De flesta delar av din hemsida fungerar oberoende av de andra. Testa alla för mobil och dator.
Bygg ett block (röd, grön, gul) i taget. De flesta delar av din hemsida fungerar oberoende av de andra. Testa alla för mobil och dator.

Flexbox

Flexbox är ett endimensionellt verktyg för layouter. Det används främst för enklare layouter. Oftast på klassiska hemsidor som tex. blogg- eller nyhetsflöde.

Ett exempel på en Flexbox-layout

Flexbox är relativt enkelt. Du skapar en behållare där dina items ligger. Du sätter egenskaper för hur vad som ska hända när de inte får plats på behållaren och justerar dina bredder på dina items.

Ett kod-exempel finns på min Github och en längre, detaljerad beskrivning på A complete guide to Flexbox.

Grids

Grid är ett tvådimensionellt verktyg för layouter. Du specar ett rutnät där du sedan lägger ut innehåll som spänner över en eller flera boxar. Bredderna och höjderna på rutnätet kan du sätta i pixlar, procent eller låta webbläsaren justera automatiskt.

Ett exempel på en grid-layout

Läs detaljerna på A complete guide to grid.

Display

Det finns olika sorters HTML-element. De två vanligaste är block och inline och de styrs med CSS-propertyn display.  Ett block radbryter direkt (även om det skulle få plats mer) medan inline löper på ända ut i kanten. Det finns ett 20-tal andra attribut till display där inline-block också används mycket.

Element flyttar sig efter bredd på sidan

Vill du göra kolumner går det att göra ett enkelt upplägg bara genom att arbeta med display. I sidhuvud och sidfot använder vi block och i kolumnerna använder vi med inline-block enligt följande exempel.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      header,
      footer {
         background-color: skyblue;
      }
      article {
         background-color:antiquewhite;
         display: inline-block;
         width: 49%;
      }
    </style>
  </head>
 <body>
    <header>Sidhuvud med text logo och meny</header>
    <article>Kolumn 1</article>
    <article>Kolumn 2</article>
    <footer>Sidfot med tex kontaktinformation</footer>
  </body>
</html>

Float

Tidigare användes också CSS-egenskapen float för att göra layouter. Floats gör att byggblocken flyter fritt antingen åt höger eller vänster. Idén med floats var från början att du skulle kunna lägga bilder höger eller vänster-justerat och låta texten flyta runt. Under många år var floats det absolut vanligaste sättet att skapa webblayouter. Oftast blev det väldigt komplext och med många undantag för att få innehållet responsivt.

För att flyta något till höger sätter du CSS-propertyn float: right på ett byggblock. Elementet lyfts då ut från det vanliga vänster-till-höger-flödet och flyter istället längst bort till höger mot sin behållare. Det svåra är att element runt omkring oftast påverkas och ibland kan det kännas helt obegripligt.

Precis nedanför våra flytande element kan vi återställa ordningen med CSS-propertyn clear:both;. Då skapas ett radbryt ner till elementet och allt nedanför hanteras som vanligt igen.

Anledningen till att lära sig förstå floats är idag för att många befintliga system är designade kring den tekniken. De kräver en del tålamod och övning. Det finns en väldigt bra genomgång på CSS-Tricks.

Uppgifter

Flexbox

Experimentera med Flexbox. Skapa följande layout. Se till så den funkar bra både för mobil och dator. Vill du experimentera testa gärna att lägga till fler kolumner och fyll på med data.

Återskapa följande Flexbox-layout

Grids

Experimentera med Grids. Skapa en layout. Testa för både mobil och dator.

Display

  • Placera fem små bilder (max 100 x 100 px) på en HTML-sida. Bilderna lägger sig från vänster till höger på sidan. De byter inte rad förrän raden är full.
  • Placera fem rubriker på en HTML-sida. De fylls på uppifrån och ner. Även om rubrikerna borde få plats bryter de alltid rad.
  • Utforska i Chrome debuggern vilka element som är display: block; och vilka som är display: inline;.
  • Testa att ändra bilderna till display: block; och rubrikerna till display: inline;. Vad händer? Experimentera! Jämför också display: inline-block; 🙂

Floats

Skapa följande mobilanpassade webblayout. Använd float:left på <nav> & <article>.

  • Testa din layout genom att ändra storlek på webblasarfönstret. När du har en liten (mindre än ca 500 px bred) skärm får du en kolumn. Annars växer den till två.
  • Extrauppgiften när du är färdig är att göra två kolumner i sidfoten. Den ena med kontaktuppgifter och i den andra kan du lägga in valfritt innehåll.