Hur skapar jag tjänster för mobila människor?

Drygt hälften av alla sidvisningar på webben sker från mobila enheter. Det säger redan ganska mycket, men i Skandinavien är siffran ännu högre.

I det här sammanhanget är begreppet mobilanpassning ganska missvisande. Ska vi fullfölja ett mobile first-tänk hela vägen ut bör vi snarare prata om desktopanpassning. Det vill säga att se till att webb även skalar upp och anpassar sig för desktopmiljöer.

Jag ser det som att övergången från desktop till handhållna enheter har skett och sker i tre utvecklingskurvor som jag tänkte gå igenom här:

1. Design – något man tidigare pratat mycket om
2. Prestanda – något man nu pratar mycket om
3. PWA – något man ganska nyligen börjat prata om.

Responsiv webb innebär att innehållet, och i synnerhet bredden, skalar och anpassar sig för olika skärmstorlekar. Men mobila enheter innebär mer än bara smalare skärmar. En mobil enhet är ett helt annat slags verktyg. Om man tar sig en egen funderare på hur man själv egentligen använder webben på sin mobiltelefon förstår man snart de begränsningar och möjligheter som enheten innebär.

Ett konkret exempel är att jag på mobilen inte har någon markör eller muspekare att hovra med. Utan muspekare som talar om för mig vad som är klickbara element behöver designern vara noggrann med att möta mina (och andras) förväntningar på vad som borde vara klickbart. Det finns alltså utöver responsiv layout många UI-aspekter att ta hänsyn till för mobilanpassad webb.

Givetvis är det så att mobil design ofta också kräver en annan slags innehållsprioritering. Ibland handlar det om platsbrist och designtekniska kompromisser. Men för att verkligen utveckla tjänster för mobila användare måste man ställa sig frågan: när använder man mobilen för att nå tjänsten, och i vilken situation är man i då? Jag återkommer till detta.

När det gäller prestandaoptimering för mobila enheter är det normalt tre saker vi behöver tänka på:

• Begränsad uppkoppling med 3G/4G-nät (som användaren betalar för)
• Svagare processorer och operativsystem i enheterna
• Användare har på mobila enheter i regel mindre tålamod

Det här är generellt någonting som har diskuterats mycket de senaste åren. En av orsakerna är att Google har gått från att ranka sökresultat utifrån relevans till att också premiera hur snabbt sidor laddas.

På Internet finns gott om information om mobil prestandaoptimering, men egentligen kokar allting ned till samma punkter om och om igen. Det mesta handlar om vilka resurser man hämtar och hur de laddas. Jag vill ta upp några av de viktigaste.

#1: Optimera bilder

Det är ineffektivt att leverera samma bildstorlek till olika skärmstorlekar. Här finns mycket att hämta i prestanda. Och i CMS-verktyg som Wordpress finns redan inbyggda funktioner för att skapa och leverera olika versioner av samma bild. Ofta finns det också stora bakgrundsbilder för sektioner, sidfötter m.m. där motivet inte gör sig bra på mobila enheter, och dem är det helt enkelt bara att ta bort. Slutligen, två tekniker vi alltid använder oss av: moderna filformat, exempelvis WebP, samt lazy loading som innebär att bilder hämtas först när användaren scrollar till dem.

#2 Minska mängden skript

Javascript och i synnerhet jQuery och olika UI- och animationsbibliotek har fått en enorm användning men ofta utan eftertanke. För mobila tjänster gäller det att minimera skriptberoendet till absolut minimum och se till att de laddas på rätt plats och på rätt sätt så de inte blockerar renderingen av webbsidan. Här finns ingen magisk teknik som gör jobbet åt en utan här får man manuellt gå igenom och minska belastningen på processorn.

#3 Tänk till kring CSS

CSS skiljer sig något från skript på så sätt att här kan man också göra en uppdelning av kritisk CSS, också kallad CSS som är ”above the fold”, och icke-kritisk CSS. Den kritiska delen är den som behövs för att webbläsaren ska rendera det som helt enkelt syns först på webbsidan, t.ex. meny, banner och titelsektion. Det vanliga är att man plockar ut kritisk CSS och laddar detta först, och laddar all övrig CSS sist, i slutet av inläsningen. Det man inte vill göra är att blint följa alla rekommendationer på att slå ihop CSS-filer för att minska anropen. Då kan det sluta med att man har en enda tung CSS-fil i toppen som användarna måste vänta på innan de ens ser skymten av webbsidan.

#4 Gör webbplatsen statisk

Ett sätt att radikalt förbättra prestandan är att göra webbplatsen statisk. Istället för ett traditionellt CMS som anropar en databas med innehåll använder du ett headless CMS och en Static Site Generator. Den hämtar innehåll från ditt CMS-verktyg via ett API och genererar statiska sidor som i sin enklaste form bara består av HTML och CSS. Under våren 2020 jobbar vi med Trelleborgs kommun för att bygga upp kommunens webbplats på det här sättet. Vill du läsa mer om tekniken bakom statiska webbar tipsar jag om mitt blogginlägg om Jamstack.

#5 Mät och följ upp

Det finns flera bra verktyg för att mäta prestandan på alla publika webbsidor. Två av dem är Lighthouse och Sitespeed.io .

Min kollega Linn Nilsson har skrivit ett blogginlägg om PWA och några av fördelarna med det.

Det finns webbplatser, och alla sliter sig i håret för att göra dessa tillgängliga där användarna finns – på mobila enheter. Och så finns det appar. PWA öppnar dörren för vanliga webbplatser att fungera som appar. Ladda som appar, se ut som appar, bete sig som appar, och använda enhetens hårdvara och API:er såsom appar gör. Alltså att möjliggöra hela den mobila upplevelsen men från helt vanliga webbplatser.

PWA kommer det pratas mycket om under lång tid framöver. Det kanske dröjer ett tag innan vi på riktigt börjar märka skillnaden i våra mobiler, och då kommer vi alla säkert omedelbart ta det för givet. Detta är ett stort steg rakt fram mot att skapa mobila tjänster där de bäst hör hemma – på webben, och inte nödvändigtvis i en appbutik.

Men hur kan jag förhålla mig till PWA-tekniken om min webbplats i första hand är en webbplats – och inte en app? Råden som vi ger till våra kunder bygger alltid på överväganden om hur, var och när en webbtjänst kommer användas. Men oavsett om vi utvecklar ”vanlig” webb eller PWA måste vi nära nog alltid se det som en mobil tjänst.

Många organisationer och varumärken har redan blivit duktiga på detta. Spotifys mobilapp är exempelvis designad för att du så snabbt som möjligt ska få igång musik, för det är nog det man vill när man står vid busshållplatsen. Och i bankernas mobilappar är det inte mycket som krävs för att göra överföringar mellan sina egna konton, för det är nog det man använder mobilen till när man står vid kassan den 24:e. Små men stora saker som ändå gör skillnad i människors liv.

När ni utvecklar era webbtjänster, tänk mobil design- och prestandaoptimering, tänk PWA och appifiering. Men tänk framför allt hela vägen ut till vilka människor som kommer använda tjänsten, och i vilket sammanhang de befinner sig.