Så gott som alla webbprojekt jag har varit inblandad i under senaste året har haft en responsiv ansats. Responsiv webbdesign innebär enligt Wikipedia att man:

… bygger och designar en webbplats som tillåter layouten att förändras beroende på vilken skärmupplösning besökaren har. Det innebär exempelvis att webbplatsens besökare kan surfa till sajten med en läs/surfplatta, en mobiltelefon eller en dator och att innehållet på webbplatsen anpassas efter besökarens plattform.

Innan vi började bygga responsiva lösningar använde vi statiska ramverk som t.ex. 960 grid system för att konsekvent positionera ut gränssnittselement i olika layouter som fungerade hela vägen ut till färdig kod. De första responsiva ramverken som jag stötte på, 1140 och Less, var också statiska i bemärkelsen att de hade ett bestämt antal kolumner. Det fanns dock problem med dessa; att designa med ett förbestämt antal kolumner innebär just att hela sidans layout måste förhålla sig till dessa kolumner. Detta kan skapa lite stela layouter eftersom allting följer samma grid.

Problemet med grids med ett bestämt antal kolumner

Låt oss ta Antrops kontaktsida som ett exempel. Om vi hade följt en statisk grid hade den behövts struktureras ungefär så här:

Egentligen vill vi ha tre kolumner med foton i avdelningen om kundansvariga och fyra rader med foton under varje kontor. Kontaktfoton skulle då behöva bli ganska små och det skulle bli ett tomrum till höger om de översta radernas foton, mellan fotona och kartan. Om man inte hade använt en grid utan bara positionerat saker så som vi vill ha det kanske det hade blivit så här:

Problemet, som syns på bilden ovan, är att man då naturligtvis måste bryta mot griden. Vi kan inte både ha tre kolumner med bilder i första avdelningen och sedan fyra kolumner med bilder i nästa avdelning, om de alltid ska vara jämnt distribuerade i sin rad.

Ramverk med ett flexibelt antal kolumner

När vi började skissa på vår nya webbplats stötte jag på två responsiva ramverk som löser detta problem med att kunna ha olika grids på olika delar i en layout: Foundation av Zurb och Bootstrap av Twitter. Dessa två ramverk gör det möjligt att nestla, eller stapla, kolumner. Det är inte helt enkelt att förklara, men låt mig försöka.

Ta Bootstrap som exempel. Den jobbar med rader och kolumner. Varje rad innehåller 12 kolumner. Den första raden man skapar sträcker sig över hela layouten och motsvarar en global/statisk grid med 12 kolumner. Det fina är att man sedan kan skapa nya rader inom delar av webbplatsen. Om man delar upp layouten i t.ex. tre delar kan man sedan skapa nya rader inom respektive del och för varje rad där få 12 nya kolumner. Detta gör det möjligt att positionera ut objekt inom den delen med större frihet än om man hade behövt förhålla sig till en statisk global grid.

Som syns i bilden ovan kan man alltså skapa rader inom delar av sidan och därmed få nya kolumner att positionera om innehållet i inom bara den delen av sidan. På så sätt kan vi ha tre foton som distribueras ut i avdelningen för kundansvariga och fyra foton som distribueras ut under vi som jobbar i Stockholm och ändå använda den grid som Bootstrap erbjuder.

Att skissa med responsiva ramverk

Det trevliga med ramverk som Bootstrap och Foundation är att de, förutom att erbjuda en flexibilitet i att skapa layouter, också är anpassade för att arbeta med responsiv design. Dessutom erbjuder båda ramverken ett rikt bibliotek av widgets och avancerade kontroller. Även om utmaningarna med att skissa responsiva lösningar kvarstår med dessa ramverk erbjuder de möjligheter för interaktionsdesigners med begränsade kunskaper om HTML och CSS att skapa prototyper som går att skala från telefoner upp till stora skärmar (se ett exempel på hur en sådan prototyp kan se ut här).

Kodspråket är rätt enkelt och rättframt för att skapa ganska komplicerade saker. I Foundation skapar t.ex. denna HTML-kod denna knapp:

Om ditt projekt ska använda just Bootstrap finns utmärkta mallar och ett widgetbibliotek utvecklat av Viget för Omnigraffle. Zurb har själva tagit fram liknande resurser för Foundation.  Mallar för Photoshop eller andra verktyg hittar du också snabbt med en Googling.

Som alltid med relativt nya lösningar så är det kul och nyttigt att utbyta erfarenheter och lösningar och det här var en sammanfattning av våra.
Har ni jobbat med att skissa för responsiv design och vilka ramverk har ni i så fall använt när ni utvecklat webbtjänster? Vilka lösningar och svårigheter har ni mött? Diskutera gärna i kommentarerna!