Skift til responsive design

Det er risikofrit at skifte din hjemmeside til responsive design. For de fleste vil responsive design være en meget mere effektiv måde at administrere deres mobile tilstedeværelse på, og det vil spare mange vedligeholdelsestimer i forhold til både at have en hjemmeside og en mobil hjemmeside.

Hvad du skal være opmærksom på når du skifter til responsive

Der er flere ting du skal tjekke, inden du ændrer en ikke-responsive hjemmeside til responsive.

Vigtigst af alt er det, at du er opmærksom på, om dine siders indhold passer til små skærme, eller om de skal tilpasses. Hvis du eksempelvis har en hjemmeside med en kompleks struktur og meget indhold, kan du overveje, om alle siderne også er relevante på den mobile visning. Hvis ikke kan du med fordel vælge at skjule de irrelevante sider for de brugere, der besøger din hjemmeside fra mobile enheder.

Se her hvordan du skjuler moduler og sider på hhv. mobil og desktop.

På den måde sikrer du, at den besøgende ikke bliver forvirret over dit komplekse indhold på en lille skærm, eller at nogle af dine menupunkter ikke kan vises på skærmen, fordi de fylder for meget. Samtidig sikrer du et fokus på noget bestemt indhold på din hjemmeside for de mobile besøgende, hvilket kan være en stor fordel.

1: Er dine nuværende sider optimeret til responsive?


Når du har skiftet til responsive design, bør du (inden du publicerer din hjemmeside) gennemgå alle dine sider og sikre dig, at layoutet og indholdet på hver side er mobilvenligt og ser ordentligt ud på den mobile visning.

Hvois du har brugt forskellige moduler, som ikke er fuld-bredde moduler, så skal du fx være opmærksom på om de "stables" korrekt oven på hinanden i den mobile visning. Hvis modulerne ikke placerer sig oven på hinanden, så det ser overskueligt ud og giver mening indholdsmæssigt, så bør du enten udskifte modulet med et andet modul eller skjule det fra den mobile visning.

Tjek også, om modulerne vises i den rigtige rækkefølge på den mobile visning. Ofte, hvis du fx bruger en sideskabelon med flere kolonner, er det ikke sikkert, at modulerne stabler sig i den rækkefølge, du havde forestillet dig. Hvis ikke så er det op til dig selv at vurdere, om du vil skjule modulerne på mobilvisningen, skjule hele siden, lade den blive som den er, eller tilføje nye moduler i den korrekte rækkefølge, som du skjuler på desktopvisningen. Læs her hvordan du skjuler moduler og sider.

2: Er dine sider for tunge eller komplekse?


Hvis din hjemmeside har mange undersider, så bør du overveje at skjule nogle af siderne og indholdet for de brugere, der besøger hjemmesiden fra mobile enheder. For meget tekst og for kompliceret navigation er ikke mobil-venligt, og derfor vil det sandsynligvis irritere eller forvirre dine mobile besøgende, hvis din hjemmeside er for kompleks at finde rundt på.

Du bør også overveje at skjule sider, der indeholder "tungt" indhold, fx mange billeder eller videoer. Sådanne sider tager lang tid at loade for mobile brugere, og det kan betyde, at de forlader din side igen før de overhovedet er kommet ind på den.

3: Differentier dit indhold


En af de store fordele ved responsive design er, at du kun skal opdatere din hjemmesides indhold ét sted fra. Alle ændringer og opdateringer du laver, vil automatisk blive synligt for både desktop og mobile brugere.

Med det sagt er det ikke alle typer af indhold (tekst, billeder, video), som er lige relevant og brugervenligt på både store og små skærme. Du vil hurtigt erfare, at det kan være en fordel at skære ned på indholdet, når du målretter dig de små skærme. På hvert modul har du derfor muligheden for at vælge, om det skal vises på alle enheder eller kun på enten desktop eller mobil. Du kan altså vælge mellem tre indstillinger:

1) Vis modulet på både mobil og desktop (Standardindstilling for alle moduler)

2) Vis kun modulet på desktop

3) Vis kun modulet på mobil.

Eksemplet nedenfor viser en "Om"-side med kontaktinformation om virksomheden. På desktop-visningen er illustrationen synlig, men på den mobile visning er illustrationen blevet skjult for at undgå, at teksten ikke bliver skubbet for langt ned på siden på den smalle mobilskærm, og at siden ikke er for lang tid om at loade.