Før du praktisk implementerer et layout, er det noen grunnleggende ting som må avklares. Du bør først bestemme hvilken type layout du vil ha. Generelt sett er det tre muligheter her.
• Fiksert
• Fleksibelt
• Elastisk
CSS muliggjør layouter med faste eller fleksible dimensjoner. Faste layouter bruker vanligvis pikselmål. Fleksible layouter er basert på prosentverdier. Begge layoutvariantene har sine fordeler og ulemper.
Faste layouter brukes vanligvis når grafikk skal brukes til layout. (Selv om det også kan være unntak her med bruk av CSS-bakgrunnsbilder). Når det er behov for pikselnøyaktig posisjonering av elementene i layouten, brukes vanligvis også fast posisjonering. I denne type layout blir vanligvis bredden på layoutet fastsatt til et bestemt antall piksler. Denne bredden retter seg vanligvis mot bestemte skjermoppløsninger.
Det ser annerledes ut med fleksible layouter. Her oppgis ikke en fast bredde. Layoutet tilpasser seg bredden på nettleservinduet.
I slike layouter kan for eksempel bredden oppgis i prosentverdier. Hvis en bruker endrer størrelsen på nettleservinduet, endres også størrelsen på layoutet.
Takket vært moderne CSS-egenskaper har det nå blitt en annen layoutvariant, nemlig det såkalte responsive layoutet. Her endres layoutet slik at det for eksempel ser helt annerledes ut på en smarttelefon enn på en stasjonær datamaskin. Her på PSD-Tutorials.de har det for eksempel blitt jobbet med en slik layout. Når siden åpnes på en stasjonær datamaskin med et "normalt" størrelse nettleservindu, ser det slik ut.
Hvis man nå reduserer størrelsen på vinduet, endres faktisk plasseringen av elementene på nettstedet.
Å lage et responsivt layout krever relativt mye innsats. Til slutt må skjermstørrelsen til besøkende bestemmes, og deretter må det presenteres et passende layout for dem. Og dette passende layoutet må faktisk utvikles for de forskjellige skjermstørrelsene. For eksempel vil en besøkende som åpner nettsiden din på en stor skjerm, få presentert en treløpet layout. På den annen side, hvis en annen besøkende åpner nettsiden din på en smarttelefon, vil de se en enkeltkolonne layout.
Fordeler og ulemper med de forskjellige variantene
Før du implementerer et layout, må du bestemme hvilken av de nevnte layoutformene du vil bruke. Jeg vil kort vise deg fordeler og ulemper med faste layouter.
• Designmaler kan enkelt implementeres her.
• Hvis man følger standardoppløsninger, er det sjelden problemer med visningen av nettstedet.
• Layoutene er lett forståelige å formidle. (Denne fordelen kommer selvsagt til nytte hvis du som webutvikler vil forklare et layout til en kunde).
Faste layouter har imidlertid også ulemper.
• På grunn av de faste dimensjonene er de lite fleksible, og tilpasser seg for eksempel ikke små eller store skjermer godt. Oftes blir mye plass bortkastet.
• De har noen begrensninger når det gjelder tilgjengelighet.
Også fleksible layouter har sine fordeler og ulemper. Først til fordelene.
• Layoutene tilpasser seg automatisk nettleservindus størrelse.
• Besøkende kan dermed ha stor innvirkning på visningen av nettstedet.
Det er imidlertid også ulemper her.
• Som utvikler kan du vanskelig kontrollere resultatene. Layoutmaler kan derfor bare implementeres i begrenset grad.
• Innholdet på sidene må tilpasses grundig.
• På store skjermer kan visningen av korte tekster virke "stygg", da de ofte vises i én linje. (CSS har imidlertid egenskaper som min-width for dette formålet).
En annen layoutform utgjør et mellomledd mellom faste og fleksible layouter. Dette er de såkalte elastiske layoutene. Deres hovedkjennetegn er måleenheten em. (Nylig har også rem blitt mer populært. I motsetning til em, avhenger rem alltid av rot-elementet, ikke av det overordnede elementet).
I disse layoutene er bredde og høyde fleksible. Designet på siden skalerer proporsjonalt med størrelsen på nettleservinduet. Denne designformen er på den ene siden sikkert den mest komplekse når det gjelder praktisk implementering. Dette skyldes rett og slett at man på forhånd må vite nøyaktig hvordan elementene oppfører seg når nettleservinduet endrer seg. Elastiske layouter brukes hovedsakelig for nettsteder som tilbyr mange bilder og videoer.
Fordelene med elastiske layouter:
• Tilgjengelig plass utnyttes optimalt.
• Innholdet vises proporsjonalt så stort som mulig.
Men elastiske layouter har selvfølgelig også sine ulemper.
• Utformingen av disse layoutene er svært kompleks.
• Gjennomføringen er alt annet enn enkel.
Valgets kval
Du må derfor bestemme hvilken av de nevnte variantene du vil bruke. Hvis du fremdeles er i begynnelsen av HTML/CSS-utviklingen din, vil jeg anbefale et fast layout først. Hvis du allerede har avansert kunnskap innen webutvikling, bør du imidlertid jobbe direkte med responsive layouter. Da er du på rett vei uansett hvilken enhet nettstedet ditt blir til slutt åpnet med.
