Responsivt vs. adaptivt design: Sådan vælger du den rigtige designtilgang

For blot et par år siden kunne designere lave en enkelt stiv websideversion og så var det slut. Det er ikke længere tilfældet. Nu skal de tage hensyn til utallige smartphones, wearables, tablets og andre smarte enheder – og det skal du også.

Dette gælder især for e-handelsvirksomheder. De fleste brands har ikke længere råd til at fokusere på en enkelt enhed. Mere end 58% af internettrafikken kommer fra mobile enheder, mens desktop-enheder står for 40%. Næsten 60% af e-handelssalget foregår via mobilen.

Andelen af mobiltrafik vil kun blive ved med at vokse, hvilket betyder, at designere også skal imødekomme forskellige brugerbehov og browsing-stile. En mobilbruger er mindre tålmodig – de ønsker, at webstedsindholdet skal være i små bidder og let at behandle. På den anden side er en pc-bruger normalt klar til at bruge mere tid på at studere et bestemt tilbud.

Spørgsmålet er, hvordan du sikrer dig, at dit design ser godt ud på alle skærme og dækker forskellige brugerbehov? Er responsivt design den eneste vej at gå? Ville adaptivt design ikke være et bedre valg i nogle tilfælde? Og hvordan er responsive og adaptive designs egentlig forskellige?

Lad os finde ud af det.

Responsivt vs. adaptivt design: Hvad er forskellen?

Før vi går videre, bør vi definere, hvad vi har med at gøre.

Responsivt design gør, at dit indhold reagerer på brugerens skærmstørrelse og tilpasser sig derefter. Med responsivt design opretter du et enkelt layout og gør de enkelte elementer fleksible for at sikre, at de vises korrekt på forskellige skærme.

Tænk på responsivt design som et sæt regler, der fortæller dit indhold, hvordan det skal opføre sig. Du kan bruge CSS media queries til at angive målenhedstyper og angive breakpoints, dvs. betingelser som f.eks. skærmens maksimale eller minimale bredde. Breakpoints bestemmer, hvornår dit layout skal ændres.

Adaptivt design betyder til gengæld, at dit indhold tilpasser sig brugerens enhedsparametre, men på en forudbestemt måde. Du har ikke ét, men flere færdige layouts til at tage højde for forskellige skærmstørrelser, orienteringer osv. Du bestemmer selv, hvordan dit indhold skal vises i brugerens browser på baggrund af deres enhedstype.

Kort sagt, med responsivt design dikterer du, hvordan dit indhold skal reagere, mens du med adaptivt design også bestemmer slutresultatet. Uanset hvilket design du vælger, vil du kunne skabe en smidig og problemfri oplevelse for både smartphone- og desktopbrugere. Og det vil til gengæld forbedre din placering i søgemaskinerne.

Denne side-by-side-sammenligning vil hjælpe dig med at forstå de vigtigste forskelle mellem responsivt og adaptivt design:

Begge tilgange er absolut brugbare; de hjælper dig med at følge almindelige webdesignprincipper og skabe et kundevenligt websted. Den største forskel mellem responsivt vs. adaptivt design er, hvordan de udføres.

Fordele og ulemper ved responsivt webdesign

Lad os starte med fordelene ved responsivt design:

• Du har ikke brug for avancerede kodningsevner. Hvis du bruger en webside builder som Squarespace, som du kan bruge til at få en webside op og køre, får du som standard et responsivt website. Du kan også nemt finde lette, fuldt tilpassede, responsive WordPress-temaer, der er fuldt tilpasselige.
• Responsive design is king. Det er blevet utroligt almindeligt, og næsten alle UX-designere er fortrolige med det. Bootstrap, den mest populære CSS-framework, bruges mest til at designe responsive, mobile first-websteder.
• Du kan få mest muligt ud af den tilgængelige skærmplads. Responsive layouts giver dig mere kontrol og giver dig mulighed for at administrere white space mere effektivt. Som et resultat heraf vil dit design aldrig se rodet eller tomt ud.
• Det er mere overkommeligt. Som allerede nævnt kan du selv skabe et grundlæggende responsivt websted ved hjælp af kodefrie værktøjer. Alternativt kan du hyre en freelancer eller et bureau, selv hvis du har et begrænset budget. Tjek vores betroede liste over bureaukunder for at finde en pålidelig partner.
• Responsive sider kræver mindre vedligeholdelse. Selv hvis der er en ny gadget på markedet, og alle pludselig bruger den, har du med et responsivt websted intet at bekymre dig om. Det kan være, at du skal foretage nogle ændringer, men du behøver ikke at redesigne hele dit layout.
• Responsivt design betyder hurtig levering. Et layout tager simpelthen mindre tid at designe end seks, hvilket betyder, at dit nye websted kan være klar til at køre på få dage.

