Før I praktisk implementerer et layout, er der nogle grundlæggende ting, der skal afklares. Først og fremmest bør I beslutte jer for typen af layout. Grundlæggende er der tre muligheder her.
• Fast
• Fleksibelt
• Elastisk
CSS muliggør layouts med faste eller fleksible dimensioner. Med faste layouts arbejdes der normalt med mål i pixels. Fleksible layouts er derimod baseret på procentværdier. Begge layouttyper har deres fordele og ulemper.
Fast layouts bruges typisk, når grafikker skal have indflydelse på layoutet. (Dog er der også undtagelser her ved brug af CSS baggrundsbilleder). Hvis det er vigtigt med en præcis positionering af elementerne i layoutet, vælges der som regel også en fast positionering. I denne layoutform fastsættes normalt bredden af layoutet til et fast antal pixels. Denne bredde sigter som regel mod bestemte skærmopløsninger.
Situationen er anderledes med fleksible layouts. Her angives der ikke en fast bredde. Layoutet tilpasser sig i stedet bredden af browservinduet.
I sådanne layouts angives f.eks. bredden i procentværdier. Når en bruger justerer størrelsen af browservinduet, ændres størrelsen på layoutet også.
Takket være moderne CSS-egenskaber er der nu en anden layouttype, nemlig det såkaldte responsive layout. Her ændres layoutet, så det f.eks. ser helt anderledes ud på en smartphone end på en desktopcomputer. Her på PSD-Tutorials.de blev der f.eks. arbejdet med et sådant layout. Når siden åbnes på en desktop med en "normal" browserstørrelse, ser det sådan ud.
Hvis man herefter trækker vinduet sammen, ændres placeringen af elementerne på hjemmesiden faktisk.
Oprettelsen af et responsivt layout kræver en relativt stor indsats. Man skal nemlig identificere besøgendes skærmstørrelse og præsentere et passende layout. Og dette passende layout skal faktisk udvikles til de forskellige skærmstørrelser. Hvis en besøgende åbner jeres hjemmeside med en stor skærm, præsenteres der f.eks. et tre-kolonners layout. Åbner en anden besøgende jeres hjemmeside med en smartphone, vises der et enkolonners layout.
Fordele og ulemper ved varianterne
Før I implementerer et layout, skal I overveje, hvilken af de nævnte layoutformer I vil bruge. Jeg vil kort vise jer, hvilke fordele og ulemper faste layouts har.
• Designskabeloner kan her let implementeres.
• Hvis man følger standardopløsninger, er der sjældent problemer med visningen af hjemmesiden.
• Layouts er lette at formidle. (Denne fordel kommer naturligvis dig til gode, når du som webudvikler skal forklare et layout til en kunde).
Men faste layouts har også ulemper.
• På grund af de faste dimensioner er de ufleksible og tilpasser sig f.eks. ikke meget små eller store skærme. Oftest spildes der meget plads.
• De er underlagt visse begrænsninger med hensyn til tilgængelighed.
Også fleksible layouts har styrker og svagheder. Først til fordelene.
• Layouts tilpasser sig automatisk browserens vinduestørrelse.
• Besøgende kan dermed have stor indflydelse på visningen af hjemmesiden.
Men der er også ulemper.
• Som udvikler kan I svært kontrollere resultaterne. Layoutvejledninger kan derfor kun delvist implementeres.
• Sidens indhold skal tilpasses omhyggeligt.
• På store skærme kan visningen af korte tekster blive "grim", da de ofte kun står i en linje. (CSS har dog passende egenskaber som min-width til dette formål).
En anden layoutform udgør en mellemting mellem faste og fleksible layouts. Det drejer sig om de såkaldte elastiske layouts. Deres hovedkarakteristik er måleenheden em. (I nyere tid er rem også ved at komme mere i mode. I modsætning til em orienterer rem sig altid efter rodkomponenten, i modsætning til em, der orienterer sig efter den overordnede element).
I disse layout er bredde og højde fleksible. Sidens design skalerer proportional med browserens vinduestørrelse. Denne designform er på den ene side bestemt den mest komplekse, når det kommer til praktisk implementering. Det skyldes simpelthen, at man på forhånd skal vide meget præcist, hvordan elementerne opfører sig, når browserens vindue ændres. Elastiske layouts anvendes primært til hjemmesider, hvor der tilbydes mange fotos og videoer.
Fordele ved elastiske layouts:
• Den tilgængelige plads udnyttes optimalt.
• Indholdet vises altid så stort som muligt i forhold til skærmstørrelsen.
Men selvfølgelig har elastiske layouts også deres ulemper.
• Designet af disse layouts er meget komplekst.
• Implementeringen er heller ikke ligetil.
Kval der valg
I skal altså beslutte jer for, hvilken af de nævnte varianter I vil bruge. Hvis I stadig er i begyndelsen af jeres HTML/CSS-udvikling, vil jeg anbefale jer at starte med et fast layout. Hvis I derimod har avancerede færdigheder inden for webudvikling, bør I arbejde direkte med responsive layouts. Her er I på rette vej, uanset hvilken enhed jeres hjemmeside til sidst åbnes på.
