Kategoriarkiv: Responsive Design

Responsive Design er ikke vigtigt

I Pentia har vi over de seneste år 2-3 år lavet et hav af websites, der tilpasser sig den enhed, brugeren besøger sitet med – en mobiltelefon, en tablet eller en af de efterhånden mange former for computere, der er på markedet.

Der er ingen tvivl om, at Responsive Web Design (RWD) har betydet meget for, hvordan vi i Pentia laver websites. Det har haft betydning for vores designproces. Det har tvunget os til (igen) at tænke over båndbredde og performance. Det minder os om, at prioritering er vigtigt.

Men når vi taler om Responsive Design, kommer vi også ofte til at tale om Adaptive Design. Der findes mange definitioner på begge dele. Jeg tror, de mest almindelige er følgende:

Adaptive Web Design

Et webdesign, der tilpasser sig klientens skærm. Udtrykket knytter sig også til udtryk som progressive enhancement. I daglig tale bliver Adaptive Web Design (AWD) typisk brugt om sites, der anvender media queries og dermed er tilpasset et fast defineret antal skærmopløsninger (f.eks. skærme mindre end 480px, skærme mindre end 768px og skærme mindre end 1280px).

Responsive Web Design

Ethan Marcotte beskriver RWD som brugen af et fleksibelt grid, fleksible medier og brugen af media queries.

Sat lidt på spidsen kan man sige, at hvor man med Adaptive Design tilpasser sit website til flere skærmstørrelser, er ambitionen med RWD at tilpasse sig alle skærmstørrelser.

Og alle de pragmatiske mellemting …

Kan man kombinere teknikkerne? Fluid grid og fluid media giver rigtig god mening på de mindre skærme, hvor skærmpladsen er meget værdifuld, fordi der er så lidt af den. Men hvorfor ikke kombinere dette med et sæt pragmatisk valgte prædefinerede media queries til de større skærme, hvor det måske ikke betyder så meget, om siden vises med 100px margin i hver side?

Vi behøver ikke nødvendigvis at anvende fuldstændig den samme teknologi for alle skærmstørrelser.

Men er det så ægte RWD?

Responsive Design-bølgen har fået os til at orientere vores webdesigns mod en stadig stigende mængde af device-typer. Men i sidste ende er det ikke så afgørende, om du laver et responsive design eller et adaptive design. Ikke fordi der ikke er fordele ved RWD. Og ikke fordi AWD ikke i mange tilfælde er mere pragmatisk. Men fordi det ikke handler om, hvad vi kalder det.

Er dit website ægte RWD? Det er ikke vigtigt.

Tager du højde for, hvilke devices dine brugere anvender til at tilgå dit indhold? Det er vigtigt.

Mobile First: Tre forskellige forståelser

I Pentia, hvor jeg er UX arkitekt, har vi dygtige mennesker til at lave design og frontend. Og vi taler ofte om Mobile First. Men sandheden er, at vi ikke er enige, når vi taler om Mobile First.

Vi kan hurtigt blive enige om, at Mobile First er et buzz word. Og lige som Big Data, Responsive Design og User Journeys er der omtrent lige så mange definitioner, som der egoer. Men i Pentia er vi også enige om, at selvom det er et buzz word, så er det et vigtigt et af slagsen. Men det er vigtigt at forstå, hvilke forskellige konsekvenser der følger af ordet, afhængigt af om det er en frontend-udvikler, en designer eller en UX’er der siger Mobile First.

For at kaste lidt lys over de mange definitioner, vil jeg her forsøge at beskrive, hvordan de forskellige fagligheder taler om Mobile First i Pentia.

UX’erens definition af Mobile First

Når en UX’er arbejder med Mobile First i Pentia, er det med henblik på at designe den mobile løsning, før man går i gang med desktop-versionen. Stort set alle de projekter, vi har lavet over de sidste to år, har været Responsive Design-projekter. Vi ved, at vi skal lave noget til både desktop og mobil.

Jeg plejer at sige, at udfordringen ikke er at gøre et enkelt website responsive. Det er at lave et enkelt website.

