Wat is reactive web design?
Reactive web design is geen gangbare vakterm. In de praktijk bedoelt men er bijna altijd responsive webdesign mee: een website die zich automatisch aanpast aan de schermgrootte. Soms verwijst "reactive" naar reactieve programmeertechnieken, zoals die in React voorkomen, maar dat gaat over hoe code op data reageert, niet over hoe een lay-out meeschaalt. Kom je de term tegen, dan is responsive vrijwel altijd wat er bedoeld wordt. Daarmee is de belangrijkste vraag eigenlijk al beantwoord. Toch duikt de term op, in offertes, in briefings, in gesprekken met leveranciers. Dit artikel legt uit waar die verwarring vandaan komt, en wanneer "reactive" tóch ergens naar verwijst dat los staat van responsive.
Wat is reactive web design?
Er bestaat geen vastomlijnde techniek of methode die officieel reactive web design heet. Het is geen erkende vakterm zoals responsive webdesign of adaptive webdesign. Wie de term gebruikt, bedoelt meestal een website die reageert op het apparaat van de bezoeker. Dat is precies wat responsive webdesign doet.
Waarom je de term tegenkomt.
"Reactive" klinkt logisch: een website die "reageert" op het scherm waarop deze wordt bekeken. Het woord lijkt sterk op responsive en wordt daardoor regelmatig door elkaar gebruikt. Daarnaast zorgt het JavaScript-framework React voor extra verwarring. React en "reactive" lijken op elkaar, terwijl ze iets heel anders betekenen. Daardoor blijft de term rondgaan, zonder dat er een eigen ontwerptechniek achter schuilt.
Reactive, responsive of adaptive?
Van de drie termen zijn responsive en adaptive erkende ontwerpbenaderingen. Reactive web design is dat niet.
Responsive webdesign laat een website vloeiend meeschalen met ieder schermformaat. Elementen passen zich automatisch aan de beschikbare ruimte aan. Kolommen die op een desktop naast elkaar staan, worden op een smartphone onder elkaar geplaatst. Dit gebeurt met flexibele grids, schaalbare afbeeldingen en CSS media queries. Daardoor is één website geschikt voor alle schermformaten, zonder aparte mobiele versie.
Adaptive webdesign werkt anders. Hierbij worden meerdere vaste lay-outs ontworpen voor vooraf bepaalde schermgroottes, ook wel breakpoints genoemd. Afhankelijk van het apparaat wordt één van deze versies geladen. Dat kan in sommige situaties voordelen bieden, bijvoorbeeld wanneer specifieke apparaten een sterk afwijkende gebruikerservaring vragen. Daar staat tegenover dat het beheer complexer is, omdat meerdere vaste ontwerpen onderhouden moeten worden.
Reactive web design daarentegen is geen officiële ontwerpaanpak. Wanneer iemand deze term gebruikt, bedoelt die meestal responsive webdesign of, in sommige gevallen, reactive programming.
"Reactive" en de verwarring met React.
Hier ontstaat vaak het misverstand. De term reactive wordt soms gebruikt als verwijzing naar reactive programming: een programmeerparadigma waarbij de gebruikersinterface automatisch wordt bijgewerkt zodra de onderliggende data verandert. Frameworks zoals React en Vue maken veel gebruik van dit principe. Dat heeft echter niets te maken met het aanpassen van een lay-out aan verschillende schermformaten. Reactive programming gaat over het gedrag van een applicatie, terwijl responsive webdesign gaat over hoe een website zich aanpast aan verschillende apparaten.
Wat bedoelen mensen meestal met reactive web design?
In de meeste gevallen bedoelt iemand met reactive web design simpelweg een website die goed werkt op desktop, tablet en smartphone. Met andere woorden: responsive webdesign. Twijfel je over wat iemand bedoelt? Vraag dan door. Gaat het over een website die zich aanpast aan verschillende schermformaten, dan gaat het om responsive webdesign. Gaat het over een interface die automatisch reageert op veranderende data, dan gaat het over reactive programming en front-end frameworks zoals React of Vue. Dat is een technisch ontwikkelvraagstuk en geen ontwerpprincipe.
Reactive programming versus reactive web design.
Het verschil is belangrijk, juist omdat de termen zoveel op elkaar lijken. Reactive programming is een manier van software ontwikkelen waarbij de interface direct reageert op gebeurtenissen of nieuwe data. Denk aan een dashboard waarop cijfers automatisch worden bijgewerkt zodra nieuwe informatie binnenkomt, zonder dat de gebruiker de pagina hoeft te verversen.
Reactive web design bestaat als officiële term niet. Het is een benaming die meestal wordt gebruikt terwijl responsive webdesign wordt bedoeld. Het ene gaat over de techniek achter een applicatie, het andere over de manier waarop een website zich aanpast aan verschillende schermformaten.
Wat betekent dit voor jouw website?
Voor de meeste websites hoef je niet op zoek naar een aparte "reactive" aanpak. Wil je dat jouw website op elk apparaat prettig werkt, dan is responsive webdesign de juiste keuze. Wil je daarnaast een applicatie waarvan de interface realtime reageert op veranderende gegevens, dan draait het om de keuze voor de juiste front-end technologie en niet om een specifieke vorm van webdesign. Cube ontwikkelt beide: responsive websites die op elk scherm goed functioneren én maatwerkapplicaties waarvan de interface direct reageert op veranderende data.
Wil je een website die op elk scherm klopt? Laten we kennismaken.
Dit sluit mooi aan...
Wat is front-end development?
Ontdek wat front-end development inhoudt, welke taken een front-end developer heeft en welke technieken daarbij horen.
Wat is back-end development?
Wat back-end development is, uit welke onderdelen het bestaat en hoe het achter de schermen een applicatie laat werken.
Wat is responsive webdesign?
Wat responsive webdesign is, hoe het werkt en waarom het zorgt dat een website op elk scherm goed oogt en werkt.
Vragen over reactive web design? Geen probleem.
Vrijwel altijd wel. Reactive web design is geen gangbare term; men bedoelt doorgaans responsive webdesign, een site die meeschaalt met het scherm. Soms verwijst "reactive" naar reactieve programmeertechnieken zoals React, maar dat is iets anders dan responsive design.
Niet als zelfstandige techniek of methode. Er is geen erkende aanpak die "reactive web design" heet. De term ontstaat uit verwarring met responsive webdesign en met het framework React. Voor een website die zich aanpast aan het scherm gebruik je responsive design.
Reactive programming is een manier van programmeren waarbij de interface automatisch verandert zodra data verandert, zoals in React. Responsive design gaat over een lay-out die meeschaalt met de schermgrootte. Het eerste is techniek, het tweede is ontwerp; ze hebben niets met elkaar te maken.
Responsive webdesign. Daarmee past je website zich automatisch aan aan elk schermformaat, van desktop tot smartphone, zonder aparte mobiele site. Dat is de standaard voor moderne websites en bepaalt mede je vindbaarheid via mobile-first indexing.