Responsief ontwerp: waarom u het verkeerd doet

Responsive design is geen rage die is ontstaan ​​door een coole CSS-techniek, het is een antwoord op een probleem. Onthoud dat altijd en vraag jezelf constant af of je dat probleem echt goed aanpakt. Als u kopiëren en plakken gebruikt om uw breekpunten voor mediaquery's in te voegen, is uw oplossing mogelijk gebrekkig.

Laten we bespreken waarom mediaquery's bestaan ​​en hoe we ze kunnen gebruiken om het dilemma van het alomtegenwoordige web echt op te lossen. Laten we het hebben over waarom u uw inhoud de breekpunten van een lay-out moet laten bepalen, niet hypothetische schermformaten.

Dit artikel maakt deel uit van onze serie over "verder kijken dan desktopontwerp", in samenwerking met Heart Internet VPS.

Het idee achter mediaquery's

Om dit debat correct te beginnen, is het noodzakelijk om te bespreken waarom mediaquery's ineens zo populair zijn geworden. Het antwoord is natuurlijk dat "Responsive Design", een term bedacht door Ethan Marcotte, een fantastische manier is om een ​​steeds groter wordend probleem voor webontwerpers aan te pakken.

Terwijl iedereen door en door raasde over hoe het 'mobiele web' het traditionele zou overnemen, was de revolutie die plaatsvond veel ingrijpender: het web werd alomtegenwoordig.

Dit 'probleem' is geweldig voor de wereld als geheel, maar een echte hoofdpijn voor ons. In de afgelopen tien jaar is het wereldwijde web veranderd in iets nieuws. Het is niet langer gebonden aan de muren die we eerder hadden opgericht. Ik heb dit eerder gezegd, maar het is voor herhaling vatbaar. Terwijl iedereen door en door raasde over hoe het 'mobiele web' het traditionele zou overnemen, was de revolutie die plaatsvond veel ingrijpender: het web werd alomtegenwoordig.

Op dit moment hebben we geen toegang tot internet vanaf één enkel punt. We gaven onze laptops niet op ten gunste van smartphones, zoals 'experts' voorspelden. In plaats daarvan is internet overal waar we zijn. Het zit niet alleen in onze telefoons en computers, het zit in onze tablets, iPods, spelsystemen, televisies en zelfs in auto's.

Deze trend zet zich door naarmate de tijd vordert. Responsive design brengt ons voorbij een seizoen van het creëren van afzonderlijke mobiele sites en in een tijdperk waarin we één site ontwikkelen die evolueert en zich aanpast aan het apparaat waarop het wordt bekeken. Met behulp van mediaquery's kunnen we specifieke CSS presenteren aan een aantal verschillende viewport-formaten en ervoor zorgen dat iedereen de best mogelijke ervaring heeft.

Het probleem met responsief ontwerp

Het bovenstaande gedeelte is geen semi-historische tirade die bedoeld is om ruimte te vullen, het is een belangrijke blik op de doelen die responsief ontwerp moet bereiken. De vraag wordt dan: voldoet het aan deze doelen? Pakt responsief ontwerp het probleem van de alomtegenwoordigheid adequaat aan?

Het antwoord is ingewikkeld, ik kan hoogstens zeggen: 'het hangt ervan af hoe je het doet'. Dat is een verwarrende verklaring, nietwaar? Responsief ontwerp is eenvoudig: gebruik mediaquery's om aangepaste CSS weer te geven voor verschillende viewport-formaten. Zo benadert iedereen het toch? Dus hoe kan er een goede en een verkeerde manier zijn?

De complexiteit ontstaat wanneer we een cruciaal onderdeel van deze techniek beginnen te bespreken: welke mediaquery's moet ik gebruiken? Of anders gezegd: welke 'breekpunten' moet ik targeten voor aangepaste CSS? Het huidige populaire antwoord begint voorspelbaar met de beste "mobiele" apparaten die er zijn: de iPhone en iPad (cue boze opmerkingen van Android-gebruikers). Vanuit deze archetypen maken we zogenaamde "generieke" smartphone- en tabletformaten. Vervolgens gaan we omhoog en pakken we laptops en kleine desktops en tot slot grote schermen aan. Een standaardset van mediaquery's, zoals deze van CSS-Tricks, heeft doorgaans negen of tien vooraf vastgestelde breekpunten.

Wat als we ons zouden concentreren op de behoeften van een specifiek ontwerp in plaats van op een hypothetische apparaatgebruikscasus? Wat als we lay-outs zouden bouwen die gewoon overal werkten?

Om eerlijk te zijn, werkt dit systeem tot op zekere hoogte. We hebben allemaal veel geweldige responsieve sites gezien die zijn gebouwd met een set die lijkt op die van Coyier hierboven. Ik kan echter niet anders dan denken dat dit op de een of andere manier dezelfde fout herhaalt die we hebben gemaakt door enkele jaren geleden "mobiele sites" te ontwerpen. De hele focus ligt hier op het apparaat dat de site bekijkt. Voordat we de site zelfs bouwen, hebben we deze breekpunten in gedachten.

