Hva er responsivt design? (Forklaringsvideo og infografikk)

Responsivt webdesign

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

Hva er responsivt design?

Responsivt webdesign (RWD) er en nettdesigntilnærming som tar sikte på å lage nettsteder for å gi en optimal seeropplevelse – enkel lesing og navigering med et minimum av endring av størrelse, panorering og rulling – på tvers av et bredt spekter av enheter (fra mobiltelefoner til stasjonære datamaskiner) skjermer). Et nettsted designet med RWD tilpasser oppsettet til visningsmiljøet ved å bruke flytende, proporsjonsbaserte rutenett, fleksible bilder og CSS3-mediespørringer, en utvidelse av @media-regelen.

Wikipedia

Med andre ord, elementer som bilder kan 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. Vi har nylig reutviklet Highbridge nettstedet skal være responsivt og jobber nå med Martech Zone å gjøre det samme!

Metodikken for å bygge et responsivt nettsted er litt kjedelig ettersom du må ha et hierarki til stilene dine som er organisert basert på størrelsen på visningsporten.

Nettlesere er selvbevisste om størrelsen deres, så de laster stilarket fra topp til bunn, og spør etter gjeldende stiler for størrelsen på skjermen. Dette betyr ikke at du må designe forskjellige stilark for hver skjermstørrelse, du trenger bare å skifte de nødvendige elementene.

Å 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 som illustrerer de potensielle fordelene ved å lage én responsiv design for flere enheter:

Responsiv webdesign infografikk

Hvis du vil se et responsivt nettsted i aksjon, pek på Google Chrome nettleser (jeg tror Firefox har samme funksjon) til Highbridge. Velg nå Vis > Utvikler > Utviklerverktøy fra menyen. Dette vil laste en haug med verktøy nederst i nettleseren. Klikk på det lille mobilikonet helt til venstre på menylinjen for utviklerverktøy.

responsiv-testing-krom

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!

3 Kommentarer

  1. 1
  2. 2

    Tusen takk Douglas for denne godt forklarte artikkelen. Jeg må si meg enig i dette på innholdssiden. For de fleste nettstedene vi lager vil ikke en responsiv layout være nok. Vi trenger responsivt innhold. Men for de mer grunnleggende nettstedene vil vi garantert bruke den veldokumenterte artikkelen din om hvordan du håndterer dette!

Hva tror du?

Dette nettstedet bruker Akismet for å redusere spam. Lær hvordan kommentaren din behandles.