Hva er forskjellen mellom responsiv og adaptiv webdesign?

Et av de hotteste problemene i webutviklerkretser i år er tilgjengeligheten til nettsteder på forskjellige andre enheter enn standard stasjonære eller bærbare skjermbilder. Selv om emnet ikke er nytt, har det tatt en relativt ny tilnærming med hensyn til hvordan man skal takle mulighetene fremover.

Med mobile enheter, nettbrett og lignende apparater som vinner bakken raskere enn de fleste klarer å følge med, er det organisatoriske interessenter som trenger å ta opp problemene som omhandler brukerinteraksjoner og aksept av nettstedene deres på de siste gizmos. Oh, og ikke glem andre enheter som skaffer seg nettaktiverte skjermer som kjøleskap, vaskemaskin, s og andre hvitevarer.

Brukere som får tilgang til nettstedene dine via sine mobile enheter eller andre skjermbilder, bryr seg virkelig ikke hvilken metode du bruker, så lenge de effektivt kan navigere på nettstedet ditt på hvilken enhet de tilfeldigvis bruker. Av den grunn er de to metodene beskrevet i denne artikkelen blitt utviklet for nettutviklere for å møte utfordringen, og mens responsive (RWD) og adaptive (AWD) designmetoder begge adresserer problemet for å gjengi nettsteder på mobile enheter, er det subtile forskjeller mellom dem som jeg vil forsøke å forklare.

RWD

Uttrykket Responsive Web Design ble myntet for flere år siden av Ethan Marcotte og ble først introdusert i A List Apart-artikkelen hans, " Responsive Web Design " og senere hans bok, A Book Apart - Responsive Web Design . Marcottes viktigste punkter for RWD er listet opp nedenfor. I mitt innlegg om emnet, " Hvordan komme i gang med Responsive Web Design ", beskrev jeg hvordan en responsiv webdesign starter med den primære oppgaven med å inkorporere CSS3, mediesøk, @media-regelen og væskegitter som bruker prosenter for å lage et fleksibelt fundament. Disse viktige punktene, så vel som bruk av EM-er, fleksible bilder, fleksible videoer og væsketype, lar det responsive nettstedet tilpasse oppsettet til visningsenheten, brukeragenten og miljøet.

Den destillerte definisjonen av et responsivt webdesign er at det flytende vil endres og svare for å passe til hvilken som helst skjerm- eller enhetsstørrelse.

AWD

Uttrykket Adaptive Web Design ble myntet av Aaron Gustafson, som skrev boken med samme tittel. Den bruker i hovedsak mange av komponentene i progressiv forbedring (PE) som en måte å definere settet med designmetoder som fokuserer på brukeren og ikke nettleseren. Ved å bruke et forhåndsdefinert sett med layoutstørrelser basert på skjermstørrelse på enheten sammen med CSS og JavaScript, tilpasser AWD-tilnærmingen seg til den detekterte enheten. Et nylig innlegg, " Forstå progressive forbedringsteknikker i webdesign ", beskrev lagene som utgjør den adaptive tilnærmingen.

De tre lagene med progressiv forbedring:

  • Innholdslag = rik semantisk HTML-markering
  • Presentasjonslag = CSS og styling
  • Skriptsjikt på klientsiden = JavaScript eller jQuery-oppførsel

I et nylig podcastintervju beskriver Aaron hvordan begrepet ble valgt; han ønsket å disambiguere sin bok fra Filament Groups bok, "Designing with Progressive Enhancement". Aaron fortsetter å nevne i podcasten:

"Så vi prøvde å tenke på, du vet, hva betyr egentlig alle disse tingene, og det handlet om å skape rike, tilpasningsdyktige opplevelser som skreddersyr seg til den spesielle enheten du jobbet med. Så, slik som Jeg ser på at progressiv forbedring er veldig mye analog med adaptiv webdesign. Det er egentlig det samme konseptet. "

Den kondenserte definisjonen av et adaptivt design er at det vil endre seg for å passe til et forhåndsbestemt sett med skjerm- og enhetsstørrelser .

Sammenligninger og distinksjoner

Den største likheten mellom de to metodene er at de begge lar nettsteder vises på mobile enheter og forskjellige skjermstørrelser, og til slutt gir besøkende en bedre mobil brukeropplevelse. Der de to metodene er forskjellige, er når det gjelder levering av de responsive / tilpasningsdyktige strukturer: RWD avhengig av fleksible og flytende nett, og AWD avhengig av forhåndsdefinerte skjermstørrelser. En av de viktigste skillene mellom de to er at RWD kan ta flere kode- og implementeringsstrategier med væskegitrene, CSS og fleksible fundamenter, mens AWD har en strømlinjeformet, lagdelt tilnærming, som bruker scripting for å hjelpe til med tilpasning til forskjellige enheter og skjerm størrelser.

Noen vil hevde at begrepene som brukes innbyr til forvirring, spesielt responsive, og kanskje ikke nøyaktig gjenspeiler hva som faktisk skjer når et nettsted endrer utformingen i henhold til den bestemte mobilenheten som brukes. Paul Gordon argumenterer for dette poenget i blogginnlegget sitt, "Adaptive or Responsive Design ."

Hvis du er interessert i å gjennomgå live eksempler på kjente nettsteder som bruker metodene beskrevet i dette stykke, kan du sjekke ut denne listen over 70 eksempler på moderne responsive nettdesign fra Splashnology Web Design and Development (både AWD og RWD er representert).

Et av nettstedene på listen inkluderer Abberdein, som bruker RWD i WordPress Whiteboard-rammeverket, og inkluderer flere funksjoner i koden, for eksempel div-kolonnebredder satt som prosent (%). Den bruker også CSS-rutenettet Less Framework, som inneholder fire oppsett og tre sett med forhåndsinnstillinger for typografi, alle basert på et enkelt rutenett.

Et eksempel på et nettsted som bruker AWD, er Screaming Frog, et markedsføringsbyrå for søkemotorer, som bruker @media-spørringen og @media-skjermegenskapene i CSS-en til å angi bruddpunkter med angitte pikselbredde, avhengig av enheten som gjenkjennes i nettleservinduet.

© Copyright 2020 | mobilegn.com