Heeft u een "responsieve website"? Dit is een site met een lay-out die verandert op basis van het apparaat van een bezoeker en de schermgrootte. Responsief webdesign is nu een best practice voor de branche. Het wordt aanbevolen door Google en te vinden op miljoenen sites op internet. Er is echter een groot verschil tussen een website die eenvoudig "past" op verschillende schermformaten en een site heeft die echt responsief is.
Ik zie routinematig dat bedrijven hun website herontwerpen en een persbericht uitbrengen waarin de deugden van hun nieuwe mobielvriendelijke ontwerp worden geprezen. Wanneer ik die sites bezoek, vind ik vaak een lay-out die inderdaad schaalt en verandert om op verschillende schermen te passen, maar dat is voor zover ze het idee van responsiviteit aannemen. Dit is niet genoeg. Een echt responsieve website doet meer dan alleen schalen om op een kleiner of groter scherm te passen. Op deze sites vindt u ook de volgende belangrijke kenmerken.
1. Geoptimaliseerde prestaties
Niemand wacht graag op het laden van een website en wanneer iemand een mobiel apparaat gebruikt met een verbinding die misschien niet ideaal is, is de behoefte aan een site om snel te laden nog belangrijker.
Dus hoe optimaliseert u de prestaties van uw site? Als u met een nieuwe site begint als onderdeel van een herontwerp, moet u er een punt van maken om een prestatiebudget te maken als onderdeel van dat project. Als u met een bestaande site werkt en niet helemaal opnieuw begint, is de eerste stap om de prestaties van uw site te testen om te zien waar u zich vandaag bevindt.
Zodra u een baseline hebt van waar uw site prestatiegericht staat, kunt u beginnen met het maken van de nodige verbeteringen om de downloadsnelheid te verhogen. Een goede start is waarschijnlijk met de afbeeldingen van uw site. Te grote afbeeldingen zijn de grootste boosdoener als het gaat om langzaam ladende sites, dus het optimaliseren van uw afbeeldingen voor webbezorging kan uw site echt van een prestatie-oogpunt helpen.
De realiteit is dat verbeterde websiteprestaties en hoge downloadsnelheden een voordeel zijn dat alle bezoekers zullen waarderen. Niemand heeft immers ooit geklaagd dat een site 'te snel' is geladen, maar als een site te lang duurt om te laden, worden mensen echt weggestuurd, ongeacht of deze responsief op hun scherm 'past' of niet.
2. Slimme inhoudshiërarchie
Wanneer een website op een groot scherm wordt weergegeven, kunt u op verschillende manieren inhoud uitstippelen vanwege het aanzienlijke schermaanbod dat beschikbaar is. Vaak kunt u belangrijke berichten en afbeeldingen, nieuwsupdates, gebeurtenisinformatie en sitenavigatie tegelijkertijd op het scherm plaatsen. Op deze manier kan een bezoeker eenvoudig en snel de inhoud van de hele pagina scannen en bepalen wat voor hen belangrijk is.
Dit scenario verandert behoorlijk dramatisch wanneer u dat siteontwerp maakt en transformeert voor apparaten met een klein scherm, zoals een mobiele telefoon. Plots werk je met een fractie van het scherm dat je eerder had. Dit betekent dat je moet beslissen wat er als eerste op de site verschijnt, wat het zal volgen, enzovoort. In plaats van dat alles tegelijk wordt gezien, heb je waarschijnlijk alleen de ruimte om een of twee dingen te laten zien (een daarvan is waarschijnlijk navigatie). Dit betekent dat beslissingen van de hiërarchie moeten worden genomen. Helaas, wat vaak bepaalt wat eerst op het scherm komt, en vervolgens het tweede, etc. is de manier waarop de pagina zelf is gecodeerd. Het is het gemakkelijkst om bij het bouwen van een responsieve site eerst wat er eerst in de code staat op het scherm weer te geven, gevolgd door het tweede item in code, enzovoort. Helaas is wat misschien het belangrijkst is op het ene apparaat niet zo kritisch op het andere. Een echt responsieve site begrijpt dat de hiërarchie van content moet veranderen afhankelijk van verschillende situaties en dat het slim moet zijn over waar het wordt weergegeven.
Verbeteringen in CSS-lay-outtechnieken, waaronder CSS-rasterlay-out, Flexbox en meer, geven webontwerpers en ontwikkelaars meer mogelijkheden als het gaat om het intelligent neerleggen van inhoud, in plaats van te worden gehinderd door de exacte volgorde van inhoudgebieden in de HTML-code. Het gebruik van deze nieuwe lay-outtechnieken zal nog belangrijker worden naarmate het landschap van het apparaat en de behoeften van de gebruikers van onze site verder evolueren.
3. Ervaringen die rekening houden met de sterke en zwakke punten van een apparaat
Over het onderwerp apparaten blijven: elk apparaat dat iemand kan gebruiken om uw site te bezoeken, heeft zowel sterke als zwakke punten die inherent zijn aan dat platform. Een goed reagerende site begrijpt de mogelijkheden en beperkingen van verschillende apparaten en gebruikt deze om aangepaste ervaringen te creëren die het best geschikt zijn voor welk apparaat een bezoeker op dat moment ook gebruikt.
Een mobiele telefoon bevat bijvoorbeeld een aantal functies die u niet zou vinden op een traditionele desktopcomputer. GPS is een voorbeeld van een mobielgerichte functie (ja, u kunt ook algemene locatiegegevens op desktops krijgen, maar de GPS van het apparaat is veel nauwkeuriger). Uw site kan GPS-informatie gebruiken om een persoon op een slimme manier zeer gedetailleerde en specifieke stapsgewijze richtingsinformatie of speciale aanbiedingen te sturen op basis van waar ze zich op dat moment precies bevinden.
Een ander voorbeeld van dit principe in de praktijk is een site die begrijpt wat voor soort schermweergave u gebruikt en afbeeldingen verzendt die het meest geschikt zijn voor die weergave. Als u een scherm met een hoge pixeldichtheid hebt, kunt u besluiten om afbeeldingen van hogere kwaliteit naar dat scherm te verzenden. Deze zelfde afbeeldingen zouden echter nutteloos zijn op een minder capabel scherm en de extra kwaliteit zou verloren gaan terwijl de extra bestandsgrootte zonder werkelijke reden zou worden gedownload.
Echt geweldige responsive sites houden rekening met de volledige gebruikerservaring en werken aan het aanpassen van die ervaring, niet alleen op basis van het type apparaat of de grootte van het scherm, maar ook op andere belangrijke aspecten van de hardware.
4. Inhoud met context
Aanvankelijk kreeg responsief webontwerp zijn naam vanwege het idee dat de lay-out van een site reageert op verschillende schermformaten, maar u kunt op zoveel meer antwoorden dan alleen schermgrootte. Voortbouwend op het vorige voorbeeld van het gebruik van de sterke en zwakke punten van een apparaat, kunt u die gebruiken, evenals andere gegevens zoals de datum en tijd, om een website-ervaring echt aan te passen.
Stel je een website voor voor een groot beursevenement. Hoewel een responsieve website de lay-out van de pagina's van de site op verschillende schermen zal aanpassen, kunt u de datum ook gebruiken om te bepalen welke inhoud het belangrijkst is om te worden weergegeven. Als dit de periode vóór het evenement is, wilt u waarschijnlijk prominent registratiegegevens weergeven. Als het evenement echter op dat moment daadwerkelijk gebeurt, is registratie misschien niet de belangrijkste inhoud. In plaats daarvan kunt u beslissen dat het dagschema van de gebeurtenissen kritischer is omdat het relevanter is voor de onmiddellijke behoeften van die gebruiker.
Als je een stap verder gaat, kun je op de GPS van een apparaat tikken om te bepalen waar ze zich daadwerkelijk bevinden op de beurs. Je zou ze interactieve inhoud kunnen geven op basis van hun locatie, en ze in de buurt van cabines of sessies laten zien.
5. Toegankelijkheid
Het laatste voorbeeld dat we zullen bekijken voor hoe een site echt kan inspelen op de behoeften van een bezoeker, is na te denken over toegankelijkheid van de website. Websites moeten kunnen worden gebruikt door zoveel mogelijk mensen, inclusief mensen met een handicap. Uw website moet kunnen worden gebruikt door iemand die een schermlezer of andere ondersteunde software nodig heeft om toegang tot de inhoud te krijgen. Op deze manier beantwoordt uw site aan hun behoeften omdat u ervoor heeft gezorgd dat de ervaring, hoewel anders voor bezoekers met een handicap, nog steeds geschikt is.
Door zoveel mogelijk gegevenspunten te beantwoorden, en niet alleen de schermgrootte, kan een website zoveel meer zijn dan alleen maar 'mobielvriendelijk'. Het kan een echt responsieve ervaring worden in elke zin van het woord.