Nu til ulemperne ved responsivt design:

• Du skaber færre målrettede oplevelser. Du mister uundgåeligt en vis grad af personalisering, når du forsøger at tage højde for alle eksisterende enheder.
• Responsivt design kræver en masse planlægning og eksperimenter. Det er ikke en hands-off-tilgang – du skal stadig teste dit design på forskellige visningsstørrelser, før det går i luften. Afsæt noget tid til at rette uoverensstemmelser, for de vil uundgåeligt dukke op.

Responsive Design: Eksempler og brugssituationer

Anvendelsesmulighederne for responsivt design er tilsyneladende uendelige, fordi responsivt design er så alsidigt og lettilgængeligt. Alle personlige og kommercielle websteder kan drage fordel af at være responsive og fleksible, som du vil se i de eksempler, der er beskrevet her.

Dette responsive design fra Los Sundays, et tequilamærke, ser lige så fantastisk ud på pc og mobil. Designeren prioriterede smart indholdet til forskellige visningssteder og sørgede for, at typografien forblev fed, men ikke overvældende.

Den hypnotiske parallax-effekt kan kun ses – og dermed værdsættes – på større skærme. Her får brugerne en æstetisk tiltalende og samtidig hurtig og let oplevelse, når de tilgår siden fra en smartphone.

Det samme kan man sige om det næste eksempel fra Slam Jam, en online tøjbutik. Hjemmesiden forvandler sig smidigt, når man skifter til en enhed med en mindre skærm. Produkterne vises i to kolonner i stedet for fire, og menuen flyttes til bunden for at gøre søgelinjen mere tilgængelig. Karrusellen giver brugerne mulighed for at opdage nye produkter uden at skulle zoome ind og ud.

Vores næste eksempel fra Here Design beviser, at responsive sider fyldt med indhold og specielle effekter også kan indlæses med en rimelig hastighed og se godt ud på alle enheder. Selv på små skærme føles denne side lige så harmonisk, og animationerne vises uden nogen akavede forsinkelser, fejl eller uoverensstemmelser.

Fordele og ulemper ved adaptivt webdesign

Du skal ikke drage nogen konklusioner endnu – der er masser af succesfulde virksomheder, der bruger adaptivt design og trives med det.

Adaptivt design har flere fordele:

• Adaptive websteder er normalt hurtige. Indlæsningstiden er afgørende for SEO, brugeroplevelsen og konverteringsraten, og det tager mindre tid at udarbejde én smart, dedikeret sideversion. Kombiner adaptivt design med hurtig administreret hosting, og du får et lynhurtigt websted.
• Det er en skræddersyet tilgang med høj præcision. Du har fuld kontrol over layoutets udseende, fordi det er statisk. Det er dig, der bestemmer, hvilke enheder der skal målrettes. Det giver dig mulighed for at designe mere personlige oplevelser for dine brugere og tage hensyn til deres præferencer.
• Du kan integrere annoncer lettere. Det er nemmere at konfigurere annoncer, når du kender de nøjagtige størrelser og proportioner på de elementer, der omgiver dem.
• Adaptivt design er nyttigt til eftermontering af et eksisterende websted. Du kan oprette separate versioner til mobiler og tablets og lade din hovedversion af webstedet forblive uændret.
• Du kan justere individuelle skabeloner i stedet for at omkode hele webstedet eller siden. Det er mindre smertefuldt at foretage ændringer i dit design, når det består af individuelle statiske layouts, især når du skal rette et mindre problem.

Du bør også være opmærksom på ulemperne ved adaptivt design:

• Du kan ikke garantere, at dit design bliver vist som planlagt. Hvad hvis din besøgende bruger en enhed, som du ikke har taget højde for? I det tilfælde vil resultatet være mindre forudsigeligt.
• Adaptive websteder er dyrere. Du skal bruge et team af udviklere til at designe og understøtte dit websted, hvilket betyder højere oprettelsesgebyrer og driftsudgifter. I mellemtiden er den gennemsnitlige løn for webdesignere omkring 57.000 dollars, og deres lønsats kan være så høj som 114.000 dollars.
• Det er mindre populært. Du vil have svært ved at finde intuitivt læringsmateriale og opdaterede vejledninger om adaptivt design. Da responsivt design er det mest populære, fokuserer de fleste kurser i webdesign på det.
• Det er besværligt og arbejdskrævende at designe separate oplevelser. Hvert layout skal være pixelperfekt, så dine designere vil naturligvis bruge mere tid på at arbejde på og teste dem.
• Det er ikke begyndervenligt. De fleste populære visuelle webside builders giver dig værktøjer til at skabe et ensartet responsivt design, men du finder sjældent en simpel tjeneste, der giver dig mulighed for at bygge separate versioner til mobil, pc og tablet. Det skyldes, at adaptivt design kræver mere ekspertise og færdigheder.

