Mobilvenlig hjemmeside


Der er typisk to måder at forholde sig til en mobilvenlig hjemmeside på. Enten udarbejdes en dedikeret mobil-version af hjemmeside – dette ses typisk ved, at hjemmesiden har en separat version fx på et subdomæne (m.domæne.dk). Eller alternativt kan man gå den mere “responsive” vej. Med “responsive” (og adaptive) webdesign refereres der populært til webdesigns, der tilpasser sig den pågældende enhed (fx laptop, tablet eller smartphone).

Hvad er responsive eller mobilvenligt webdesign / hjemmeside-design?

Som nævnt ovenfor, kan udfordringen med at lave en mobilvenlig hjemmeside gribes an på forskellige måder. Så vidt muligt, vil jeg grundlæggende argumentere for, at man går efter et responsive design. At et hjemmeside-design er responsive betyder, at den “reagerer” på omgivelserne. Og som bekendt er omgivelserne i denne sammenhæng en blanding af browseren og skærmstørrelsen. En 27″ iMac stiller andre krav til præsentationen end en iPhone (eller anden smartphone). Imellem disse to yderpunkter ligger en række mellemstationer, såsom tablets, smartphone i landscape format (når den ligger ned), mm.

Hvis en hjemmeside er bygget op udfra en responsive tilgang, vil man i nyere browsere (fx Safari, Chrome, Firefox og Internet Explorer 9+) kunne se, hvordan hjemmesiden opfører sig i forskellige skærmstørrelser. Det illustreres let ved at resize browservinduet og ganske enkelt tage fat i højre side/kant af vinduet og trække mod venstre, så vinduet gradvist bliver smallere.

I transformationen fra stor til lille skærm (eller omvendt) vil der typisk ske en række ændringer i form at størrelser, placeringer, synlighed, osv. af elementer. På de små skærme kan det være en god idé at skjule de elementer, der ikke 100% relaterer sig til sidens primære pointe. Det kunne fx være banner-annoncer, store footere med yderligere info, osv.

Forskellen på at resize en hjemmeside, der er baseret på et responsive / adaptive design-mønster og en hjemmeside, der har fast definerede bredder, strukturer osv, er, at man på en meget lille skærm vil få en “sammenpresset” version af hjemmesiden (dvs. med meget små bogstaver). Dette er ikke særlig mobil-venligt. I et mobil-venligt design, vil man have mulighed for at bevare tekst-størrelser, vise billeder i et passende format, skjule mindre relevante elementer, osv.

Læs mere om forskellen på adaptiv og responsive webdesign her…