Olika typer av hemsidelayout och mobilanpassning

2015-04-15

Fixed layout

Fixed layout är inte mobilanpassad. Sidan kommer att se likadan ut på alla storlekar av skärmar och kommer inte att anpassa storleken till skärmen. Detta kommer att resultera i att användaren behöver förstora sidan och sedan scrolla horisontellt på skärmar av mindre storlek än den som sidan är anpassad för.

Fluid layout

I en fluid layout används procentenheter istället för pixlar för bredd. Om sidan har fler kolumner är dessa alltid samma procent av helheten. Sidan kommer att se likadan ut i alla storlekar men den kommer att skalas flytande för att passa skärmen.

Exempel: En sida med tre kolumner som är 33% i bredd kommer att fortsätta vara 33% på alla skärmar. Sidan och kolumnerna kommer alltid täcka upp 100% av skärmen och horisontellt scrollande kommer att undvikas.
Om sidan inte alltid ska täcka upp 100% av skärmen kan man använda sig av en max-width på exempelvis css-klassen content. Då kommer sidan täcka upp 100% tills den är storleken som är specificerad i max-width.

Exempel på css med max-width:
.content {
width: 100%;
max-width: 1100px;
}

I exemplet ovan kommer sidan täcka upp 100% av skärmen upp till 1100px då den inte kommer att bli bredare även om skärmen är större.

Adaptive layout

Css media queries tillåter dig att ändra css regler baserat på till exempel skärmstorlek eller enhetsorientering. Media queries används ofta till ett antal standardstorlekar på skärm, till exempel en storlek för datorer, en storlek för surfplattor och en storlek för mobiltelefoner. Sidan kommer inte skala flytande utan ändras när storleken matchar den som är inskriven för respektive media query.

Exempel på css med media query:
//normal css
#header-image {
background-repeat: no-repeat;
background-image: url(’image.png’);
}
//visa större bild om skärmen är stor
@media screen and (min-width: 1200px) {
#header-image {
background-image: url(’large-image.png’);
}
}

Responsive layout

Man kan säga att responsive layout är en blandning av Fluid och Adaptive. Bredden anges i procentenheter så att sidan skalas och använder sedan media queries till olika brytpunkter där innehållet passar bättre om layouten ändras för att passa storleken på skärmen.

Exempel: En sida har en layout med tre kolumner på stora skärmar. Kolumnerna ser fortfarande bra ut på en surfplatta eftersom de skalas flytande men de blir för små på mindre skärmar, som mobiler. Då används en media query så att layouten ändras till en kolumn istället för tre.

Responsive layout är en bra lösning om sidans användare använder många olika skärmstorlekar. Detta är också den layout som är mest framtidsvänlig. Nu finns det inte längre några få standardstorlekar när det gäller skärm, surfplattor och mobiltelefoner. De flesta skärmar, surfplattor och mobiltelefoner blir större och större och får bättre upplösning hela tiden. Detta innebär att det är svårt att hänga med alla storlekar och göra separata media queries för alla. Med responsive layout skalar sidan snyggt i alla storlekar och ändrar layout när innehållet kräver det och inte för att passa en specifik storlek på skärm.