Responsief en adaptief webontwerp zijn beide methoden voor het maken van gebruiksvriendelijke websites voor meerdere apparaten die goed werken op verschillende schermformaten. Hoewel responsief webontwerp wordt aanbevolen door Google en het meest populair is bij de twee benaderingen, hebben beide methoden voor webdesign met meerdere apparaten hun sterke en zwakke punten.
Laten we eens kijken naar de verschillen tussen responsief en adaptief webontwerp, met speciale aandacht voor deze belangrijke gebieden:
- Eenvoudig te ontwikkelen
- Het niveau van controle dat je hebt over het ontwerp
- Breedte van apparaat- / schermondersteuning
- Hoe toekomstvriendelijk de oplossing is
- Algemene downloadsnelheid en siteprestaties
Sommige definities
Voordat we in onze zij-aan-zij vergelijkingen van responsief en adaptief webontwerp stappen, nemen we even de tijd om naar een hoge definitie van deze twee benaderingen te kijken.
Responsieve websites hebben een vloeiende lay-out die verandert en zich aanpast, ongeacht de schermgrootte die wordt gebruikt. Met mediaquery's kunnen responsieve sites zelfs veranderen, Äúon the flyâÄù als de grootte van de browser wordt gewijzigd.
Adaptief ontwerp maakt gebruik van vaste formaten op basis van vooraf bepaalde breekpunten om de meest geschikte lay-outversie te leveren voor de schermgrootte die wordt gedetecteerd wanneer de pagina voor het eerst wordt geladen.
Met die brede definities op zijn plaats, laten we ons wenden tot onze belangrijkste aandachtsgebieden.
Gemak van ontwikkeling
Het belangrijkste verschil tussen responsief en adaptief webontwerp zit hem in de manier waarop deze oplossingen worden toegepast op een website. Omdat responsief ontwerp een volledig vloeiende lay-out creëert, kan het het beste worden gebruikt voor projecten waarbij u de site vanaf het begin opnieuw ontwerpt. Proberen om de code van een bestaande website achteraf aan te passen om responsief te worden is vaak een afmattende aangelegenheid, omdat je eenvoudigweg niet het niveau van controle hebt dat je zou hebben als je die code helemaal zelf zou ontwikkelen en rekening houdend met ontvankelijk ontwerp voor de vroegste stadia van dat proces. Dit betekent dat wanneer u een site retrofiteert om responsief te zijn, u genoodzaakt bent om compromissen te sluiten om binnen die bestaande codebase te blijven.
Als u werkt met een bestaande website met een vaste breedte, betekent een adaptieve benadering dat u de grootte van de site intact laat en indien nodig aanvullende adaptieve breekpunten toevoegt. In sommige gevallen, als het budget van een project klein is, en als het slechts een klein beetje ontwikkelingswerk toelaat, kunt u ervoor kiezen om alleen nieuwe adaptieve onderbrekingspunten toe te voegen voor kleinere scherm- / mobielcentrische grootten. Dit betekent dat u grotere schermen zou toestaan om allemaal dezelfde lay-out te gebruiken - misschien een 960-breekpuntversie waarvoor die site waarschijnlijk oorspronkelijk was bedoeld.
Het voordeel van een adaptieve aanpak is dat je de code van een bestaande site beter kunt gebruiken, maar een van de nadelen is dat je verschillende indelingssjablonen maakt voor elk onderbrekingspunt dat je wilt ondersteunen. Dit heeft een impact op de werklast die nodig is om deze oplossing op de lange termijn te ontwikkelen en te onderhouden.
Ontwerpcontrole
Een van de sterke punten van responsieve websites is dat hun vloeiendheid hen in staat stelt om alle schermformaten aan te passen en te ondersteunen, in tegenstelling tot alleen de vooraf ingestelde onderbrekingspunten bepaald in een adaptieve benadering. De realiteit is echter dat responsieve sites er geweldig uitzien op bepaalde schermgroottes (meestal maten die overeenkomen met populaire apparaten die op de markt beschikbaar zijn), maar het visuele ontwerp valt vaak uiteen tussen die populaire resoluties.
Een site kan er bijvoorbeeld fantastisch uitzien op de breedbeeldlay-out van 1400 pixels, de gemiddelde schermgrootte van 960 pixels en het kleine scherm op 480 pixels, maar hoe zit het met de tussenstaten van deze formaten? Als ontwerper heb je weinig tot geen controle over deze tussenformaten en het visuele uiterlijk van de pagina met die formaten is vaak minder dan ideaal.
Met een aangepaste website hebt u veel meer controle over de verschillende lay-outs die worden gebruikt, omdat het vaste maten zijn op basis van uw vastgestelde onderbrekingspunten. Die lastige tussentoestanden vormen geen probleem meer, omdat je elk van hen zorgvuldig hebt ontworpen, "Kijken" (wat de weergave van elk breekpunt is) die aan bezoekers wordt bezorgd.
Hoe aantrekkelijk dit ontwerpbeheersingsniveau ook klinkt, u moet zich ervan bewust zijn dat het een prijs heeft. Ja, u hebt volledige controle over het uiterlijk van elk breekpunt, maar dat betekent dat u de ontwerptijd moet investeren die nodig is om te ontwerpen voor elk van die unieke lay-outs. Hoe meer breekpunten u kiest om te ontwerpen, hoe meer tijd u nodig heeft om aan dat proces te besteden.
Breedte van de ondersteuning
Zowel responsief als adaptief webontwerp genieten van behoorlijk robuuste ondersteuning, vooral in moderne browsers.
Adaptieve websites vereisen serveronderdelen of Javascript voor detectie van schermgrootte. Het is duidelijk dat als een adaptieve site Javascript vereist, dit betekent dat een browser deze moet hebben ingeschakeld om ervoor te zorgen dat die site correct werkt. Dat is misschien niet zo belangrijk voor u omdat de meeste mensen Javascript in hun browsers hebben, maar elke keer dat een site een cruciale afhankelijkheid van iets heeft, moet er rekening mee worden gehouden.
Responsieve websites en de mediaquery's die hen van stroom voorzien werken goed in alle moderne browsers. De enige problemen die u ondervindt, zijn met de oudste versies van Internet Explorer, omdat versies 8 en lager geen mediaquery's ondersteunen. Om dit te omzeilen, wordt vaak een Javascript-polyfill gebruikt, wat betekent dat er ook een afhankelijkheid is van Javascript, althans voor die verouderde versies van IE.Nogmaals, dit is misschien niet zo belangrijk voor u, vooral als uw sitearchitectuur aantoont dat u niet veel bezoekers ontvangt met die oudere browserversies.
Toekomstige vriendelijkheid
De vloeiende aard van responsieve websites geeft hen een voordeel ten opzichte van adaptieve sites als het gaat om toekomstvriendelijkheid. Dit komt omdat die responsieve sites niet zijn gebouwd om alleen een eerder opgezette reeks onderbrekingspunten te accommoderen. Ze passen zich aan aan de pasvorm alle schermen , inclusief die welke momenteel misschien niet op de markt zijn. Dit betekent dat responsieve sites niet "vast" hoeven te zijn als een nieuwe schermresolutie plotseling populair wordt.
Kijkend naar de ongelooflijke variëteit in het apparaatlandschap (vanaf augustus 2015 waren er meer dan 24.000 verschillende Android-apparaten op de markt), is het hebben van een site die zijn best doet om dit brede scala aan schermen te accommoderen van cruciaal belang voor toekomstvriendelijkheid. Dit komt omdat dat landschap in de toekomst waarschijnlijk niet minder divers zal zijn, wat betekent dat ontwerpen voor specifieke schermen of formaten onmogelijk wordt als we die realiteit nog niet hebben bereikt.
Aan de andere kant van dit vergelijkingsscenario, als een site adaptief is en niet geschikt is voor nieuwe resoluties die belangrijk kunnen worden in de markt, dan kan je worden gedwongen om dat breekpunt toe te voegen aan de sites die je hebt gemaakt. Dit voegt ontwerp- en ontwikkeltijd toe aan projecten en het betekent dat die adaptieve sites consistent moeten worden gemonitord om er zeker van te zijn dat er geen nieuwe breekpunten op de markt zijn geïntroduceerd die op de site moeten worden toegevoegd. Nogmaals, met het feit dat de diversiteit van het apparaat is wat het is, is het voortdurend zoeken naar nieuwe formaten en mogelijk te huisvesten met nieuwe breekpunten een voortdurende uitdaging die een impact zal hebben op het werk dat u moet doen om een site te ondersteunen en de kosten van dat onderhoud voor het bedrijf of de organisatie waarvoor de site is bedoeld.
Prestatie
Responsief webdesign is al lang beschuldigd (in veel gevallen onterecht) om een slechte oplossing te zijn vanuit het oogpunt van downloadsnelheid / prestaties. Dit is grotendeels te wijten aan het feit dat veel webontwerpers in de begindagen van deze aanpak simpelweg sms-zoekopdrachten op kleine media hebben geplakt op de bestaande CSS van een site. Hierdoor moesten de afbeeldingen en bronnen die bedoeld waren voor grotere schermen, worden afgeleverd op alle apparaten, zelfs als die kleinere schermen ze niet in hun uiteindelijke lay-outs gebruikten. Responsive design heeft een lange weg afgelegd sinds die tijd en de realiteit is dat op kwaliteit reagerende sites tegenwoordig geen last hebben van prestatieproblemen.
Trage downloadsnelheden en opgeblazen websites zijn geen responsief website-probleem - het is een probleem dat op alle websites te vinden is. Te zware afbeeldingen, feeds van sociale media, buitensporige scripts en meer en wegen een site af, maar zowel responsieve als adaptieve websites kunnen worden gebouwd om snel te worden geladen. Natuurlijk , ze kunnen ook zo worden geconstrueerd dat prestaties geen prioriteit krijgen, maar dit is geen kenmerk van de oplossing zelf, maar eerder een weerspiegeling van het team dat betrokken was bij de ontwikkeling van de site zelf.
Voorbij lay-out
Een van de meest aantrekkelijke aspecten van adaptief webontwerp is dat u niet alleen controle hebt over het ontwerp van de site voor ingestelde onderbrekingspunten, maar ook over de bronnen die worden geleverd voor die siteversies. Dit betekent bijvoorbeeld dat netvliesafbeeldingen alleen naar retina-apparaten kunnen worden verzonden, terwijl niet-retina-schermen meer geschikte afbeeldingen krijgen met een kleinere bestandsgrootte. Andere bronnen van de site (Javascript-bestanden, CSS-stijlen, enz.) Kunnen alleen slim worden afgeleverd wanneer ze nodig zijn en zullen worden gebruikt.
Dit gebruik van adaptief webdesign gaat veel verder dan de simpele vergelijking van "als u achteraf een website aanbrengt, kan adaptief een gemakkelijkere benadering van gebruik zijn." Alle sites, inclusief complete herontwerpen, kunnen profiteren van een slimmere benadering van een meer op maat gemaakte ervaring.
Dit scenario toont de genuanceerde aard van dit "responsieve versus adaptieve" debat. Hoewel het waar is dat een adaptieve benadering beter geschikt is dan reageert op retrofits, kan het ook een geweldige oplossing zijn voor volledige herontwerpen. Evenzo kan in sommige gevallen een responsieve benadering worden toegevoegd aan de codebasis van een bestaande site, waardoor die site alle voordelen krijgt van een volledig responsieve benadering.
Welke aanpak is beter?
Als het gaat om responsief versus adaptief webontwerp, is er geen duidelijke 'winnaar', hoewel responsief de meest populaire benadering is. In werkelijkheid hangt de "betere" benadering af van de behoeften van een specifiek project. Bovendien hoeft dit geen "of / of" situatie te zijn. Er zijn veel webprofessionals die sites bouwen die het beste van responsieve webontwerp combineren (vloeiende breedtes, toekomstige ondersteuning) met de sterke punten van adaptief ontwerp (betere ontwerpcontrole, slim laden van site-bronnen).
Deze benadering, algemeen bekend als RESS (Responsive Web Design met componenten aan de serverkant), toont aan dat er echt geen "one size fits all oplossing" is. Zowel responsief webontwerp als adaptief hebben hun sterke punten en hun uitdagingen, dus u moet bepalen welke werkt het best voor uw specifieke project, of als een hybride oplossing misschien het best bij u past.
