Responsiv webbdesign

2014-10-30, Rune Körnefors, Medieteknk, Linnéuniversitetet

Rune

Ett seminarium i serien Think Tank arrangerat av Dataföreningen i Sverige, södra kretsen, Malmö. Under seminariet visas ett exempel där CSS-koden stegvis byggs upp för en webbplats.

Här finns länkar till filerna som användes på seminariet:

Koden får användas fritt.

CSS-filerna

CSS-koden byggs upp stegvis i ett antal filer där koden utökas för varje steg. Byt filnamnet för önskad CSS-fil till style.css, så är det den som används i HTML-filerna.

I exemplet används progressive enhancement (mobile first), där media queries används för att utöka layouten från en enkel layout för mobiler till en större layout för större skärmar.

De olika stegen är:

  1. Steg 1: Enkel layout för mobilen och webbläsare utan stöd för CSS3 och media queries.
  2. Steg 2: Lägg till media queris för att utöka layouten vid lämpliga bredder på webbläsarens fönster (enhetens skärm).
  3. Steg 3: Flexibla bilder och filmer.

Hjälpmedel i webbläsarna för responsiv webbdesign

För att testa en webbsida i olika storlekar och få hjälp med att se vilken storlek det är, finns det viss hjälp i webbläsarna.

I Firefox väjer du följande menykommando:

Verktyg->Webbutvecklare->Responsiv designvy

Sedan kan du dra i kanterna och se webbsidan i olika storlekar. Du kan också i en meny välja förvalda stolekar och med en knapp kan du vrida mellan porträtt- och landskapsläge.

I Chrome väljer du följande menykommando:

Visa->Utvecklare->Verktyg för utvecklare

I fönstrets undre halva får du då en konsol. I övre vänstra hörnet av den finns det en liten symbol som ser ut som en mobiltelefon. Klickar du på den, visas webbsidan med kanter som du kan dra i och det finns linjaler där du ser storleken.

Flexibla bilder

I responsiv webbdesign vill man hantera bilder på olika sätt. Dels vill man anpassa storleken beroende på tillgängligt utrymme. Dels vill man kunna använda olika bilder beroende på tillgängligt utrymme. Det första kan idag göras lätt med CSS-kod. Det andra är mer komplicerat och saknar idag någon perfekt lösning.

Anpassning av storlek på bilder

Flexibla bilder erhålls oftast med följande CSS-kod för img-taggar:

img {max-width:100%; height:auto;}

Detta fungerar bra då bilderna ska visas i sin ursprungliga storlek eller max 100% av tillgängligt utrymme där img-taggen finns och bilden finns i ett eget block. På denna sida som du läser just nu finns dock en bild som för en stor skärm ska flyta till höger om texten. Samtidigt ska den vara lite mindre än sin ursprungliga storlek. Då vill jag inte att den ska ta upp 100% av tillgängligt utrymme, utan istället en mindre del. Dett görs med följande kod:

img {float:right; width:40%; max-width:350px; height:auto;}

Denna kod säger att bildens bredd ska vara 40% av tillgängligt utrymme, men samtidigt inte större än 350 pixlar, ifall 40% av utrymmet skulle vara större än så. Prova att ändra fönstrets storlek, så ser du hur bilden förminskas, då fönstret blir mindre.

Vid en mindre fönsterstorlek än 640 pixlar används istället följande kod:

img {width:100%; max-width:200px; height:auto;}

Då ska den inte flyta vid sidan av texten, utan upptar istället en egen rad. Den ska där fylla hela raden, men samtidigt vara max 200 pixlar bred. Så det är endast om fönstret är 200 pixlar eller mindre, som bilden fyller hela raden.

Olika bilder beroende på fönsterstorlek

En del bilder blir inte bra, då de förminskas för mycket, så om fönstret blir mindre vill man byta till en annan bild. Detta kan enkelt skapas med två img-taggar, där man i media queries ser till att dölja den ena och visa den andra. Problemet är dock att båda bilderna kommer att hämtas, eftersom webbläsarna alltid hämtar alla bilder i img-taggar oavsett om de ska visas eller ej. Detta medför ökad laddningstid och slöseri med bandbredd. Det finns lite olika lösningar på detta, både på klient- och serversida, men de kan medföra mer komplex kod och en del andra nackdelar i sökoptimering och tillgänglighet. Se artiklar i referenslistan nedan.

picture-elementet

I HTML5 har man föreslagit ett nytt picture-element som ska kunna hantera olika bildfiler för olika fönsterstorlekar. Detta element har följande syntax:

<picture>
  <source media="(min-width:640px)" srcset="large-image.jpg">
  <source media="(min-width:200px)" srcset="small-image.jpg">
  <img src="fallback-image.jpg" alt="bildbeskrivning">
</picture>

Här väljs en av bilderna i source-taggarna, beroende på deras media queries. Om ingen av dessa storlekar stämmer eller om det inte finns stöd för picture-elementet används istället bilden i img-taggen. Detta element är endast ännu så länge implementerat i Crome version 38 eller senare och i experimentellt läge, men kommer troligen senare även komma implementeras i övriga webbläsare.

Elementet används på denna sida, men för att kunna testa det, måste du använda Chrome version 38 eller senare. I adressfältet skriver du chrome://flags och trycker på return-tangenten. Klicka sedan på "Aktivera experimentella kanvasfunktioner" ("Enable experimental Web Platform features"), så att det aktiveras. Därefter går du tillbaks till denna sida och laddar om den. Prova sedan att göra fönstret mindre, så ser du att bilden byts ut. Ta också fram sidan källkod och se komentarer i den vid picture-elementet.

Referenser

Chen, P. (2014) Built-in Browser Support for Responsive Images, HTML5 Rocks,
http://www.html5rocks.com/en/tutorials/responsive/picture-element/ [2014-10-29]

Marcotte, E. (2010) Responsive Web Design, A List Apart,
http://alistapart.com/article/responsive-web-design [2014-10-06]

Pettit, N. (2014) The 2014 Guide to Responsive Web Design, treehouse blog,
http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design [2014-10-03]

Young, J. (2013) The 8 biggest responsive web design problems (and how to avoid them), Creative Bloq,
http://www.creativebloq.com/responsive-web-design/problems-8122790 [2014-10-29]

Kontakt

Kontakta mig gärna på epost: rune.kornefors@lnu.se

Jag tar gärna emot adresser till era webbsidor, så jag kan använda dem som exempel i kurser i webbdesign. Jag diskuterar också gärna idéer till olika samarbeten med t.ex. praktikplats eller examensarbeten för studenter. Vi vill också gärna ha gästföreläsare - du kan komma och berätta hur du arbetar med webbdesign på ditt företag. Vi kan säkert hitta olika lösningar antingen med besök hos oss på universitetet eller på distans med Adobe Connect.

Så kontakta mig med dina idéer och tankar både på webbdesign och på samarbete.