Responsiv webb med content folding

 

En av de senaste teknikerna som Adobe har bidragit med till W3C:s specifikationer för CSS3 är så kallade ”regions”. Regions kan vara ett område på en webbplats som vid en viss skärmstorlek inte innehåller något alls men som sedan fylls med innehåll om skärmstorleken ändras. Detta kallas ibland shared-folding eller shared-origami.

Det kanske inte låter som något nytt eller speciellt spännande men faktum är att det faktiskt är mycket användbart. Istället för att skriva flera rader JavaScript-kod som ska manipulera DOM-trädet vid ändring av skärmstorleken kan man istället på ett relativt enkelt sätt deklarera hur detta ska ske direkt i sina CSS-filer.
Detta är speciellt användbart med tanke på att majoriteten av alla webbplatser är uppbyggda med någon slags ”huvudyta” där det mesta innehållet presenteras. Ofta finns det också sidebars med t.ex menyer, bilder eller reklam. Ibland kan dessa ta upp mycket skärmyta och man vill då gärna kunna få de ur vägen men samtidigt visa dem på ett naturligt sätt på enheter med mindre skärmyta. Det är i sådana här tillfällen som regions är utmärkta att använda. Eftersom sidebars i webbplatsen grid-struktur ofta är placerade innan eller efter huvudytan så hamnar de således innan eller efter när de ska flyttas. För att undvika detta fick man använda JavaScript. Fram tills nu.

Med regions kan man numera exempelvis välja att reklam eller bilder som tidigare legat i en sidebar ”viks in” emellan innehåll i huvudytan. Reklam som ofta kan vara en viktig del att visa behöver inte längre skyfflas längst ner på webbplatsen eller till den plats den faktiskt hör hemma i DOM-trädet utan kan läggas i den region man vill. Perfekt att använda för mobila enheter när man vill kunna visa både det primära innehållet på sidan men även vill ge innehållet i en sidebar lite fokus och inte bara låta det hamna längst ner på en sida.

Regions är ännu en mycket ny teknik som inte har stöd i vissa webbläsare, men vi hoppas verkligen att folket på W3C förstår vilket bra verktyg detta är.

Fråga oss gärna hur man på bästa sätt kan använda de senaste teknikerna för att göra webbplatser ännu mer responsiva. Vi älskar att snacka utveckling och de senaste trenderna.

Skrivet den 7 maj av

Vilhelm Josander

Skriv en kommentar

  • XHTML: Du kan använda följande taggar: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>