Responsiv webbdesign
Jag håller på att bygga om den här bloggen så att den får sig ett eget wordpress tema. Målet med det här temat är att det skall stödja så kallad responsiv webbdesign där de olika elementen på hemsidan och deras storlek och positionering anpassar sig efter om det är en vanlig dator, läsplatta eller mobil.
Att byta tema är jobbigt
På den här bloggen använde jag mig tidigare av temat Thesis som är ett riktigt bra tema med massor av inbyggd funktionalitet. Problemet är bara att när man har funktionalitet som seo inställningar, olika php hookar för att lägga till/dra ifrån innehåll på sidan i själva temat så låser man sig vid detta tema och försvårar ett byte.
Det är därför, enligt min mening, alltid bättre att temat framförallt sköter designen och extra funktionalitet som man vill ha bygger man istället in via ett eller flera wordpress plugin. Detta kommer att förenkla eventuella byten av utseende på en wordpress blogg.
Nu har jag själv satt mig i positionen att jag måste göra om massa saker som jag redan har gjort tidigare och jag har massa småfix att få till här på sidan och känner mig ännu långt ifrån nöjd.
Att använda sig av media queries
Nog med gnäll och snabbt över till något roligare, nämligen att bygga responsiv webb. Tänkte försöka skriva ihop några råd och tips utifrån det lilla jag själv har lärt mig om mobilanpassade hemsidor. Det finns flera olika sätt som du kan bygga sidor för olika enheter som surfplattor och mobiler.
Vissa har valt att inte göra någon anpassning alls då de vill visa samma innehåll för mobilsurfare som för datorsurfare. Detta kan jag själv tycka faktiskt är helt ok då upplösningen på mobilskärmarna blir allt bättre och det är enkelt och snabbt gjort att zooma in på ett element (div tag) för att läsa mer eller se bättre.
Ett annat alternativ är att göra en helt separat sajt, tex m.minsajt.isp typen, där man gör sin anpassning där. Det här gillar jag själv inte alls och tycker att det känns förvirrande att det skall finnas två olika sidor.
Det alternativ som jag själv valde att använda mig av är det som kallas för css3 och möjligheten där att göra media queries. Det här stöds i moderna webbläsare som Chrome, Firefox och IE9 men det krävs ett javascript för Internet explorer < 9 för att det det skall fungera där. Om du vill se om en sida är responsiv kan du alltid testa att ändra storlek på bredden på webbläsaren och se vad som då händer.
Några exempel på media queries
Idén med att göra en media querie är att lägga in ett villkor i sin css fil där man säger hur designen skall bete sig vid olika skärmupplösningar. Här vill du gärna ha koll på några viktiga gränsvärden som är vanliga för mobiler och surfplattor, tex
- 320px – bredden för en stående iPhone 3
- 480px – bredden för en stående Samsung Galaxy s2
- 640px – bredden för en stående iPhone 4
- 1024px – bredden för en iPad 1, 2
Som du förstår så skapar detta ett problem, man kan inte anpassa för alla nuvarande och kommande enheter utan du får helt enkelt försöka att hitta några gränsvärden och jobba utifrån dessa. Själv valde jag att börja med att sätta villkor om upplösningen är < 1024px, < 700px eller < 480px. Detta kan förstås anpassas ännu mer men jag valde att börja jobba med dessa värden.
Själv media querien gör du sedan i css:en och det är en mycket enkel sak att göra, det kan tex se ut på följande vis:
/* for 1024px or less */
@media screen and (max-width: 1024px) {
#container {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
background: none;
}
#sidebar {
clear: both;
float: none;
width: auto;
}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
#menu {
display:none
}
}
Här ovan lägger jag alltså till villkor för hur elementens bredd, positionering och floatning skall se ut beroende på hur bredden på skärmen ser ut. I fallet med min blogg här så valde jag att låta tex sidebar element ligga nedanför content när skärmen blir mindre.
Responsiv webbdesign, bilder och videos
När man designar en blogg eller en hemsida responsivt så gäller det också att ha lite koll på sina bilder och videos. Ett bra råd om du har ett responsivt tema, och vill göra det enkelt för dig, är att sätta bild- och videobredd till 100%. Detta är ett enkelt knep för att bredden på elementet skall anpassa sig efter skärmstorleken. Problemet är förstås, som i fallet med denna blogg, att det kan skapa ganska mycket efterarbete om man redan har lagt till mängder med bilder och videos utan att tänka på detta och att det då blir lite småkaos i utseendet.
Själv har jag alltså en hel del jobb kvar med den här bloggens utseende och anpassning, på todo listan står bland annat just att anpassa bilder samt att ordna med menyn på ett bättre vis, men mer om det en annan gång.