Der skal prioriteres hårdt, når man arbejder med mobile løsninger. Og en hård, skarp og fokuseret prioritering skader sjældent et desktop-design. Så med fokus på at lave den hårdeste prioritering først, lægger UX’eren ud med at designe til den mindste skærm.

Tænker man ikke Mobile First i designprocessen, ender man hurtigt med at skulle skærpe sin prioritering flere gange undervejs i processen. Det er en øvelse, der både kan være svær og uhensigtsmæssig at dele op i for mange bidder. Starter man derimod med den svære prioritering, bliver det en gave at få lov at folde den ud på en større skærm.

Helt kort er Mobile First et princip, UX’eren kan bruge til at tage de sværeste beslutninger tidligst i processen.

Frontend-udviklerens opfattelse af Mobile First

Dygtige frontendere vil ligesom UX’eren altid forsøge at løse de sværeste problemer først. Og hvor UX’eren og designeren er fokuserede på den meget mindre skærm, er frontenderen typisk fokuseret på den meget mindre båndbredde og den noget mindre processorkraft, der findes i bærbare enheder.

Frontend-udvikleren vil derfor typisk fokusere på at lave en løsning, der først og fremmest spiller godt på de mobile enheder – fordi de oftest er udsat for den dårligste forbindelse og den mindst hurtige processor.

Et af de værktøjer, frontenderen tager i brug, er Progressive enhancement. Det betyder i korte træk, at man vælger, hvad der skal læses ind i et worst case scenario (dårlig forbindelse, lille skærm, gammel browser) og at de øvrige elementer læses ind efterfølgende i det omfang, det giver mening.

Et eksempel på progressive enhancement vil være at indlæse en sides overskrift og brødtekst som det første, og først bagefter indlæse pyntebilleder og grafikker, der får siden til at se ekstra flot ud. Når alt det essentielle er indlæst, kan man – hvis der ser ud til at være nok båndbredde – vælge også at indlæse eksempelvis reklamer og videoer, eller at preloade indhold fra øvrige sider.

På den måde sikrer frontenderen, at brugeren altid får den bedst mulige oplevelse så tidligt som muligt, mens siden loader. Og fordi man har defineret et “worst case scenario”, har man altid noget meningsfuldt og pænt at vise dem, der har en lille, gammel mobiltelefon.

Designerens bud på Mobile First

Interessant nok har designeren et helt tredje sæt udfordringer at forholde sig til end UX’eren og frontenderen. Men såfremt de to andre fagligheder har gjort deres arbejde ordentligt, er det faktisk ikke det, at det er mobilen, der er en udfordring for designeren. Her er udfordringen nærmere at skulle levere et design, der kan tilpasse sig en skærmstørrelse og stadig give mening.

Designerens opgave bliver at lave en løsning, hvor brand og brugeroplevelse er konsistent, selvom størrelsen på skærmen og layoutet af elementerne ændres fra besøg til besøg.

Designeren fokuserer derfor på at lave legoklodser, der kan fungere i forskellige størrelser og sammenhænge – til touch og til mus.

Kundens forståelse af Mobile First

Men vi mangler en vigtig interessent. I Pentia spiller vores kunde en afgørende rolle ifm. Mobile First. Hvis ikke kunden fra starten køber ind i processen med at bygge til mobiltelefonen, før man bygger til tablet og desktop, løber man hurtigt ind i problemer.

I Pentia har vi flere gange oplevet, at “Mobile First” i virkeligheden opfattes som “og så skal det også virke på mobilen”. Når man i sådanne tilfælde viser kunden et mockup af et website på en mobiltelefon, er den første reaktion typisk: Men hvad med det “rigtige website?”

Hvis kunden ikke kan se fordelene i at tage de sværeste beslutninger først, og ikke anser besøgende fra mobil og desktop som ligeværdige, så kan det godt være, at Mobile First ikke er den rigtige vej. For i sidste ende er det en proces – og processer er til for at skabe bedre produkter. Og selvom man kan skabe fede, fokuserede og gennemtænkte produkter ved at tænke Mobile First, er den bedste proces den der inddrager kunden.