Adaptivt Design: Eksempler og brugssituationer

Et adaptivt websted kan være et bedre valg for e-handelsvirksomheder, hvis målgrupper foretrækker at handle ved hjælp af en mobilapp. Disse virksomheder sigter mod at skabe meget målrettede oplevelser for deres målgruppe, fordi de har indsamlet nok data til at forstå deres indkøbsvaner og præferencer, og de ønsker at tilskynde til at downloade apps.

Hvis du vil se verdens mest besøgte adaptive websted, skal du bare gå til Amazon. Fra en stationær computer får du en fantastisk oplevelse. Hjemmesiden er relativt travl, men ikke overvældende, og du kan straks finde det, du leder efter.

Her er dog, hvad der sker, hvis du forsøger at ændre størrelsen på dit browservindue:

Du kan kun se en brøkdel af indholdet på skrivebordet, fordi der ikke blev taget højde for denne usædvanlige browserbredde.

Gør denne fremgangsmåde ondt på Amazon? Ikke det mindste. Salget er firedoblet i de seneste år, fordi både den mobile websideversion og appen tilbyder en meget enkel, hurtig og bekvem indkøbsoplevelse.

En så stor virksomhed som Amazon har råd til at droppe “one size fits all”-tilgangen og være lidt konservativ med sit webstedsdesign for at holde det velkendt og umiddelbart tilgængeligt for millioner af kunder verden over, herunder ældre mennesker og brugere med synsproblemer.

Hvis man ser nærmere efter, er Amazons websted også delvist responsivt – der er tilføjet eller fjernet yderligere og eksisterende elementer, afhængigt af visningsområdet.

Ryanair, et populært europæisk lavprisflyselskab, har også et adaptivt websted, der gør det nemt at bestille billige flyrejser. Dens grænseflade ser lidt konservativ, men ikke forældet ud, og den scorer 82/100 på Pingdom Speed Test Tool, hvilket er et godt resultat.

At have et noget stift websted forhindrer ikke luftfartsselskabet i at slå trafikrekorder gang på gang, fordi de fleste rejsende foretrækker at bestille deres flyrejser fra en stationær enhed eller ved hjælp af Ryanairs mobilapp.

Hvis man foretager for mange ændringer på dette websted, vil det betyde, at man forvirrer brugere, der allerede er vant til det nuværende udseende. I stedet for at skifte til en mere trendy, responsiv version vælger Ryanair bevidst at lade sit webstedsdesign forblive intakt og i stedet fokusere på at holde billetpriserne så lave som muligt.

Sådan vælger du mellem responsivt vs. adaptivt design

Bare fordi den ene tilgang er mere allestedsnærværende end den anden, betyder det ikke, at du er nødt til at indføre den. Du må ikke miste hovedmålet – dit hovedmål er at gøre dit websted intuitivt, tilgængeligt, indbydende og visuelt sammenhængende. For at gøre dette skal du anlægge en holistisk tilgang og anvende bedste praksis inden for webdesign.

Følg disse trin for at finde ud af, hvilken designstrategi der vil fungere bedst for dig:

1. Overvej først din målgruppe og deres behov. Husk på, at en brugers hensigt ikke er baseret på den enhed, de bruger. Udfør brugerundersøgelser for at finde ud af, hvordan virkelige brugere interagerer med din grænseflade. Giver det mening for dig at optimere designet til specifikke enheder?
2. Fokuser på din specifikke brugssituation. Hvis du f.eks. sælger moderne kunsttryk, bør du fokusere på at skabe ulastelige desktop-oplevelser for dine brugere, da de gerne vil se på trykkene på en stor skærm, før de køber noget.
3. Gå ikke for vidt med en mobile first tilgang. Det er let at forenkle mobillayouts for meget i et forsøg på at fjerne alle mulige gnidninger fra din brugerrejse og anvende den samme logik på en desktopversion. Men et almindeligt design med en enkelt kolonne og en hamburgermenu vil sandsynligvis se for kedeligt ud på en desktopskærm.
4. Vurder dine ressourcer og begrænsninger. Før du overhovedet overvejer at investere i adaptive layouts, skal du finde ud af dit budget, dine nuværende behov og dine langsigtede mål. Er det afgørende for dit brand at have et topmoderne websted, der vil se fantastisk ud selv på et ultrastort smart-tv? Eller har du bare brug for en pålidelig arbejdshest til at sælge produkter til dit eksisterende publikum – et publikum, som vil købe fra dig uanset hvad?
5. Gør din indlæsningshastighed til en prioritet. Kommercielle websteder kan have eller ikke have udsmykninger, men de skal indlæses hurtigt for at undgå en stigning i bounce raten. Mere end halvdelen af brugerne vil forlade et websted, hvis det tager mere end seks sekunder at indlæse det.
6. Udfør konkurrentanalyser. Chancerne er, at dine vigtigste konkurrenter allerede har gennemført brugerundersøgelser og har regnet det hele ud. Du skal ikke bare kopiere deres tilgang; prøv i stedet at analysere, hvilke brugersegmenter de henvender sig til og hvorfor.