Maar apparaten veranderen. We hebben al vastgesteld dat het internet met vrijwel alles is verbonden met een aan / uit-schakelaar, dus waarom leggen we opnieuw zoveel nadruk op de huidige gangbare schermformaten? Is er een beter alternatief? Wat als we ons zouden concentreren op de behoeften van een specifiek ontwerp in plaats van op een hypothetische apparaatgebruikscasus? Wat als we lay-outs zouden bouwen die gewoon overal werkten?

Op inhoud gericht responsief ontwerp

De bovengenoemde problemen met vooraf vastgestelde mediaquery's kwamen alleen bij me op toen ik me verdiepte en echt zelf responsief werk begon te produceren. In theorie zijn de standaardsuggesties geweldig, maar als je ze eenmaal toepast op een complex ontwerp, zul je ontdekken dat die breekpunten het niet altijd dekken. Het probleem, zoals de ontwerpers van Boston Globe al snel ontdekten toen de site live ging, is dat problemen zich 'tussendoor' voordoen (voor de goede orde, dat project is fantastisch en alle lay-outproblemen zijn grotendeels aangepakt). Dingen worden rommelig als het ontwerp een formaat heeft waar je geen rekening mee hield en je moet naar binnen gaan en de gaten achteraf repareren.

Ik zeg dit als een fervent Apple-fanboy: stop met het ontwerpen van websites voor de iPhone.

Mijn vraag is, waarom beginnen we daar niet? Waarom laten we het ontwerp niet beslissen in plaats van een project in te gaan met een reeks apparaten, en dus mediaquery's? Elke webpagina-indeling heeft een punt waarop de browsergrootte de integriteit ervan vermindert. Onze taak als ontwerpers zou, in het licht van het alomtegenwoordigheidsprobleem, moeten zijn om die grootte te vinden en er rekening mee te houden, dan te schuimen, te spoelen en te herhalen totdat alle zwakke punten zijn verantwoord.

Ik zeg dit als een fervent Apple-fanboy: stop met het ontwerpen van websites voor de iPhone. Ontwerp in plaats daarvan een website die zijn integriteit behoudt, aangezien de grootte van het kijkvenster wordt teruggebracht tot een haalbare staat. Houd specifieke apparaten in gedachten als richtlijn voor uw ontwerp (bijvoorbeeld: kleinere apparaten zijn meestal op aanraking gebaseerd, dus maak links groot), maar zet uw oogkleppen niet op en kijk niet naar het grotere geheel: dat uw ontwerp moet er op elk scherm goed uitzien.

Een nieuwe workflow

Dus hoe ziet een op inhoud gerichte responsieve ontwerpworkflow eruit? Het is eenvoudiger dan je denkt. Het is duidelijk dat je een soort startpunt nodig hebt. Als je mobiel wilt beginnen en omhoog wilt gaan, geweldig. Als je groot wilt beginnen en naar beneden wilt komen, ook geweldig. Persoonlijk vind ik het erg moeilijk om echt in een ontwerp te graven en het goed te doen als ik op mobiel niveau begin, maar er zijn veel goede argumenten om het op deze manier te doen.

Er gebeurt iets magisch als je deze workflow volgt.

Stel dat u hypothetisch bent begonnen met een grote, 1020 px brede site. Bekijk het op het grootste scherm dat je kunt vinden en zorg ervoor dat het er geweldig uitziet. Sleep nu het venster en maak het kleiner totdat het ontwerp lelijk wordt. Daar is je eerste breekpunt. Stel voor dat punt een mediaquery in en herstel alles wat u moet aanpakken. Als je klaar bent, pak je dat raam en vind je het volgende punt van lelijkheid. Herhaal deze stappen totdat u tevreden bent met het bereik dat u heeft geregistreerd.

Maar hoe zit het met de iPad? Hoe zit het met de Kindle Fire of de laatste poging van Samsung om relevant te zijn? Er gebeurt iets magisch als je deze workflow volgt. Je hebt het zojuist gemaakt dat de lay-out er op vrijwel elk formaat goed uitziet. Als je het goed hebt gedaan, ziet het er geweldig uit als je het op je telefoon of tablet trekt.

Alleen layout
Houd er rekening mee dat deze discussie alleen betrekking heeft op layoutratio's. Je komt absoluut niet uit de testfunctionaliteit op verschillende browsers en apparaten. Responsive design doet niets af aan het feit dat verschillende browser-engines HTML, CSS en JavaScript verschillend interpreteren.

Gevolgtrekking

Kortom, mediaquery's en responsive design bieden ons een ongelooflijk krachtig hulpmiddel om te verklaren dat websites worden bekeken door allerlei schermen en viewport-formaten. Zodra we echter beginnen met het koppelen van onze ontwerpen aan een handvol apparaten, zijn we weer terug bij af. Je doel zou in plaats daarvan moeten zijn om een ​​lay-out te bouwen die zo veelzijdig is dat hij bijna elke viewport-grootte aankan.

In theorie is dit allemaal leuk, maar waar is het voorbeeld? Het startpunt van deze discussie kwam van een recente poging van mij om een ​​responsieve afbeeldingengalerij te bouwen. Bekijk dat artikel voor een blik op hoe een op inhoud gerichte responsieve ontwerpworkflow er in het wild uit zou kunnen zien.