MAX-WIDTH og fleksibelt layout med korte linjer

1. Hvorfor lange linjer som regel er noget skidt
2. Fleksibelt layout med korte linjer
3. MAX-WIDTH og EM på arbejde
4. Længden af en kort linje
5. JavaScript for IE
6. Korte linjer og to kolonner

Alle kender godt gammeldags fleksibelt webdesign med lange linjer, næsten væg til væg bortset fra margener på et par pixel. Vi finder stadig lange linjer på webbet i dag: W3C’s specifikationer og artikler af Jakob Nielsen er nogle af de bedre eksempler.

Fleksibelt layout med lange linjer er uden tvivl det mest tilpasningsdygtige og brugbare sidelayout, der nogen sinde er opfundet. Hvis fleksibelt layout med lange linjer er lavet med relativ fontstørrelse (EM, procent), tilpasser det sig skærmopløsningen, bredden på browservinduet og fontstørelsen i browseren valgt af brugeren.

Traditionelt fleksibelt layout med lange linjer er endog glimrende til skanning. Med høj opløsning og maksimeret vindue, ser du meget mere af siden på éngang, men linjerne er for lange til at læse. Når du ønsker at læse, reducerer du blot bredden på vinduet eller bruger ZOOM i browseren til at gøre skriftstørrelsen større, eller du kombinerer de to metoder.

1. Hvorfor lange linjer som regel er noget skidt

Desværre har de fleste brugere ikke forståelse for mulighederne i fleksibelt layout med lange linjer. De reducerer ikke bredden på vinduet for at få læsevenlig linjelængde, og de kan ikke finde ud af at gøre skriftstørrelsen større uden at skulle spekulere over det. De gør det bare ikke. Det er årsagen til, at klassisk fleksibelt layout med lange linjer aldrig anvendes af mange webdesignere.

Lange linjer er en katastrofe for de fleste brugere. Lange linjer ser forfærdeligt ud i et maksimeret browservindue med høj opløsning. Lange linjer skræmmer flertallet af almindelige brugere væk.

I dag ser vi praktisk talt aldrig fleksibelt layout med lange linjer på hjemmesider (forsider) eller på de øvrige websider i første navigationslag. Fleksibelt layout med lange linjer bruges stadig på nogle website til dokumentation, rapporter, specifikationer og længere artikler. Til sådan brug er fleksibelt layout med lange linjer ofte det rigtige valg helt uden konkurrence.

2. Fleksibelt layout med korte linjer

Den gode nyhed er, at MAX-WIDTH egenskaben i CSS giver os en ny mulighed: "fleksibelt layout med korte linjer". Det vil sige: læsevenlig linjelængde. Dette design er et acceptabelt kompromis for de fleste brugere: det tilpasser sig skærmopløsningen, bredden på browservinduet og brugerens valg af skriftstørrelse i browseren. Det er ikke så godt til skanning som fleksibel layout med lange linjer, men de korte linjer er pæne, og brugeren behøver ikke at reducere bredden af vinduet eller at gøre fontstørrelsen større for at få færre tegn per linje.

Det er vigtigt at forstå, at det altid har været muligt at lave layout med korte linjer ved at bruge f.eks. 50% for WIDTH-attributtten i HTML eller for WIDTH-egenskaben i CSS. Men sådan layout er kun delvis fleksibel. Det har et grundlæggende problem. Hvis brugeren gør skriftstørrelsen større, bliver linjerne ikke længere for at opnå det same antal tegn per linje. Teksten kan kun gøres en lille smule større af brugeren. Linjerne bliver hurtigt for korte. Vi har brug for MAX-WIDTH og EM-enheden, hvis siderne skal kunne tilpasse sig mere ekstreme størrelser af skriften valgt af brugeren.

En browser som Opera har en fantastisk side-ZOOM, der gør alt på en webside større eller mindre selv grafik. Hvis sådan funktionalitet bliver almindelig i alle browsere, også i Internet Explorer, bliver det også muligt at lave fleksibelt webdesign uden brug af MAX-WIDTH og EM-enheden.

Kast en blik på pixel-fanatiker Jeffrey Zeldmans website, www.zeldman.com. Vi kan ikke gøre Zeldmans bittesmå bogstaver større i IE for Windows. IE kræver en relativ enhed som EM eller procent. Selv browseren Mozilla, der har en tekst-ZOOM, der også accepterer pixel, fungerer dårligt for Zeldman. Men side-Zoom i Opera frelser Zeldman fra galjen. Når teksten bliver større bliver linjerne længere, så det bare fungerer. Læs alligevel Zeldmans bog, Designing with web standards, 2003. Det er den vigtigste nye bog om webdesign.

3. MAX-WIDTH og EM på arbejde

