Responsief webdesign is een bijna alomtegenwoordig buzzword op het web geworden. Probeer te zoeken naar #rwd op Twitter om gelijkwaardige inhoud en Twitter-spam te vinden. Dit is een gemeenschappelijke fase in het rijpen van een nieuw idee. Ik herinner me dat AJAX al de woede was; de term werd in de grond gedreven. Nu praten weinig mensen over AJAX, maar bibliotheken zoals jQuery zijn volledig omarmd in de workflow van een ontwikkelaar.
Dit lijkt te weerspiegelen wat er gebeurt met responsive webdesign. De term is overal. Een vriendin van mij is in tijdschriftuitgeverij, ze ging onlangs naar een conferentie en een redacteur voor een bekend nieuw tijdschrift sprak over aankomende trends en genoemd responsief webdesign. Redacteuren zijn misschien geen webprofessionals, maar zij kennen de modewoorden.
Naarmate ontvankelijk webdesign stoom won, veranderde de manier waarop we websites bouwen. Naarmate de term van buzzword verandert in een gemeenschappelijk deel van elk webontwerpproject, moet de manier waarop we als webprofessionals werken, veranderen. Met dit in het achterhoofd, moeten we een aantal nieuwe basisregels vaststellen voor hoe we werken.
Wanneer iemand u vertelt om "deze responsieve site te bekijken", wat is dan het eerste dat u doet? U schaalt waarschijnlijk het venster om te zien hoe de lay-out verandert. Ik ga het waarschijnlijk niet openen op mijn telefoon en tablet en begin met het wijzigen van de richting of begin met het testen van de paginasnelheid. Ik schaal de browser en ga verder met mijn dag. Dit is onze ervaring als ontwerpers en ontwikkelaars, maar niet als gebruikers. Wanneer ik als gebruiker een site bezoek, heb ik geen geduld. Het kan me niet schelen of de site mooi knijpt; Ik wil gewoon het ding dat ik wil.
"Squishy" is een lineaire schaal van een website. Verandert de site van dun naar vet? In plaats van lineaire schaalvergroting, zou responsief webontwerp zich moeten richten op het creëren van een site-kern en het progressief laden vanaf daar, op basis van capaciteiten. Stel je een site voor die moest worden gebouwd voor een kleine mobiele telefoon met IE7 op een EDGE-netwerk. Dat zou je kernsite moeten zijn en dan opschalen op basis van schermgrootte en mogelijkheden.
Responsief webontwerp is gecompliceerd. Dat is gewoon hoe het is. Ik wou dat ik je iets kon vertellen om het gemakkelijk te maken, maar dat is niet zo. De meeste mensen hebben gereageerd op responsief webdesign door iets aan hun workflows toe te voegen, of het nu een nieuw product is of gewoon naar een ontwikkelaar gaat en vragen of hun ontwerp responsief zal werken.
Ik heb een vriend die werkt aan een responsive site voor een klant. Ze bouwt de site in desktopformaat op in Photoshop. Na een paar mockups op sommige pagina's wilde ze laten zien hoe de site eruit zou zien in een tablet en een smartphone, dus deed ze die mockups ook. Na de presentatie aan de klant kreeg ze een aantal creatieve tweaks. Er zijn op dit moment ongeveer 50 PSD-bestanden voor deze site. Het kost haar een paar dagen om de lay-outs te herzien.
Alleen al het toevoegen van nieuwe ontwerpen resulteert in een tijdrovend en inconsistent proces. Een van de beste manieren om dit op te lossen, is door een prototype van uw wireframes te maken en deze aan uw klant te presenteren. Dit geeft u de mogelijkheid direct met de lay-out van de site te spreken zonder tegelijkertijd over het ontwerp te praten. Stichting door ZURB is een geweldig hulpmiddel voor het snel bouwen van prototypen.
Gewoon prototypes toevoegen aan uw workflow zal niet genoeg zijn. Om te slagen in het bouwen van responsieve sites, moet u aanpassen, wat ons naar de volgende regel brengt.
Toen ik begon met het bouwen van websites, gebruikte ik twee tools, Photoshop en GoLive. Nu heb ik ten minste zes programma's die ik absoluut nodig heb om een site te bouwen. Ik gebruik nog steeds Photoshop voor het maken van grafische elementen, maar ik ontwerp voornamelijk in de browser met Sublime Text 2 en ik gebruik Safari's ontwikkelaarstools om elementen op mijn iOS 6 te inspecteren. Ik gebruik ook Codekit om mijn voorbewerkte CSS en Terminal voor versiebeheer te compileren in Git.
Responsief webdesign betekent ook dat u de manier waarop u ontwerpt, moet veranderen. In plaats van een hele pagina in Photoshop op te maken, gebruik ik Samantha Warren's Style Tiles om visueel ontwerp te articuleren. Door het visuele merk en de interface-elementen van een site te ontwerpen buiten een daadwerkelijke lay-out, kunt u ontwerp direct communiceren en combineren met de lay-out van het prototype om uw responsieve site in de browser te maken.
CSS-preprocessors zijn ook een enorme hulp bij elke responsieve workflow. Om het simpel te zeggen, preprocessors kunnen worden gebruikt om een deel van de complicatie van het bouwen van een site te ontwarren en veel van de herhaling ervan te ontginnen om in CSS te werken. Ik geef persoonlijk de voorkeur aan SCSS, maar LESS is voor sommigen een beter alternatief omdat het een lagere toetredingsdrempel heeft en betere documentatie heeft.
[Het web] moet toegankelijk zijn vanaf elke soort hardware die verbinding met internet kan maken: stationair of mobiel, klein scherm of groot. - Tim Berners-Lee
HTML en CSS zijn inherent responsief. Vanaf het begin van HTML was het internet bedoeld om flexibel genoeg te zijn om op elke hardware met een internetverbinding te kunnen werken. Pas toen we als ontwerpers en ontwikkelaars naar vaste lay-outs gingen, veranderde dit. Bij het proberen om vaste dimensies op websites op te leggen, hebben we het internet beperkt tot desktopcomputers.
Het responsieve web is er een dat abstract is wat je te zeggen hebt over hoe je het zegt. Neem bijvoorbeeld de recente overstap van NPR naar een API-gestuurde inhoudsmodel. Door over te schakelen naar een API voor het aanbieden van inhoud, heeft NPR zijn verzameling apps en sites op een consistente manier kunnen beheren. Het enige dat verandert, is de presentatielaag.
Dit is waar het responsieve web over zou moeten gaan. Uitzoeken wat je te zeggen hebt, en laten hoe je het zegt, daar door gedreven worden. Bij design gaat het om het voldoen aan een behoefte op een visueel aantrekkelijke manier, maar ook om tegemoet te komen aan de behoeften van de gebruiker.
Dit is waar het responsive web over gaat, de gebruikers-creërende websites die werken voor de mensen die ze gebruiken, maar zij hebben toegang tot de inhoud. Het maken van sites die zichzelf kunnen refactoren voor kleine schermen is nog maar het begin.
Heb je al responsive webdesign omarmd? Welke regels voor responsief ontwerp zou u willen toevoegen? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, formaat afbeelding via Shutterstock.