Responsief ontwerp is een relatief nieuwe term in webdesign. Het werd pas drie jaar geleden in mei 2010 geïntroduceerd, toen webontwerper Ethan Marcotte de term gebruikte in zijn artikel voor een lijst uit elkaar.
Tegenwoordig is er zelfs een minidiscussie gaande over de vraag of responsief ontwerp hier moet blijven of dat het gewoon een flits in de pan is. Alleen de tijd zal het uitwijzen, maar voor nu is het duidelijk dat responsief ontwerp ernaar streeft de gebruikerservaring zo comfortabel mogelijk te maken.
Responsive design is een webontwerpfilosofie die zich richt op het maken van sites die gebruikers een verbeterde kijkervaring bieden. Dit omvat functies zoals moeiteloos navigeren en lezen, en een minimale aanpassing van de browser, scrollen en pannen. Dit alles vindt plaats op verschillende apparaten, van desktops tot smartphones.
Omdat deze webontwerpaanpak nog in een nieuwe staat verkeert, ben je misschien niet helemaal duidelijk over wat responsief ontwerp inhoudt. Gaat het meer om het naadloos weergeven van content op meerdere platforms, of gaat het vooral om het helpen van bedrijven bij het bouwen van aantrekkelijkere sites om hun omzet te vergroten door een betere gebruikerservaring?
Mashable is al uitgegaan in een ledemaat en riep 2013 het jaar van responsief design. Hoewel dat nog moet worden gezien, zijn enkele basisaspecten van responsief ontwerp normen die nooit zullen verdwijnen. Dit zijn de belangrijkste responsieve ontwerpfeiten waarmee u vertrouwd raakt.
Het is je vergeven als je denkt dat responsief ontwerp en mobiel ontwerp hetzelfde zijn, maar dat zijn ze niet. Natuurlijk, responsief ontwerp maakt websites zodat ze allebei reageren op de grootte van een browser en zijn mobielvriendelijk, maar responsief ontwerp is echt heel webontwerp. Het probleem met het verwijzen naar deze webontwerpaanpak als mobiel ontwerp is dat het inherent beperkend is, wat een slechte dienst is voor de benadering zelf.
De meest effectieve responsieve websites kunnen worden bekeken zoals ze bedoeld zijn, in verschillende resoluties. Dit omvat alles van de gebruikelijke 1024 x 768 pixels tot de 1920 × 1080-schermen en alles daartussenin. Sites zoals deze zien er ook prachtig uit op tablets (zowel retina- als standaardbeeldschermen), maar ook op smartphones. Als een webontwerper alleen via de context van mobiel naar responsief ontwerp kijkt, mist hij mogelijk een bredere gebruikerservaring.
Tegelijkertijd is mobiel een echt opportuun startpunt voor de volledige responsieve ontwerpdiscussie. Het is de norm geweest om te beginnen met een mobiel schema en dit ontwerp vervolgens uit te breiden naar extra formaten wanneer een responsieve website wordt ontwikkeld. Veel ontwerpers geloven dat het eenvoudiger is om visuals te laten groeien in plaats van ze te minimaliseren.
Als er een regel is die webontwerpers zouden moeten volgen, is het dat de beeldkwaliteit veel belangrijker is dan het werkelijke aantal afbeeldingen. De reden is dat een afbeelding van lage kwaliteit er simpelweg niet aantrekkelijk uitziet in welke maat dan ook. De tijd die een site nodig heeft om een afbeelding te laden is bijna net zo belangrijk als de grootte. Mobiele gebruikers zullen hiermee instemmen omdat ze een beperkte bandbreedte hebben om mee te kampen.
Wat moet een webdesigner doen? Bereid eenvoudig een slimme balans tussen laadtijd en kwaliteit. Dit omvat het schalen van afbeeldingen met CSS-eigenschappen voor hoogte en breedte, besturing van het laden van afbeeldingen op volledig formaat en het optimaliseren van afbeeldingen voor internet. Voorafgaand aan het uploaden, is het ten zeerste aan te raden om alle afbeeldingen bij te snijden en elke foto op de kleinst mogelijke afmeting te bewaren, zolang deze maar een scherpe visuele kwaliteit behoudt.
Uitchecken Sony USA-website . Merk op hoe alle afbeeldingen superscherp van kwaliteit zijn, ongeacht de grootte. Zodra u de site bezoekt of de startpagina vernieuwt, noteert u ook hoe snel de afbeeldingen worden geladen. Je hoeft niet langer dan een seconde te wachten om alles scherp in beeld te krijgen.
Ontwerpers hebben veel keuzes bij het opnemen van afbeeldingen in een responsieve omgeving. Ze kunnen maar een paar afbeeldingen gebruiken; het gebruik van afbeeldingen binnen regelingen van mobiele grootte verminderen; afbeeldingen toestaan om zichzelf te maskeren in een mobiele omgeving; of gebruik verschillende bestandsgroottes en versies. Deze keuzes zullen effectief werken, hoewel sommige ontwikkelaars tegen het verbergen van afbeeldingen zijn, omdat de gebruiker de afbeeldingen nog moet laden ondanks dat ze ongezien zijn.
Type mag niet one size fits all zijn. Een lettertype dat er op je bureaublad aantrekkelijk uitziet, kan op je smartphone afschuwelijk zijn. Typografie moet dezelfde regels volgen als andere aspecten van responsief ontwerp.
Het belangrijkste aspect van responsieve typografie is de lijnlengte. Voor een goede leesbaarheid moet het type worden geoptimaliseerd op basis van de breedte van het scherm. De vuistregel voor desktopwebsites is dat tussen 50 en 75 tekens een regel ideaal is; voor mobiele apparaten is slechts tussen de 35 en 50 tekens ideaal.
Type moet ook gemakkelijk verticaal worden gelezen. Veel sites maken gebruik van een regelafstand van maximaal 140 procent van de puntgrootte van het scherm voor grotere blokken tekst. Als het scherm kleiner is, moet meer ruimte worden toegevoegd.
Zelfs het specifieke lettertype dat wordt gebruikt, is aanzienlijk. Fancy-lettertypen en nieuwe lettertypen hebben de mogelijkheid om er op grotere schermen visueel aantrekkelijk uit te zien, maar ze zijn moeilijk te lezen als de puntgrootte klein is. Dit soort lettertypen moet veel ruimte tussen hen hebben. Wanneer u met kleinere formaten werkt, is het het gemakkelijkst om normale schreefloze stijlen en zelfs lijnen te gebruiken.
Op De website van Hardboiled Web Design , je kunt zien dat veel van deze principes worden gevolgd, wat zorgt voor een goede respons. Merk op hoe de lijnlengte van tekst op een bureaublad - gemiddeld groter dan de ideale aanbeveling van 50 tot 75 tekens - bestaat uit een lettertype dat schoon en gemakkelijk te lezen is. Bovendien is de regelafstand ook groter dan de puntgrootte van het lettertype. Op mobiele apparaten presteert de site nog beter: op een iPhone 5-display was het aantal tekens per regel ongeveer 67, wat iets meer is dan de ideale regel van tussen de 35 en 50 tekens.
Als het gaat om de gebruikerservaring - een van de belangrijkste factoren waar webontwerpers aan moeten denken - staat navigatie bovenaan de prioriteitenlijst. Navigatie moet soepel en efficiënt zijn om een comfortabele gebruikerservaring te garanderen.
Effectief responsief ontwerp moet dit garanderen door extra aandacht te besteden aan de specifieke breedte van een bepaalde browser. Een site die responsief ontwerp goed gebruikt, zal de sitenavigatie in verschillende gebieden indelen, allemaal afhankelijk van de breedte van de browser. Een van de beste voorbeelden hiervan is Food Sense Sitenavigatie.
Het zou een vergissing zijn als responsief ontwerp de sitenavigatie naar grotere proporties schaalt op apparaten met grotere schermen.
Dus nu, wanneer je webontwerpers hoort praten over responsief ontwerp, weet je dat het niet alleen gaat om het maken van een website er goed uitzien en soepel draaien op kleinere, mobiele schermen. U weet dat deze ontwerpaanpak is gebaseerd op het principe dat websites van elke omvang de meest optimale ervaring bieden voor de gebruiker, ongeacht wat ze gebruiken om de site te bekijken.
Responsief ontwerp is nog steeds een relatief nieuw concept, tenminste voor de meeste mensen die alleen websites op internet bekijken. Dat is waarom zoveel mensen het nog steeds niet eens kunnen worden over wat responsief ontwerp maakt ... responsief ontwerp. Gaat het erom alles op de juiste manier te zien op mobiele schermen? Gaat het alleen om laadtijden en afbeeldingen van hoge kwaliteit die u een plezier doen? Gaat het om een strak ontwerp en gemakkelijk leesbare lettertypen?
Het is dat alles en meer. Dat zijn slechts de fundamenten van deze webontwerpaanpak, maar responsief ontwerp is nog steeds aan het evolueren en veranderen, dus de kans is groot dat er ook extra elementen worden overwogen. Uiteindelijk gaat het om het verbeteren van de gebruikerservaring, omdat niemand wil omgaan met een website die traag, wazig, moeilijk te lezen, rommelig of moeilijk te navigeren is.
Is responsief ontwerpen slechts een trend? Wat zijn de belangrijkste aspecten van responsief ontwerp? Laat ons je mening weten in de reacties.