Responsive og adaptive webdesign er begge metoder for å lage multi-device-vennlige nettsteder som fungerer bra på en rekke skjermstørrelser. Mens responsiv webdesign er anbefalt av Google og er den mer populære av de to tilnærmingene, har begge disse metodene for multi-device webdesign deres sterke og svake sider.
La oss se på forskjellene mellom responsivt og adaptivt webdesign, spesielt med fokus på disse hovedområdene:
- Enkel utvikling
- Nivået på kontroll du har over designet
- Bredde på enhet / skjermstøtte
- Hvordan fremtidig vennlig løsningen er
- Samlet nedlastingshastighet og ytelse på nettstedet
Noen Definisjoner
Før vi går inn i våre side-by-side sammenligninger av responsivt og adaptivt webdesign, la oss ta et øyeblikk for å se på en høydefinisjonsdefinisjon av disse to tilnærmingene.
Responsive nettsteder har en fluid layout som endres og tilpasses uansett hvilken skjermstørrelse som brukes. Medieforespørsler tillater reagerte nettsteder å endres, selv om flyet er, hvis nettleseren er endret.
Adaptiv design bruker faste størrelser basert på forhåndsbestemte bruddpunkter for å levere den mest hensiktsmessige layoutversjonen for skjermstørrelsen som oppdages når siden først lastes.
Med de brede definisjonene på plass, la oss vende oss til våre sentrale fokusområder.
Lett utvikling
Den mest signifikante forskjellen mellom responsivt og adaptivt webdesign er slik at disse løsningene blir brukt på et nettsted. Fordi lydhør design skaper en helt flytende layout, brukes den best til prosjekter der du redesigner siden fra grunnen opp. Forsøk på å ombygge et eksisterende nettsted. Koden for å bli lydhør er ofte en grusom affære fordi du rett og slett ikke har kontrollnivået du ville ha hvis du utviklet den koden fra bunnen av og tatt hensyn til responsivt design for de tidligste stadiene av den prosessen. Dette betyr at når du ettermonterer et nettsted for å være lydhør, er du tvunget til å gjøre kompromisser for å forbli innenfor den eksisterende kodebase.
Hvis du jobber med et eksisterende nettsted med fast bredde, betyr det at du kan forlate størrelsen som nettstedet ble designet for intakt og legge til flere adaptive bruddpunkter etter behov. I enkelte tilfeller, hvis et prosjekts budsjett er lite, og hvis det bare vil ta imot et lite antall utviklingsarbeid, kan du velge å bare legge til nye, adaptive brytepunkter for mindre skjerm / mobil-sentriske størrelser. Dette betyr at du vil tillate større skjermbilder til alle å bruke samme layout - kanskje en 960 bryterpunkt versjon som var det stedet som sannsynligvis ble opprinnelig designet for.
Oppsiden til en adaptiv tilnærming er at du bedre kan utnytte et eksisterende nettsteds kode, men en av ulempene er at du lager forskjellige layoutmaler for hvert bruddpunkt du velger å støtte. Dette som vil påvirke arbeidsbelastningen som kreves for å utvikle og opprettholde denne løsningen på lang sikt.
Designkontroll
En av styrkene til lydhørige nettsteder er at deres fluiditet gjør at de kan tilpasse og støtte alle skjermstørrelser i motsetning til bare de forhåndsdefinerte brytpunktene bestemt i en adaptiv tilnærming. Virkeligheten er imidlertid at lydhørste nettsteder kan se bra ut på visse viktige skjermstørrelser (vanligvis størrelser som tilsvarer populære enheter tilgjengelig på markedet), men det visuelle design bryter ofte ned mellom de populære resolusjonene.
For eksempel kan et nettsted se bra ut på bredskjermoppsettet på 1400 piksler, mellomskjermstørrelsen på 960 piksler, og den lille skjermen ser på 480 piksler, men hva med de mellomliggende tilstandene i disse størrelsene? Som designer har du liten eller ingen kontroll over disse mellomromene, og det visuelle utseendet til siden på disse størrelsene er ofte mindre enn ideelt.
Med et adaptivt nettsted har du mye mer designkontroll over de ulike layoutene som brukes, fordi de er faste størrelser basert på dine etablerte brytepunkt. Disse vanskelige mellomstatene er ikke lenger et problem fordi du har forsiktig utformet hver, Äúlook,Äù (som betyr hvert bruddpunkts display) som blir levert til besøkende.
Like attraktiv som dette nivået på designkontrollen kan høres, må du være oppmerksom på at den kommer til en pris. Ja, du har full kontroll over utseendet på hvert bruddpunkt, men det betyr at du må investere designtiden som kreves for å designe for hver av de unike layoutene. Jo flere bruddpunkter du velger å designe for, jo mer tid du trenger å bruke på den prosessen.
Bredde av støtte
Både responsivt og adaptivt webdesign har en ganske solid støtte, spesielt i moderne nettlesere.
Adaptive nettsteder krever enten server side komponenter eller Javascript for skjermstørrelse gjenkjenning. Åpenbart, hvis et adaptivt nettsted krever Javascript, betyr det at en nettleser trenger å ha den aktivert for at nettstedet skal kunne fungere riktig. Det kan ikke være et stort problem for deg siden de fleste vil ha Javascript i deres nettlesere, men når et nettsted har en kritisk avhengighet av noe, bør det noteres.
Responsive nettsteder og media spørringer som driver dem vil fungere godt i alle moderne nettlesere. De eneste problemene du får, er de eldste versjonene av Internet Explorer, siden versjoner 8 og under ikke støtter medieforespørsler. For å omgå dette, brukes en Javascript-polyfil ofte, noe som betyr at det også er en avhengighet av Javascript her, i hvert fall for de antikke versjonene av IE.Igjen, dette kan ikke være mye bekymring for deg, spesielt hvis nettstedanalysene dine viser at du ikke mottar mange besøkende ved hjelp av de eldre nettleserversjonene.
Fremtidig vennlighet
Den flytende naturen til lydhørige nettsteder gir dem en fordel i forhold til adaptive nettsteder når det gjelder fremtidig vennlighet. Dette skyldes at de reagerende nettstedene ikke er bygget for å imøtekomme bare et tidligere etablert sett av bruddpunkter. De tilpasser seg til passform alle skjermer , inkludert de som kanskje ikke er i markedet i dag. Dette betyr at responsive nettsteder ikke trenger å være "faste" hvis en ny skjermoppløsning plutselig blir populær.
Ser på den utrolige variasjonen i enhetens landskap (fra august 2015 var det over 24 000 forskjellige Android-enheter på markedet). Å ha et nettsted som gjør sitt beste for å imøtekomme dette brede skjermbildet, er kritisk viktig for fremtidig vennlighet. Dette skyldes at det ikke er sannsynlig at landskapet kommer til å bli mindre forskjellig i fremtiden, noe som betyr at utforming for bestemte skjermer eller størrelser vil bli umulig, hvis vi ikke allerede har nådd den virkeligheten.
På den andre siden av dette sammenligningsscenariet, hvis et nettsted er adaptivt og det ikke imøtekommer nye resolusjoner som kan bli viktige i markedet, så kan du bli tvunget til å legge til det punktet på nettstedene du har opprettet. Dette legger til design og utviklingstid på prosjekter, og det betyr at de adaptive nettstedene må overvåkes konsekvent for å sikre at det ikke er innført nye brytpunkter i markedet som må legges til på nettstedet. Igjen, med enhetens mangfoldighet som det er, å måtte konstant sjekke om nye størrelser og mulig imøtekomme dem med nye bruddpunkter, er en pågående utfordring som vil ha innvirkning på arbeidet du må for å støtte et nettsted og kostnaden for det vedlikeholdet for firmaet eller organisasjonen for hvem nettstedet er for.
Opptreden
Responsive webdesign har lenge blitt anklaget (urettferdig så i mange tilfeller) å være en dårlig løsning fra et nedlastingshastighet / ytelsesperspektiv. Dette skyldes hovedsakelig det faktum at mange webdesignere i de tidlige dagene av denne tilnærmingen bare takket søk på små skjermmedier til et nettsteds eksisterende CSS. Dette tvang bildene og ressursene som er ment for større skjermer som skal leveres til alle enheter, selv om de mindre skjermene ikke brukte dem i sine endelige layouter. Responsive design har kommet langt siden de dagene, og virkeligheten er at kvalitetsresponsive nettsteder i dag ikke lider av ytelsesproblemer.
Sakte nedlastingshastighet og oppblåste nettsteder er ikke et responsivt nettstedproblem - det er et problem som kan bli funnet på alle nettsteder. Bilder som er for tunge, mater fra sosiale medier, overdreven skript og mer og veier et nettsted ned, men både lydhør og adaptive nettsteder kan bygges for å være rask lasting. Selvfølgelig , De kan også bygges på en måte som ikke gjør opptreden en prioritet, men dette er ikke en egenskap for løsningen selv, men heller en refleksjon av teamet som var involvert i utviklingen av selve nettstedet.
Utover layout
Et av de mest overbevisende aspektene ved adaptiv webdesign er at du ikke bare har kontroll over utformingen av nettstedet for angitte breakpoints, men også ressursene som leveres for disse nettstedversjonene. Dette betyr for eksempel at retina-bilder kun kan sendes til netthinnen, mens ikke-retina-skjermer får mer passende bilder som er mindre i filstørrelsen. Andre nettstedressurser (Javascript-filer, CSS-stiler, etc.) kan bare leveres smart når de trengs og vil bli brukt.
Denne bruk av adaptiv webdesign går langt utover den enkle ligningen "Hvis du ettermonterer et nettsted, kan adaptiv være en enklere måte å bruke." Alle nettsteder, inkludert komplette redesigner, kan ha nytte av en smartere tilnærming til en mer skreddersydd opplevelse.
Dette scenariet viser den nyanserte naturen til denne "responsive versus adaptive" debatten. Selv om det er sant at en adaptiv tilnærming kan passe bedre enn å reagere på ettermontering på stedet, kan det også være en fin løsning for fullstendig redesign. På samme måte kan i noen tilfeller en responsiv tilnærming legges til på et eksisterende nettsteds kodebase, noe som gir dette nettstedet alle fordelene med en fullstendig responsiv tilnærming.
Hvilken tilnærming er bedre?
Når det gjelder responsivt mot adaptivt webdesign, er det ingen klar "vinneren", selv om lydhør er absolutt den mer populære tilnærmingen. I sannhet er "bedre" tilnærming avhengig av behovene til et bestemt prosjekt. Videre trenger dette ikke å være en "enten" eller "situasjon". Det er mange webprofessorer som bygger byggeplasser som kombinerer det beste av lydhør webdesign (væskebredder, fremtidig støtte) med styrken av adaptiv design (bedre designkontroll, smart innlasting av ressursressurser).
Denne tilnærmingen viser at det egentlig ikke er "en størrelse som passer til alle løsninger." Både responsivt webdesign og adaptiv har sine sterke og utfordringer, så du må bestemme hvilken vil fungere best for ditt spesifikke prosjekt, eller hvis en hybrid løsning faktisk passer deg best.
