Utredning: Responsiv webbdesign Sida 1 (8) Utredning: Responsiv webbdesign (RWD) Förbehåll Denna utredning fokuserar på det som är närmast relaterat till responsiv webbdesign. Med andra ord kommer inte webbstrategiska ämnen som URL strategi, CMS tekniska egenheter och innehållsstrategiska val med mera att tas upp. Bakgrund, nuläge och slutsats Bakgrund När sajten designades senast var det få som använde något annat än en dator till att surfa på webben. Som så många andra valde man då att optimera webbplatsen efter vad som ansågs vara minsta troliga skärmstorlek, dåtidens referensutrustning, vilket hamnade på minst 14 tumsskärm och horisontell upplösning om 1024 bildpunkter. På detta sätt gjordes webbplatsen användbar för så många som möjligt. Nuläge Sedan 2007 har användandet av mobila enheter ökat till en nivå att det inte går att ignorera längre. När en liten skärm tidigare var 14 tum kan den idag vara 3 tum, se bilden intill, dessutom ofta stående på högkant. Många surfar också på webben via surfplattor vilket inte är fullt lika problematiskt som med en mobiltelefon, åtminstone inte så länge som skärmstorleken är runt 10 tum. Andelen mobila besökare på flertalet av regionens publika webbplatser är runt 15 %, mätt första kvartalet 2013 enligt webbanalysverktyget Piwik. Statistiken tyder på att majoriteten av besökarna är regionanställda vilket ger en icke representativ bild av att omvärlden använder Windows XP och Internet Explorer. Dock är det värt att komma ihåg att det är olika brådskande med en responsiv redesign på olika webbplatser. De webbplatser som primärt vänder sig till privatpersoner är troligen mer brådskande än de där besökaren i stor grad sitter vid en stationär dator på en arbetsplats. Samtidigt skrämmer man bort mobilsurfare genom att inte möta deras behov. Ett annat exempel är webbplatsen 1177.se som vänder sig huvudsakligen till allmänheten med råd om vård och hälsa. 1177.se hade för Q1 2013 cirka 50 % av sina besökare på en mobil enhet.
Utredning: Responsiv webbdesign Sida 2 (8) Trenden går tveklöst mot att det blir allt vanligare, om inte det normala, att använda en mobil enhet när man surfar på webben. Problematisering Sedan säkert 10 år har olika tekniker testats för att göra bättre mobila upplevelser. Sedan de moderna, smarta, telefonernas intåg är det återigen lämpligast att använda gammal beprövad webbteknik som HTML, Javascript och stilmallar. Idag är frågan mer om man ska bygga en specialiserad mobilwebb bredvid den vanliga webbplatsen, eller om den vanliga webbplatsen ska klara av att hantera alla sorters enheter en besökare kan ha. Bland dessa finns skärmar små som armbandsur, mobiltelefoner, surfplattor, upp till bärbara och stationära datorer, spelkonsoler som körs på tv eller projektor över en hel vägg. Storleken på de mindre skärmarna i kombination med deras upplösning gör att text ofta inte går att läsa utan att zooma oavsett hur god syn man har. Zoomar man in i sidan försvinner istället översikten och besökaren tappar orienteringen. Se exempel nedan på hur det ser ut på de mindre surfplattorna som blir allt mer populära. Under 2013 är drygt hälften av de sålda surfplattorna mindre än 8 tum enligt prognoser. Nexus 7 första generationen Apple ipad Mini första generationen Stående format Stående format
Utredning: Responsiv webbdesign Sida 3 (8) Liggande format Liggande format Skillnad mellan responsiv och icke-responsiv webbplats i en mobiltelefon Nedan finns tre exempel på webbplatser och hur de kan se ut i exempelvis iphone 4/4S. Längst till vänster vgregion.se, som inte är responsiv, är svår att snabbt få en uppfattning om, design som bland annat menyn bryts sönder till flera rader med mera. Varmland.se i mitten är en väsentligt mindre webbplats som är responsiv där man snabbt får en överblick kring vad som erbjuds via länkar och ikoner. Lulea.se till höger är en responsiv webbplats med mer komplicerad navigering vilket de löst genom den orangea ytan med huvudmenyn. Luleås design stödjer flera nivåer av navigering på ett sätt som kan vara värt att inspireras av. Den kanske mest avgörande skillnaden är att de responsiva webbplatserna är läsbara, visar prioriterat innehåll på den lilla ytan och att navigeringen fungerar smidigt med touchskärm. vgregion.se i iphone 4 varmland.se i iphone 4 lulea.se i iphone 4
Utredning: Responsiv webbdesign Sida 4 (8) Grovt förenklat är det mest strategiskt att göra en responsiv webbplats för alla som inte bedriver ehandel på publika webben. Anledningen till att de som bedriver ehandel kan ha nytta av olika webbplatser för de viktigaste typerna av enheterna är för att det är lättare att jobba mätbart genom att utvärdera det ekonomiska resultatet per typ av enhet. Denna uppenbara måttstock finns inte för de som erbjuder information, e tjänster och dylikt på webben. Genom att fokusera på att ha en webbplats som ska fungera bra nog för alla besparar man sig en del huvudbry med att ha flera olika webbplatser att förvalta och vidareutveckla. Det en responsiv webbplats strävar efter är att vara device agnostisk, vilket rent praktiskt innebär tre saker: 1. Media queries. Brytpunkter gör att om innehållet kräver det kommer fler eller färre kolumner användas. På detta sätt modifieras utseendet för de speciella behov som finns för olika storlekar på skärmar. Det är vanligt att vissa delar av innehållet inte visas upp om det är ont om utrymme, exempelvis utsmyckningsbilder brukar ofta döljas för mobiler. 2. Kolumn/rutsystem används. Alla komponenter i designen flyter ut över tillgängligt utrymme då alla mått är relativa. Finns plats ska den användas om det tillför något. 3. Flexibla bilder. Bilders storlek sätts i relativa mått så de kan skalas upp eller ner beroende på vilket utrymme som finns tillgängligt. Utmaningen är inte bara att folk har mindre skärmar idag utan även att de mobila anslutningarna till internet skiljer sig från trådbunden uppkoppling man har på kontor och i många hem. Även de med en vanlig dator, om de ansluter via mobilt bredband, kan dra nytta av ett väl utfört jobb inom RWD. Exempelvis är det vanligt förekommande att webbplatser som skapades innan RWD slog igenom är beroende av väldigt många filer för att visas korrekt. På en mobil anslutning vill man ha så få, och samtidigt små, filer som möjligt. För den som har en skakig 3G eller EDGE anslutning kan det ta upp till flera minuter att ladda ner alla filer som krävs för att interagera med en webbplats värt att jämföra med att många jagar tiondelar av sekunder när de optimerar webbplatsers laddningstid. När och hur man använder webben är också något annorlunda idag. Att din besökare kan vara på gående fot i starkt solsken ställer nya krav på användbarheten jämfört med en ergonomiskt utformad arbetsplats med en stationär dator, stor skärm, vanligt tangentbord och en mus. Slutsats VGR bör göra sin webb responsiv och prestandaoptimera den så långt det är försvarbart. Nedan ges två alternativ på hur VGR kan sikta in sin responsiva omdaning av webben. Det första alternativet föreslår den minsta tänkbara ansträngning som är meningsfull ur en webbstrategisk synvinkel. Alternativ 2 är om man har väsentligt mycket mer resurser att avsätta, samtidigt är den ett förslag på steg 2 när man har gjort och utvärderat alternativ 1. Förslagsvis utför VGR alternativ 1 men i mån av resurser plockar med godbitar från alternativ 2.
Utredning: Responsiv webbdesign Sida 5 (8) Alternativ 1: Den görbara versionen av RWD Alternativ 1 siktar på det som verkligen behöver göras, men inte att fullt ut följa allt som kan anses ingå i begreppet RWD. Ambitionen är inte att bearbeta redaktionellt innehåll i någon nämnvärd utsträckning. Målet är att lösa de mest akuta problemen utan att för den skull påverka utseendet på webbplatsen för övriga. Inget ska förändras om det inte löser ett problem för mobila och surfplattebesökare. De som ska dra nytta av detta arbete är de: Med så pass låg upplösning/storlek på skärmen att nuvarande designen bryts och skapar problem. Som ansluter med en mobil uppkoppling till nätet. Mobilt bredband som Edge/3G/4G. Vanliga datoranvändare som inte låter sin webbläsare fylla hela skärmen. Med det sagt är inte kravet att en besökare med en högupplöst surfplatta på 10 tum kommer märka någon större skillnad i horisontellt läge, de med mobiltelefon är högre prioriterade. Att identifiera smärtgränsen, och att finna den mobila brytpunkten för media query, är upp till konsultens UX expertis under framtagandet i samråd med VGR. Brytpunkten ser ut att hamna i spannet 6 9 tum på testade upplösningar i horisontellt läge. Följande punkter är exempel på delar som behöver jobbas på: Införa ett modernt kolumn/gridsystem vilket ska lösa dagens designbuggar där exempelvis innehållet ibland hamnar under undermenyn. I övrigt vara grunden för en flexibel layout upp till den maximala bredd som idag finns i designen. Identifiera brytpunkten när det inte längre är användbart att ha mer än en kolumn. Snabb utvärdering om det är meningsfullt att ha fler brytpunkter än bara för desktop & mobil, vilket i så fall skulle vara en för surfplatta som inte behöver vara fullt så förenklad som den för mobil. Designa & konstruera ett nytt förenklat sidhuvud som ersätter det nuvarande vid den brytpunkt som förenklar gränssnittet, där stor vikt läggs vid: Smart disponering av utrymmet så att en undersidas unika och meningsbärande innehåll, som huvudrubrik, får en chans att synas. Kunna hantera flera nivåer i navigationen. Lösningen www.lulea.se har på mobila enheter är värd att beakta. Att bevara igenkänningen att det är VGR som är avsändare. Designa & konstruera hur sidors innehåll ska visa sig i det förenklade gränssnittet, där fokus ligger på att: Prioritera text som innehåll framför utsmyckningsbilder. Främja läsbar text för ett mobilt användningsscenario. Tillgängligt utrymme utnyttjas maximalt väl avvägt med de marginaler som behövs mellan olika element.
Utredning: Responsiv webbdesign Sida 6 (8) Tillräckligt stora träffytor på länkar och knappar för att vara användbara för de med touchskärm. Generell prestanda för ett mobilt scenario ska best practice tillämpas, exempelvis: Ersätta eventuella designstöttande bilder med CSS i de fall det är riskfritt. Använda tekniken CSS sprites i rimlig utsträckning för att minimera antalet bilder att ladda ner. Planera resurser som Javascript, stilmallar och bilder för smart livslängd/cache hantering i nätverk och i webbläsare ger färre anrop då oförändrade, gemensamma eller redan hämtade filer inte skickas på nytt. Beakta Content Delivery Networks för ramverksfiler från tredje part, exempelvis jquery. Ha så få filer för stilmallar och Javascript som möjligt. Med lite god planering kan man i vissa fall slå samman dessa filer till en stilmallsfil och en Javascript fil. Se till att textbaserade resurser som HTML, stilmallar och Javascript sänds komprimerat och minimerat. Prestandadelarna är mätbara via Google PageSpeed och Yahoo YSlow. Det en gränssnittsprogrammerare kan påverka en undersida bör endast i undantagsfall ha lägre än 90 av 100 enligt PageSpeed. Inga högprioriterade, rödmarkerade, åtgärder ska finnas enligt vare sig PageSpeed eller YSlow. VGR bör inte acceptera att: Det förenklade gränssnittet förhindrar zoomning. Det krävs nya sidmallar i EPiServer eller att sidor ska behöva byta sidmall. Nya beroenden till Javascript introduceras. Nuvarande nivå av tillgänglighet försämras. Det tillkommer designramverk med CSS/Javascript. En alternativ/legacy version av sajten behöver leva parallellt för att stödja äldre webbläsare som Internet Explorer 8. Avsteg från ovan punkter behöver stämmas av med VGR:s arkitekturledningsgrupp och dokumenteras. VGR rekommenderas att ha en grupp som börjar testa tidigt, och testar ofta, för att prioritera varje iterations insatser. Denna grupp bör bestå av personer med bred erfarenhet av webbarbete. Alternativ 2: Möjlig vidareutveckling Här föreslås den nivå VGR kan välja antingen som steg 2 alternativt om man tror sig kunna dra i land ett större och mer komplicerat projekt direkt, eller möjligen som en plocklista vid varje iteration i det kontinuerliga webbarbetet. Detta alternativ gör sig som helhet väl med en översyn av innehållet, upprättandet av en mobil innehållsstrategi och etablerandet av en multifunktionell
Utredning: Responsiv webbdesign Sida 7 (8) bildbank. Dessa punkter är vad som kan beskrivas som bokstavstroende RWD, andra punkter vad vissa skulle kalla Adaptive Web Design och några punkter är allmän uppryckning av kvalitet. De som ska dra nytta av alternativ 2 är förutom tidigare: De besökare som vill kunna välja vilken brytpunkt de vill använda. De med högupplöst skärm. Användare som föredrar, eller primärt använder, mobila enheter för att surfa. De med relativt små skärmar, främst mobiler, ska få meningsbärande information direkt vid sidvisning. Delar att jobba med: Putsning på alternativ 1 baserat på användbarhet och översikt, bland annat: Det ska vara möjligt för besökare att välja och byta bland de brytpunkter som finns. Exempelvis låta mobilanvändare få ta del av, vad som slarvigt uttryckt kan kallas, tablet och desktop varianterna av designen. Erbjuda möjligheten att dölja utsmyckningsbilder i mobil och tablet version av designen. I de fall bilder sätts och styrs av sidmall kan detta ske för mallen, men en redaktör bör kunna välja bilder som inte behöver visas för de med mindre skärmar. Bygga bort de delar som idag är designade med behov av iframes. Istället får man lov att läsa in den informationen via API, länka direkt till den externa funktionen eller utveckla eget. Omtag kring hur navigering kan behöva kompletteras på grund av besökare med touch skärmar och ett mobilt interaktionsbeteende. Exempelvis behov av swipe sidledes på bildkaruseller då den navigeringskonventionen finns bland de som frekvent använder mobila enheter. Höja nivån av semantik på publicerad information. Följa schema.org och Microformat där det är tillämpligt, validera med Googles Structured Data Testing Tool. Exempelvis kontaktuppgifter, geografiska platser, kalenderhändelser och relationer i länkar behöver beskrivas på ett sätt som maskiner förstår. Kalenderhändelser ska exempelvis märkas upp med bland annat datum så sökmotorer får en chans att veta om det är en händelse i framtiden och var det tar plats. Högupplösta webben: Högupplösta logotyper och ikoner erbjuds för de som kan dra nytta av det. Ge, eller erbjud, högupplöst material (foto/bilder/video) till de enheter som stödjer det och har en lämplig uppkoppling. Utvärdera om moderna webbteckensnitt kan ersätta många bildbaserade ikoner/pictogram. Höja prestandakraven ytterligare för gränssnittskod och teknisk miljö, bland annat: Optimera ordningen på stilmallar och Javascript så inga onödiga, eller åtminstone
Utredning: Responsiv webbdesign Sida 8 (8) överdrivna, så kallade reflows sker. Inte exekvera onödig Javascript vid initial sidladdning. Sikta på minst 95 av 100 i Google PageSpeed på samtliga sidor. Pingdom för att mäta svarstider. Beroende på när alternativ 2 kan tänkas bli aktuellt är det smart att utvärdera de ingående delarna på nytt. God webbdesign är trots allt ett rörligt mål och livslängden på denna utredning är förstås begränsad. // Marcus Österberg, // Webbstrateg på VGR