Content MarketingMarkedsføring og salgsvideoerMarkedsføringsinfografikkMobil- og nettbrettmarkedsføring

Hva er responsivt design? (Forklaringsvideo og infografikk)

Det har tatt et tiår Responsivt webdesign (RWD) å gå mainstream siden Cameron Adams introduserte først konseptet i 2010. Ideen var genial – hvorfor kan vi ikke designe nettsteder som tilpasser seg visningsporten til enheten den blir sett på?

Hva er responsivt design?

Responsivt webdesign er en designtilnærming som sikrer at en nettside gir en optimal seeropplevelse på alle enheter, uavhengig av skjermstørrelse eller oppløsning. Det innebærer å bruke fleksible oppsett, rutenettbaserte oppsett og mediespørringer for å lage et nettsted som tilpasser seg størrelsen på skjermen det vises på. Dette betyr at et nettsted designet med responsivt webdesign vil se ut og fungere godt på en stasjonær datamaskin, et nettbrett eller en smarttelefon.

Med andre ord kan elementer som bilder justeres så vel som utformingen av disse elementene. Her er en video som forklarer hva responsiv design er, samt hvorfor bedriften din bør implementere det. Hvis du får utviklet et nytt nettsteddesign eller nettapplikasjon, er responsiv webdesign et must, ikke et alternativ, gitt at over halvparten av all nettrafikk kommer fra mobile enheter som har varierende visningsportbredder og -høyder.

Responsiv design er også optimal for webdesignere, som ikke trenger å bygge uavhengige opplevelser som er unike basert på enheten eller visningsporten. Responsiv webdesign kan oppnås ved hjelp av CSS.

Responsive Design CSS Viewport Queries

Her er et eksempel på et stilark som justerer skriftstørrelsen basert på visningsporten ved hjelp av en mediespørring:

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

Nettlesere er selvbevisste om størrelsen, og de laster stilarket fra topp til bunn. Ved å spørre etter gjeldende stiler for størrelsen på skjermen, kan du angi spesifikke stilelementer for hver minste og maksimale enhetsbredde. Dette betyr ikke at du må designe forskjellige nettsteder for hver størrelse skjerm, du trenger bare å flytte elementene som er nødvendige ved å bruke mediespørringene.

Å operere med en mobil-først-mentalitet er basisstandarden i dag. Klassens beste merkevarer tenker ikke bare på om nettstedet deres er mobilvennlig, men på hele kundeopplevelsen.

Lucinda Duncalfe, administrerende direktør i Monetate

Her er en infografikk fra Monetate illustrerer de potensielle fordelene ved å lage én responsiv design for flere enheter:

Responsiv webdesign infografikk

Er nettstedet ditt responsivt?

En enkel måte å se om nettstedet ditt er responsivt, er å bare vokse eller krympe nettleservinduet for å se om elementene beveger seg basert på nettleserens bredde.

For mer presisjon, pek på Google Chrome nettleser til nettstedet ditt. Å velge Vis > Utvikler > Utviklerverktøy fra menyen. Dette vil laste en haug med verktøy i et panel eller et nytt vindu. Klikk på det lille ikonet til venstre for menylinjen for utviklerverktøy som ser ut som et mobil- og nettbrettikon. Du kan velge noen standardenheter og til og med endre om du vil se siden horisontalt eller vertikalt.

  • chrome utviklerverktøy responsivt nettbrett
  • chrome utviklerverktøy responsive mobil horisontal
  • chrome utviklerverktøy responsive mobil
  • chrome utviklerverktøy responsivt skrivebord

Du kan bruke navigasjonsalternativene øverst til å endre visningen fra liggende til stående, eller til og med velge et hvilket som helst antall forhåndsprogrammerte visningsportstørrelser. Du må kanskje laste inn siden på nytt, men det er det kuleste verktøyet i verden for å verifisere responsive innstillinger og sikre at nettstedet ditt ser bra ut på alle enheter!

Douglas Karr

Douglas Karr er CMO for Åpne INSIGHTS og grunnleggeren av Martech Zone. Douglas har hjulpet dusinvis av vellykkede MarTech-startups, har bistått med due diligence på over 5 milliarder dollar i Martech-oppkjøp og -investeringer, og fortsetter å hjelpe selskaper med å implementere og automatisere salgs- og markedsføringsstrategier. Douglas er en internasjonalt anerkjent digital transformasjons- og MarTech-ekspert og foredragsholder. Douglas er også en publisert forfatter av en Dummies guide og en bok om lederskap for bedrifter.

Relaterte artikler

Tilbake til toppen-knappen
Lukke

Annonseblokkering oppdaget

Martech Zone er i stand til å gi deg dette innholdet uten kostnad fordi vi tjener penger på nettstedet vårt gjennom annonseinntekter, tilknyttede lenker og sponsing. Vi vil sette pris på om du vil fjerne annonseblokkeringen når du ser på nettstedet vårt.