Mobilanpassad hemsida: det här ska ni kontrollera

Många företag granskar sin hemsida på en stor skärm på kontoret. Men för många verksamheter kommer en stor del av besökarna från mobilen, ofta från en annons, ett sökresultat eller en länk i ett sms. Fungerar sidan dåligt på en telefon förlorar ni dem som kommer dit.

"Mobilanpassad" betyder inte bara att sidan går att se på en telefon. Den ska också gå att läsa, förstå och använda.

Vad är responsiv design?

En responsiv webbplats anpassar sin layout efter skärmens storlek. På en bred skärm kan innehållet ligga i flera kolumner, på en smal ligger det i en kolumn efter varandra. Det är i dag standard, och de flesta moderna mallar och plattformar gör det. Men "responsiv" garanterar inte att sidan är bra på mobil. Det handlar om detaljerna.

Fem kontroller ni kan göra själva

Ta er telefon, öppna er webbplats och gå igenom den här listan. Gör det gärna på en äldre och en nyare telefon om ni kan.

1. Går texten att läsa utan att zooma?

Brödtext bör vara tillräckligt stor för att läsas bekvämt, och raderna ska inte vara för långa. Om ni måste zooma in för att läsa är texten för liten. Kontrollera också kontrasten: ljusgrå text mot vit bakgrund är svår att läsa utomhus.

2. Går det att trycka på knappar och länkar?

Fingrar är större än muspekare. Knappar och länkar behöver vara tillräckligt stora och ha lite utrymme omkring sig så att man inte råkar trycka fel. Testa menyn och de viktigaste knapparna med tummen.

3. Syns det viktigaste utan scrollning?

Det första som visas på mobilen bör svara på vem ni är, vad ni erbjuder och vad nästa steg är. Om en jättestor bild eller en pop-up täcker allt har besökaren redan lämnat sidan.

4. Fungerar formulären?

Formulär är ofta det sämsta på mobil. Kontrollera att rätt tangentbord visas (till exempel sifferpanel för telefonnummer), att fält inte hamnar under tangentbordet och att det går att skicka. Be inte om mer information än ni behöver. Varje fält är en tröskel.

5. Går det snabbt?

Mobila besökare har ofta sämre uppkoppling än ni på kontoret. Stora bilder och tunga skript gör sidan långsam. Kolla med ett verktyg som Googles PageSpeed Insights, som mäter prestanda för mobil separat. Mer om hur ni följer upp webbplatsens skick finns i Nyckeltal för små team.

Vanliga problem och hur ni rättar dem

• För stora bilder. Ladda upp bilder i rimlig storlek och format, och låt systemet skala dem. Det är den vanligaste orsaken till långsamma sidor.
• Pop-ups som täcker allt. På en liten skärm är en pop-up ofta omöjlig att stänga. Undvik dem eller gör dem små, särskilt direkt vid ankomst. Google kan också bedöma sidor med påträngande pop-ups sämre.
• Menyer som är svåra att öppna eller stänga. Testa dem.
• Text i bilder. Den blir liten och går inte att markera. Skriv texten som text.
• Tabeller som sticker ut. Brett innehåll kan göra att hela sidan går att dra i sidled. Gör tabeller scrollbara eller omformatera dem.
• Videor som startar med ljud eller är för tunga. Låt besökaren välja.

Mobilen och sökbarhet

Google bedömer i första hand webbplatsens mobilversion när den avgör hur en sida ska placeras. Det betyder att innehåll som bara finns på datorversionen kan missas. Se till att det viktiga innehållet finns på mobilen också. Mer om grunderna finns i SEO för kommunikatörer.

Mobilen och tillgänglighet

Mycket av det som gör en webbplats bra på mobil, som tydliga kontraster, stora tryckytor och enkla formulär, gör den också mer tillgänglig. Se WCAG för icke-utvecklare. Det går också att zooma sidan utan att den går sönder, vilket är ett tillgänglighetskrav.

När ni beställer en ny hemsida

Ställ krav på mobilen från början:

• Be om en design för mobil först, som sedan utökas för större skärmar.
• Be att få testa på riktiga telefoner under bygget, inte bara i ett förhandsgranskningsfönster.
• Skriv in mätvärden för hastighet på mobil i beställningen.

Se Skapa hemsida för företaget för hela processen.