Hvad er responsivt design og hvorfor er det vigtigt?

OBS: Vi har lavet et helt nyt indlæg omkring dette. Der er rigtigt mange ting i følgende blogindlæg, som stadig gør sig gældende, men tingene online kan hurtigt blive outdated. Hvis du vil have en mere 2019–sikret-version omkring responsivt design, så læs med her: Derfor er responsivt design vigtigere end nogensinde før

Hvad er responsivt design, og hvorfor er det vigtigt?

Mobiltelefoner og responsivt design bliver mere og mere udbredt. Spørgsmålet er, om du kan udvikle et website eller grafik til en mobiltelefon eller en tablet på samme måde, som til en stationær computer med en 25″ skærm, der kører med en skærmopløsning på 1920×1080? Jeg vil prøve at besvare alle de ofte stillede spørgsmål til responsivt design i denne artikel.

Responsivt design er et andet ord for en brugerflade, der kan tilpasse sig. Hvad vil det sige? At den hjemmeside du sidder og kigger på nu, kan tilpasse sig. Mange websites er i dag responsive. I hvert fald websites, som vil konkurrere på det højeste niveau.
Det kan være svært at forstå de mange termer, som bliver slynget omkring, hvis du ikke selv er webudvikler eller designer. Derfor vil jeg prøve at skrive artiklen på et niveau, hvor alle kan være med.

Nøgleord:

• Skærmopløsning – det er et udtryk for en skærms skarphed. Det er Bredde ganget med Højde på din skærm i pixels. Pixels er de meget små firkanter, som du kan se på din skærm, hvis du kigger nøje efter. Min skærmopløsning er 1920×1080. Det betyder, at jeg har en skærm, der er 1920 pixels i bredden og 1080 pixels i højden.
• Responsivt design – skalérbart design til webudvikling, som er vigtig, når du udvikler til mobilenheder.
• Webbrowser/browser – vinduet hvor du åbner dine websites.
• Mobil-optimeret – at en hjemmeside er lavet efter udviklerprincippet “Mobile-first”.

Det vil sige, at du begynder med at udvikle websitet til mobiltelefonen, før du udvikler websitet til andre enheder med en større skærmopløsning.

Hvad er responsivt design?

Jeg har været med til at udvikle en hjemmeside i forbindelse med et projekr. På min skærm, vil den se således ud:

Min skærm kører i en rimelig høj opløsning. Det betyder, at jeg får alle de informationer, der findes på forsiden i læsevenlig størrelse, ligeså snart jeg åbner websitet. Men hvad sker der, når indholdet bliver vist på mindre skærme? Hvordan kan en mobiltelefon have den samme mængde information på forsiden, uden at det bliver for småt? – og så kan du ikke læse det alligevel.

Det er her responsivt design kommer ind i billedet.

Den bedste måde, som jeg kan vise det på, er vha. en række billeder, som jeg viser herunder. Billederne viser, hvad der sker, når jeg gør mit browservindue mindre og mindre. Jeg vil vise, hvordan responsivt design konstant tilpasser sig websitet, så det passer til størrelsen på mit browservindue. Du skal ikke tænke på baggrunden, men på det der sker, når jeg ændrer størrelsen på vinduet.

Her starter vi – med opløsning 1920×1080.

Her sker ikke den store ændring, udover at vinduet bliver mindre og det responsive design fortæller hjemmesiden, at den skal holde de vigtige elementer centreret i vundet, og footeren skal man nu scrolle ned for at se.

Her begynder der at ske ændringer. Baggrunden, der forestiller træ, bliver mindre. Det responsive design fortæller hjemmesiden, at baggrunden ikke er relevant, og at den skal fokusere på de vigtige elementer i stedet for.

Så, nu kom den store ændring, hvor størrelsen af min browser, ender med at lige de samme opløsninger, som en mobilenhed kører med. Nu ser websitet en del anderledes ud, med menuen slået ud. (den er ikke slået ud, på billedet under, hvor jeg viser hvordan designet ser ud på en mobilenhed)

Sådan ser det ud på min mobiltelefon (LG G2 Mini). Uanset, hvilket mobiltelefon du ser websitet på, vil udseendet komme til at ligne det på billedet.

Hvis jeg scroller ned på min mobil, kan jeg stadigvæk se alle de elementer, der er på websitet med den høje skærmopløsning. hjemmesiden. Vigtigst af alt, så kan vi beholde telefonnummeret, der hvor folk kommer ind. Intention er, at de skal ringe og bestille bord, så forhåbentlig er telefonnummeret noget af det første de ser..

Men hvorfor er responsivt design så vigtigt?

Danskerne går mere og mere på nettet via deres mobiltelefon. 63% af alle mennesker mellem 16 og 74 går på internettet via mobiltelefonen. I 2008 var dette tal blot 9%. Der er ingen tegn på, at dette tal bliver mindre. Derfor er det ekstremt vigtigt, at når en potentiel kunde kommer ind på din hjemmeside, at vedkommende ikke bliver forvirret. Derudover er der en mulighed for, at kunden forlader din hjemmeside eller webshop og handler hos konkurrenten, hvis personen skal zoome ind og ud for at finde de elementer, som vedkommende skal bruge.

Google anbefaler også, at websites bliver bygget med responsivt design, fordi de bl.a. er nemmere at indeksere og er mere brugervenlige.

Læs mere her: Dansk Statistik

Tendensen til at anvende sin mobil til bl.a. shopping på internettet er blevet så stor, at webudviklere helst vil starte med at lave et mobilsite. Derefter skalerer de det op, så det passer til skærmopløsningen på en PC.
Selv hvis du har en webshop og tænker “Ingen køber fra mobil” – så betyder det ikke, at de ikke kigger rundt på din hjemmeside, og så derefter går på den stationære PC og køber dit produkt.

Kort sagt, responsivt design er…

Et design, som gør dit website skalerbart og effektivt, uanset hvilken enhed du bruger til at se websitet på. Der er mange forskellige skærmopløsninger, som din hjemmeside skal ses i. Hvis du vil minimere bounce-raten, så bliver du nødt til at optimere dit website i forhold til den enhed din kunde ser dit website på.

• Fleksibel og skalerbar brugerflade.
• De nye webtrends dikterer, at mobil-optimerede sites er nødvendige, for at være helt med på toppen.
• En måde hvorpå, du kan sikre dig, at din Call-To-Action altid er lige der, hvor den skal være.