De fleste nettsider fungerer på mobil i dag. Menyen åpner seg. Teksten får plass. Bildene skalerer. Kolonnene legger seg pent under hverandre. Ingenting stikker utenfor skjermen. Det er bra. Men det er også et ganske lavt krav. For spørsmålet er ikke bare om nettsiden fungerer på mobil. Spørsmålet er om den fortsatt gjør jobben sin.
1400 piksler blir til 390
På en stor skjerm har vi god plass. Vi kan ha et stort bilde ved siden av teksten. Tre tjenester på én rad. En overskrift, ingress og knapp synlig samtidig. Vi kan bruke luft til å vise hva som hører sammen og hva som er viktigst.
Så skal den samme siden inn på en mobil.
Tre kolonner blir tre rader. Bildet flyttes over eller under teksten. Navigasjonen forsvinner inn bak et ikon. Overskriften bruker fire linjer i stedet for én. Knappen som lå rett foran deg, havner plutselig et godt stykke ned på siden.
Alt fungerer akkurat som det skal. Men opplevelsen kan ha blitt en helt annen. Det er derfor jeg synes «responsiv» har blitt et litt for enkelt kvalitetsstempel. At nettsiden tilpasser seg skjermen betyr ikke nødvendigvis at designet gjør det.
Bildet er der. Poenget er borte.
Bilder er kanskje det tydeligste eksempelet. Tenk deg et bredt bilde av en person som bruker et produkt. På desktop ser du personen, produktet og miljøet rundt. Hele bildet forteller en historie. På mobilen må det samme bildet inn i et mye smalere format. Da må noe vekk.
Kanskje personen blir kuttet i to. Kanskje produktet forsvinner. Kanskje bildet zoomes så langt inn at du ikke lenger skjønner situasjonen. Eller hele bildet beholdes og blir så lite at detaljene som gjorde det interessant knapt er synlige. Teknisk sett er ingenting galt.
Bildet er fortsatt der. Men poenget med bildet er borte. Det er en av grunnene til at bildesnitt bør være en del av designjobben, ikke noe nettleseren får bestemme til slutt. Noen ganger trenger mobilen et annet utsnitt. Noen ganger trenger den et annet bilde. Og noen ganger viser mobilen at bildet aldri burde hatt den rollen vi ga det på desktop.
Tekst over bilder har samme problem
Det kan se fantastisk ut på en stor skjerm. Et godt fotografi. Stor typografi. Litt mørk overlay. En knapp nederst. Så gjør skjermen seg smal. Bildet må croppes. Overskriften går fra to til fem linjer. Teksten dekker motivet. Overlayen må bli mørkere for at teksten fortsatt skal være lesbar. Til slutt har vi brukt et flott bilde som bakgrunn for en mørk flate med tekst.
Igjen: det fungerer. Men designgrepet har mistet mye av grunnen til at vi valgte det. Dette er en av grunnene til at jeg ofte liker å la tekst være tekst og bilder være bilder. Da får bildet plass til å gjøre sin jobb, teksten får plass til å gjøre sin, og begge tåler langt bedre at skjermen endrer størrelse. Det er ikke en regel. Noen bilder og komposisjoner fungerer glimrende med tekst over. Men mobilen er ganske nådeløs til å avsløre når de ikke gjør det.
Alt blir lengre på mobil
Det samme skjer med innholdet. Tre kort ved siden av hverandre på desktop tar kanskje 400 piksler i høyden. På mobil ligger de etter hverandre. Plutselig tar den samme seksjonen 1200. Legg til et bilde, en ingress, noen kunde-logoer og en ekstra tekstblokk, så kan det være ganske langt fra overskriften til handlingen du egentlig ønsker at kunden skal ta. Det betyr ikke at folk ikke scroller. Det gjør de selvfølgelig.
Men det betyr at rekkefølgen blir viktigere. Hvis det viktigste argumentet kommer som nummer seks fordi det så fint ut i desktop-layouten, hjelper det lite at siden teknisk er perfekt responsiv. Mobilen tvinger oss til å stille et vanskeligere spørsmål: Hva trenger kunden faktisk å se først? Det er et mye bedre designspørsmål enn hvor mange kolonner en seksjon skal ha.
Mobilen avslører designet
Det er kanskje det jeg liker best med å designe for mobil. Den tar fra oss muligheten til å gjemme oss bak plass. På en stor skjerm kan ganske mye se ryddig ut. Vi kan spre elementene utover, bruke store mellomrom og la flere ting konkurrere om oppmerksomheten samtidig. På mobilen må vi velge.
Hva er overskriften? Hva er viktigst? Hva kan vente? Hva kan fjernes? Hvor skal kunden videre?
Hvis det er vanskelig å svare på disse spørsmålene på mobil, er det ikke sikkert problemet egentlig er mobilen.
Det kan være at nettsiden aldri var tydelig nok i utgangspunktet.
Ikke bare sjekk at den fungerer
Når en ny nettside presenteres, er det lett å forelske seg i desktopversjonen. Det er gjerne den som ser best ut i presentasjonen. Den får de store bildene, de fine komposisjonene og all plassen designeren kunne ønske seg. Så sjekker vi mobilen etterpå. Menyen virker. Ingenting er ødelagt. Godkjent.
Jeg synes vi bør stille litt høyere krav enn det. Se på siden på mobilen og spør: Forstår jeg like raskt hva dette handler om? Forteller bildene fortsatt det de skulle fortelle? Er det tydelig hva jeg skal gjøre videre? Har de viktigste tingene beholdt plassen og oppmerksomheten sin?
Og kanskje det viktigste: Gjør denne siden fortsatt det vi laget den for? For det er fullt mulig å lage en nettside som fungerer perfekt på mobil. Og likevel ikke fungerer særlig godt.
