En guide til responsiv webdesign og bedste praksis

Lær mere om Responsiv webdesign, og hvordan du bruger den bedste praksis for at få mest muligt ud af det til din online forretning.


Design til responsiv webdesign

Flere mennesker gennemser nu internettet med mobile enheder end med desktops eller laptops. Cirka 51% af webstedstrafikken kommer nu fra nogen på en mobilenhed. Med et så stort antal mobilbrugere er det vigtigt, at online-virksomheder sikrer, at deres websted bruger et responsivt webdesign (RWD) og er opdateret med den nyeste RWD-praksis.

Hvad er responsivt webdesign?

Kort sagt består RWD i at designe et websted der tilpasser sig flydende til enhver skærmstørrelse – det være sig den nyeste 272 pixel brede Apple Watch eller et plasma-tv med almindelige pc’er, tablets og mobile enheder imellem.

Eksempel på responsivt webdesign

For at hjælpe med yderligere forklaring nedenfor som et passende eksempel på responsiv webdesign på Æble internet side. Nedenfor er en side ved side-sammenligning af et skrivebord og en smartphonevisning af webstedet:

RWD-sammenligning af et desktop- og smartphone-skærmbillede

Indholdet er det samme i begge visninger, men design og brugergrænsefladesign er forskellige. I smartphone-skærmvisningen er webstedets sektioner stablet for at lette lodret rulning, og navigationsmenuen er gemt væk bag et nu velkendt hamburgerikon. De klikbare links nederst på siden er også brede og høje nok til at rumme fingeraftrykbevægelser.

I kernen af ​​RWD er en dyb bekymring for webbrugeroplevelse. De fleste mennesker besøger i dag dit websted fra forskellige steder ved hjælp af et væld af forskellige enheder – desktopcomputeren på arbejdspladsen, smartphonen når de er i metroen og tabletten ved sengetid. Uanset hvilken enhed de bruger på det tidspunkt, de er på dit websted, forventer brugerne, at det bare fungerer. Brug af RWD på den rigtige måde betyder, at brugeroplevelsen på dit websted forbliver konsistent og behagelig, uanset hvilke enhedsbrugere der er på.

Brug af lydhør webdesign til det fulde potentiale

Selvom design af et websted, der ser godt ud på alle skærmstørrelser, er et godt skridt i den rigtige retning, er det vigtigt, at du ikke stopper der. For at din virksomhed fuldt ud kan udnytte RWD, skal du placere RWD i en mere omfattende strategi med forbruger med flere enheder i centrum. Det betyder:

  • Tilby ikke mobile brugere en fjernet version af dit desktopwebsted, hvor de har begrænset brug. Tip: Bliv ved med at spore mobilbrugeres handlinger på dit websted. Hvis du bemærker brugere, der lander på dit websted, men næppe forbruger dit indhold eller ikke bruger tid på det, er chancerne for, at de kommer over en eller anden form for spærring.
  • Du skal ikke tage højde for den mobile bruger på nøjagtig den samme måde som desktop-brugeren. Udnyt det fulde potentiale, en mobil enhed tilbyder. For eksempel, hvis du ejer en restaurant, skal du gøre det meget let for mobile kunder at lokalisere din virksomhed eller foretage en reservation ved at udnytte kraften fra teknologier som HTML5 Geolocation og telefonnummerindgange på din hjemmeside.
  • Vær opmærksom på sidehastighed. Ifølge undersøgelser fra Nielsen Norman Group, førende brugeroplevelseskonsulenter, 47% af besøgende forventer, at et websted indlæses på mindre end 2 sekunder, og 40% af besøgende vil forlade webstedet, hvis indlæsningsprocessen tager mere end 3 sekunder. Dette er endnu mere så når det kommer til mobile brugere, der er på farten og ofte har båndbreddebegrænsninger.
  • Vær opmærksom på ikke-spillbart indhold. Nogle teknologier som Flash-afspillere nyder ikke bred support på mobile enheder. Derfor tilrådes det, at du ikke bruger dem på dit websted og undgår at linke til dem fra dine sider. HTML5 video og lyd er bestemt en meget bedre mulighed i forhold til proprietære teknologier. Det er også en god ide at tilføje en transkription af dit videoindhold. Faktisk kan et antal brugere foretrække skriftligt indhold frem for video eller lyd, nogle hjælpeteknologier kan kun arbejde på skriftligt materiale, og Google kan bedre hente data om, hvad dit video- eller lydindhold handler om.
  • Undgå at bruge dialogbokse og pop-ups der forhindrer brugere i at se eller interagere med dit indhold. Disse er undertiden også svære at lukke på mobile enheder, hvor skærmejendomme er begrænset, hvilket skaber frustration for dine kunder.
  • Betale opmærksomhed på berøring! Hvis dit websted er afhængig af musepekhændelser for at afsløre skjult indhold, fungerer denne funktionalitet ikke på mobil. Mobile enheder fungerer ikke med en mus. I stedet interagerer brugere med indhold ved hjælp af berøringsbevægelser som at tappe og skubbe. Vælg derfor at afsløre skjult indhold ved at klikke på snarere end med at holde musepekeren. Sørg også for, at dit webdesign tegner sig for det faktum, at fingerspidserne er større end en musemarkør ved at give plads nok til at interagere med links på din side komfortabelt og glat.

Fordelene ved et RWD-sted

For én ting, Google anbefaler eksplicit RWD-fremgangsmåden til et mobilvenligt websted. Andre fordele ved RWD er:

  • En enkelt URL gør det lettere for brugerne at dele og linke til dit indhold;
  • Vedligeholdelse af et enkelt websted er mere omkostningseffektivt end vedligeholdelse af flere sider til det samme indhold;
  • Omdirigeringer til et mobilt websted påvirker sidehastighed for brugere på en mobilenhed. Omdirigering baseret på browserdetektering er også tilbøjelig til fejl, hvilket kan forringe dit websteds brugeroplevelse. Vedtagelse af RWD løser disse problemer simpelthen fordi du ved at bruge det samme websted både til desktop- og mobilvisninger ikke behøver at omdirigere brugere til et mobilspecifikt websted;
  • Med et hurtigt skiftende landskab af forskellige enheder er det næsten umuligt at oprette og opdatere flere versioner af det samme websted, der er specielt tilpasset skærmstørrelsen og funktionerne i hver.

Er dit websted lydhør? Test det!

Brug Google mobilvenlig test for hurtigt at teste, om dit websted reagerer. Bare kopiér & indsæt dit websteds URL i tekstboksen og tjek resultatet.

Konklusion

For bedre at udstyre dit websted til økosystemet med flere enheder er responsivt webdesign et must. Imidlertid er det ikke nok at installere et selvudnævnt responsivt tema for at sikre, at dit websted fungerer godt og holder dine kunder glade. Du er nødt til at inkludere RWD i din online forretningsstrategi med forbrugeren til flere enheder i dets meget kerne. Dette gør langt ved at gøre din online forretning til en favorit blandt dine kunder og Google.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me