Blogg

Blogg

Responsivt Nettdesign på nettbutikken eller hjemmesiden din

opprettet den under Trender og inspirasjon | Antall Avlesninger: 4658

Responsivt Nettdesign på nettbutikken eller hjemmesiden din
Med SmartWebs nye Design Manager har du muligheten for å øke brukervennligheten på nettbutikken eller hjemmesiden din. Design Manageren tilbyr en rekke nye responsive design, og dette blogginnlegget er en enkel guide til hvordan du tester det responsive designet ditt i de forskjellige oppløsningene som er tilknyttet de forskjellige enehtene.

Hva er responsivt design?

Først om fremst følger en ganske kort definisjon på betydningen av ”responsiv” i denne sammenhengen:
 
At en nettbutikk eller hjemmeside er responsiv vil si at den automatisk tilpasser seg den besøkendes forskjellige enheter – det kan være PC, tablet, smartphone m.m.
 
Les mer om responsivt design her

Et design til alle enheter

De fleste i dag tar det som en selvfølge at nettbutikker og hjemmesider uproblematisk kan vises på tradisjonelle datamaskiner, nettbrett og mobiltelefoner. Men det er ikke alltid helt uten forhindringer å vise en hjemmeside med fastlåste bredder og ufleksible utseender på mindre enheter og skjermer.
 
Hittil har løsningen vært å lage forskjellige design til en og samme hjemmeside: et til datamaskin, et til nettbrett og et til mobil. Men ettersom det kommer flere og flere enheter med forskjellige skjermoppløsninger er det nødvendig å kunne lage et enkelt design som automatisk tilpasser seg og fungerer på alle enheter og skjermoppløsninger. Dette blir mulig ved et responsivt design, som er utviklet til nettopp det; at innholdet tilpasser seg den størrelsen den gitte skjermen har og danner grunnlaget for en flott brukeropplevelse.
 
Les mer om handel på tvers av plattformer her
 
Hvis du justerer størrelsen på browservinduet eller hvis du besøker Smart-web.no fra mobilen eller nettbrettet ditt, vil du oppdage at den siden du er på nå rent faktisk er responsiv. Poenget ved å teste hjemmesiden din på forskjellige enheter er at du kan få et inntrykk av hvordan fremtiden for nettbutikk og hjemmesider vil se ut.

Hvilke oppløsninger kan jeg se det responsive designet mitt på?

De nye responsive designene i SmartWebs nye Design Manager kan testes på fire forskjellige oppløsninger. Forklaringen på at det kun er skjermbredden som er angitt er at responsivt design er utviklet med et utgangspunkt fra den minste skjermen (mobil). Herfra skaleres og tilpasses designet seg større til enheter med forskjellige skjæringspunkter (breakpoints). For eksempel tilpasses hjemmesidens design fra mobil versjon til nettbrett når skjermbredden er minimum 768px.
 
  • Desktop bred (f.eks. HD skjerm): min. 1280px
  • Desktop (tradisjonell skjerm): min. 960px
  • Nettbrett: min. 768px
  • Mobil: 300px - 767px

Hvordan tester jeg det responsive designet mitt på forskjellige enheter?

Når du vil teste det responsive designet på nettbutikken eller hjemmesiden din i de forskjellige oppløsningene er det flere måter å gjøre det på. Før du tester de forskjellige løsningene skal du dog sørge for at du enten har aktivert det responsive designet på din nåværende nettbutikk eller at du har nettadresse til å teste med.

Den korrekte metoden:

  1. Bruk et nettbrett eller smarttelefon
  2. Åpne browseren, for eksempel  ”Safari”
  3. Få tilgang til nettbutikken din ved å skrive inn nettadressen din (URL) i adressefeltet (for eksempel nettbutikk.no)
  4. Nå kan du navigere rundt i nettbutikken på den riktige måten med fingeren som navigasjon

Den raske metoden (men ikke så korrekt):

  1. Åpne browseren på datamaskinen din (for eksempel Internet Explorer)
  2. Få tilgang til nettbutikken din ved å skrive inn nettadressen din (URL) i adressefeltet
    (for eksempel nettbutikk.no)
  3. Prøv å gjøre ”browservinduet” ditt mindre ved å klikke med musen i en av sidene og trekk den inn mot midten av skjermen.
  4. Jo mer du trekker, desto mindre blir oppløsningen på nettbutikken din, og du vil kunne se at den tilpasser seg.
  5. Når du navigerer rundt på siden vil det ikke være på den riktige måten, siden du benytter musen.
     
Har du i forveien en nettbutikk eller hjemmeside som du overveier å gjøre responsiv med den nye Design Manageren anbefaler vi at du først undersøker og tester hvordan nettbutikken eller hjemmesiden din potensielt kommer til å se ut på de forskjellige enhetene. På den måten får du det beste utgangspunktet i forhold til å vurdere hvilke arbeidsoppgaver et skifte til responsiv design muligvis innebærer.
 
Les mer om de eksisterende kunders adgang til Design Manageren her.
 
Hvis du trenger ytterligere hjelp eller har noen spørsmål, er du velkommen til å kontakte SmartWeb her
 

Ingen kommentar(er)
Skriv kommentaren din

ALLTID GRATIS SUPPORT

Vi har mer enn 100 hjelpevideoer, en god online bruksanvisning og du har sjansen

å ringe og skrive til oss - gratis!