Ik surf dagelijks op internet, op meerdere apparaten. Ik gebruik mijn Macbook Pro, iMac, pc, iPad, iPhone en ja zelfs mijn televisie. Dus het stoort me echt als ik websites zie die niet zijn geoptimaliseerd voor grotere schermresoluties, of die twee minuten nodig hebben om op mijn mobiele apparaat te laden.
We hebben allemaal het concept van responsief ontwerp omarmd. Zeer weinig mensen debatteren ertegen. In feite is de enige overtuigende repost die ik recent heb gehoord, dat een klant niet bereid is te betalen voor de extra tijd die ermee gemoeid is. Maar zoals bij elke nieuwe praktijk, zijn er mythen opgegroeid om dit tegen te werken.
Laten we eens kijken of we een paar van die misvattingen kunnen verbergen ...
Ja, het mobiele web explodeert en ja, het is de drijvende kracht achter responsief ontwerp, maar als we denken aan responsief ontwerp moeten we meer dan alleen mobiel overwegen. Met de introductie van retina-displays en browsers van videogames bekijken internetgebruikers nu websites op een grotere schermresolutie en in veel verschillende contexten.
Probeer rekening te houden met verschillende gebruikerscontexten bij het ontwerpen en ontwikkelen van responsieve websites. U moet nadenken over welk apparaat een gebruiker gebruikt: staat de gebruiker op een mobiel apparaat of thuis voor de televisie? U moet nadenken over waar de gebruiker zich bevindt: staat de gebruiker in de rij bij de supermarkt of kampeert hij in de wildernis? Goede inhoud betekent niets als uw site tien minuten duurt om te laden terwijl uw gebruikers op het strand zitten met een margarita.
Inhoud is alles, maar context is overal en het is iets waar je absoluut geen controle over hebt. Daarom zou uw inhoud, realistisch gezien, moeten schalen naar elke resolutie, groot of klein. We beschikken over een reeks tools waarmee we lay-outs kunnen manipuleren, tekstgroottes kunnen optimaliseren en de prestaties voor elke context kunnen verbeteren, dus denk eraan om ze te gebruiken.
Onthoud dat de context voortdurend verschuift. Daarom is het zo belangrijk om de visuele lay-out, de behoeften van de gebruiker en de prestaties in balans te brengen bij het benaderen van een responsief ontwerp. Het gaat niet alleen om mobiel.
Ik argumenteerde vroeger dat responsief webdesign niet voor elk project zal werken en dat dit afhangt van de use case. Welnu, ik heb onlangs mijn mening gewijzigd en ik ben ervan overtuigd dat we, als we gebruikersgerichte ontwerpers en ontwikkelaars willen zijn, elk project moeten benaderen met een responsief ontwerp in gedachten.
Websites met een vaste breedte kunnen beperkend zijn voor grotere en kleinere schermresoluties. Het komt erop neer dat onze websites voor iedereen toegankelijk moeten zijn, ongeacht het apparaat of de schermresolutie die ze gebruiken, zonder beperkingen.
Ik heb gemerkt dat er een trend in de branche is waar ontwerpers en ontwikkelaars responsieve websites bouwen die zich schikken naar bepaalde apparaatresoluties en ik ben daar ook schuldig aan. De drie meest voorkomende apparaten zijn natuurlijk laptops / desktops, iPads en iPhones (of andere mobiele apparaten). Als ontwerpers moeten we ons realiseren dat responsief ontwerp gaat over het ontwerp van breekpunten en inhoud leesbaar en toegankelijk maken voor iedereen, niet alleen voor de gebruikers van bepaalde apparaten.
Dat gezegd hebbende, als je websites ontwerpt in een softwareprogramma, is het belangrijk om een soort van framework met breekpunten te hebben om van te werken. Ik stel voor om je eigen te maken. Optimaliseer uw lay-out volgens de inhoud. De beste manier om erachter te komen welke breekpunten het beste werken, is door eerst een paar wireframes te schetsen om een idee te krijgen. Vervolgens kunt u beginnen met het bepalen van pixels in uw software naar keuze. Zorg ervoor dat u hetzelfde rooster gebruikt bij wireframing en ontwerpen.
Als je op mij lijkt, codeer je je wireframes en maak je een live prototype. Dit heeft me veel geholpen met mijn responsieve workflow omdat ik een vloeiend mockup kan maken en breakpoints aan het ontwerp kan toevoegen als het ontwerp breekt in plaats van te proberen pixels in Photoshop te proppen.
Een van de grootste problemen die ik heb gemerkt op veel responsieve websites, is dat typografie voor de wolven wordt gegooid wanneer ontwerpers en ontwikkelaars ervoor kiezen om apparaatonderbrekingen te gebruiken over ontwerpbreekpunten. Naar mijn mening toont het kiezen van het apparaat boven het ontwerp een totale minachting voor de inhoud die wordt gepubliceerd en de gebruiker die deze inhoud gebruikt. De inhoud moet leesbaar blijven totdat deze moet worden aangepast om die leesbaarheid te behouden. Inhoud zal altijd koning blijven en de toegankelijkheid en leesbaarheid van uw inhoud moet altijd de hoogste prioriteit hebben.
Een van de manieren waarop ik graag de leesbaarheid van inhoud in een responsief ontwerp houd, is het gebruik van relatieve eenheden zoals ems voor lettergrootte, opvulling, marges en lay-out. Bij responsief ontwerp gaat het allemaal om evenredige lay-outs en volgens mij passen ems perfect.
Ems zijn relatieve eenheden die schaalbaar zijn naar de lettergrootte van bovenliggende elementen, ze kunnen u veel tijd en moeite besparen, en ze helpen u de structuur van uw gehele lay-out te behouden. Wat betekent dit dat je vraagt? Nou, het betekent dat naarmate de lettertype-omvang toeneemt of afneemt, de lay-out gelijkmatig wordt aangepast zonder dat er iets omhoog komt.
Hier is een voorbeeld, laten we zeggen dat we twee ontwerpbreekpunten hebben gevonden, één voor een zeer groot bureaubladmonitor met een superresolutie en één voor een klein tablet. Laten we ook zeggen dat onze lettertype-afmeting 16px is, wat gelijk is aan 1.0em en we botsen de basislettertypegrootte op tot 22px wanneer de site wordt bekeken met een resolutie van 3840 x 2160 (superresolutie) en we verlagen die lettertype-basisgrootte naar 14 px met een resolutie van 800 x 600 (kleine laptop / tablet). We hebben de grootte van het type en de lay-out van onze website drastisch veranderd op twee aangewezen breekpunten, één grote en één kleine. Een kop bij 1,4em met een lettertype van 22px voor grotere resoluties betekent dat 1,4em gelijk is aan 30,8 px en bij de kleinere lettertype-lettergrootte van 14px zou 1,4em 19,6px zijn. Hoewel onze lettertypegrootte bij 3840 x 2160 dramatisch groter werd, hoeven we ons geen zorgen te maken over het breken van de lay-out omdat het ook is aangepast. Laten we zeggen dat ons bevattende element een breedte van 50em had. Bij een resolutie van 800 x 600 zou dat 700px zijn maar bij de resolutie van 3840 x 2160 zou het 1100px zijn. Onze opvulling en marges zouden ook aanpassen. Bij de grotere resolutie met lettertypegroottes en opmaak in ems heeft ons ontwerp proportioneel kunnen opschalen, waardoor onze inhoud toegankelijker en leesbaarder wordt.
Het doel van responsive design is om uw inhoud toegankelijk te maken voor iedereen, zelfs voor gehandicapten, voor alle schermresoluties en apparaten. Het verbergen van inhoud is nooit een goed idee en het is waarschijnlijk dat als je het moet verbergen, je het in eerste instantie niet nodig had. Het verbergen van inhoud maakt het onleesbaar voor schermlezers en u maakt nu uw inhoud ontoegankelijk voor mensen met visuele of cognitieve beperkingen. Houd hier rekening mee, inhoud moet universeel zijn op alle apparaten, straf uw gebruikers niet door te beperken wat ze op een afzonderlijk apparaat kunnen bekijken.
Dat gezegd hebbende, vind ik nog steeds een paar use-cases waarbij display: none; komt van pas. Meestal gaan alle use-cases over een soort navigatie en gebruik ik display: none; op navigatie-elementen die van vorm veranderen op verschillende apparaten. Het is nooit een goed idee om inhoud op verschillende apparaten te beperken of te verbergen, omdat je waarschijnlijk die beslissing hebt gebaseerd op een aanname en een gebruiker ergens een zeer slechte ervaring zal hebben.
Er zijn een aantal websites die ik de laatste tijd heb gezien die een gebrek aan empathie toonden aan gebruikers met een lage bandbreedte. De meeste van deze sites hebben dezelfde dingen gemeen, grote afbeeldingen en grote JavaScript-bibliotheken en veel van deze websites zouden kunnen zijn geoptimaliseerd als ze waren ontworpen met een mobiele eerste benadering.
Omdat er nog steeds veel discussie is over responsieve afbeeldingen, is het moeilijk voor iedereen om zich aan een oplossing te binden. Ik begrijp het dilemma, maar wachten op een perfecte oplossing die standaard is in alle browsers en apparaten, maakt je huidige website niet gemakkelijker te gebruiken op apparaten met een beperkte bandbreedte. Zoek een oplossing die het beste uw probleem oplost en ermee werkt. Het niet vinden van een oplossing betekent prestatieproblemen voor iedereen, en dat verslaat volledig het doel van responsief ontwerp.
Grote JavaScript-bibliotheken kunnen ook problemen veroorzaken op kleinere apparaten. Probeer een manier te vinden om ze voorwaardelijk te bellen op basis van de schermresolutie of het type apparaat. Prestaties mogen geen bijzaak zijn als het gaat om responsief ontwerp.
Het web is ontploft en met de komst van mobiele en smartphonetechnologie hebben we overal en in elke context toegang tot inhoud. Het is belangrijk om ervoor te zorgen dat we al onze gebruikers kunnen bereiken en geven wat ze willen, wanneer ze het willen. Responsief ontwerp is een heel nieuwe techniek en naar mijn mening is het de perfecte techniek om onze inhoud op internet te verenigen.
Welke andere mythen over responsief design zou je willen ontmaskeren? Zijn er nadelen aan ontvankelijk ontwerp? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, responsieve webafbeelding via Shutterstock.