Layout med det gyldne snit

"Det gyldne snit" er historisk anset for at være det perfekte forhold mellem to længder. Det anvendes derfor ofte i typografiske, grafiske og andre designmæssige anliggender som en rettesnor for indbyrdes størrelsesforhold.

Der er dem, der mener, at det gyldne snit også burde være ledesnor i designet af en webside. Denne side kan ses som et udtryk for, hvorfor jeg ikke er helt enig. Forholdet mellem venstre og højre kolonne er nemlig tilnærmelsesvis som det gyldne snit.

Det gyldne snit

Helt præcist kan denne regel udtrykkes på følgende måde:

På en linie, der deles i to efter det gyldne snit, er forholdet mellem det mindste stykke og det største stykke det samme som forholdet mellem det største stykke og hele stykket.

Lidt algebraisk jongleren fortæller os, at det kan udtrykkes på en lidt mere anvendelig måde: Det længste stykke skal være 61,8 procent af hele stykket.

Hvorfor ikke?

På tværs har venstre kolonne netop denne bredde i forhold til hele bredden af browservinduets indholdsrude. (Sådan cirka...).

Det ser jo meget tilforladeligt ud. Men. Betænk, at højre kolonne normalt indeholder en lodretstillet menu plus eventuelt nogle korte meddelelser, indtastningsbokse og deslige, altsammen noget, der er lidt perifert i forhold til det, siden egentlig handler om, nemlig artiklen i venstre kolonne.

For mig, og for den type sider, jeg laver til dette websted, er det ikke optimalt. Der går for meget plads fra til det perifere, hvilket resulterer i, at artiklens tilsyneladende længde — altså hvor meget, der skal scrolles for at komme fra top til bund — bliver endnu større end nødvendigt er. Det er jo galt nok i forvejen ...

I praksis synes jeg nok, at 20 procent er lige i underkanten – det afsætter en 160 pixel bred højre kolonne i ved en bredde af browservinduet på 800 pixel. 200 pixel (i alt – inklusive marginer, padding osv. – forekommer mig ganske passende. I praksis omsættes dette i mit design til 25 procent (så længe jeg nu bliver ved med at anvende relative mål på begge kolonner...).

Layout-koden

For den interesserede er de udslagsgivende dele af CSS-koden følgende:

div#page { 
  width:50em; margin:1em auto; position:relative;}
#container {
	width: 100%; float: left; margin-right: -40%;
}
#indhold {
  background: #fff;  margin-right: 40%;  margin-top:20px;
  border-right:0.05em solid #257;  padding-right:1em;
}
#menuspalte {
  width: 38%;  float: right;  padding-left:10px;
  font-family:arial,sans-serif;  font-size:85%;
}

Min normale bredde på menuspalten er 28 procent (28%) og marginen på venstre spalte 30 procent (30%). Denne måde at layout'e en webside på har jeg beskrevet i artiklen Webside layout med float-egenskaben med blandt andre det konkrete Float-layout eksempel 7.

Denne side er senest opdateret: 26. November, 2006