Responsivt design er ikke længere en trend – det er efterhånden ved at blive en gylden standard for webdesign, og dets få ulemper er snart fortid.

Webflow, en visuel webside builder, gør f.eks. responsive sider op til 10 gange hurtigere ved automatisk at optimere uploadede billeder, hvilket løser et af de største problemer med responsive websites: deres indlæsningshastighed.

Det er muligt at bruge det bedste fra begge verdener – at kombinere responsive og adaptive strategier for at imødekomme forskellige søgeadfærdsmønstre. I den forbindelse kan adaptive layouts have media queries, mens responsive websites kan indeholde adaptive elementer. Man kan roligt sige, at dilemmaet responsive vs. adaptive ikke længere er så relevant – et ideelt webstedsdesign er en dygtig blanding af de to.

Sådan kan du se, om et websted er responsivt eller adaptivt

Tjek først, hvad der sker, når du ændrer størrelsen på dit browservindue fra en stationær computer. Et responsivt websted tilpasser sig problemfrit til størrelsen af dit visningsvindue – du vil straks bemærke, hvor fleksibelt det er.

Et adaptivt websted ændrer sig ikke, før du når et bestemt brydningspunkt eller skifter til en anden enhed. Indtil da vil noget af indholdet være skjult i stedet for at blive tilpasset i størrelse, og du skal trække i den vandrette rullebjælke for at se det.

Alternativt kan du kigge efter media queries i hjemmesidens kildekode ved at klikke på CTRL + U på Windows eller Option + Command + U på Mac. Du kan også højreklikke på siden og vælge “Vis sidekilde” fra rullemenuen.

En nem måde at se, hvordan et websted opfører sig på forskellige skærme, er ved at simulere mobile enheder med Google Chrome Device Mode. Åbn det websted, du vil teste, og tryk på CTRL + Shift + I på Windows eller Command + Option + I på Mac for at åbne udviklingsværktøjerne.

Opsummering

Du har måske hørt, at søgemaskinerne prioriterer responsive sites, bare fordi de er responsive. Det er ikke helt sandt. Et adaptivt websted kan være lige så SEO-venligt som et responsivt. Google siger ganske vist, at de foretrækker mobilvenlige websteder, der giver en positiv brugeroplevelse, men de begrænser dig ikke til kun én måde at opnå dette på.

Der er mange metoder til at få dit websted til at fungere upåklageligt på mobilen. Du kan f.eks. prøve WordPress mobile plugins – du behøver ikke engang at være koder for at bruge nogle af dem. Hvis du har udviklerfærdigheder, skal du sørge for at bruge vores WordPress scenemiljøer til at teste dine ændringer på dit website på en stressfri måde, før de går live.

Der findes mobilplugins, der kan forvandle dit WordPress-websted til en app, hvilket er en fantastisk måde at levere en skræddersyet oplevelse på uden at bruge en formue på et helt nyt adaptivt websted. Hvis du allerede har mobile websteder, kan du drastisk forbedre deres udseende og brugervenlighed med plugins som WP Mobile Menu.

Uanset hvilken tilgang du vælger, skal du huske, at design på tværs af platforme kræver, at du skaber lynhurtige oplevelser for dine brugere, uanset hvornår eller hvordan de får adgang til din ressource. At vælge den rigtige hosting er halvdelen af slaget – det kan gøre dit websted hurtigere og mere sikkert som standard, og du behøver ikke at bekymre dig om uplanlagte nedetider eller lav båndbredde.

Jeremy Holcombe Kinsta

Indholds- og marketingredaktør hos Kinsta, WordPress webudvikler og indholdsforfatter. Ud over alt WordPress nyder jeg stranden, golf og film. Jeg har også problemer med høje mennesker ;).

• LinkedIn