Tjekliste til det responsive website – sådan undgår du at få bank af Google

15. april 2015

Af Søren Vasø Hansen om Kommunikation

Google er internettets bedste ven. Det er Googles algoritme, som sørger for, at vi får kvalificerede resultater, når vi søger.

Men hvordan afgør Google, hvad der kan karakteriseres som kvalificerede resultater? Der er mange ting, der spiller ind – for eksempel hvor mange der linker til dig, om dine tekster er relevante i forhold til søgningen, og om din hjemmeside er bygget ordentligt op.

Derfor kommer det heller ikke som en stor overraskelse, at Google her den 21. april begynder at sortere ud i resultaterne fra mobilsøgninger. Kort sagt, hvis dit website ikke er mobilvenligt, når en søgning kommer fra en mobil – ja, så kommer du formenligt ikke med i søgeresultatet.

For brugerne er det fedt, fordi det giver bedre resultater. Hvis du som virksomhed ikke har et responsivt website – altså et website, som selv tilpasser sig, uanset om det bliver besøgt fra mobil, tablet eller desktop – ja, så er det knap så fedt.

44 procent af trafikken på det danske marked kom fra et mobilt device i februar (kilde: FDIM). Så potentielt vil du få samme procent mindre besøgende på dit website, hvis det ikke er responsivt. Nogle brancher bliver hårdere ramt end andre, men alle kommer til at mærke ændringen.

Hvad gør jeg så?

Du sætter gang i processen med at lavet dit website responsivt. Du kan godt bruge alt dit nuværende indhold og blot få lavet sitet responsivt, og så er alt godt igen.

Der er dog en række vigtige elementer, som du skal have styr på, inden dit website bliver lavet om. Her er en tjekliste, som du bør snakke med dit bureau om:

1. God semantisk kode

Det er nu ikke noget nyt, blot fordi det er responsivt, men sørg altid for at få bygget god semantisk kode. Det betyder, man overholder nye standarder for at give så god en oplevelse som muligt både for brugere og søgemaskiner.

2. Undgå ”dobbelt-HTML”

Når man bygger responsivt, så kan man skjule og vise elementer, alt efter hvilken platform der kigger. Er det en tablet, så viser vi noget bestemt. Er det en mobil, så viser vi noget andet.

Udfordringen er, at det gør løsningen større og dermed langsommere. God kode skal kunne omforme indholdet til de forskellige platforme og dermed undgå “dobbelt-HTML”.

3. Menu

Menustrukturen bliver endnu vigtigere, nu hvor der er mindre plads at navigere på. Der skal laves en mobilmenu, som reagerer på tryk. Et fingeraftryk er cirka 35x35 pixels, og det skal være nemt at ramme de enkelte punkter. Samtidig skal brugerne ikke scrolle for meget for at kunne se hele menuen.

4. Klik vs. tryk

Hvor vi før klikkede, der trykker vi nu. Så husk, at de effekter, man før havde ved at holde musen over noget, nu forsvinder. For eksempel at links bliver understreget, når musen føres over dem. Derfor er det vigtigt, at man designer det på en måde, så forståelsen af indholdet er intakt, selv om man ikke har den ekstra effekt at arbejde med.

5. Prioriter indholdet

Når skærmen bliver mindre, skaber man plads til indholdet ved at lade flere elementer ”falde nedad”, så de kommer til at lægge vertikalt frem for horisontalt. Derfor er det vigtigt at prioritere rækkefølgen, så det kan lægges på den måde, der giver bedst mening for brugeren. Det er også muligt at skjule indhold, som ikke har relevans på en mobil.

6. Skriftstørrelser

Skriftstørrelsen skal tilpasse sig de forskellige størrelse skærme. Det er et af de punkter, som Google går ind og tjekker efter, og samtidig er det afgørende for, om folk gider læse på dit website fra mobilen eller ej.

7. Gør ikoner vektoriserede

I stedet for at bruge bitmap (gif og jpg) til ikoner, så sørg for, at de bliver bygget direkte i css. På den måde bliver de pænest muligt på retina-skærme (for eksempel iPhone og iPad), og kan bruges i alle mulige sammenhænge.

Brug tjeklisten, når du får lavet din responsive løsning. Men lad være med at overreagere på Googles udmelding. Det er stadig et stykke nede af listen, når det handler om at have et godt website - der vigtigste er stadig at have godt indhold. Uden det rigtige indhold vinder du alligevel ikke noget på at få en flot responsiv løsning.

Søren Vasø Hansen er Creative Director og partner i Form Agenda - et designbureau med base i Aalborg. Han arbejder dagligt med udvikling af brands og har vundet flere priser for sit identitetsarbejde for B2B-segmentet.