Google+
Facebook
Twitter
YouTube
Rss
Jul
5

Responsive web design del 2

I förrgår postades del 1 i Hypelines djupdykningsserie om responsive web design, något som är väldigt populärt just nu. Då gick jag igenom vad det är, varför man skulle vilja använda det och funderade över om det passar alla typer av sidor. I den andra delen av djupdykningen tänkte jag beskriva grunderna i hur man skapar en webbdesign som responsiv. Det finns såklart inga möjligheter att göra en komplett guide, men det blir en liten introduktion.

Byt pixelmåtten mot procent

Som jag nämnde kort i del 1 gäller det att ersätta fasta mått mot dynamiska sådana. Om du brukar koda med pixelmått byts de lämpligen ut mot procent. Det är inte alltid nödvändigt att byta ut pixlar mot procent, i vissa fall vill man kanske att sidan max ska vara 960 pixlar bred. I mitt exempel skapar vi en sida med två kolumner, en primär till vänster och en sidebar till höger. Dessa ligger i en wrap. Grundkodens CSS ser ut såhär:

#wrap {
max-width: 960px;
}#main {
float: left;
width: 66%;
}

#right {
float: right;
width: 33%;
}

Det skulle kunna se ut ungefär så här på en datorskärm:

Det ser ju helt okej ut. Och eftersom vi skrivit måtten i procent dras divarna ihop när skärmstorleken blir mindre. Men i en smartphone ser det faktiskt inte alls bra ut just nu, resultatet blir något som liknar detta:

Just nu ser det riktigt illa ut eftersom 33% av en smartphones bildyta är riktigt smalt och gör texten mer eller mindre oläslig. Men det finns en fin lösning som gör att vi kan designa om sidan vid låg upplösning. Lösningen kallas media queries.

Olika CSS-regler med media queries

Med hjälp av media queries kan man ge element olika CSS-egenskaper beroende på webbläsarförnstrets storlek. I mitt fall vill jag att divarna main och right ska floata till vänster och höger, men om webbläsarfönstret är max 600 pixlar brett ska de ligga ovanpå varandra och ha en bredd på 100%. Det kan man åstadkomma genom att lägga till detta längst ner i CSS-filen vi började skriva tidigare:

@media screen and (max-width: 600px) {
#main {
float: none;
width: 100%;
}#right {
float: none;
width: 100%;
}
}

Allt som står mellan de röda raderna kommer vara webbläsarens designkod om upplösningen är max 600 pixlar. Om vi nu öppnar upp sidan i en webbläsare där fönstret är 600 pixlar kommer det alltså se ut ungefär så här:

Denna design är klart bättre lämpad att läsas i en telefon. Men i vissa fall vill man inte att en div ska synas alls när upplösningen blir för låg. Om man skulle vilja dölja höger-diven helt kan man göra detta genom att lägga till display: none; för den diven i media querien. Då kommer den bli dold om upplösningen blir 600 pixlar eller lägre.

Media queries kan även användas för att ändra textstorleken beroende på upplösning, eller bakgrundsbilder och textfärger. Du kan har flera media queries i samma CSS-fil och därmed ha en design för datorn, en för tablets och en för smartphones. Genom att dölja/visa divar och ändra deras utseende beroende på upplösning kan man få designen att förändras rejält med väldigt lite arbete.

Men bilder då?

Om man nu vill lägga till en bild, hur fungerar det? Jo, det är inte alls svårt att lösa så att även bilderna anpassar sig automatiskt. Det är bara att ställa in maxbredden på bilden i procent så sköter det sig självt sedan. Koden har till och med en fallback för Internet Explorer:

img {
max-width: 100%;
height: auto;
width: auto\9; /* Explorers fallbackrad */
}

Liknande lösningar går att lägga till på andra element också, till exempel HTML 5-taggarna video och audio, i viss mån fungerar det även på embed, object och iframe.

Fallbacklösningar

I en perfekt värld förstår alla webbläsare denna kod nu och alla kan vara glada. Detta är inte en perfekt värld. Till största delen är detta Internet Explorers fel, men även iPhone och andra smartphones har funktioner som faktiskt sabbar mer än de hjälper när sidan är responsiv. Därför finns det ett par fallbacklösningar som är värda att lägga till.

<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]–><!– iPhonefix –>
<meta name=”viewport” content=”width=device-width; initial-scale=1; maximum-scale=1″>

Dessa kodrader ska inte in i stilmallen utan i HEAD-delen av webbsidan. Den översta koden hjälper äldre versioner av Internet Explorer att förstå den responsiva koden. Den undre delen gör att iPhone inte skalar om sidan för att texten ska bli lättare att läsa. I och med att CSS-koden redan skalar om sidan behövs inte iPhones egna funktion.

Mer läsning och tips

Detta var som sagt bara en introduktion till hur man kodar responsivt. I den tredje och avslutande djupdykningsdelen kommer jag tipsa om mer läsning om du vill komma igång med responsive web design på riktigt. Då får du även tips på sidor du inte får missa när du ska testa sidan eller vill ha schyssta funktioner. Men det blir en annan dag.
Läs del 1.
Läs del 3.


Källa: Webbhjälp.

Annons ▼

Läs också


Skrivet av Daniel Claesson

Teknikintresserad Södertäljebo. Hypelines grundare och meste skribent som gärna skriver om telefoner, tablets och webben, ofta med inslag av humor och självdistans. Utbildad kommunikatör som älskar webben.
Kontakt: daniel.claesson@hypeline.se

  • http://twitter.com/joakimschon Joakim Schön

    Himla intressant! Känns som något man bör ta tag i och lära sig lite mer om.