Mobilanpassa din responsiva webbplats, på riktigt

Responsiv design stod högt på företag och organisationers ”att göra”-lista 2014. Enligt Web Service Awards trendrapport från 2014 fanns planerna att göra om var fjärde Svensk webbplats till responsiv design.

Med idén om responsiv design gick det en lättnadens suck genom webbsverige. Ett tämligen okomplicerat och enkelt sätt att, rent kodmässigt, anpassa innehållet efter den skärmstorlek som besökaren använde sig av för att konsumera innehållet. Addera en mobilanpassad meny och så är det klart, eller?

Hur bra blev det egentligen? Och vad var det som gick fel?

Låt oss backa bandet.

När responsiv var ungt

Att anpassa innehållet efter skärmstorlekar är ingen ny teknik. Detta gjorde vi redan runt 2000 när vi byggde intranät för företag som ännu inte hade någon policy om vilka datorer som skulle få köpas in (dvs. ingen enhetlig skärmstorlek som gällde generellt på företaget). Det vi använde oss av då var flytande innehåll som delades upp i procent. Eftersom man ännu inte hade kommit på konceptet med de fantastiska puff- och högerspaltsutfyllarna så fanns det inte så mycket layout att anpassa sig till. Därför fungerade teknik för flytande innehåll hyfsat bra.

Termen responsiv design kom 2010 när Ethan Marcotte skrev ett blogginlägg om webbtekniker för olika enheter – flytande layout, flexibla bilder och media queries. Ett bra sätt att anpassa innehåll och layout efter vilken skärmstorlek som besöken kommer ifrån.

Men det fanns redan då en omognad i sättet att se på responsiv design eller responsiv webb – det är först och främst en teknik – inte ett mål i sig.

Varför blir det fel med dagens responsiva webbplatser?

Jag har de senaste åren läst åtskilliga kravspecifikationer, anbuds- och offertförfrågningar med ett kort stycke om ”Responsiv design”.

Kravet ser ofta ut så här: ”Responsiv design – Webbplatsen ska byggas med responsiv design och fungera på mobil, surfplatta och desktop”. That´s it!

Jag vill inte raljera, jag fattar vad kunderna är ute efter, men det blir så fel redan från början när kraven ställs på det här sättet. Oftast har man heller inte budget för att titta på sitt innehåll utifrån ett mobile first-perspektiv, utan befintligt innehåll ska enligt kraven migreras över i en ny lösning. Vilka problem har vi då egentligen löst för användarna? För handen på hjärtat – det är väl för användarna vi gör det – inte för tekniken?

Vad användarna (vi) vill ha

Enligt Gartner kommer mobilsurfningen att ha gått om desktop surf 2018.
Du ser redan nu trenden i ditt eget användande – du besöker webbplatser med mobilen och använder appar för olika bankärenden och tjänster. Datorn blir allt mer ett arbetsredskap som det en gång i tiden var. En god vän till mig sa nyligen att ”jag använder mest datorn för ordbehandling och göra presentationer och tar sällan fram datorn hemma”.

Men… ”Dina användare skiter i om din webbplats är responsiv” Brad Frost

Vad våra användare vill ha är något som är snabbt och enkelt att använda oavsett vilken situation de befinner sig i och oavsett vilken skärmstorlek de vilar ögonen och fingrarna på.

Några problem med dagens responsiva webbplatser (responsiv design)

• Sajten är framtagen utifrån ett tydligt tekniskt perspektiv där målet är ”responsiv design”
• Sajten är inte testad fullt ut med olika enheter, skärmstorlekar, laddningstider, situationer etc. (Läs gärna mitt blogginlägg om att testa responsiva gränssnitt)

• Innehållet har migrerats från en gammal webbplats med totalt avsaknad av mobilt fokus

• Navigeringen är helt svettframkallande och ångestladdad – man har ingen som helst aning om var i strukturen man befinner sig på webbplatsen när man surfar på mobilen

• Tryckytor är alldeles för små liksom länkar ligger för tajt mot varandra. Man trycker fel, svettas lite till, går tillbaka till startsidan via logotypen och börjar om, trycker fel och skiter i det..

• Bilder/ikoner är tunga och äter både tålamod och skapar frustration. Jag bryr mig helt enkelt inte om stora branding bilder i motljus i karuseller med nonsens text på. Men det kanske bara är jag!

• Bilder – igen – de flesta mobiler och många datorskärmar för den delen har retina skärmar. Du vill inte ha suddiga bilder på din sajt, fixa dem men komprimera och optimera bilder för snabb laddning.

• Snabba laddningstider och tillgänglighetsfokus är något som lyser med sin frånvaro. Tänk rätt från början. Testa testa testa. Både med användare och vedertagna verktyg.

• Script och CSS:er till förbannelse – rensa upp! Mobila enheter kommer att läsa in ALLT även om detta är kodkommentrerat som ”ska ej visas på skärmstorlekar under 480”

• Inbäddat innehåll – vart ska jag börja? Har du någon gång testat att scrolla på en mobil som har en inbäddad karta från Google maps.. hur funkar det tycker du?

• Inte allt innehåll är responsivt – nä precis. Vid en test av myndigheters webbplatser ser det ganska bra ut på ytan men när man sedan försöker att ansluta till en tjänst via mobilen visar det sig att det man kom dit för att göra från första början inte alls är responsivt eller tillgängligt via mobilen.

Slutsats

Mobilanpassa din responsiva webbplats! Utgå från besökaren, din målgrupp och anpassa innehållet, funktioner och formgivning utifrån att webbplatsen kommer att konsumeras från olika skärmstorlekar, olika webbläsare, olika enheter, i olika situationer, med olika prestanda och uppkoppling, utifrån olika behov och förutsättningar.