HTML Responsive Web

Vad är "Responsive Web"

Med Responsive Web Design menas att vi bygger webbsidor som anpassar layouten efter vilken skärmupplösning som gäller. Det innebär att när vi ändrar fönstrets sorlek på en datorskärm så kommer layouten förändras men det är den automatiska anpassningen till olika skärmupplösningar som är det viktiga. Nu kan sidan se bra ut på en datorskärm, surfplatta eller på en mobiltelefon.

Vi kan bygga specialanpassade webbsajter för olika skärmupplösningar men med Responsive Web Design. Vi styr detta genom att skriva alternativa inställningar i stilmallen(CSS). Där skriver vi hur det ska se ut för olika skärmstorlekar.

Det går att ställa in hur många alternativ vi vill. Men för en seriös sajt rekommenderas några eller alla av dessa 320, 480, 600, 768, 900, 1200 pixlar.

I CSS 2.1 fick vi möjlighet att koppla olika stilmallar för olika ändamål, till exempel visning på skärmen och för utskrift.
Då skrev vi så här i html-filen:

I CSS3 har detta förbättrats och vi har möjlighet att ställa in villkor också. Till exempel att det ska visas på en skärm och att maxbredden på skärmen är 480 pixlar.
Då ser det ut så här:

OBS! Vi ska undvika detta då en del mobiler inte tolkar detta korrekt. Med max-device-width menas skärmens bredd. Vi bör istället använda max-width som talar om hur brett webbläsarfönstret är.
Detta är bättre:

Det känns väldigt onödigt att använda olika stilmallar då det mesta i dessa troligtvis kommer vara samma inställningar i de olika stilmallar utom några enstaka inställningar för att styra om layouten. I och med CSS3 så finns även en sådan lösning. Vi skriver då olika regler för olika skärmupplösningar (@media rule).

@media screen and (max-width: 480px) 
{ 
    .meny  
    {
        width:380px; 
      	 float: none; 
    } 
}

Något som vi mer och mer kommer behöva ta hänsyn till är upplösningen på skärmen. Det kommer skärmar med högre och högre upplösningar och då kanske vi behöver ändra storlekar på texter och bilder.

Självklar bygger vi vår webbsajt för en vanlig datorskärm men det är bonus om sajten även anpassar sig för mobilen.

Ett exempel, två lösningsförslag

Vi har tidigare haft en övning med fix layout, vår kära "Frukt"-övning där vi tränade på html5-taggar och på att skapa menyer. Sidan var statisk, det vill säga 800 px bred centrerad i fönstret, en klassisk sida. Nu vill vi att den ska anpassa sig och olika ut för olika skärmstorlekar.

I den gemensamma stilmallen så anger vi olika inställningar för några av delarna(de som anpassas beroende på skärmstorlek) på webbsidan medan resten är gemensamt som vanligt.

Här är lösningsförslag 1:
Det här är ingen optimal lösning utan det är ett första steg att börja tänka rätt. Här skriver vi alla inställningar i varje skärmbreddsintervall. Det blir mycket kod som är samma i alla tre intervallen. Ingen bra kodning men vi ser en logik.

/* Först en del gemensam css */
   ...
   ...

/* Sen de nya eller ändrade inställningarna endast för */ 
/* de taggar, klasser, id:n som behövs */

@media screen and (min-width: 850px) {
	.container {
		...
		/* all kod */
		...
	}
	...
	...
}
@media screen and (min-width: 650px) and (max-width: 849px){
	.container {
		...
		/* all kod */
		...
	}
	...
	...
}
@media screen and (max-width: 649px){
	.container {
		...
		/* all kod */
		...
	}
	...
	...	
}    

/* Först all gemensam css */
   ...
   ...
   /* Om skärmen är större än 800px */

   .container {
      	display: grid;
		grid-gap: 1px;
       grid-template-columns: repeat(4, 1fr);
       grid-template-rows: repeat(3, auto);
       grid-template-areas:
  			"rubrik rubrik rubrik kolumn3"
  			"kolumn1 kolumn2 kolumn2 kolumn3"
  			"sidfot sidfot sidfot sidfot";
       width: 800px;
       padding: 0px;
       margin:auto;
       border:1px black solid;
       background-color:#000;
   }
	  

   ...
   ...

/* Sen de nya eller ändrade inställningarna endast för */ 
/* de taggar, klasser, id:n som behövs */

/* När skärmen blir mindre än 850px så sätts "container"-bredden till 600px */
@media screen and (max-width: 850px){
	.container {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, auto);
		grid-template-areas:
		  "rubrik rubrik rubrik"
		  "kolumn1 kolumn2 kolumn2"
		  "sidfot sidfot sidfot";
		width: 599px;
	}
	.kolumn3 {
		display:none;
	}
}
 
/* När skärmen blir mindre än 650px så sätts "container"-bredden till 400px */
@media screen and (max-width: 650px){
	.container {
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(4, auto);
		grid-template-areas:
			"rubrik"
		 	"kolumn1"
			"kolumn2"
			"sidfot";
		width: 400px;
	}

}

Relativa enheter bättre än exakta

Till exempel i exemplet ovan

.box {
	width: 800px;
	margin:auto;			
}

är det bättre att ha

.box {
	width: 100%;		
}

men då måste hela layouten byggas om.

När du ska bygga en ny "responsive web"-sajt starta med det smalaste formatet och bygg sen för lite större skärm och sen för ännu större. Det är enklare än att försöka anpassa en bred sida till smal.

Mobil

För att mobiltelefonen ska anpassa sig mot det smalaste formatet lägger vi till följande rad i html-koden efter "title".

Mer om viewport hos w3schools!

Fler exempel

Källor

wikipedia.se
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design (2014-02-12)
http://alistapart.com/article/responsive-web-design
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
https://developers.google.com/web/fundamentals/design-and-ui/responsive/?hl=en