Elastisk design

Så. Nu börjar sakteliga denna bloggen bli någorlunda stadig i designen, fick vrida ur den som en trasa några gånger för att buggarna skulle rinna av…

Eftersom jag skriver en och annan artikel i [Datormagazin](http://www.datormagazin.se) så var hela meningen att slå två flugor i en smäll – uppdatera min egen sajt och samtidigt använda en designmodell jag länge velat skriva om – elastisk design. Jag är faktiskt rätt nöjd med resultatet.

Missförstå mig rätt, när jag säger nöjd menar jag inte att jag är säker på att jag vill behålla färger, bakgrunder, typsnitt etcetera, det jag menar är att jag lyckats skapa en modell jag kan modifiera av hjärtans lust och som fyller de funktioner jag syftade till.

#### Idén bakom elastisk design

Det är lätt att förväxla elastisk och skalbar design, läser du detta i MSIE är skillnaderna så marginella att du knappast kan skyllas för att inte förstå vad jag pratar om. För att ändå försöka rama in konceptet och visa på fördelarna, så kan jag säga att tanken är att kombinera det bästa ur fast och skalbar design.

Genom det sätt jag gått tillväga har jag försökt att bibehålla så mycket jag kan av den kontroll som fasta storlekar ger, samtidigt har jag i varje led försökt göra designen så flexibel som möjligt. Tanken är att ta hänsyn till ett brett urval av hårdvara som besökare kan tänkas ha, men också att inte låsa ute dem som inte har 20/20 i synskärpa – eller för den delen de som lyssnar snarare än tittar på sidan.

Jag har för dagen struntat i att helt rätta mig efter standard, inte vad gäller XHTML-koden, men vad gäller CSS. I stora drag använder jag CSS som det är menat att användas, det är inte många hack i den. Trots det har jag valt att tillåta mig använda ett Microsoft-specifikt filter, för att efterapa det PNG stöd som annars saknas.

Men för att gå tillbaka till huvudspåret, syftet med att göra sidan elastisk är att få kontroll på radlängder, så att de inte blir absurt smala eller breda utan att för den skull låsa bredden helt. Syftet är också att teckensnitt skall vara helt skalbara, så att även de med dålig syn skall kunna tillgodogöra sig innehållet. Syftet är slutligen att uppnå detta samtidigt som jag skapar en två till tre kolumners design som är stabil och väl fungerande.

MSIE blir av nödvändighet en kompromiss, kolumnerna blir väl smala för min smak på en 800×600 skärm, och i överkant breda i 1600 pixlars bredd. Det är inte fråga om en katastrof, men det är en kompromiss.
I Opera, Safari, Mozilla med flera kommer däremot designen till sin rätt, den täcker den fulla bredden i 800 px, samtidigt som den *når* sin fulla bredd ungefär vid 12-1300 pixlar – däremellan skalar den fritt. Det innebär att den ser utmärkt ut i flera upplösningar och anpassar sig efter användarens önskemål.

Att anpassa sig efter användarens önskemål innebär också att inte ange fasta teckenstorlekar, alla storlekar anges i procent eller em (storlek relaterad till grundstorlek på texten, närmare betämt höjden på stora M). Effekten blir att texten kan skalas för att passa mottagarens behov, grundstorleken är satt att motsvara den ungefärliga normalstorleken på användarens menyer – vilket de flesta borde kunna läsa.

Det står dig fritt att ta dig en titt på CSS och XHTML från sidan, jag släpper dem härmed enligt GNU/GPL – slit dem med hälsan eller låt bli 😀

9 svar på ”Elastisk design”

  1. Trevlig artikel i DMZ. Synd bara att så stor del handlar om hur man anstränger sig för att arbeta runt de värsta buggarna i MSIE. Annars är det mycket vettiga idéer, och jag har själv testat lite smått på min webbplats. Troligen borde jag läsa mer först för att inte fullständigt slita mina gråa hår med trial-and-error och inkompabiliteter även mellan mer standardiserade webbläsare.

    CSS kommer att göra underverk med webben, men bättre (fria) verktyg vore av godo för att slippa handkoda all CSS.

    /Gunnar i Robertsfors

  2. Tack för artikeln om elastisk design i DMZ!
    Fick en massa nya ideer till min kommande design! 😀

  3. Jo tyvärr handlar en stor del av CSS design om att jobba runt MSIE:s buggar och begränsningar. CSS kommer nog inte nå sin fulla potential förrän MSIE 7, förutsatt naturligtvis att MS håller sina löften och tar hand om de värsta felen.

  4. Tack för inspirationen! Min dotter har nu en hemsida med elastisk design (validerad i strikt XHTML1.0 och allt!) 🙂

  5. Jättebra artikel, men som sagt jobbigt med alla buggarna i IE6.0. Man önskar att folk hade mera vett och övergav en sån dålig webläsare.

    Jag är inte speciellt bra på html, men provade ändå att följa artikeln. Jag laddade också hem dom 2 filerna från Datormagazin. Det var inte ett färdigt projekt, tagsen head, title och body saknades. Dessutom var det ingen referens till css-filen. Jag lade in det men jag misstänker att jag missat nåt. Ska det vara ytterligare en container runt koden du hade i datormagazin?

  6. Kan man göra så att om man skriver ut sidan, så tar CSS bort all navigation och bara visar innehållet?

  7. Erik det går alldeles utmärkt.

    Jag hade funderingar på att göra det, men har haft för mycket jobb för att ha tid eller orka. Det kommer så småningom.

    Grunden är CSS @media, med varianterna print och screen. Det kan skötas antingen genom att länka in stilarna med mediaattribut på länken eller genom att ha @media i stilmallen för att separera stilar för utskrift och skärm.

  8. Jag har laddat neer din design och ändrat den så att den fungerar i utskrift också, lagt till länkadresserna inom hakparanteser efter länkarna (a[href]:after {content ”[” attr(href) ”]”}). Fick bra ideer.

Kommentarer kan inte lämnas på detta inlägg.