MAX-WIDTH egenskaben i CSS fungerer således: Linjen har en konstant længde så længe browservinduet er bredere end MAX-WIDTH. Så snart vinduet bliver smallere, bliver websidens bredde fleksibel. Prøv dette med PX som enhed. MAX-WIDTH giver ikke mening sammen med procent som enhed!

Bortset fra denne første test, er det enheden EM, der skal bruges sammen med MAX-WIDTH. EM er den vigtigste enhed i webdesign. De fleste browsere bruger 12pt=16px=1em som default for skriftstørrelse (font-size). Hvis vi ønsker korte linjer, lad os sige en længde på 500px, behøver vi blot at sætte MAX-WIDTH til 31em (496px) eller 32em (512px). Hvis der er behov for det, kan vi bruge forskellige MAX-WIDTH på samme side. Hver DIV eller andre blok-elementer kan have sin egen MAX-WIDTH.

Browsere som Mozilla og Opera understøtter egenskaben MAX-WIDTH. Microsofts Internet Explorer understøtter endnu ikke MAX-WIDTH, men der er ikke noget større problem. Det er for IE let at lave et JavaScript, der simulerer alle fordelene ved MAX-WIDTH. Hvorfor ikke bruge dette JavaScript i dag? Vi får under alle omstændigheder brug for JavaScriptet til at understøtte ældre udgaver af MSIE den store dag, hvor en ny version af IE understøtter MAX-WIDTH.

4. Længden af en kort linje

De vigtigste er at undgå linjer, der er længere end, hvad vi er vant til på tryk, 60-70 tegn per linje. Bredden på avisspalter er kun det halve, og det er også en glimrende længde til læsning på en skærm. Men vi skal huske, at jo kortere linjer er, desto mere må vi scrolle, og det er dårligt for læsning. Jo kortere linjer desto længere websider. Jo længere webside, desto vanskelige er det at danne sig et overblik. Korte linjer er i mange tilfælde dårligt for skanning, hvis det betyder, at der skal scrolles mere. Meget korte linjer kan også få websiden til at virke bar, så den fremstår som en uøkonomisk udnyttelse af arealet.

For étspaltet-layout er det bedste kompromis ofte længere linjer, end hvis der er tale om tospaltet-layout eller trespaltet-layout. Min tommelfingerregel er 500px for korte linjer. 30em (480px) er ofte glimrende.

Alle mine étspaltede artikler på www.SmackTheMouse.com (International edition) og www.klapmusen.dk (Danish edition) bruger nu fleksibelt layout med korte linjer. Jeg bruger MAX-WIDTH (42em, 672px ved default font-size) for browsere, der understøtter MAX-WIDTH. Websiderne degraderer smukt i andre browsere. De må klare sig med fleksibelt layout med lange linjer. Et JavaScript, der simulerer MAX-WIDTH, håndterer MSIE.

5. JavaScript for IE

I det eksterne stylesheet bruger vi egenskaben MAX-WIDTH som om alle browsere understøttede den. Lad os bruge 32em (512px) som eksempel. Denne værdi bliver brugt af browsere som Opera og Mozilla. Internet Explorer forstår ikke, hvad MAX-WIDTH er for noget og ignorerer egenskaben.

I alle DIV, der har klasser med MAX-WIDTH, har vi brug for noget JavaScriptet kan detekte for at lave en erstatning til Internet Explorer. Den bedste løsning ville være at detekte brugen af MAX-WIDTH i det eksterne stylesheet for en given klasse i et element. Men så vidt jeg ved, er det ikke muligt på nogen let måde i øjeblikket. Med W3C DOM kan vi bruge "stylesheet collection", men vi løber ind i for mange problemer. Reglerne er kun tilgængelige via indeksnumre, og der er andre problemer.

Den eneste i praksis anvendelige metode, jeg kan komme i tanker om, er at bruge ID-attributten. Jeg bruger ID således: <div id="ie32">. Jeg bruger kun de fire første tegn i JavaScriptet. Når eller hvis der er brug for det, kan hvad som helst tilføjes til ovenstående ID, f.eks.: "ie32a", "ie32_theRealValueOfTheID", osv. Det kræver af og til lidt ekstra arbejde, men det er let at tilføje tegn, for at gøre ID’erne unikke, eller for at give dem mere meningsfulde betegnelser, når der er brug for det.

Det følgende JavaScript er en kopi af JavaScriptet, der bruges på dette website. Ombrydning kan bryde koden. Det afhænger af opløsning, bredden på vinduet, skriftstørrelsen valgt i browseren. Download evt. det originale JavaScript, hvis du vil kopiere det. Scriptet klarer al brug af MAX-WIDTH på alle websider.