Den samme side skal kunne læses og bruges i et smalt mobilvindue og på en stor skærm. Tilpasningen handler om prioritering og sammenhæng, ikke kun om at gøre alt mindre.
Lad indholdet styre, hvornår layoutet ændres
Et responsivt layout bruger fleksible kolonner, billeder og mål frem for én fast bredde. Med CSS kan præsentationen ændres, når pladsen bliver trang. To kolonner kan blive til én, mens navigationen kan få en anden form. Indholdets rækkefølge skal fortsat give mening.
Et breakpoint er et sted, hvor layoutreglerne ændres. Vælg det, når indholdet har brug for en ændring, frem for kun at følge bestemte telefonmodeller. Et vindue på en computer kan også være smalt, og brugeren kan have større tekst eller browserzoom slået til.
Bevar det, brugeren skal kunne gøre
Det er fristende at skjule besværligt indhold på mobilen. Begynd i stedet med at spørge, hvordan det kan præsenteres tydeligt. En vigtig betingelse eller fejlbesked bliver ikke mindre vigtig, fordi skærmen er lille. Overskrifter og afstande kan hjælpe med at skabe overblik.
Tag en fiktiv sammenligning af bookbare tider. På en stor skærm kan dato, sted og pris stå i en tabel. På en mindre skærm kan en anden præsentation være nødvendig. Brugeren skal stadig kunne forbinde oplysningerne og vælge ud fra de samme relevante forhold.
Test mellem de pæne skærmbilleder
Åbn siden i et smalt vindue, og udvid det langsomt. Se efter indhold, der stikker ud, knapper der bliver klemt, og overskrifter der bryder uhensigtsmæssigt. Kontroller også store vinduer, hvor meget lange tekstlinjer kan gøre læsningen besværlig. Prøv stående og liggende visning på en rigtig telefon, når det er muligt.
Brug realistisk indhold: det længste navn, en lang overskrift, flere resultater og en tom liste. Kontroller indlejrede elementer og formularer særskilt. En side kan fungere med testindhold og bryde sammen, når den rigtige tekst eller et eksternt bookingsystem kommer ind.
- Gennemfør den vigtigste opgave ved små, mellemstore og store bredder.
- Prøv zoom og større tekst, og se efter skjulte kontroller.
- Kontrollér, at menuer kan åbnes, lukkes og betjenes uden overlap.
Kontrollér betjening, ikke kun layout
Mobil, tablet og computer fortæller ikke sikkert, hvordan en person betjener siden. Der kan bruges berøring, mus, tastatur eller hjælpemidler. Vigtige handlinger må derfor ikke afhænge af, at brugeren kan holde en mus over et element. Synligt tastaturfokus og tydelige labels skal følge med layoutet.
Afprøv formularer med fejl og med skærmtastaturet åbent. Er instruktioner og beskeder til at finde? Er næste trin stadig synligt og forståeligt? At elementerne kan være på skærmen, er kun begyndelsen. De skal også hænge sammen under brug.
Hold layout, hastighed og tilgængelighed adskilt i vurderingen
En responsiv side kan stadig hente for store billeder eller reagere langsomt. Den kan også have lav kontrast, manglende labels eller dårlig tastaturbetjening. Responsivt layout er derfor en del af kvaliteten, ikke en samlet godkendelse af brugeroplevelsen.
Aftal de centrale forløb og testbetingelser ved aflevering. Notér konkrete problemer med side, vinduesstørrelse og trin, så de kan genskabes. Efter rettelsen kontrolleres det berørte forløb igen. Den form for dokumentation er mere anvendelig end et generelt udsagn om, at siden virker på alle enheder.
Tag med videre
Det vigtigste
at huske.
- Lad layoutet tilpasse sig indhold og tilgængelig plads.
- Test opgaver, zoom og indhold mellem de valgte skærmstørrelser.
- Vurder hastighed og tilgængelighed særskilt fra layoutet.
Lad os gøre det klart
Spørgsmål & svar
Er mobilvenlig og responsiv det samme?
De bruges ofte sammen. Responsiv beskriver tilpasningen af layoutet, mens en god mobiloplevelse også kræver blandt andet brugbar betjening, læsbarhed og passende hastighed.
Kan jeg nøjes med browserens mobilvisning?
Den er nyttig til mange layoutchecks. En rigtig enhed kan desuden afsløre problemer med berøring, skærmtastatur og faktisk adfærd.
Giver responsivt design en bestemt Google-placering?
Nej. Et layoutvalg garanterer ikke en placering. Byg og vurder siden ud fra brugernes opgaver og den samlede kvalitet.
Hvad er et breakpoint i responsivt design?
Et breakpoint er en betingelse, hvor bestemte layoutregler ændres, eksempelvis fra flere kolonner til én. Vælg ændringen, når indholdet har brug for den, så siden også fungerer mellem de skærmstørrelser, der blev brugt i designfilen.
Hvad betyder mobile first?
Tilgangen begynder med begrænset plads og udvider layoutet, når der er mere plads til rådighed. Det kan hjælpe med prioritering og enklere grundregler. Den færdige løsning skal stadig vurderes på større skærme og med forskellige inputmetoder.
Hvordan gør man billeder responsive?
Lad billedet tilpasse sig sin beholder, og lever passende billedstørrelser til forskellige situationer. Bevar proportionerne og angiv dimensioner, så layoutet kan reservere plads. Et fleksibelt layout alene reducerer ikke nødvendigvis den fil, der hentes.
Hvordan viser man brede tabeller på mobil?
Bevar relationen mellem overskrifter og celler. En vandret rullende tabel kan være passende, mens andre tabeller kan omstruktureres. Undersøg, om brugeren fortsat kan sammenligne de nødvendige oplysninger og opdage, at der findes mere indhold.
Skal man skjule indhold på små skærme?
Vigtige oplysninger og handlinger skal fortsat kunne findes. Undersøg først en anden rækkefølge, opdeling eller præsentation. Det er muligt at fjerne ren dekoration, men en lille skærm ændrer ikke automatisk, hvad brugeren har behov for at vide.
Hvorfor virker hover ikke som eneste betjening på mobil?
En berøringsskærm har ikke nødvendigvis en markør, som kan holdes over et element. Funktioner skal derfor også kunne nås med de relevante klik-, berørings- og tastaturhandlinger. Hover kan supplere en oplevelse uden at være den eneste vej til indhold.
Læs selv videre
Kilder & fordybelse
Guiden bygger på disse kilder og erfaring fra egne projekter.
