Professionelt Hjemmeside design

Udvikling & optimering af Hjemmesider & Webshops

Responsive/mobilvenlig hjemmeside

Hvordan kan hjemmesider overhovedet følge med de millioner af skærme der findes derude i dag?

Med et internet, der i stigende grad tilgås fra mobile enheder, er det ikke længere nok at have et statisk webdesign, der kun ser godt ud på en computerskærm. For ikke at nævne, at man også skal tænke på tablets, 2-i-1 bærbare computere og forskellige smartphone-modeller med forskellige skærmdimensioner, når du kommer på et design. Så at smide dit indhold i en enkelt kolonne og kalde det færdigt, vil slet ikke være nok.

Med et responsivt design kan du sikre dig, at dit websted ser godt ud på mobiltelefoner, tablets, bærbare computere og stationære skærme. Og den forbedring af brugeroplevelsen betyder højere konverteringer og forretningsvækst.

Responsive mobilvenlig hjemmeside

Folk bruger i gennemsnit 3,3 timer om dagen på at engagere sig i digitale medier på deres smartphones. Mobil webtrafik har overhalet desktop trafik og udgør nu størstedelen af websitetrafikken. Den tegner sig for mere end 51%. På grund af dette skift i forbrugeradfærd er det ikke længere nok at have en hjemmeside, der kun fungerer fra en stationær computer.

Vi giver dig alt du behøver at vide om responsive hjemmeside design, herunder definitioner, en step-by-step gennemgang, eksempler og meget mere.

Hvad er en responsive/mobilvenlig hjemmeside?

En responsive/mobilvenlig hjemmeside justerer sig automatisk til forskellige størrelser og visningsporte.

Med et responsivt design kan man browse din hjemmeside fra enhver enhed, og det vil stadig se ud godt ud og fungere perfekt. Det består af en blanding af fleksible grids og layout, billeder og en intelligent brug af CSS-medieforespørgsler. Når brugeren skifter fra sin bærbare computer til iPad, skal webstedet automatisk ændre sig for at tage højde for opløsning, billedstørrelse og scripting-evner.

Responsive mobilvenlig hjemmeside

Hvordan responsive/mobilvenlige hjemmesider fungerer

En typisk hjemmeside består af et sæt filer (hver webside – startside, om-side osv. – er en individuel fil). Hver fil indeholder HTML-kode og indhold (tekst og billeder). Websider er stylet med filer kaldet Cascading Style Sheets (CSS). For at gøre det nemmere at forklare, så lad os sige, at en standard (ikke-responsiv) website har et sæt filer og et par CSS-filer, der styrer webstedets udseende. Et responsivt websted anvender forskellige sæt CSS-filer alt afhængigt af den enhed, der bruges til at få adgang til webstedet. Hjemmesiden ser og ‘reagerer’ forskelligt baseret på enheden som åbner den.

F.eks. mens en person som ser siden fra en stationær enhed, ser en vandret justeret navigationsmenu, får en, der ser webstedet fra en mobilenhed, en lodret justeret navigationsmenu med større tekst, der er lettere at læse på en mindre skærm.

Hvorfor responsivt webdesign er vigtigt

Der var en tid, hvor folk kun tilgik hjemmesider fra en stationær computer. Langt størstedelen havde samme størrelse skærm og websteder blev designet til den gennemsnitlige besøgende. I dag har folk adgang til hjemmesider fra en række forskellige enheder med skærme, der spænder fra et par tommer helt op til 27 ″ eller mere, og forventningerne har ændret sig. Forbrugerne forventer, at det websted de besøger, ved, at de bruger en tablet kontra en pc. De forventer, at webstedet tilpasser sig dem – og ikke omvendt.

Forskellige enheder har også forskellige forventninger med hensyn til brugervenlighed. F.eks. har Apple iPhone “trænet” folk til at forvente at kunne stryge til venstre/højre/op/ned. Folk, der besøger en hjemmeside fra en smartphone, forventer at kunne klikke på et telefonnummer og få deres telefon til at give dem mulighed for automatisk at ringe op til nummeret. På samme måde forventer de, at en adresse skal have en “klik for rutevejledning” mulighed, der bruger deres telefons GPS.

En hjemmeside, der er responsive, tager alt dette i betragtning og justerer sig automatisk for at give besøgende den bedst mulige brugeroplevelse, uanset hvilken enhed der bruges til at få adgang til hjemmesiden.

Mobilvenlig hjemmeside webshop prowebdesign.dk

Eksempler på responsive design

Nedenfor gennemgår vi 5 eksempler på responsivt webdesign fra forskellige brancher.

1. Online Avis: New York Times

På desktop minder NYT-layoutet dig om en traditionel avis, fyldt med grafik og forskellige rækker og kolonner med indhold. Der ser ud til at være en separat kolonne eller række for hver nyhedskategori.

På mobil samler den sig til en enkelt standard søjle og justerer også menuen, så den er i accordion-format, for at være nemmere at bruge.

2. Blog: The Art of Non-Conformity

Chris Guillebeaus blog “The Art of Non-Conformity” har kørt stærkt i over et årti. Mens designet ikke er det mest banebrydende, er det responsivt og tilpasser sidekolonnen til to søjler og hovedindholdet til et enkelt søjledesign på mobile enheder.

3. E-handel: Amazon

Amazon er en global leder inden for e-handel af en god grund, deres brugergrænseflade er fuldstændig flydende på tværs af alle enheder.

Deres tabletlayout fjerner simpelthen noget af den hvide plads og tilføjer en rulle sektion med ikoner for at få plads til mere indhold i en mindre pakke.

Deres mobile layout bringer det ind i en enkelt kolonne, der fokuserer de mest væsentlige ting, f.eks. den seneste købshistorik, i stedet for de forskellige sektionslinkikoner fra deres startside.

4. Video Side: YouTube

Kernen i YouTubes websteds-design er et fleksibelt gitter med videoer, der er relevante for hver bruger. På tablets nedsættes antallet af kolonner i hver række til tre. På mobil er det reduceret til et enkelt søjledesign.

Den mobile version flytter også hovedmenuen til bunden af skærmen tættere på tommelfingrene til deres smartphone-brugere. Dette enkle træk forbedrer navigationen og brugeroplevelsen.

5. Online Magasin: Wired

Wired’s tilgang til responsivt webdesign er fokuseret på implementering af et enkeltkolonnelayout på alle mindre skærm, med udgangspunkt i tablets.

Det er et simpelt layout, men gør det lettere at henlede brugernes opmærksomhed til tophistorier og deres CTA til at abonnere.

Responsive hjemmeside webshops

Hvorfor din virksomhed har brug for et responsivt/mobilvenligt webdesign i dag

De seneste undersøgelser foretaget af Google bekræfter, at ALLE virksomheder – uanset om du er en lille, mellemstor eller større virksomhed – skal have et responsivt websted, hvis de ønsker at få en konkurrencemæssig fordel nu og fastholde det senere.

Det er simpelt – bedre placeringer fører til flere besøg på din hjemmeside, hvilket resulterer i flere kundeemner og salg.

Er du interesseret i at få en ny hjemmeside?

Skriv for at få en dialog omkring jeres online projekt. Vi står klar på e-mail til at svare på alle jeres spørgsmål vedrørende vores produkter.

Vi ser frem til at høre fra dig og til at hjælpe dig med dit onlineeventyr!

15 + 7 =

error: Indholdet er beskyttet !