K. Andersson
När smartphone-eran grydde kom en helt ny utmaning för webbansvariga och designers med den: Hur får man en webbplats som är designad för att se bra ut på en datorskärm att se lika bra ut på en skärm som är en bråkdel av storleken?
Ange responsiv design. Två ord som har revolutionerat webbdesign.
Visste du att mobila enheter står för 53,81 % av att surfa över hela världen? Smartphones har tagit över som det vanligaste sättet att komma åt och surfa på internet.
Så, hur kan du förbättra responsen på din webbplats för att säkerställa framgång 2020 och framåt?
Det första steget skulle vara att välja en webbhotellleverantör som är känd för hög hastighet på webbplatsen så att du är redo för framgång från början. Om du använder WordPress bör du kolla in vår prestandajämförelse av populära WordPress-värdar.
Men låt oss gå bortom det och gå in på de andra tio avgörande stegen för att förbättra mobil lyhördhet…
1. Enkelhet är den ultimata sofistikeringen
Skärmfastigheter är en värdefull vara och du bör få ut det mesta av det utrymme du har. Ett säkert sätt att tappa besökare snabbt är att ha en massa komplicerade och onödiga element som inte tillför ett värde till din besökares upplevelse.
Visste du att den mänskliga uppmärksamheten är kortare än en guldfisks? Du har 6-8 sekunder att påverka.
De webbplatser som användarna svarar bäst på är de som är tydliga och raka. Denna enkla princip kan göra skillnaden mellan framgång och misslyckande när det kommer till saker som kopiering på sidan och uppmaningar, och är därför ett av de mest effektiva sätten att förbättra responsen på din webbplats.
Du bör till exempel sträva efter att ge mobila webbplatsanvändare så mycket information som möjligt med så få ord som möjligt.
2. Hastigheten är avgörande
När vi tänker på mobil lyhördhet tenderar vi att luta oss mot webbdesignens estetik och kan ofta förbise sidhastigheten. Enkelt uttryckt kan du ha en vackert designad webbplats men om den inte laddas snabbt blir den responsiva designen något överflödig. Ju längre tid det tar att ladda din webbplats, desto mer sannolikt att dina besökare studsar och besöka konkurrenters webbplatser. Som ett resultat är det ytterst viktigt att du får din WordPress-webbplats att ladda så snabbt som möjligt för mobilbesökare.
När webbansvariga tänker på sidhastighetsprestanda kan de fastna för att fokusera alla ansträngningar på att uppnå en snabb full laddningstid, men detta är ett vanligt misstag. Hur en användare uppfattar laddningstid bestäms av flera faktorer. Så vad ska du fokusera på?
Användarcentrerad prestandastatistik.
Tänk på att när du surfar på webben förväntar du dig att se visuell feedback och att kunna interagera med en sida inom några sekunder efter att den laddats, eller hur? Detsamma kan sägas om användare som landar på din mobilsajt. Du måste försäkra dem om att sidan laddas.
Det finns två användarcentrerade prestandamått värt att uppmärksamma:
| Prestandamått | Erfarenhet | Snabb (ms)* | Måttlig (ms)* | Långsam (ms)* |
| First Contentful Paint (FCP) | Händer det? | >=3000 | ||
| Fördröjning av första ingång (FID) | Är den användbar? | >=300 |
*Anslutning: Snabb 3G
Att optimera din webbplats för att leverera snabba svarstider för rätt mätvärden kommer att göra underverk för hur användarna uppfattar responsen på din webbplats. Det är dock viktigt att komma ihåg att du bör mäta webbplatsens hastighet mot en snabb 3G-anslutning eftersom detta kommer att säkerställa att din webbplats levererar en exceptionell användarupplevelse från den lägsta delen av skalan till de snabbaste anslutningstyperna som WiFi.
Hur du testar din mobilsidas laddningshastighet
Det bästa verktyget för att testa och övervaka FCP & FID är WebPageTest.org. Följ dessa enkla steg:
- Ange din URL
- Välj din testplats (du kan använda Google Analytics för att se var majoriteten av din trafik kommer ifrån – använd den här platsen)
- Öppna Testinställningar och ställ in “Anslutning” till 3G Snabb och “Antal tester som ska köras” till 9.
- Öppna Chromium Settings och markera “Capture Lighthouse Report”, “Emulate Mobile Browser” (använd din Google Analytics-data för att se din enhetsdata och välj den från rullgardinsmenyn) och “Capture Dev Tools Timeline”.
- Kör testet
- När testet har slutförts, klicka på ‘Lighthouse PWA Score’
- Dina FCP- och FID-resultat kommer att visas tillsammans med eventuella rekommenderade hastighetsoptimeringar
Det viktigaste här är att hitta en balans mellan estetik och snabbhet. En sak som din webbplats nästan säkert skulle ha nytta av är ett bra caching-plugin.
3. Gör interaktionen enkel
Att få din webbplats att se bra ut på mobilen är det första steget till lyhördhet, men kan ofta ta rampljuset bort från andra lika viktiga faktorer, som att göra din webbplats enkel att använda. Din webbplats ska vara lättillgänglig oavsett vilken enhet som används.
Ett av nyckelområdena för tillgänglighet att uppmärksamma är tryckmål. Tryckmål är interaktiva element som är klickbara av användare, till exempel knappar eller länkar. Lämpliga tryckmål ger en sömlös surfupplevelse och har en positiv inverkan på din omvandlingsfrekvens eftersom användarna enkelt kan interagera med dina webbplatselement.
Som en tumregel bör tryckobjekt som är 48 pixlar breda och 48 pixlar höga räcka på alla mobila enheter. Du måste också se till att det finns minst 8 pixlar mellan tryckobjekten.
4. Gör ditt innehåll lättsmält
Responsiva webbplatser handlar om användarupplevelsen och att logiskt strukturera ditt innehåll hjälper till att göra den upplevelsen så mycket bättre.
Vi har skrivit mycket om att skriva för webben och copywriting tidigare, men att göra ditt innehåll lättsmält är mer än bra struktur, korrekt användning av underrubriker och skanningsbara listor. Det handlar också om presentation och ibland innebär det att man använder kreativa sätt att presentera innehållet, såsom användning av flikar, dragspel, diagram, tabeller.
Dessa dagar är allt mycket enklare tack vare de fantastiska sidbyggarplugins som gör det enkelt att implementera mer sofistikerade layouter än vad du kan med den grundläggande WordPress-redigeraren. WP Dev Shed använder Beaver Builder, men sedan vi implementerade detta för några år sedan är det rimligt att säga att Elementor har blivit ledande i denna kategori med layoutwidgets för alla tänkbara behov…
Kort sagt, nyckeln till framgång är att organisera ditt innehåll på ett lättläst sätt. Den enkla vetenskapen bakom detta är att människor är otåliga – du måste strukturera ditt innehåll på ett lättsmält sätt.
5. Gör din text läsbar
Killarna och botarna på Google tar läsbarheten och lättheten att läsa text ganska allvarligt. Så mycket att det kan påverka sökrankningen på din webbplats.
Det är viktigt att se till att din text är tillräckligt stor för att en webbplatsbesökare ska kunna läsa den med lätthet på en mobil enhet utan att behöva zooma in. Lyckligtvis är det en relativt enkel uppgift att ändra teckensnittsstorlek. Du bör sikta på en minst 12px. Konsensus inom webbutveckling och SEO-gemenskapen är dock att använda 16px.
En annan aspekt av läsbarhet är linjehöjd. Radhöjd är mängden mellanrum mellan textrader. Som rekommenderat av Google bör du ställa in radhöjden till 1,2, vilket innebär att avståndet mellan dina textrader är 1,2 gånger storleken på själva texten.
Här är ett bra exempel på en mobilsida som är mycket läsvänlig från Monday.coms sida för samarbeta mellan olika team.
6. Testa din webbplats regelbundet
Att testa din webbplats på flera enheter med olika skärmstorlekar kommer att belysa hur din webbplats svarar och hjälpa dig att identifiera eventuella problem innan de påverkar dina besökare.
Att testa din webbplats på flera enheter och skärmstorlekar kan låta komplicerat men det finns verktyg som t.ex Webbläsarstapelsom är otroligt lätta att använda och inte kräver några avancerade webbutvecklingsfärdigheter.
Det är särskilt viktigt att du använder Googles mobilvänliga test för att utvärdera din webbplatss lyhördhet eftersom detta är en av faktorerna som sökjätten tar hänsyn till vid rankning av webbplatser.
Många webbansvariga testar sin webbplats direkt efter att den skapats men misslyckas med att testa den regelbundet efteråt, detta kan leda till dålig användarupplevelse, särskilt eftersom webbplatser ständigt förbättras och utvecklingen kan förändra koden, vilket skapar oönskade effekter på din responsiva design.
7. Eliminera icke-nödvändiga formulärfält
Gör det enkelt för besökare att interagera med formulären på din webbplats genom att ta bort alla icke-nödvändiga formulärfält. Enkla formulär är lättare att förstå och fylla i på mobila enheter.
Leadpages har delat ett bra inlägg med 10 av de högst konverterande opt-in-sidorna de har någonsin sett, och visst är ett vanligt tema enkelhet. Ju enklare du gör det för människor att delta, desto fler kommer att göra det. Vem visste!
Människor har en uppmärksamhetsförmåga på mellan 6-8 sekunder och så genom att ta bort icke-väsentliga fält har du en mycket bättre chans att hålla användarna engagerade. Detta är särskilt viktigt för försäljningstratten på e-handelssajter. Begär endast de uppgifter du behöver från dina kunder.
8. Undvik påträngande mellansidesannonser
Några år sedan, Google meddelade att de gjorde en stor förändring av hur de avgör tillgängligheten för mobilt innehåll genom att slå ner på påträngande mellansidesannonser. Påträngande mellansidesannonser kan definieras som vilken popup eller annons som helst som förhindrar att huvudinnehållet på en sida kan läsas.
År 2020 gäller samma regler. Googles primära mål är att hjälpa användare att hitta det innehåll de letar efter, och detta borde också vara ditt.
Även om popup-fönster kan vara användbara för att fånga e-postadresser och nya potentiella kunder, kan de frustrera användare eftersom de skapar en barriär mellan dem och innehållet som de förväntar sig att se. Detta kan tyckas vara ett mindre hinder, men tänk på detta: en användare som redan har förbundit sig att klicka på ditt sökresultat har ett egenintresse av ditt innehåll. Detta är ett avgörande ögonblick i användarresan som du noggrant bör bevara. Fråga dig själv om popup-fönstret tillför värde för användaren. Om svaret är nej, ta bort det.
Att ta bort påträngande mellansidesannonser ger inte bara en bättre mobilupplevelse utan du slipper också bli neddragen i Googles sökresultatrankning.
Det är viktigt att notera att inte alla popup-fönster är dåliga. Vissa är trots allt viktiga för att följa lagen, såsom användning av cookies och GDPR-protokoll. Du kan fortfarande använda popup-fönster på din webbplats men håll dig till dessa fyra regler:
- Se till att de tillför värde
- Dölj inte innehållet bakom dem
- Använd enhetsspecifika visningsregler
- Använd bara en rimlig mängd skärmutrymme
9. Bryt inte normen för etablerade konventioner
Den här är verkligen viktig. Användare som surfar på webben på mobila enheter vet intuitivt hur de rullar, navigerar på webbplatser och hittar den information de behöver. Försök inte implementera nya former av navigering som kräver att användarna stannar upp och tänker. Spela istället in i etablerade konventioner genom att göra dina navigeringsmenyer lätta att interagera med.
Oavsett vilken enhet som helst, bör din webbplats navigering placeras högst upp på dina sidor, och beroende på storleken på din webbplats bör de effektivt innehålla länkar till nyckelsidor för användare att klicka på och börja sin resa genom din webbplats.
Om du är osäker på vilka länkar som ska inkluderas kan du ställ in händelsespårning använda Google Analytics eller Google Tag Manager för att övervaka klick på menylänkar. Detta kommer inte bara att markera de mest klickade länkarna utan det kommer också att ge dig en inblick i vilka menyalternativ som inte interageras med.
Du kan använda dessa data för att förenkla din meny och i slutändan skulptera din sajts navigering för att spela dina användare i handen. Kolla in mitt inlägg på verktyg för datavisualisering för rekommendationer om visning och analys av denna data.
10. Undvik den hala sluttningen av skrivbordsdesign
Du har hört det en miljon gånger förut men det bästa sättet att säkerställa mobil respons är att designa din webbplats för mobila enheter från grunden.
Eftersom webbdesign är så naturligt kopplat till att tänka bredare, mer konceptuellt, på en större duk, designar många utvecklare och designers fortfarande med en desktop-först-metod. Vi vill gärna tro att vi har ett mobilt-först-tänk, men det kan ofta misslyckas.
Webbplatser kan skalas upp för användning på större skärmar lättare än de kan skalas ner för användning på mindre skärmar. När allt kommer omkring tvingar du dig att överväga vilka delar av sidan som är viktigast när du börjar med mobilen.
Slutsats
Utbilda dig själv i responsiv design och håll dig uppdaterad med de senaste trenderna eftersom de ständigt utvecklas. Det som var spjutspet igår kan betraktas som gamla nyheter i morgon. Om du kommer ihåg reglerna och spelar efter dem är du säker på att bli en framgång på den digitala arenan.
