Responsivt design til mobiltelefoner bør indgå i planlægningen, før farver, billeder og skrifttyper bliver valgt. En hjemmeside skal ikke bare kunne klemmes ned på en smal skærm. Indhold, navigation og funktioner skal kunne betjenes med fingrene, fungere i højformat og være brugbare under skiftende forbindelsesforhold. Rækkefølgen i arbejdet har betydning. Bliver mobilvisningen først vurderet til sidst, kan det kræve ændringer i både tekst, opbygning og kode. Begynd derfor med de opgaver, besøgende skal løse, og lad dem styre de næste beslutninger.
Begynd med opgaverne i dit responsive design
Første skridt er at beskrive, hvad besøgende kommer for at gøre. På en frisørs hjemmeside kan det være at finde en pris, vælge en behandling og bestille en tid. På en foreningsside kan det være at se træningstider eller melde et barn til. Skriv opgaverne ned i prioriteret rækkefølge, og hold dem adskilt fra virksomhedens egne ønsker om at fortælle sin historie.
Vælg derefter nogle få centrale sidetyper, som skal undersøges først. Det kan være forsiden, en oversigt, en detaljeside og en kontaktformular. Beskriv for hver side, hvilken handling der skal være synlig tidligt, og hvilke oplysninger der skal understøtte den. En adresse bør eksempelvis ikke gemmes under flere afsnit om virksomhedens værdier, hvis mange besøgende kommer for at finde vej.
Resultatet skal være et kort arbejdsgrundlag med konkrete opgaver og succeskriterier. Så kan senere designvalg vurderes ud fra noget mere håndgribeligt end, om siden ser indbydende ud på en stor skærm. Et succeskriterium kan være, at besøgende kan finde åbningstiderne direkte fra forsiden uden først at åbne menuen.
Sortér indholdet, før du tegner skærmbilleder
Når opgaverne er prioriteret, skal indholdet gennemgås. Find de tekster, billeder, dokumenter og kontaktoplysninger, der allerede findes, og markér det, der mangler eller er forældet. Det er svært at planlægge en brugbar mobilside med fyldtekst. Rigtige overskrifter, priser og produktnavne fylder ofte anderledes end de midlertidige eksempler og kan derfor ændre layoutet.
Del indholdet op efter betydning. Hvad skal læses først, hvad hører til længere nede, og hvad kan ligge på en selvstændig side? En side om et kursus kan begynde med titel, dato, sted og tilmelding. En længere beskrivelse af undervisningsformen kan følge bagefter. Arbejdet med rækkefølgen hjælper også med at afklare, hvilke felter redaktøren skal kunne udfylde i hjemmesidens administrationssystem.
Undgå at løse pladsproblemer ved blot at skjule oplysninger på mobilen. Hvis leveringsvilkår eller praktiske betingelser er nødvendige for at træffe en beslutning, skal de stadig være tilgængelige. Forkort gentagelser og upræcise formuleringer, før du fjerner indhold, som besøgende faktisk har brug for.
Planlæg det responsive design med den smalle skærm som udgangspunkt
Lav nu en enkel skitse til en smal skærm. Brug eksempelvis en bredde på 360 eller 390 CSS-pixel som arbejdsformat. Det er et udgangspunkt, ikke en bestemt telefonmodel, hjemmesiden skal passe til. Skitsen skal vise rækkefølge, afstande og placering af handlinger. Farvenuancer og dekorative detaljer kan vente.
Begynd med én kolonne, og undersøg, hvordan overskrifter, billeder og knapper hænger sammen. En knap til tidsbestilling bør stå tæt på de oplysninger, som gør besøgende klar til at bestille. Hvis flere handlinger konkurrerer om opmærksomheden, skal deres indbyrdes prioritet være tydelig. Tre lige markante knapper skaber ikke nødvendigvis tre lige brugbare valg.
Udvid derefter skitsen gradvist til større bredder. Når indholdet har plads til det, kan du tilføje en ekstra kolonne eller en bredere navigation. På den måde følger layoutets skift indholdets behov frem for en fast liste over telefoner og tablets. Aftal samtidig, hvordan lange ord og brede billeder skal håndteres, så de ikke skubber indhold ud over skærmens kant.
Fastlæg navigation og formularer før den visuelle finpudsning
Når sidernes grundstruktur ligger fast, skal de centrale forløb kunne afprøves. Besøgende skal kunne åbne menuen, finde en relevant side og gennemføre den ønskede handling uden at gætte. Brug genkendelige menupunkter som priser, kontakt og åbningstider, når de beskriver indholdet præcist. Kreative betegnelser kan kræve unødvendig fortolkning på en lille skærm.
Giv også knapper og felter plads nok til berøring. Klikbare elementer skal have tilstrækkelig størrelse og afstand, så et tryk ikke nemt rammer naboknappen. Kontrollér både menuknapper, små ikoner og afkrydsningsfelter. Det synlige symbol kan godt være lille, selv om selve trykfladen er større. Afprøv webdesigngotland.se
på en telefon, og undersøg, hvordan menuens trykflader fungerer på en smal skærm.
I formularer bør hvert felt have en tydelig betegnelse, og fejlbeskeder skal forklare, hvad der skal rettes. Vælg passende felttyper, så telefonen eksempelvis kan vise et egnet tastatur til telefonnumre. Afklar desuden, hvad der sker, hvis en bruger går tilbage, mister forbindelsen eller sender formularen med manglende oplysninger. Disse situationer skal tænkes ind, før udseendet bliver låst.
Aftal tekniske rammer, inden siden bliver bygget
Inden udviklingen begynder, skal designer, udvikler og indholdsansvarlig være enige om de tekniske rammer. Aftal, hvordan layoutet tilpasser sig mellem de skitserede bredder, og hvem der beslutter ændringer, når det faktiske indhold udfordrer designet. Beskriv også, hvilke browsere og enheder der indgår i afprøvningen, så forventningerne er tydelige fra begyndelsen.
Billeder kræver særlig opmærksomhed. Et stort forsidefoto skal kunne leveres i passende størrelser, så alle skærme ikke modtager den samme tunge fil. Angiv billedets dimensioner i koden, så der kan reserveres plads under indlæsningen. Aftal desuden, hvordan motivet beskæres på smalle skærme, så eksempelvis et ansigt eller et produkt ikke forsvinder ud af udsnittet.
Skrifttyper, video og eksterne funktioner skal også med i planen. En chatfunktion eller en indlejret kalender kan påvirke både indlæsning og betjening. Undersøg dem tidligt, og fastlæg et alternativ, hvis de ikke fungerer tilfredsstillende på mobil. Det giver bedre mulighed for at tilpasse løsningen end at skulle ændre et centralt forløb kort før offentliggørelsen.
Test hele forløb og afsæt tid til rettelser
Afprøvningen skal følge de opgaver, der blev defineret i starten. Bed en testperson om at finde en bestemt pris, kontakte virksomheden eller gennemføre en tilmelding. Hold øje med tøven, fejlagtige tryk og steder, hvor personen leder efter oplysninger. Undgå at forklare løsningen undervejs. Ellers bliver det uklart, hvad siden selv formår at formidle.
Brug både browserens visning af forskellige skærmstørrelser og fysiske telefoner. En simulering viser meget om layoutet, mens en rigtig telefon også giver mulighed for at afprøve tastatur, berøring og den del af siden, der er synlig på skærmen. Prøv desuden længere overskrifter, større tekstindstilling og sider med flere fejlbeskeder. Layoutet skal kunne håndtere mere end det pæne standardeksempel.
Læg en særskilt rettelsesrunde ind før offentliggørelsen. Registrér problemer med en kort beskrivelse, den anvendte enhed og den forventede funktion. Prioritér først fejl, der blokerer centrale handlinger, derefter problemer med læsning og navigation og til sidst mindre visuelle afvigelser. Gentest de rettede forløb, så en ændring ét sted ikke skaber en ny hindring et andet sted.
Hvornår skal mobilvisningen testes første gang?
Test den første klikbare skitse, så snart menu, indholdsrækkefølge og centrale handlinger hænger sammen. På det tidspunkt kan du stadig flytte en kontaktknap eller forenkle et tilmeldingsforløb uden at skulle ændre en færdig løsning. Gentag testen, når siden er bygget med rigtige tekster og billeder. Kontrollér her, om de planlagte handlinger stadig er nemme at finde, og om indholdet passer ind uden uhensigtsmæssige linjeskift eller beskæringer.
Skal mobil og computer vise det samme indhold?
Som udgangspunkt skal besøgende have adgang til de samme oplysninger og funktioner, men præsentationen må gerne variere. En bred oversigt kan eksempelvis vises som stablede felter på mobilen, hvis sammenhængen bevares. Sørg for, at det stadig fremgår tydeligt, hvilke betegnelser og værdier der hører sammen. Kontrollér især, at priser, betingelser og kontaktmuligheder ikke forsvinder, når skærmen bliver smallere.