Responsive web design: Pas på faldgruberne

Man using smartphone

Her er nogle af de typiske digitale faldgruber i forbindelse med overgang til responsive web design:

1. Navigation fylder for meget

Når du bevæger dig fra en desktop-skærm til en mobil-skærm, er det en udfordring i forhold til navigationen. Navigationen skal naturligvis være der, men den skal samtidig fylde mindre.

Her er det gået galt for Gentofte kommune, hvis du spørger os. Deres mobiltilpasning præsenterer navigationen som hovedpunktet, og man skal scrolle langt for at komme til indhold.

Man ser kun navigationen, når man tilgår Gentofte kommunes mobile løsning

Man ser kun navigationen, når man tilgår Gentofte kommunes mobile løsning

Meget bedre går det ikke for Sony Music. Der er laangt til indhold, fordi navigationen fylder for meget.

Navigationen fylder meget i Sonys mobiltilpasning

Navigationen fylder meget i Sonys mobiltilpasning

2. Du glemmer vores fede fingre

En anden klassisk fejl er, at du glemmer at tage højde for, at på mobilen sker navigation ved hjælp af fingrene. Fingre fylder meget mere end en musepil, og selvom du har en mindre skærm skal der være mere luft mellem dine elementer.

Dit design skal tage højde for omkredsen af en gennemsnitlig finger. Ellers saboterer du brugervenligheden

Dit design skal tage højde for omkredsen af en gennemsnitlig finger. Ellers saboterer du brugervenligheden

3. Du tør ikke prioritere dit indhold

Hvad gør du, hvis chefen mener, at vigtige nyheder om virksomhedens strategi og nye aftaler skal vises i forreste række, og du samtidig kan se, at nyhederne er noget af det, dine brugere læser mindst? Tør du sige nej?

Her har DSB løst deres mobiltilpasning godt ved at gå direkte til den tjeneste, som deres brugere efterspørger aller mest: Nemlig selve rejsen og prisen. Deres fokus er på brugerens behov.

DSB prioriterer sit indhold ved at give brugerene det, de efetrspørger aller mest.

DSB prioriterer sit indhold godt ved at give brugerne det, de efterpørger aller mest.

Sidst kan du se, hvordan vi selv har løst at skabe et digitalt design til Magisterbladet på tværs af platforme. Metoden er: mobile first

MB-rwd

Follow us for similar blogposts:
facebooktwittergoogle_pluslinkedininstagramfacebooktwittergoogle_pluslinkedininstagram

Share the blogpost with your network:
facebooktwittergoogle_pluslinkedinfacebooktwittergoogle_pluslinkedin

Prioritering er dyrt – men det betaler sig

Businessman choosing the right door

Det er svært at lave en hård prioritering på websitet. Ikke fordi det er svært at udvælge. Men fordi det er svært at fravælge.

En god prioritering afspejler, at der er taget stilling til i hvert fald to ting:

  1. Hvad er websitets formål?
  2. Hvad kan brugeren få ud af at bruge websitet?

Dermed ikke sagt, at websitets formål er at tjene brugerne. I mange tilfælde er det primære formål at tjene penge eller skaffe leads.

Glade brugere er god forretning

Men det er en afprøvet og valideret taktik at satse på at gøre brugerne tilfredse. Hvis ikke du har brugerne med dig, har du ikke noget eksistensgrundlag.

Men der er ofte flere forskellige idéer om, hvordan man skal drive forretning med sin digitale løsning. Og flere idéer om, hvad brugerne ville anvende disse features til. Resultatet bliver ofte, at organisationen bag websitet kæmper om at få deres features fremhævet.

Først til mølle om brugernes opmærksomhed

Og med en kamp om at komme først til møllen bliver resultatet mudrede løsninger, hvor brugeren ikke får en klar rute gennem et website.

Det svarer til, at man kommer ind radio/tv-butik for at købe et tv, og inden man er kommet ned til væggen af fladskærme, bliver man angrebet af forskellige sælgere, der vil sælge en nespresso-maskiner, gaming-headsets og serviceaftaler. I nogle tilfælde virker det.

Men personligt ville jeg nok vælge at handle i en anden butik.

Prioritering koster

