Responsive Web Design på din webshop eller hjemmeside
oprettet d. under Trends og inspiration | Antal Læsninger: 9117
Med SmartWebs nye Design Manager har du mulighed for at øge brugervenligheden på din webshop eller hjemmeside. Design Manageren tilbyder nemlig en række nye responsive designs. Dette blogindlæg er en simpel guide til, hvordan du tester dit responsive design i de forskellige opløsninger, der knytter sig til de forskellige enheder.
Først og fremmest følger her en ganske kort definition af betydningen af ”responsive” i denne sammenhæng:
At en webshop eller en hjemmeside er responsive vil sige, at den automatisk tilpasser sig den besøgendes forskellige enheder – det være sig PC, tablet, smartphone m.v.
Læs mere om responsive design her.
Hidtil har løsningen været at lave forskellige designs til samme website: ét til computer, ét til tablet og ét til mobil. Men efterhånden som der kommer flere og flere enheder med flere forskellige skærmopløsninger, er det nødvendigt at kunne lave ét enkelt design, som automatisk tilpasser sig og fungerer på alle enheder og skærmopløsninger. Dette muliggøres med et responsive design, der netop er udviklet, så indholdet tilpasser sig den givne skærm og danner grundlaget for en visuelt flot brugeroplevelse.
Læs mere om handel på tværs af platforme her.
Hvis du f.eks. går ind på www.ourlaborisjoy.dk og justerer størrelsen på browservinduet, eller hvis du besøger www.ourlaborisjoy.dk fra din mobil eller tablet, vil du opdage, at siden rent faktisk er responsive. Pointen er, at du ved at teste dit website på de forskellige enheder kan få et indtryk af, hvordan fremtiden for webshops og hjemmesider ser ud.
Tilgå din webshop ved at indtaste din webadresse (URL) i adressefeltet (f.eks. webshop.dk)
Prøv at gøre dit ”browservindue” mindre ved at klikke med musen i en af siderne og trække ind mod midten af skærmen
Jo mere du trækker, desto mindre bliver opløsningen på din webshop, og du vil kunne se, at den tilpasser sig
Når du navigerer rundt på siden, vil det ikke være på den korrekte måde, da du benytter musen
Har du i forvejen en webshop eller en hjemmeside, som du overvejer at gøre responsive med den nye Design Manager, anbefaler vi, at du først undersøger og tester, hvordan din webshop eller hjemmeside potentielt kommer til at se ud på de forskellige enheder. På den måde får du det bedste udgangspunkt i forhold til at vurdere, hvilke arbejdsopgaver et skift til responsive design muligvis indebærer.
Læs mere om eksisterende kunders adgang til Design Manageren her.
Kontakt SmartWeb her, hvis du har yderligere spørgsmål eller brug for hjælp.
Hvad er et responsive design?
Først og fremmest følger her en ganske kort definition af betydningen af ”responsive” i denne sammenhæng:At en webshop eller en hjemmeside er responsive vil sige, at den automatisk tilpasser sig den besøgendes forskellige enheder – det være sig PC, tablet, smartphone m.v.
Læs mere om responsive design her.
Ét design til alle enheder
Langt de fleste regner det i dag for en selvfølge, at webshops og hjemmesider uproblematisk lader sig vise på såvel traditionelle computerskærme som tablets og mobiltelefoner. Men det er ikke altid helt uden forhindringer at vise hjemmesider med fastlåste bredder og ufleksible layouts på mindre enheder og skærme.Hidtil har løsningen været at lave forskellige designs til samme website: ét til computer, ét til tablet og ét til mobil. Men efterhånden som der kommer flere og flere enheder med flere forskellige skærmopløsninger, er det nødvendigt at kunne lave ét enkelt design, som automatisk tilpasser sig og fungerer på alle enheder og skærmopløsninger. Dette muliggøres med et responsive design, der netop er udviklet, så indholdet tilpasser sig den givne skærm og danner grundlaget for en visuelt flot brugeroplevelse.
Læs mere om handel på tværs af platforme her.
Hvis du f.eks. går ind på www.ourlaborisjoy.dk og justerer størrelsen på browservinduet, eller hvis du besøger www.ourlaborisjoy.dk fra din mobil eller tablet, vil du opdage, at siden rent faktisk er responsive. Pointen er, at du ved at teste dit website på de forskellige enheder kan få et indtryk af, hvordan fremtiden for webshops og hjemmesider ser ud.
Hvilke opløsninger kan jeg se mit responsive design på?
De nye responsive designs i SmartWebs nye Design Manager kan testes på fire forskellige opløsninger. Forklaringen på, at kun skærmbredden er angivet, er, at et responsive design er udviklet med afsæt i den mindste skærm (mobil). Herfra skaleres og tilpasses designet større enheder ved de forskellige skæringspunkter (breakpoints). F.eks. tilpasses websitets design fra mobil-version til tablet, når skærmbredden er minimum 768px.- Desktop bred (f.eks. HD skærm): min. 1280px
- Desktop (traditionel skærm): min. 960px
- Tablet: min. 768px
- Mobil: 300px - 767px
Hvordan tester jeg mit responsive design på forskellige enheder?
Når du vil teste dit responsive design på din webshop eller hjemmeside i de forskellige opløsninger, er der flere måder at gøre det på. Før du afprøver de forskellige opløsninger, skal du dog sørge for, at du enten har aktiveret det responsive design på din nuværende webshop, eller at du har en webadresse til test.Den korrekte metode:
- Brug en tablet eller smartphone
- Åben browseren, f.eks. ”Safari”
- Tilgå din webshop ved at indtaste din webadresse (URL) i adressefeltet (f.eks. webshop.dk)
- Nu kan du navigere rundt i webshoppen på den korrekte måde med fingeren som navigation
Den hurtige metode (men knapt så korrekte):
Åbn din browser på din computer (f.eks. Internet Explorer)Tilgå din webshop ved at indtaste din webadresse (URL) i adressefeltet (f.eks. webshop.dk)
Prøv at gøre dit ”browservindue” mindre ved at klikke med musen i en af siderne og trække ind mod midten af skærmen
Jo mere du trækker, desto mindre bliver opløsningen på din webshop, og du vil kunne se, at den tilpasser sig
Når du navigerer rundt på siden, vil det ikke være på den korrekte måde, da du benytter musen
Har du i forvejen en webshop eller en hjemmeside, som du overvejer at gøre responsive med den nye Design Manager, anbefaler vi, at du først undersøger og tester, hvordan din webshop eller hjemmeside potentielt kommer til at se ud på de forskellige enheder. På den måde får du det bedste udgangspunkt i forhold til at vurdere, hvilke arbejdsopgaver et skift til responsive design muligvis indebærer.
Læs mere om eksisterende kunders adgang til Design Manageren her.
Kontakt SmartWeb her, hvis du har yderligere spørgsmål eller brug for hjælp.
Ingen kommentar(er)
Skriv din kommentar