Close

Mobile first, responsive design, appar eller mobilanpassad webb?

Mobile first för Västra Götalandsregionens regionala medicinska riktlinjerDet är hur mycket prat som helst om huruvida man ska bygga appar eller hålla sig till webb-applikationer. Men väljer man webb har man inte direkt valt färdigt :/

Personligen hoppas jag att app-hysterin lugnar sig något utan att för mycket pengar går till spillo, särskilt hos de skattefinansierade verksamheterna. Därför bygger jag små prototyper på jobbet för att försöka visa på webbens styrka.

Något som många kliar sig i huvet kring är de olika luddiga begreppen kring webb i mobila enheter. Populärt kallas de för:

  1. Mobile first, aka One Web
  2. Responsive web design
  3. Mobilanpassad webb

Mobile first, också känd som One Web

Luke Wroblewski satte beskrev konceptet i slutet på 2009 som en samling av idéer för att fokusera på mobil åtkomst till webbplatser. Som motivation fanns att den mobila trafiken började öka ordentligt då det blev lite mer folkligt att ha smarta telefoner och abonnemang som tillät många att surfa med telefonen.

Mobile first innebär att man tvingas fokusera på den mobila upplevelsen och inte trampa på i gamla fotspår där man förutsätter att besökarna har en stor skärm, snabb uppkoppling, tangentbord och mus. Kanske först nu började utvecklare tänka på att trots avsaknaden av vissa saker som erbjuds via en vanlig dator så har mobila enheter helt egna styrkor, exempelvis precis geolokalisering, kompass, accelerometer etc.

Med mobile first utgår du från mobila enheter och kombinerar koncepten progressiv förbättring och graceful degradation så det fungerar även på vanliga datorer. Det största motståndet 2009 var från de som hade för vana att bygga separata webbplatser för de som besökte en webbplats med en mobil enhet, den idén gillade inte alla webbutvecklare som var med på tiden man hade praktiskt taget en webbplats per webbläsare – nämligen Internet Explorer och Netscape Navigator.

Responsiv webbdesign

Staffanstorps kommun - ett av få exempel på responsive design i SverigeEthan Marcotte myntade begreppet genom ett inlägg på A list apart 2010. RWD är ett mer klassiskt webbdesigner-perspektiv på hur man angriper möjligheterna med att ens användare har mycket olika upplösningar. Det är egentligen inte fokus på just mobila enheter utan att ett sätt att få layouten för en webbplats att flyta över det utrymmet som finns till förfogande. På en liten skärm kanske det finns 320 pixlars bredd att fylla och på en stor stationär skärm 2560 pixlar.

I RWD utgår man inte från varken den lilla eller stora skärmen utan ofta från mitten, vilket skulle kunna vara en surfplatta i horisontellt läge exempelvis. Vad behöver den genomsnittliga användaren, vad behöver den med liten kontra stor skärm.

Väsentliga delar i RWD är att prioritera vad och hur saker ska presenteras, sedan presenteras de efter bästa förmåga. Det många glömmer är att prioritera bort vilken bilden intill från Staffanstorps kommun är ett klockrent exempel på. Att för smala skärmar inte prioritera bort något 60 årsjubileum är ett mycket märkligt val.

Väljer du RWD jobbar du förutom med att prioritera bort saker också med att:

  • Få ett kolumn/- och rutsystem att utnyttja tillgänglig bredd – ibland blir det bara en kolumn.
  • Skala ner bilders storlek, byta till andra versioner av bilder om platsen är för liten eller helt ta bort dem.
  • Välja ett startpaket över upplösningar att fokusera på, ofta sätts en maximal bredd så inte textraderna blir hopplöst långa på en stor skärm. Detta görs med hjälp av media queries i CSS.

Den kritik som kan framföras mot RWD har ofta med webbprestanda att göra. Det är ganska lätt hänt att man får flertalet versioner av bilder där bara en används, att bilder som laddas in har högre kvalitet än vad besökaren har nytta av, att stilmallen blir mångfalt större än vad den aktuella besökaren har nytta av och inte minst att HTML-koden kan bli onödigt komplicerad.
Med RWD riskerar man också att hamna i skräddarsydda webbplatser som är svåra att hantera för en vanlig webbredaktör vilket kan dra åt kampanjsajter eller sådant som reklambyråer brukade skapa innan de började nyttja publiceringssystem.

Mobilanpassad webb

Mobilanpassad webb med jQuery MobileDet klassiska sättet är att göra en mobilversion av en webbplats, kanske även en surfplatteversion. En nyare variant är exempelvis ramverket jQuery Mobile som hjälper till att få ett mobilt och touch-vänligt gränssnitt.

Väljer man specialsajter för varje typ av enhet så har man visserligen bra kontroll över hur det ser ut, men det blir lite omodernt då det finns mängder med upplösningar att anpassa för och det blir väldigt mycket arbete för att ha så god koll.
Kör man istället på något ramverk som jQuery Mobile är det rätt svårt att behålla sin grafiska identitet. Dessutom är dessa ramverk ganska unga och inte helt problemfria att jobba med. Det man kan vinna är dock möjligheten att kunna konvertera dem till en native-app för flertalet mobila plattformar via exempelvis PhoneGap.

Mkay, men va f-n väljer man då?

Bra fråga, men inte primärt en vanlig app i alla fall! En app låser användandet till app-butiker, kräver utveckling för flera plattformar, gör att du får många arenor att konkurrera på förutom en webbplats du troligen redan har.

Personligen landar jag gärna på att mindre funktioner gärna får vara mobile first och att vanliga webbplatser _bör_ vara responsive design.
Exempelvis byggde jag idag ett utkast på hur VGR kan lista sina medicinska riktlinjer (bild högst upp och längst ner). Detta har vi redan på vår webbplats, men för de som springer runt med en mobil enhet kan det vara skönt att ha en anpassad version för mobil åtkomst.

Skillnaden här mellan att jobba med jQuery Mobile och mobile first är främst nedlagd tid och att det inte känns meningsfullt med en vanlig app då samtliga smartphones råkar ha en webbläsare – den bästa appen oavsett vilken smartphone man har!

Iphone: Mobile first för Västra Götalandsregionens regionala medicinska riktlinjer

Läs på om responsive web design och mobile first

Leave a Reply

Your email address will not be published. Required fields are marked *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.