Du har bestämt dig för att skaffa en hemsida. Några dagar senare skickar designern ett utkast: en stor, elegant datorsida. Du gillar den och godkänner. Sidan går live, du öppnar den i mobilen och all elegans är borta. Texten är hoptryckt, viktiga knappar ligger långt ner och telefonnumret syns ingenstans.
Det här är ett av de vanligaste misstagen jag stöter på. Designen tänktes ut för datorn och mobilversionen "klämdes in" i efterhand. Men dina kunder tittar sannolikt på din sida i mobilen. Ordningen borde vara den omvända.
Vad innebär mobile first-design?
Mobile first-design betyder att designern börjar med den minsta skärmen. Den första frågan är: "Vad är viktigast för någon som sitter i mobilen, med en hand och har bråttom?" Sidan byggs kring det svaret. Först därefter breddas samma sida ut till den stora datorskärmen.
Tänk på ett skyltfönster. Är fönstret litet måste du bestämma vilken vara du visar, och du väljer den viktigaste. När fönstret blir större kan du lägga till mer. Men börjar du med ett jättefönster och sedan försöker få in allt i ett litet, går det viktiga förlorat.
Vad förändras när de flesta besökare kommer via mobilen?
Den som besöker en sida i mobilen har oftast bråttom. Hen har ett finger, en liten skärm och splittrad uppmärksamhet. Det hen söker är oftast enkelt: ett telefonnummer, en adress, öppettider, ett pris eller en tid.
En design som börjar i mobilen ger dig:
- Viktig information först. Vad du gör, var du finns och hur man når dig syns på första skärmen.
- Mindre utsmyckning. I mobilen är utrymmet litet, så varje element måste förtjäna sin plats. Det förenklar även datorvyn.
- En huvudhandling står ut. Till exempel "Ring", "Boka tid" eller "Vägbeskrivning". Besökaren behöver inte fundera på vad hen ska göra.
- En lättare sida. Eftersom för stora bilder och tunga element inte läggs in från början öppnas sidan snabbare i mobilen.
Inget av detta betyder att din sida ser dålig ut på datorn. Tvärtom fungerar en väl uppbyggd struktur på båda skärmarna.
Vad ska du fråga din designer?
Reda ut följande i första samtalet med den som ska bygga din sida:
- "Du visar mig designen även i mobilversionen, eller hur?" Godkänn inte ett utkast som bara gäller datorn.
- "Vad visas på första skärmen i mobilen?" Svaret ska spegla din verksamhet: vem du är, vad du gör och hur man når dig.
- "Finns mitt telefonnummer och min bokningsknapp alltid inom räckhåll?"
- "Testar du designen på en riktig mobil?" Ett förminskat webbläsarfönster på en dator är inte detsamma som en riktig mobil.
- "Kan jag öppna testsidan i min egen mobil innan den går live?"
Att ställa de här frågorna stör ingen designer. En bra designer förklarar dem ändå utan att bli tillfrågad.
Vad ska du titta på när du godkänner?
När du ser utkastet eller testsidan kan du använda den här tabellen:
| Vad du tittar på | Så ska det se ut |
|---|---|
| Första skärmen | Det framgår direkt vad du gör och hur man når dig |
| Huvudhandling | Ring-, boka- eller meddelandeknappen syns tydligt |
| Text | Korta stycken, stor och lättläst text |
| Bilder | På plats, utan att tynga sidan |
| Meny | Få, begripliga rubriker |
| Riktigt innehåll | Dina egna texter och foton i stället för exempeltext |
Den sista raden är viktigast. En design ser bra ut med exempeltext, men när ditt riktiga, långa tjänstenamn eller din adress kommer in kan layouten gå sönder. Be att få se det riktiga innehållet innan du godkänner.
De vanligaste designmisstagen i mobilen
Det här är misstag jag sett genom åren. I godkännandeskedet räcker det att titta efter dem:
- Att stoppa in allt på första skärmen. Utrymmet i mobilen är begränsat; visas fem olika budskap samtidigt blir inget läst.
- En mycket lång sida i fel ordning. Om en besökare först scrollar förbi din historia och hittar telefonnumret allra sist kan hen ge upp.
- Element som bara fungerar på datorn. Menyer som öppnas när man för musen över dem, eller pyttesmå länkar, fungerar inte i mobilen, eftersom en mobil inte har någon mus.
- Att bara testa på datorn. Ett förminskat fönster på datorn kan inte ersätta en riktig mobil.
Ta en advokatbyrås hemsida som exempel. En klient tittar i mobilen och ser på första skärmen byrån, dess verksamhetsområde och en "Ring"-knapp. Det räcker. Byråns historia, teamfoton och artiklar ligger längre ner, för dem som är intresserade. När designen börjar i mobilen uppstår prioriteringsordningen av sig själv.
Vad du kan kontrollera och vad experten gör
Vad du kan kontrollera:
- Öppna utkastet i mobilen först, sedan på datorn.
- Sätt dig i besökarens ställe: "Förstår någon som kommer till sidan för första gången vad hen ska göra?"
- Visa det för en vän eller anställd i mobilen och fråga vad hen letar efter.
Vad experten gör:
- Bygger sidorna först för den lilla skärmen och breddar dem sedan till den stora.
- Förbereder bilder och textstorlekar så att de passar mobiler.
- Ser till att sidan öppnas snabbt i mobilen.
- Testar på olika mobiler och webbläsare.
Hur lång tid tar det?
För en bra designer är mobile first inget extra arbete, utan bara arbetsordningen. Därför förlänger det oftast inte tidsplanen. Det som drar ut på tiden är ofta att innehållet inte är klart: texter, foton, tjänstelistan. Förbereder du dem i förväg går det snabbare. För en fast tidsplan behöver jag se ditt projekt, och jag går inte in på pris här, eftersom det beror på dina behov.
Vanliga frågor
Betyder mobile first att datorvyn blir dålig?
Nej. Även datorvyn designas och fungerar bra. Skillnaden är att designen börjar i mobilen, inte att datorn försummas.
Behövs det ändå om mina kunder mest använder dator?
För de flesta företag kommer en betydande del av besökarna via mobilen. Du kan se det i din egen sidas statistik. Även om datoranvändarna är i majoritet gör mobile first-tänket din sida enklare och snabbare.
Min designer visade bara ett datorutkast. Är det ett problem?
Det betyder inte nödvändigtvis att mobilen glömts bort, men det är värt att fråga. Säg att du vill se mobilvyn också. Att inte godkänna utan att ha sett den är den säkraste vägen.
Kan jag göra min befintliga sida mobilvänlig i efterhand?
Ibland, ja, men är sidan mycket gammal blir det lapp på lapp. Då kan det ge ett stabilare resultat att bygga den från grunden. En expert behöver titta på din sida.
Det första intrycket av din hemsida bildas oftast på mobilskärmen. Funderar du på att skaffa en ny sida kan du titta på min sida om att bygga hemsida för att försäkra dig om att designprocessen börjar i mobilen.