Når prioritering er svær, er det ikke fordi, det er svært at finde ud af, hvad der skal være prioriteret højest. Det svære er at skabe afstand ned til anden- og tredjeprioriteten. Det er at vælge features fra, man ved, man også kunne tjene penge på.

Men når vi alligevel skal prøve, er det fordi, vi i sidste ende tror på, at en virkelig god oplevelse slår to ligegyldige. Når vi bliver i stand til at vælge fra, holder vi også op med at konkurrere med os selv om vores eget indhold.

Mads-Peter er gæsteskribent på vores blog i denne uge

Mads-Peter er UX-chef hos Pentia og brænder for digitale løsninger, som både har fokus på den stærke brugeroplevelse og bundlinjen.

Læs flere af Mads-Peters andre blogindlæg her: (http://mpjakobsen.dk/)

Follow us for similar blogposts:
facebooktwittergoogle_pluslinkedininstagramfacebooktwittergoogle_pluslinkedininstagram

Share the blogpost with your network:
facebooktwittergoogle_pluslinkedinfacebooktwittergoogle_pluslinkedin

Mobilen afslører håbløse venstremenuer

RoadmapWEB-BLOG

En af de største udfordringer websiteejere oplever i dag er, hvordan de får tilpasset deres website til mindre skærme. En udfordring, der er pres på for at få løst. For der vil snart være langt mellem seriøse websites, der ikke er optimeret til mobiltelefonen – hvad enten man har valgt et separat mobile website eller en device-agnostisk løsning som Responsive Design.

Når man bliver tvunget til at tilpasse sit indhold fra et større format til de nye, meget mindre formater på mobilen, er det en naturlig følge, at websiteejeren får anledning til at reflektere: Hvor meget af skærmen bruger vi egentlig på navigation? Hvorfor har vi egentlig så mange links på vores sider? Og du bliver sikkert mødt af meninger som: ”Content is king” eller ”Vi skal tænke mere enkelt”.

Kan vi puste med mel i munden?

Et tilbagevendende problem i forhold til mobile løsninger er, at indholdet på siden skal være centralt og dominerende samtidig med, at man nemt skal kunne navigere og orientere sig om, hvor på sitet man er. Og der er ikke meget plads at gøre godt med.

På de store desktop-sites hersker konventioner om mere eller mindre statiske rammer omkring vores indhold oftest med venstremenuer som den dominerende faktor. På den måde ved brugeren altid, hvor de skal kigge hen for at finde indholdet og hvor de finder navigationen. Redaktøren slipper oven i købet for at tage stilling til, hvad brugeren skal foretage sig på siden – for brugeren kan selv orientere sig i de synlige valgmuligheder i menuerne.

Mobilt webdesign er en udfordring

Men på mobile enheder er det en logisk konsekvens, at websitets elementer placeres over hinanden (grundet den smalle skærm), så nu er det ikke længere muligt at overskue topmenu, venstremenu, indhold og højrekolonne i et enkelt skærmbillede. De kommer i stedet som en lang række elementer efter hinanden.

Og hvis der skal være plads til en global navigation og en venstremenu, der viser hvor på websitet, brugeren befinder sig, bliver hovedindholdet skubbet så langt ned, at det ikke er synligt i første skærmbillede. I stedet for at få en side, hvor indholdet er i fokus, får brugeren en side, der primært handler om navigation, og hvor det kan se ud som om, selve indholdet er presset ned i en footer.

Har vi brug for al den navigation?

Det fordrer, at man spørger sig selv: har vi virkelig brug for al den navigation? Det typiske svar er: ”ja, men vi gemmer den væk. Vi laver en menu-knap, der er strategisk placeret på siden, så brugeren altid kan finde menuen.”

Det er en rigtig god løsning for de fleste, men man glemmer ofte at tænke på, at menuen ikke kun er til for at navigere videre. På desktop-sitet viser den også, hvor på sitet brugeren er: den angiver din kontekst.

Som redaktører er vi derfor blevet vant til, at de faste navigationselementer på websitet er den primære måde at bevæge sig rundt på sitet. Men mobilen har vist os, at det er en dårlig vane.

Navigation direkte i indholdet

Når en bruger læser indholdet på en side, vil der ofte være ganske få logiske veje at fortsætte af. Hvorfor ikke vise disse direkte i indholdet? I stedet for at forsøge at tvinge brugeren til at orientere sig i menuer, så hjælp dem på vej og motiver dem til at klikke på det link, der (formentlig) giver bedst mening for dem.

Så i stedet for at se dit indhold, som noget der er placeret i et fast hierarki, så se på dit indhold som knuder, der leder brugeren gennem dit website. Drop afhængigheden af venstremenuen og sørg for, at dit indhold naturligt leder brugeren gennem dit website. Dit indhold skal kunne fungere, uden du kan se, hvor på websitet du er, og det skal fungere uden faste navigationselementer.

touchpoints

Jamen, hvad nu hvis…

Skulle brugeren have behov for noget andet eller er brugeren kommet til en forkert side, har vi jo altid menu-knappen, som fint fungerer som ”jeg er faret vild – hjælp mig med at finde det, jeg leder efter”-funktion.

Det må være ambitionen for godt webindhold, at indholdet er selvforklarende og i sig selv kan lede brugeren videre til det mest relevante indhold. Og hvis det kan det, har vi ikke brug for den synlige venstremenu. Hverken på desktop eller mobil.

Note: Det er i øvrigt forfatterens opfattelse, at venstremenuen er særligt populær i Skandinavien. Prøv at se hvor mange amerikanske websites du kan finde med en klassisk venstremenu på alle undersider.lamp

Follow us for similar blogposts:
facebooktwittergoogle_pluslinkedininstagramfacebooktwittergoogle_pluslinkedininstagram

Share the blogpost with your network:
facebooktwittergoogle_pluslinkedinfacebooktwittergoogle_pluslinkedin

10 ting du ikke vidste om mobile internetbrugere

Mobil og IpadBLOG

De første fem…

Her er 10 interessante fakta om de mobile internetbrugere:

  • 91% af alle ejere af en mobil holder den inden for 1 meters afstand 24 timer i døgnet
  • 25% af alle internetbrugere i USA har udelukkende en mobil
  • Antallet af mobiler vil modsvare antallet af jordens indbyggere inden udgangen af 2015
  • I Kina brugte flere mennesker mobilen end computeren til at komme på internettet for første gang i 2012
  • I Danmark er det aldersgruppen 25-34, som er de flittigste brugere af mobiltelefonen til internetbrowsing. Eksempelvis til at tjekke e-mails, downloade apps og være på de sociale medier.

Og fem mere…

  • Datatrafikken fra mobiltelefoner steg i Danmark med 240 % alene i første halvdel af 2012
  • Verdens første mobiltelefon blev opfundet i 1973 af en Motorola-ansat. Verdens første smartphone kom 20 år senere i 1993. Pris 899$
  • Verdens hidtil dyreste mobil er en diamantbesat iPhone4 til 5 millioner £
  • 40% af alle iPhone-ejere mellem 30-39 har foretaget et køb i en webshop via deres mobil
  • 57% af mobile brugere vil ikke anbefale et website, som ikke har et mobiltilpasset webdesign

Kilder: FDIH, Google – Our Mobile Planet 2012, FDIH, Danmarks Statistik, Stanley Morgan, DWARF’s Mobil Shopping Report 2011, Reuters, Telestatistikken, Johan Winbladh

Jeg-elsker-min-mobil

Hvordan gør vi de mobile internetbrugere tilfredse?

Eksplosionen i mobile internetbrugere og det ændrede brugsmønster betyder naturligvis en masse for dig og dit website. For hvordan rækker man mest effektivt en digital hånd ud mod de mobile internetbrugere? Både teknisk, indholdsmæssigt og forretningsmæssigt?

Eksperterne vurderer, at de virksomheder, som hurtigst kommer på sporet af den mobile internetbruger og løser udfordringen med den mobile brugeroplevelser bedst, vil få mest succes.

Interesseret i at vide mere? Så afholder Pentia gratis morgenmøde om digital strategi til mobile brugere d. 11. april i Mogensens koncertsal. Se her: http://www.pentia.dk/Viden/Meetings/Mobile-Digital-strategi

mobile night

Follow us for similar blogposts:
facebooktwittergoogle_pluslinkedininstagramfacebooktwittergoogle_pluslinkedininstagram

Share the blogpost with your network:
facebooktwittergoogle_pluslinkedinfacebooktwittergoogle_pluslinkedin

Hvad er Responsive Design – og hvad er det ikke?

RWD Pentia

Responsive Design er et princip, der får dit website til at tilpasse sig layoutet til det device, sitet vises på. Stort set alle de projekter, Pentia gennemfører i dag, er baseret på Responsive Design (eller RWD). Som princip er Responsive Design lidt af en årsunge. Det har kun eksisteret i ca. et år. Men betydningen af princippet kommer til at være enorm.

Hvorfor snakker alle om Responsive Design?

Når Responsive Design er blevet udgangspunktet for en stor andel af de websites, der bygges på nettet lige nu, er det fordi, det rummer løsningen på tre problemer:

1. Mobile webbrugere er ikke tilfredse

Flere og flere mennesker bruger smart devices til at gå på nettet, og de er ikke tilfredse med brugeroplevelsen. Slet ikke. De største problemer vedrørende brug af smart phones i forbindelse med at surfe på nettet er lave downloadhastigheder, svær navigation og læsbarhed.
[kilde]

2. Der kommer løbende nye devices

Når vi prøver at imødekomme vores brugere ved at tilbyde mobile websites, tager vi udgangspunkt i et eller flere udvalgte produkter. Men der kommer hele tiden nye produkter. Så når vi har designet til en iPhone, kommer der pludselig en Samsung Galaxy med en større skærm. Og så kommer der en tablet. Og alle devices kan vendes på alle leder og kanter. Så hvad skal vi designe til?

3. Der findes ikke et mobilt internet


Der findes websites, der er optimeret til mobile enheder (There is no mobile web). Men det er hele internettet ikke. Så når brugeren klikker rundt på nettet, vil de hurtigt klikke sig ind på en side, der ikke er mobil. Internettet er ligeglad med, om dit website er optimeret til en mobil eller en desktop computer. Alt er forbundet – og brugeroplevelsen bliver derefter.

Responsive Web Design er et bud på at løse alle tre udfordringer på samme tid. Helt kort kan man definere Responsive Web Design (eller RWD) som et design, der konsekvent anvender:

  • et fleksibelt grid (f.eks. kolonner, hvis bredde tilpasses afhængig af skærmens opløsning eller størrelse)
  • fleksible medier (f.eks. billeder eller video, hvis størrelse fleksibel)
  • media queries (som jeg vender tilbage til)

Ikke bare et mobilsite

Det interessante og visionære bag RWD er, at det ikke blot er et forsøg på at optimere et website til mobilenheder men en tilstræbelse på at lave et design, der tilpasser sig en hvilken som helst enhed. Mobiltelefon, tablet, tv, stor skæm, lille skærm.

RWD-websites kan genkendes på, at man på en desktop computer kan tage fat i browservinduet og ændre størrelsen, mens indholdet orkestreres rundt på siden.

Rejsekortet var first movers og således blandt de første større danske websites, der blev responsive. Besøg Rejsekortet.dk.

Media Queries og break points

De sidste mange år har vi haft mulighed for at lave websites, der automatisk skaleres afhængig af browserens bredde. Helt fra internettets barndom har man haft websites, hvis kolonner automatisk ændrede bredde sammen med browservinduet, simpelthen ved at alle bredder var angivet i procent frem for pixels.

Problemet blev blot, at man nemt fik meget sammenmaste eller udtrukne webdesigns, og at eksempelvis længden på tekstlinjer blev så lang, at det blev svært at læse teksten. Med CSS2 kunne man angive forskellige medietyper, sådan at man kunne lave et lidt andet design ved eksempelvis print. Men det var også de værktøjer, man havde at arbejde med.

Med CSS3 blev der indført et nyt begreb, nemlig Media Queries. Media Queries giver mulighed for at indføre såkaldte ‘Break points’, altså definerede bredder, hvor designet knækker eller ændres. Du har således i CSS3 eksempelvis mulighed for at styre, at “når skærmbredden er mindre end 748 pixel, skal skriftstørrelsen sættes ned, og topmenuen skal gøres vertikal i stedet for horisontal”.

Man har arbejdet med Responsive Design i ca. et år i skrivende stund, og indledningsvis anvendte alle break points ved foruddefinerede bredder for at tilgodese specifikke devices. Det var således almindeligt, at man fra begyndelsen definerede, at der skulle være et eller flere break points. Denne fremgangsmåde er dog ikke længere best practice, da det viser sig, at det ikke blot er lettere, men også giver bedre designs at indsætte de break points, der er brug for, der hvor der er brug for dem, for at få et solidt og sammenhængende design, der vises pænt i alle devices.

Responsive Web Design (RWD) og Adaptive Web Design (AWD)

Adaptive Web Design minder meget om Responsive Web Design. I nogle tilfælde hører man om AWD som den mindre ambitiøse version af Responsive Web Design eller en afart af Responsive Design. Hvis man er meget teknisk i sin forståelse, vil man definere de to principper forskelligt, men de fleste kan nok blive enige om, at Adaptive Design er en form for Responsive Design.

Princippet bag Adaptive Web Design er blot at lave et Responsive Web Design uden et fleksibelt grid. Det vil sige, at hvis du på en desktop computer tager fat i hjørnet af din browser og gøre siden mindre, vil du ikke se et site, der flydende bliver mindre, men at det pludseligt vil ændre layout.

AWD giver dig rigtig mange af fordelene ved RWD, men du får altså ikke hele paletten. DU får et design, der er tilpasset til netop de skærmstørrelser, der defineres. Selvom dette går stik imod grundprincippet i RWD (ikke at designe til et specifikt device), er AWD en meget pragmatisk løsning. Og i rigtig mange tilfælde vil man kunne skabe en langt bedre oplevelse med AWD end ved slet ikke at gøre noget for de mobile brugere.

Forbrugereuropa valgte at arbejde med Adaptive Web Design på deres website for at skabe en bedre oplevelse for de mobile brugere af websitet. Læs mere om Forbrugereuropas løsning.

Samme site eller separat site

Når man taler om RWD, taler man om ét website, der tilpasser sig yndefuldt til den platform, det vises på. Det vil sige, at der er tale om det samme indhold, den samme grundlæggende arkitektur, de samme features mv. Det næsten uopnåelige mål er, at en bruger, der har besøgt websitet på en desktop computer, efterfølgende besøger samme website på en mobiltelefon, straks genkender websitet og kan gennemføre de samme handlinger uden at fare vild. Brugeren skal opleve det som et og samme website.

Når man taler om at tilgodese de mobile brugere, er der også andre muligheder end RWD nemlig et mobilt website eller mobile apps. Men mere om det en anden gang.

Hvornår skal du vælge hvad?

Der er virkelig mange muligheder, når du gerne vil tilgodese dine mobile brugere. Når RWD er blevet så populært på så kort tid, er det fordi, det løser et meget generelt problem: At dit website er designet til en desktop computer, men at flere og flere anvender andre former for devices.

Derfor er der mange, der vælger at lave RWD på deres hovedwebsite. Ganske enkelt som et princip for, hvordan deres website fungerer.

Men det forhindrer ikke nogen i at kombinere og lave flere forskellige løsninger. Der er ikke noget i vejen med at have et website, der er lavet i RWD og supplere med et mobilt website, som er designet til et meget specifikt formål. Eller for den sags skyld at supplere med en app, hvis man gerne vil give brugerne hurtig adgang til at udføre en handling nemt og ofte (f.eks. at købe en billet til toget, indrapportere et hul i vejen til kommunen eller at bestille en taxa).

Der er ikke noget, der er rigtigt eller forkert. Det vigtige er derimod, hvordan man møder sine brugere på de forskellige platforme. For som det går lige nu, varer det ikke længe, før det er mere sandsynligt, at dit website bliver besøgt fra et smart device end fra en traditionel computer.

Vil du vide mere?

Pentia holder løbende inspirationsarrangementer, som du kan tilmelde dig gratis. Tilmeld dig og få et vidensforspring. Du kan også læse mere om forskellene på RWD, Mobile Apps og mobile sites her: http://pentia360.dk/mobilt-website…sign-eller-app/

Follow us for similar blogposts:
facebooktwittergoogle_pluslinkedininstagramfacebooktwittergoogle_pluslinkedininstagram

Share the blogpost with your network:
facebooktwittergoogle_pluslinkedinfacebooktwittergoogle_pluslinkedin

Mobilt website, Responsive Design eller App?

Tablet i sofaen

Der er ingen tvivl om, at antallet af brugere på mobile enheder (mobiltelefoner og tablets) er eksploderet i løbet af de seneste to år. Det stiller nye krav til websiteejere, der nu skal tage stilling til, hvordan man vil imødekomme de mobile brugere.

De mest populære løsninger lige nu er Responsive Web Design (RWD), mobile websites og apps. Men det er tre fundamentalt forskellige løsninger, der kan fungere både selvstændigt og i samspil med hinanden.

Responsive Web Design

Responsive Web Design (som typisk forkortes RWD) fungerer ud fra princippet om, at dit website skal være device-uafhængigt. Det betyder, at man tager udgangspunkt i det samme website, men at layoutet kan tilpasses flydende afhængigt af størrelsen på den skærm, du besøger websitet med.

Pentia har bl.a. lavet Responsive Design-løsninger for Rejsekortet, Aarhus Kommune og Forbrugereuropa.

Mobilt website

Når man taler om et mobilt website, er der tale om et site, der ikke er hovedsitet. Teknisk set kan det løses på flere måder, men hovedidéen bag et mobilsite er en antagelse om, at de mobile brugere har andre behov end dem, der besøger hovedsitet.

Med teknikkerne fra RWD kan man lave et mobilt website, men mindsettet i et mobilt website adskiller sig markant fra RWD ved, at man som afsender ikke forsøger at vise brugerne det samme website, men to forskellige websites.

Mobile websites er ofte centreret om en meget specifik usecase, f.eks. at se åbningstider, at lave hurtige opslag (f.eks. se hvornår bussen går) eller at udføre en enkel handling.

I forbindelse med OL 2012 lavede vi OL.dk i en mobilversion, der var fokuseret på at vise resultater fra de enkelte dage. Besøg mobilversionen af ol.dk.

Mobile App

En app til mobilen adskiller sig markant fra både det mobile website og RWD ved ikke at være tilgængelig fra World Wide Web. En app er et lille program, du downloader på eksempelvis din smart phone, og app’en vil typisk være mere eller mindre skræddersyet til det styresystem, din smart phone kører på. Det betyder, at man med en mobil app får en række muligheder, man ikke umiddelbart har med et website (værende RWD, mobilt site eller noget tredje). Med en app kan man f.eks. gemme store mængde data til offline brug, man kan anvende smart phonens hardware såsom kamera, kompas, gps, højttalere mv.

Tænk brugerens behov ind i din digitale platform

Din digitale platform kan godt favne både apps, mobilsites og et hovedsite baseret på RWD. Men spørgsmålet er, hvor dine brugere færdes, og hvilke behov de har? Hvor er det, møder dig?

Det er umiddelbart svært at forestille sig et website, der ikke ville kunne drage fordele af et Responsive Design. Omvendt kan et stort website have svært ved at opnå samme målrettethed som på et mobilt website eller samme funktionalitet og brugeroplevelse som på en app.

Der er med andre ord ikke tale om, at du skal vælge et enkelt initiativ for at udelukke de øvrige, men om at sætte sig ind i sine brugeres behov. Hvis du kan se, at du har mange mobile besøgende på dit website, kan det give god mening at arbejde med RWD for at skabe en bedre brugeroplevelse. Hvis du i din digitale strategi har gjort en særlig handling til det primære mål, kan det være brugerne vil blive glade for et enkelt og nemt mobilsite, der er fokuseret på netop denne handling. Og hvis du allerede har en masse brugere, der konsekvent udfører den samme handling igen og igen på dit website, er en app måske en service, der vil sikre, at de fortsat vil anvende dit produkt.

I næste uge vil du her på bloggen kunne læse en mere detaljeret gennemgang af principperne bag samt fordele og ulemper i forhold til Responsive Web Design.

Follow us for similar blogposts:
facebooktwittergoogle_pluslinkedininstagramfacebooktwittergoogle_pluslinkedininstagram

Share the blogpost with your network:
facebooktwittergoogle_pluslinkedinfacebooktwittergoogle_pluslinkedin