Innan du praktiskt implementerar ett layout finns det några grundläggande saker att klargöra. Först och främst bör du bestämma vilken typ av layout du vill använda. I princip finns det tre möjligheter här.
• Fast
• Flexibel
• Elastisk
CSS möjliggör layouter med fasta eller flexibla dimensioner. Fasta layouter använder vanligtvis pixelmått. Flexibla layouter baseras däremot på procentvärden. Båda layoutvarianterna har sina fördelar och nackdelar.
Fasta layouter används oftast när grafik används för att forma layouten. (Det finns dock undantag här genom användning av CSS-bakgrundsbilder). När det gäller pixelnoggrann placering av element i layouter, används vanligtvis också fasta positioner. Vid denna typ av layout fastställs vanligtvis åtminstone bredden på layouten till ett fast antal pixlar. Denna bredd är vanligtvis anpassad för specifika skärmupplösningar.
Flexibla layouter fungerar annorlunda. Här anges ingen fast bredd. Istället anpassar sig layouten till bredden på webbläsarfönstret.
I sådana layouter anges till exempel bredden i procentvärden. Om en användare ändrar storleken på webbläsarfönstret kommer även layoutens storlek att ändras.
Tack vare moderna CSS-egenskaper finns det nu ytterligare en layoutvariant, nämligen responsiv layout. Här anpassas layouten så att den exempelvis ser helt annorlunda ut på en smartphone jämfört med en stationär dator. På PSD-Tutorials.de har exempelvis arbetats med en sådan layout. Om du besöker sidan på en stationär dator med en "normal" webbläsarfönsterstorlek, visas följande bild.
När du minskar fönstret ändras faktiskt placeringen av elementen på webbplatsen.
Att skapa en responsiv layout är relativt krävande. Skärmstorleken hos besökaren måste bestämmas och en lämplig layout måste sedan presenteras för denne. Och denna lämpliga layout måste faktiskt utvecklas för de olika skärmstorlekarna. En besökare som besöker din webbplats med en stor skärm kommer till exempel att få en tredelad layout. Om en annan besökare besöker din webbplats med en smartphone kommer denne att se en enkelradig layout.
Fördelar och nackdelar med varianterna
Innan du implementerar en layout måste du fundera över vilken av de nämnda layoutformerna du vill använda. Jag vill kort visa er vilka fördelar och nackdelar fasta layouter har.
• Designmallar är antagligen enklast att implementera här.
• Om man håller sig till standardupplösningar finns det sällan några problem med webbplatsens presentation.
• Layouterna är lättförståeliga att förmedla. (Denna fördel kommer naturligtvis till nytta när du som webbutvecklare vill förklara en layout för en kund).
Fasta layouter har dock också nackdelar.
• På grund av de fasta måtten är de oböjliga, och anpassar sig alltså inte till mycket små eller stora skärmar. Ofta slösas det mycket utrymme.
• De har begränsningar när det gäller tillgänglighet.
Också flexibla layouter har sina styrkor och svagheter. Först till fördelarna.
• Layouterna anpassar sig automatiskt till webbläsarens fönsterstorlek.
• Besökarna kan således ha stor påverkan på webbplatsens presentation.
Även här finns nackdelar.
• Du som utvecklare kan svårt kontrollera resultaten. Layoutanvisningar kan därför bara genomföras i viss utsträckning.
• Sidans innehåll måste anpassas noggrant.
• På stora skärmar kan presentationen av korta texter bli "osnygg", eftersom dessa ofta bara visas på en rad. (Dock erbjuder CSS lämpliga egenskaper som min-width för detta).
En annan layoutform utgör en kompromiss mellan fasta och flexibla layouter. Det handlar om så kallade elastiska layouter. Deras huvuddrag är måttenheten em. (Numera blir även rem allt vanligare. Till skillnad från em hänvisar rem alltid till rotelementet, inte som em till det överordnade elementet).
I dessa layouter är bredden och höjden flexibla. Sidans design skalar proportionellt med webbläsarfönstrets storlek. Denna designform är definitivt den mest komplexa när det gäller praktisk implementering. Det beror helt enkelt på att man i förväg måste veta väldigt noggrant hur elementen kommer att bete sig när webbläsarfönstret ändras. Elastiska layouter används framför allt för webbplatser där många bilder och videor erbjuds.
Fördelarna med elastiska layouter:
• Tillgängligt utrymme används optimalt.
• Innehållet visas proportionellt så stort som möjligt.
Men naturligtvis har även elastiska layouter sina nackdelar.
• Utformningen av dessa layouter är mycket komplex.
• Även implementeringen är allt annat än enkel.
Valfrihet
Du måste alltså bestämma vilken av de nämnda varianterna du vill använda. Om du är helt i början av din HTML/CSS-utveckling rekommenderar jag att börja med en fast layout. Om du redan har avancerade kunskaper inom webbutveckling bör du istället arbeta direkt med responsiva layouter. Här är du på rätt sida, oavsett vilken enhet din webbplats kommer att besökas från.
