Design
5. juni 2023
Skab magiske brugeroplevelser med responsivt design
Responsivt design er en metode til at skabe hjemmesider og webshops, der automatisk tilpasser sig den skærmstørrelse, de bliver vist på.
Det betyder, at indholdet på siden skalerer og omorganiserer sig, så det ser godt ud, og er let at læse og navigere i, uanset hvilken skærmstørrelse der benyttes. Målet er at give brugerne en ensartet og problemfri oplevelse på tværs af alle enheder.
’Responsivt design’ er på alles læber, og det skyldes selvfølgelig fordi størstedelen af trafikken kommer fra små enheder (mobiler) og denne tendens øges blot forsat.
Dertil kommer det, at Google udelukkende ’crawler’ din mobilside når den skal vurdere din relevans. Med andre ord, så vurderer Google dine rangeringer ud fra mobiloplevelsen – og det er ligegyldigt hvor meget mobiltrafik du så har.
Mobilvenligt design vs. responsivt design
Der er to primære metoder til at skabe hjemmesider, der fungerer godt på både store og små skærme: mobilvenligt design og responsivt design. Men hvad er forskellen på de to metoder, og hvordan kan man vælge den rette løsning til sin hjemmeside eller webshop?
Mobilvenligt design (også kendt som ’mobile first’) betyder, at man har en separat version af sin hjemmeside, der er optimeret til brug på mobile enheder.
Dette kan være en god løsning for virksomheder, der har meget komplekse hjemmesider med masser af indhold og funktioner, der måske ikke fungerer godt på en lille skærm – og vigtigst af alt – så er det kun en god ide, hvis du har MEGET trafik fra mobilen, ikke kun i procent men i antal.
Ulempen ved denne metode er dog, at man skal vedligeholde to forskellige versioner af sin hjemmeside, hvilket kan være tidskrævende og ressourcekrævende.
Derudover så er der omkostningerne til design og udviklingen af dette, vil betyde at dit budget pludseligt bliver x2, da man i praksis skal udvikle 2 hjemmesider frem for 1.
Til sidst skal det siges, at Google ikke bryder sig om, at man skjuler ting. Det betyder at hvis man vil give mobilbrugerne en helt anden oplevelse en desktop brugerne, så skal man gøre sig meget umage om, at fjerne så lidt tekst som muligt, men i højere grad ”bare” præsentere det på en anden måde.
Responsivt design er en mere fleksibel og fremtidssikret løsning. I stedet for at have to separate versioner af hjemmesiden, skaber man en enkelt version, der automatisk tilpasser sig den skærmstørrelse, den bliver vist på.
Det betyder, at man kun skal udvikle og vedligeholde én hjemmeside, og at brugerne får en ensartet oplevelse uanset hvilken enhed, de besøger siden fra.
’Responsivt design’ er et begreb i metermål, forstået sådan, at man kan optimere i forskellige niveauer og grader – alt fra at elementer på hjemmesiden blot stables korrekt, til at elementer ser anderledes ud, har horisontal scroll eller noget helt 3.
Responsive hjemmesider: Det skal du tænke over
Så hvad skal man tænke på, når man skaber en responsiv hjemmeside? Der er nogle grundlæggende principper og teknikker, man skal have styr på, før man i min bog kan kalde ens hjemmeside for respons.
Først og fremmest er det vigtigt at tænke i “skærmstørrelsesgrupper” snarere end specifikke skærmstørrelser. Der er et utal af forskellige skærmstørrelser og opløsninger derude, og det ville være umuligt at designe en hjemmeside, der passer perfekt til hver enkelt.
I stedet skal man tænke i grupper af skærmstørrelser, såsom små, mellemstore og store skærme, og sikre, at siden fungerer godt på alle skærme indenfor disse grupper.
En anden vigtig del af responsivt design er at bruge “media queries”. Dette er en teknik, der gør det muligt at anvende forskellige CSS-stilarter afhængigt af skærmstørrelsen. På den måde kan man f.eks. ændre skriftstørrelsen, når siden bliver vist på en lille skærm, så teksten er lettere at læse.
Min lille huskeliste:
- Hvordan du ønsker elementerne stables
- Elementer, som har flere eksempler i sig bør have horisontal scroll, så man gør det vertikale scroll kortere.
- Hvordan skal fonten se ud (størrelse, farver m.m.)
- Er der visuelle elementer, som skal fjernes på små enheder?
- Hvordan laver man den bedste navigation?
- Hvordan ser CTA-knapper og links ud på mobilen?
Hvad så med en responsiv webshop?
Når det kommer til at skabe en responsiv webshop, er der nogle særlige udfordringer og funktioner, man skal være opmærksom på. Her er nogle nøglefunktioner, man skal tænke på, når man designer en responsiv webshop (foruden de forslag vi kom med til hjemmesider):
Produktgallerier og billeder:
Højopløselige billeder er afgørende for at give kunderne en god oplevelse, når de shopper online. Men store billeder kan også gøre siden langsom at indlæse, især på mobile enheder.
Det er derfor vigtigt at finde en balance mellem billedkvalitet og sidehastighed, når man skaber en responsiv webshop.
Navigation og menuer:
Når man skaber en responsiv webshop, skal man tænke over, hvordan navigationen og menuerne fungerer på forskellige skærmstørrelser.
Det kan være nødvendigt at skjule nogle menuer eller ændre deres placering på siden, når butikken bliver vist på en lille skærm. En populær løsning er at bruge en “hamburger-menu”, der kan åbnes og lukkes efter behov.
Indkøbsvogn og betaling:
En af de største udfordringer ved at skabe en responsiv webshop er at gøre indkøbsvognen og betalingsprocessen let og problemfri på alle enheder.
Det kan være nødvendigt at forenkle betalingsprocessen og gøre det nemt for kunderne at indtaste deres oplysninger, også på en lille skærm.
Selvom det ikke handler om responsitivitet, så overvej om den betalingsløsning du tilbyder dine kunder, fungerer godt på mobilen (har den mobilepay, ser vinduet godt ud på mobil m.m.).
Produktside oplevelsen:
Sørg for at selve produkt ’single-siden’ som det hedder, giver en god oplevelse. Det er antageligvis her, at de fleste mennesker vil bruge størstedelen af deres tid, på din webshop.
Udfordringer i responsivt design
At mestre responsivt design er ikke altid en dans på roser. Der er masser af udfordringer, man kan støde på, når man forsøger at skabe den perfekte responsive hjemmeside eller webshop. Her er nogle af de sjove og frustrerende situationer, man kan ende i:
Den evige kamp mellem design og funktionalitet
Når man skaber en responsiv hjemmeside, skal man finde en balance mellem et flot design og en brugervenlig funktionalitet.
Det kan være fristende at gå all in på de visuelle effekter og animationer, men det er vigtigt at huske, at siden skal være nem at bruge og navigere i, også på en lille skærm.
Tekst, der nærmest forsvinder
Når man arbejder med responsivt design, kan man støde på situationer, hvor teksten bliver så lille på en mobilskærm, at den nærmest er umulig at læse. Det er vigtigt at teste sin hjemmeside på forskellige skærmstørrelser og sørge for, at teksten altid er læsbar og let at forstå.
Billeder, der går amok
En anden klassisk udfordring i responsivt design er at få billederne til at skalere og opføre sig korrekt på forskellige skærmstørrelser.
Det kan være kompliceret at få et billede til at fylde hele skærmen på en stor skærm og samtidig skalere ned til en lille skærm, uden at det ser mærkeligt ud eller går på kompromis med kvaliteten.
Ønsket om den bedste brugeroplevelse vs. Dit budget
Den største hæmsko for at gå fuldt ud på kundeoplevelsen og dermed responsivt design er pengepungen.
Der er ingen grænser for, hvor mange parameter, som man kan justere på, når man taler responsivt design. Dertil kommer det, at ”hvad god brugeroplevelse er” også er subjektivt, så du skal appellere til mange forskellige brugsmønstret.
Det er derfor, at jeg siger at responsivt design er et begreb i metermål. Da en siden reelt er responsiv hvis du kan tilgå og læse indholdet på alle enheder. Men der er lang vej fra dette, til at give den bedste brugeroplevelse på alle enheder.
Derfor må man ofte tage nogle valg, om hvad man VIL optimere – og vigtigere – hvilke skærmstørrelser som man vælger at prioritere. Og så må man vende det blinde øje til resten, da budgettet nemt bliver tømt i det sorte hul, som er mobiloptimering.
Værktøjer til at teste og forbedre responsivt design
Der er flere værktøjer og ressourcer, der kan hjælpe dig med at teste og forbedre dit responsivt design:
- Google Chrome’s Developer Tools indeholder en række værktøjer og funktioner, der gør det nemt at teste og debugge responsivt design. Du kan bl.a. simulere forskellige skærmstørrelser, teste sidehastighed og finde CSS-fejl.
- Responsinator er et online værktøj, der gør det nemt at teste din hjemmeside på forskellige skærmstørrelser og enheder. Du skal blot indtaste din hjemmesides URL, og værktøjet vil vise, hvordan siden ser ud på forskellige skærme.
- BrowserStack er en betalt tjeneste, der giver dig adgang til et stort udvalg af enheder og browsere, så du kan teste din hjemmeside under realistiske forhold. Det er en nyttig ressource for webdesignere, der ønsker at sikre, at deres hjemmeside fungerer godt på tværs af forskellige platforme og enheder.
Konklusion: Omfavn responsivt design men begræns dig
I dagens mobil-drevne verden er det vigtigere end nogensinde at mestre responsivt design og skabe hjemmesider og webshops, der fungerer godt på både store og små skærme.
Ved at adoptere en mobil-først tilgang og bruge de rigtige værktøjer og teknikker kan man skabe en flot, funktionel og brugervenlig hjemmeside, der appellerer til brugerne og sikrer succes online.
MEN!
Mulighederne er uendelige, og det er budgettet ikke. Så træf nogle valg baseret på; hvad giver dig mest, med mindst indsats, og så implementer disse. De sidste finjusteringer, bør du se imellem fingre med, da du aldrig kan tømme ”optimeringslisten”.
Indlæg af
