Responsiv webbdesign (engelska Responsive Web Design, RWD) innebär webbdesign som tillåter layouten att förändras beroende på vilken skärmstorlek och skärmupplösning som besökaren har, och beroende på vilka funktioner som webbläsaren stödjer. Antal kolumner och bilder kan anpassas automatiskt, och bilder skalas om beroende på främst fönsterbredden. Det innebär att besökare kan se samma webbplats från exempelvis en mobiltelefon, en läs/surfplatta eller en persondator utan att behöva scrolla och zooma så mycket som hade krävts vid traditionell webbdesign.

Responsiv webbdesign är ett alternativ till att designa olika versioner av webbplatsen för olika skärmupplösningar, exempelvis en desktopversion kallad http://www.… och en mobilversion kallad http://m.… . Responsiv webbdesign bygger bland annat på att webbutvecklare anger sidelementens storlekar i procent relativt skärmens storlek istället för absoluta storlekar mätt i pixlar eller em (det vill säga bredden av en punkt)

Läs mer om responsiv webbdesign på följande länk (engelska): https://www.w3schools.com/html/html_responsive.asp

Här nedan är två bra filmer om CSS grid som visar tips på hur man kan skapa responsiva webbsidor. Kanalen heter Fireship och har även en hemsida på fireship.io.

Mål för lektionen: Lär dig vad responsiv webbdesign är och hur man kan skapa responsiva webbsidor.

Det finns fler olika lösningar vi kan använda för att skapa responsiva webbsidor.
Dels kan vi anpassa vår HTML-kod och de attribut vi använder så att webbsidan blir responsiv men det går även att använda CSS, JavaScript eller något responsivt framework.

Uppgifter:

1. Se de två filmerna om responsiv webbdesign med CSS Grid ovan.
2. Läs mer om responsiv webbdesign på följande länk och testa exemplen (engelska): https://www.w3schools.com/html/html_responsive.asp
3. Svara på frågorna 1-6 nedan.
4. Skapa en webbsida som är responsiv med minst tre separata stycken med text i flera rader som ligger i varsin div horisontellt (vid full bredd på webbläsarfönstret), en tabell med tabellrubriker i fetstil och fyra kolumner och tre rader, samt några bilder i olika storlekar (en bild som är 1024 pixlar bred och de andra kan vara lite mindre men minst 640 pixlar bred). Gör så att två av bilderna byts om webbläsarfönstrets storlek förminskas eller förstoras (gränsen 600 pixlars bredd).
   Skriv koden i VS Code.
5. Testa din webbsida i olika storlekar på webbläsaren och visa Niclas att det funkar när du anser att du har fått funktionerna enligt uppgiften ovan.
6. Kopiera in din färdiga kod i din loggbok för kursen Webbutveckling 1.

Frågor att svara på:

1. Ge exempel på HTML-kod för att göra bilder responsiva.
2. Vad är viewport?
3. Ge exempel på HTML-kod för att skapa responsiv textstorlek.
4. Ge exempel på HTML-kod för att visa olika bildfiler beroende på webbläsarfönstrets storlek (bredd).
5. Vad är Media Queries?
6. Skriv minst tre exempel på frameworks för responsiva webbsidor.

Uppdaterad: 2020-09-22