Webben är i ständig utveckling. Under 2011 har jag lärt mig mer än någonsin. Från detta året kommer jag att ta med mig följande tankar. Se det som en reflektion kring en teknik som har förändrat min approach till hur man kan bygga en webbplats.

Det här är hur jag gör, du är fri att göra precis som du vill. Istället för att försöka omvända dig, får du mitt perspektiv. Hur du använder webbens magiska möjligheter är helt upp till dig. Jag tror på att vi tillsammans är med och skapar fantastiska webbplatser under de kommande åren, oavsett vilket tillväga gångsätt vi har.

Under 2010 introducerade Ethan Marcotte Responsive Web Design i en artikel på A List Apart. Senare kom även boken Responsive Web Design av samma man. Jag är lite seg i starten, så under det senaste året har jag pluggat in hur konceptet fungerar.

Vad är Responsive Web Design?

Responsive Web Design innebär i korta drag att man med hjälp av CSS skalar en webbplats så att den fungerar på olika skärmstorlekar. Responsive Web Design innehåller även en flexibla kolumner istället för fasta.

Enligt Ethan Marcotte är definitionen av Responsive Web Design följande:

+ Fluid grids.
+ Flexible images.
+ Media Queries.

Mobile First – Utveckla för mobilen först

Till ca 2015 är det beräknat att 40% av världens befolkning har tillgång till internet. En stor andel av dem kommer naturligtvis främst eller enbart vara mobilanvändare (källa). Att ha denna framtidsanalys i bakhuvudet när man bygger webbprojekt kan vara klokt.

En intressant tanke lyfts även fram av Joni Korpi.

This site was designed Mobile First. The styles that make up the mobile version of its layout, which I’ll call the Narrow Layout from now on, are not inside a media query, while the styles that make up the wider versions are. As a result, browsers with no support for media queries will only see the Narrow Layout. This is a good thing.
– Joni Korpi

Istället för att skala ner en webbplats med hjälp av media queries, kan man använda dem för att skala innehållet för större skärmar. Konceptet kan kännas lite bakvänt, att bygga den mobila webbplatsen först, för att sen anpassa den till enheter med större skärmyta.

En bonus som uppstår när man använder media queries för att skala upp en sida, är att man slipper ta hänsyn till äldre versioner av Internet Explorer i lika stor utsträckning. Eftersom inte äldre versioner av Internet Explorer stödjer media queries ser de helt enkelt den mobila webbplatsen. Några småfix krävs fortfarande för att det inte ska se helt tokigt ut i Internet Explorer.

Plötsligt öppnar sig en värld av funktioner i moderna webbläsare som man tidigare kunnat använda sig av i begränsad utsträckning, eftersom man har varit tvungen att tänka på äldre webbläsare. Nu kan man använda dessa i princip fullt ut. Här är några exempel:

• Många CSS3 selectors
• :before och :after
• opacity, box-shadow, och text-shadow
• min/max-width och min/max-height
• rgba() och hsla()!

En annan fördel med att bygga för mobilen först är faktiskt, att det hjälper mig att fokusera på det som är viktigt. Jag håller med om det Luke Wroblewski skriver fullständigt. Fokusera på det som är viktigt. Då blir det bättre.

Mobile devices require software development teams to focus on only the most important data and actions in an application. There simply isn’t room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize.
– Luke Wroblewski

Några kloka tankar jag har börjat tänka, varje gång jag bygger en webbplats:

• Vad är webbplatsens syfte?
• Vilka är dina besökare?
• Vilken typ av information letar dina besökare efter?

Fluid grids

Att lära sig att förstå konceptet med fluid grids var för mig inte helt lätt. Jag fick helt pröva väldigt många gånger innan jag riktigt förstod storheten. Övning ger färdighet. Ett tips kan vara att kolla in Golden Grid System, som är ett Responsive Web Design framwork byggt av Joni Korpi. Jag lärde mig många intressanta tankar genom att studera hans kod.

Flexible images

Flexibla bilder är en helt egen historia, som jag inte riktigt har kommit underfund med vilken lösning som passar mig bäst. Det finns så många olika lösningar.

Just nu håller jag på och exprimenterar med Adaptive Images for Responsive Designs tekniken som Matt Wilcox skrev om på julkalendern 24ways.org

Media Queries

Öva, öva och åter öva. Att ha tillgång till olika enheter såsom iPhone, iPad och någon Android lur/surfplatta gör det enklare och roligare. Att se hur saker ser ut för användare är en viktig del av processen. Projektet 320 and up har varit en riktigt bra resurs. Ett annat tips är att kolla på Mediaqueri.es och se hur andra har gjort.

Avslutningsvis

Följande citat kommer jag ta med mig som vägledning under 2012.

Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else. Web design is responsive design, Responsive Web Design is web design, done right. And that’s why I don’t care about Responsive Web Design.
– Andy Clarke

Resurser/Verktyg

Responsivepx – Utvecklingsverktyg för att testa olika skärmstorlekar
Fittextjs –  Javascript som erbjuder en smart finess för rubriksättning.
Fitvidsjs – Javascript som anpassar videoklipp till rätt storlek.
Golden Grid System – Ett Responsive Web Design framwork byggt av Joni Korpi
320 and up – Ett framework för att bygga Mobile first.
Mediaqueri.es – Inspirationskälla.

Intressanta länkar

Responsive Web Design av Ethan Marcotte
Responsive Web Design Book av Ethan Marcotte
Adaptive Web Design av Aaron Gustafson
Mobile First av Luke Wroblewski
Responsive Web Design: What It Is and How To Use It av Kayla Knight
Responsive Web Design and WordPress av Sarah Cannon
Artiklar om responsive web design och flytande grids av Henrik Tornberg
I don’t care about Responsive Web Design av Steve Lorek
Först mobilt, enbart mobilt av Erik Larsson
Några tankar om Responsiv Design av Thord Daniel Hedengren
Responsive Web Design, med Johan Edlund av Per Axbom

Fler tips eller kanske några tankar? Hör av dig till mig på @viktorbijlenga