9 – Mobilvänlig hemsida

En av de stora skillnaderna mellan att arbeta med att göra layout för tryck (tex kataloger) och layout för webbsidor är att på webben behöver dina layouter vara flexibla. Skärmstorleken på en telefon, surfplatta och en vanlig dator varierar. Layouten måste vara flexibel nog för att tåla att visas i olika lägen. Mycket av det sköter sig själv med smarta storlekar på element och genom att arbeta med max-bredder i procent snarare än fasta bredder.

De webblayouter vi jobbat med i första delarna av kursen är förberedda för att fungera på olika skärmstorlekar. Ändå behövs det ofta lite justeringar. Titta på apelsin-sidan vi gjorde tidigare, dra ihop webbläsarfönstret så det är smalt och rulla ner. Högerkolumnen ser inte så snygg ut. Bättre vore ifall den tog upp hela bredden.

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.

Apelsin-sidan mobilvy
När du drar ihop webbläsarfönstret ramlar höger-spalten ner som det är tänkt. Bra! Ännu bättre vore det ifall Mer om apelsiner-kolumnen tog upp hela bredden i mobilläget?

Standardsättet att justera bredderna är genom att ändra egenskaperna för de olika blocken beroende på hur brett fönstret är.

Mitt förslag på strategi är att ni börjar med att göra mobil-varianten. När den är klar skalar ni sedan upp kolumnerna för datorvarianten till ni är nöjda.

Du jobbar med något som heter Media Queries. Följande exempel visar hur vi gör ändringar på layouten när bredden blir minst 768 px. Man brukar sätta gränsvärden till 480, 786 och 992 px. Dessa olika bredder är bara ungefärliga och ändrar sig hela tiden i takt med att skärmar får bättre upplösningar.

@media screen and (min-width: 480px) {}
 
@media screen and (min-width: 768px) {
  section {
    width: 20%;
    height: 400px;
    display: inline-block;
    overflow: hidden;
  }
 }

 @media screen and (min-width: 992px) {}

Som exempel och hjälp till övningarna finns det en mobilvänlig fruktlista.

Övningar

Börja med att göra en enkel grund där ni ändrar bakgrundsfärg på hela sidan för de olika bredderna. Behöver du hjälp finns ett färg-exempel.

Uppdatera sedan er layout ni jobbat med i de senare kapitlen så den blir mer optimal för telefoner.

Börja med att

  • justera bredden på högerkolumnen och
  • ändra layouten på menyn så den blir enklare att jobba med.

Har ni fler ändringar ni tycker behövs för telefonen? Pyssla med er sida för att optimera det!

Vad blir skillnaden på era media queries (& hela upplägget) om ni börjar med mobil-layouten eller dator-layouten?

Överkurs