Responsivt design

Skrevet af:
Morten Samson
28309392ms@spotonmarkerting.dk

Nutidens webdesign

I takt med, at smartphonen er blevet et fast inventar i de fleste danske hjem, er det i dag vigtigt, at du har en responsiv hjemmeside, som kan vises på en smartphones format. Det handler altså om at udforme et hjemmesidedesign, som fungerer på alle slags enheder. I denne artikel vil SpotOns Head of Webdesign Morten Samson forklare, hvorfor et responsivt design er så vigtigt – og hvordan du kommer godt på vej til at få en responsiv hjemmeside.

– hvorfor mange gør det forkert

Inden for webdesign taler vi om at tilpasse vores design til alle typer enheder. Hjemmesider skal i dag fungere på computeren, på en tablet og på en smartphone – og de fleste webdesignere udformer derfor hjemmesider, der fungerer på alle enheder. Men i vores fokus på det responsive design, har vi i mellemtiden fuldstændig glemt forbrugeren. Mobiltelefonen er ikke den, der skal købe vores produkter eller service – det er kunden.

Hvorfor responsivt?

Vi kan se på vores kunders hjemmesider, at mere end 50% af deres besøg er fra mobilen. Det betyder, at computere ikke længere sætter standarden for designet på en hjemmeside. Mobilen er, hvis ikke vigtigere, så i hvert fald mindst lige så vigtig som desktop.

Responsivt design og mobile first er ikke nye begreber inden for webdesign. Vi kender til begreberne. Og vi ved, hvorfor det er vigtigt.

Responsivt design blev indført i 2008 med css3 og media queries, og siden da har det udviklet sig til en standard for alle nye hjemmesider. Designere tilpasser alt indhold til mobil og tablet, så indholdet giver en god brugeroplevelse uanset hvilken enhed, man besøger hjemmesiden fra.

Men det er lige præcis det, der er udfordringen – at man tilpasser til enheder og ikke til de mennesker, der bruger dem. Mange responsive hjemmesider er bygget op over den samme tankegang, at alt indhold skal være tilgængeligt på alle medier. Der oprettes en menu, der er den samme, som den brugeren møder på computeren, indholdet komprimeres i størrelse og sidebaren rykkes til bunden, så der er plads til det hele. Men det er ikke altid hensigtsmæssigt for brugeren.

Sidebarens død

Mange undersider på hjemmesider er i dag opbygget af main-content, hvor man har tekst og evt. illustrationer/billeder. Derudover har man en sidebar, hvor man fx har lidt bullets, der understøtter teksten og call-to-action fx. en kontaktformular eller en køb-knap.

Vi oplever ofte, når vi besøger mobiloptimerede hjemmesider, at sidebaren er placeret under indholdet. Det vil sige, at man flytter de elementer, der understøtter indholdet og call-to-action ned, hvor det ikke er synligt før brugeren har været igennem hele teksten.

Og her mener vi, at man bliver nødt til også at retænke indholdet til mobil og evt. tablet. Brugeren må aldrig være et sted, hvor han/hun ikke kan komme videre – enten med kontakt eller til en anden side.

Burgeren i bund

I lang tid har det været standard at sætte menuknappen, også kaldet burger-menuen, i øverste højre eller venstre hjørne. Det har også fungeret og er efterhånden blevet en feature, brugeren forventer på en moderne hjemmeside. Problemet er, at vi har glemt, at de mobiler, som vores brugere har, er blevet større og større. Både Apple, Samsung og Sony har lanceret telefoner med skærme på 4,7” og derover.

swipe-movements-opt

Illustration: Hvor langt kan en finger nå på hhv. venstre- og højrehåndet (Credits Samantha Ingram)

Hvis man som bruger skal ramme en menuknap i øvre hjørne, skal ens hånd ikke være ret feminin, før det er nødvendigt at bruge begge hænder for at nå den. Mange webdesignere glemmer, at brugerne for det meste ikke besøger en hjemmeside for at læse en masse om et produkt. De søger hurtig information. For eksempel kontakt eller pris. Den information skal derfor være lettilgængelig – og ikke kræve to hænder at komme frem til.

