Reagerend Ontwerp

Responsief ontwerp is een benadering voor het bouwen van webinterfaces die zich aanpassen aan de grootte en mogelijkheden van het apparaat waarop ze worden weergegeven. Hierbij worden vloeiende lay-outs, flexibele afbeeldingen en CSS-mediaqueries gebruikt om één codebase aan te passen aan verschillende schermformaten. Deze methode werd in 2010 geïntroduceerd door Ethan Marcotte en verving de eerdere aanpak waarbij aparte websites voor desktop en mobiel werden onderhouden. Tegenwoordig is het de standaard voor vrijwel alle webontwikkeling.

Het belangrijkste voordeel is dat er slechts één implementatie nodig is in plaats van meerdere. Afzonderlijke mobiele websites lopen na verloop van tijd uiteen, vertonen inconsistenties, compliceren analyses en zoekmachine-indexering en verdubbelen de kosten van elke wijziging. Een responsieve implementatie houdt content, URL's en functionaliteit uniform, wat ook aansluit bij de manier waarop zoekmachines pagina's indexeren en rangschikken, aangezien mobile-first indexing de mobiele weergave van dezelfde URL evalueert.

Een veelvoorkomend misverstand is dat responsief alleen betekent dat een lay-out niet kapotgaat. Het herschikken van kolommen in een stapel bij een smal scherm is het minimum, niet het doel. Echte responsiviteit houdt rekening met de verschillende context, mogelijkheden en intenties van verschillende apparaten: aanraakgebieden die zijn aangepast aan vingers in plaats van cursors, navigatiepatronen die geschikt zijn voor kleine schermen in plaats van compacte desktopmenu's, contentprioritisering waarbij de belangrijkste informatie bovenaan staat wanneer alles verticaal is gestapeld, en formulieren die gebruikmaken van de juiste invoertypen en toetsenborden.

Prestaties zijn in de praktijk vaak het grootste probleem bij responsieve implementaties. Een lay-out die zich visueel aanpast, maar tegelijkertijd afbeeldingen op desktopformaat, volledige JavaScript-bundels en onnodige componenten downloadt, levert een pagina op die er weliswaar goed uitziet, maar slecht presteert op precies die apparaten en verbindingen die de kosten het minst aankunnen. Responsieve afbeeldingen met de juiste bronsets, het voorwaardelijk laden van componenten die niet worden weergegeven op kleine schermformaten en het uitstellen van niet-kritieke resources zorgen ervoor dat de aanpak in de praktijk werkt, in plaats van alleen in een browser die op een desktop is aangepast.

Het testen van responsieve elementen vereist echte apparaten, niet alleen het aanpassen van de browsergrootte. Emulators reproduceren niet de onnauwkeurigheid van aanraakbediening, de werkelijke netwerkcondities, de geheugenbeperkingen van hardware uit het middensegment of de manier waarop systeemtoetsenborden en browserinterfaces verticale ruimte innemen. Veel van de meest voorkomende defecten, zoals invoer die door het toetsenbord wordt geblokkeerd, elementen die vastzitten en het grootste deel van een klein scherm in beslag nemen, en horizontale overloop veroorzaakt door één breed element, zijn onzichtbaar in desktopemulatie en direct zichtbaar op een telefoon.

Bij responsief ontwerp moet ook rekening worden gehouden met tekstschaling en zoom, aspecten die vaak over het hoofd worden gezien en een veelvoorkomende oorzaak zijn van toegankelijkheidsproblemen. Een lay-out met vaste pixelafmetingen kan correct worden aangepast aan verschillende schermbreedtes, maar volledig vastlopen wanneer een gebruiker de standaard tekstgrootte van de browser vergroot of inzoomt tot 200%, een instelling die veel mensen permanent gebruiken. Inhoud die buiten de kaders valt, wordt afgesneden of horizontaal scrollen vereist onder deze omstandigheden voldoet niet aan de gebruiksvriendelijkheids- en toegankelijkheidsnormen. Testen met een grotere tekstgrootte en hoge zoomniveaus kost slechts enkele minuten en brengt een categorie defecten aan het licht die bij testen met verschillende schermbreedtes nooit aan het licht komen, omdat de lay-out onder deze twee omstandigheden op verschillende manieren wordt belast.

Omdat responsiviteit lay-out, contentstrategie en levering omvat, wordt deze zelden verbeterd door alleen de breakpoints aan te passen. productontwerp De duurzame aanpak houdt in dat de lay-out, de afstand en het gedrag van componenten in alle viewports binnen een designsystem worden gedefinieerd, zodat nieuwe pagina's standaard het juiste gedrag overnemen. De prestatiekant hoort bij... webprestaties werk, want het verschil tussen een responsieve website die converteert op mobiel en een website die dat niet doet, zit hem meestal in de bestandsgrootte en de laadstrategie, en niet in de lay-out.