I stedet vil det være langt mere brugervenligt at placere menuen i bunden, så den besøgende altid kan nå den – og desuden sørge for, at den altid er synlig. Det giver lettere adgang og en bedre oplevelse for din bruger.

Den lange menu

En anden tendens, vi ofte ser i nutidens webdesign, er, at menuen på mobilen bliver struktureret fuldstændig, som den på desktop. Det vil sige med alle punkter og undermenuer. Det er ofte mange punkter, der kræver, at brugeren skal scrolle for at få alle informationer. Det optimale er at kunne se alle de vigtigste punkter på skærmen uden at skulle scrolle.

Ryd derfor op i din mobil-menu, så det kun er de vigtigste hovedpunkter, der fremgår på de mobile enheder. Men lav gerne links videre til de enkelte undersider.

Du kan evt. hjælpe dine besøgende yderligere ved at lave nogle quick-knapper til de vigtigste informationer, så de altid er synlige for brugeren.

GPS, bevægelse og fremtid

Jeg ser en fremtid, hvor vi skal blive endnu bedre til at bruge den info, vi har om den bruger, der lige nu ser vores hjemmesider. Hvor er han/hun i verden, er han/hun i bevægelse, og hvor er telefonen i forhold til deres øjne, ører, mund osv.

Hvis jeg fx vil ringe til Viggos Autoservice, så går jeg ind på hans side og finder et telefonnummer, evt på en kontaktside eller helt nede i bunden af siden. Det vil sige, at jeg skal klikke eller scrolle en del for at finde frem til den information, jeg søger. En iphone kan “se” om den er ved mit øre, så hvorfor ringer den ikke automatisk op til Viggo, hvis jeg tager den op til øret, mens jeg er på hans hjemmeside?

Hvis jeg derimod er i bilen og ikke kan finde Viggos værksted, så skulle hjemmesiden/telefonen selv kunne se, at jeg er i bevægelse og give mig vejledning. Hvis jeg bevæger mig med mere end 30 km/t er der nok en relativ stor chance for, at jeg gerne vil i kontakt med Viggo eller finde hans værksted.

Disse ting er pt ikke helt mulige, men det må komme. Indtil den tid kommer, skal vi blive bedre til at give vores brugere den information, som de leder efter hurtigere og nogle gange tage en formodning på vegne af vores brugere, så de får den service eller information, de højst sandsynligt leder efter.

Morten Samson
SpotOn Marketing

SEO analyse test din hjemmeside

Debat

Nutidens webdesign

I takt med, at smartphonen er blevet et fast inventar i de fleste danske hjem, er det i dag vigtigt, at du har en responsiv hjemmeside, som kan vises på en smartphones format. Det handler altså om at udforme et hjemmesidedesign, som fungerer på alle slags enheder. I denne artikel vil SpotOns Head of Webdesign Morten Samson forklare, hvorfor et responsivt design er så vigtigt – og hvordan du kommer godt på vej til at få en responsiv hjemmeside.


Nysgerrig efter at vide om din hjemmeside kan forbedres? test din hjemmeside

Skrevet af:
Morten Samson
28309392ms@spotonmarkerting.dk


Skal vi gøre en forskel for din forretning?

Her er Emre og Stina. De er henholdsvis Webdesigner og Head of Customer Success hos SpotOn Marketing. Og de er sammen med resten af vores hold med til at gøre en forskel for mere end 500 forretninger i hele Danmark.

Skriv dit navn og nummer nedenfor, så ringer vi til dig.

Kontakt

+45 7199 0902
info@spotonmarketing.dk

CVR: 34 47 64 89

Find vej

København
Hovedkontor
Ryesgade 106A, 4. sal
2100 København

Århus
Sommervej 23,
8210 Aarhus V

Luk
×

Skriv
Skriv dit navn og nummer nedenfor, så ringer vi til dig.

Ring

Menu