Share
Responsief webdesign is tegenwoordig een must. Gezien het toenemend aantal mensen dat hun mobiele apparaten gebruikt om onderzoek te doen voordat ze een product kopen en om het laatste nieuws bij te houden, kan uw bedrijf het zich niet veroorloven een niet-responsieve website te hebben.
Wanneer u daaraan toevoegt dat Google voor mobiel-responsieve websites de voorkeur geeft in hun zoekalgoritme, wordt het duidelijk dat responsief ontwerp niet weg te denken is. Als u uw site gewoon van de grond wilt krijgen, helpen de tips voor responsief webontwerp die in dit artikel worden geschetst u bij het ontwerpen van een aantrekkelijke en responsieve site. En als u een bestaande site opnieuw ontwerpt, zijn dezelfde tips ook handig.
De volgende tips voor het ontwerpen van mobiele websites en responsief ontwerpen helpen u ervoor te zorgen dat uw site zowel responsief als mobielvriendelijk is. Hier zijn enkele van onze beste tips voor responsief webdesign:
Begrijp dat mensen websites anders zullen gebruiken op desktopcomputers dan op mobiele apparaten. Overweeg de bezoekers van uw website te onderzoeken of analyses te gebruiken om erachter te komen waarom ze uw site bezoeken met een mobiel apparaat en welke pagina's en elementen zij het meest gebruiken. Deze informatie zal u helpen begrijpen welke pagina's en andere elementen van uw website direct beschikbaar moeten zijn op kleinere schermen.
Als ze bijvoorbeeld snel naar uw site zoeken om toegang te krijgen tot uw contactgegevens, is het een slimme keuze om ervoor te zorgen dat uw contactpagina wordt weergegeven op mobiele navigatie..
Voordat u uw site gaat ontwerpen, is het handig om eerst de lay-out te plannen. De meeste webontwerpers beginnen met het maken van een draadframe en vervolgens met het visuele ontwerp van de website voordat ze naar het codeergedeelte gaan. Dit helpt u niet alleen om het exacte uiterlijk en gevoel te creëren dat u wilt, het zal het ook voor u of uw ontwerper gemakkelijker maken om de sjabloon aan te passen en deze naadloos te integreren met uw merk.
Zorg ervoor dat u verschillende prototypen van uw website maakt en deze op verschillende schermformaten test om ervoor te zorgen dat het eindontwerp snel reageert. Hier zijn enkele hulpmiddelen die u gebruikt om responsieve prototypen te maken:
De navigatie is het belangrijkste onderdeel van elke website. Het dient als een routekaart voor uw bezoekers en geeft hen eenvoudig toegang tot andere pagina's op uw site. Op desktopversies van uw site heeft uw navigatie meestal zichtbare links naar alle belangrijke pagina's. Op mobiele apparaten is het gebruikelijk om een hamburgersymbool te gebruiken en de links erachter te verbergen.
Dit is echter niet altijd de beste benadering, omdat sommige gebruikers zich mogelijk niet realiseren dat ze op het pictogram moeten klikken om het menu te openen en gefrustreerd te blijven omdat ze andere pagina's niet kunnen bezoeken. Een betere benadering zou zijn om de belangrijkste menu-items zichtbaar te laten, zelfs op kleinere schermen, en het hamburgermenu te gebruiken voor de rest van de links. U kunt ook links opnemen naar andere pagina's in de tekst op uw startpagina om de navigatie te vergemakkelijken.
Afbeeldingen spelen een belangrijke rol in het ontwerp van uw website. Ze kunnen u helpen een emotionele band te leggen met uw bezoekers en hen in staat stellen het product te visualiseren dat ze willen kopen. Als zodanig is het cruciaal dat uw afbeeldingen worden geoptimaliseerd voor internet.
Dit betekent dat de afbeeldingen in de juiste indeling moeten worden opgeslagen: JPG voor fotografische of landschappelijke afbeeldingen en PNG-8 voor pictogrammen en logo's die een transparante achtergrond vereisen. Bovendien moet u de afbeeldingsgrootte verkleinen met een hulpmiddel zoals TinyJPG en overwegen afbeeldingen te gebruiken die zijn geoptimaliseerd voor verschillende mobiele breekpunten om schaling en bandbreedtevraagstukken te verminderen.
Een andere manier om responsief ontwerp te benaderen, is door eerst een mobiele versie van uw website te ontwerpen. Hiermee kunt u zien hoe de afbeeldingen, tekst, logo's en andere elementen op kleinere schermen worden weergegeven. Als ze zonder problemen worden weergegeven, zou u geen problemen moeten hebben om uw ontwerp aan te passen aan grotere schermen.
Mediaquery's werden eerst geschetst als onderdeel van het oorspronkelijke voorstel voor CSS, maar werden pas realiteit nadat browsers in 2012 officiële ondersteuning voor hen hadden toegevoegd. De belangrijkste rol van mediaquery's is dat ze u toelaten de lay-out van uw website te optimaliseren voor verschillende schermbreedtes.
Bij gebruik van mediaquery's reageert de inhoud op verschillende omstandigheden op specifieke apparaten. Kort gezegd: een mediaquery controleert de resolutie, breedte en richting van het apparaat en geeft de juiste CSS-regels weer. Een voorbeeld van een media-query ziet er als volgt uit:
@media-scherm en (min-breedte: 500px) uw CSS-regels hier
Het spreekt voor zich dat formulieren op uw site moeten worden aangepast aan de breedte en de grootte van het scherm. U kunt echter nog een stap verder gaan en controleren of de invoervelden het juiste type toetsenbord activeren. U kunt dit eenvoudig doen door een invoerelement aan uw formuliervelden toe te voegen.
Velden die tekstinvoer vereisen zoals naam, e-mailadres, adres en andere, moeten een teksttoetsenbord activeren terwijl elk invoerveld dat een nummer vereist, onmiddellijk het numerieke toetsenbord moet activeren. Dit verbetert de algehele mobielvriendelijkheid van uw website en de gebruikerservaring.
Vergeet niet extra aandacht te besteden aan de knoppen op uw website. Omdat het schermvastgoed zo kostbaar is, kunt u gemakkelijk in de val trappen en uw knoppen kleiner maken zodat ze op het scherm passen. Dit maakt ze echter ook moeilijker om te klikken.
Zorg ervoor dat uw knoppen gemakkelijk te herkennen zijn:
Overweeg, voor zover de maat gaat, padding op uw knop te gebruiken om het klikbare gebied te vergroten. U kunt ook Material ontwerpaanbeveling volgen voor toegankelijkheid van de knoppen en ervoor zorgen dat ze 36dp hoog zijn. (1dp = 1px).
Als het op tekst aankomt, wil je ervoor zorgen dat de tekst leesbaar is op kleinere schermen. Een goede maat voor uw lichaamsexemplaar is 16px of 1em en pas de grootte van uw kopjes dienovereenkomstig aan. Tegelijkertijd wilt u de regelhoogte van uw tekst aanpassen naar 1,5 ml om ervoor te zorgen dat uw alinea-regels voldoende ademruimte hebben.
Een andere tip voor het ontwerpen van mobiele websites is om een leesbaar lettertype te gebruiken. Vermijd decoratieve of scriptlettertypen voor body-copy of in uw menu-items, omdat ze moeilijk te lezen zijn, vooral op kleinere schermen.
Een van de grootste trends die langzaam zijn weg vinden in webdesign is het gebruik van microinteracties. In voorgaande jaren konden animaties en interactieve functionaliteit als 'leuk om te hebben' worden beschouwd voor de meeste zakelijke websites. Omdat ontwerpers echter hypergeoriënteerd zijn op gebruikerservaring, is het gebruik van animaties echt in de kijker gezet, met name in formulieren..
Ze bieden gebruikers snelle feedback, wat vooral handig is op mobiele apparaten, in plaats van de pagina opnieuw te laden, waardoor je bandbreedtegebruik kan toenemen. Overweeg dit voorbeeld van een Australisch einde van het bedrijf voor het schoonmaken van leaseproducten. Ik reikte hen uit over hun gebruik van micro-interacties. Dit is wat ze te zeggen hadden:
Ons uitcheckformulier is ontworpen om Sydneysiders gemakkelijk een einde te maken aan het verhuren van leaseopgaven. We wilden echt benadrukken dat het echt direct was en niets deed dit meer dan door het gebruik van een micro-interactie. Wanneer u een prijsopgave aanvraagt, animeert een ontvangstbewijs achter het formulier, waardoor de totale prijs van uw obligatie schoon wordt. We zijn van mening dat dit kleine "ta-da" -moment onze voltooiingspercentages tijdens het afrekenproces echt heeft verhoogd.
Een ander geweldig voorbeeld van micro-interacties is afkomstig van de website van Le Cafe Noir Studio. Hun online winkel beschikt over geanimeerde harten die over je scherm gaan als je een item aan je winkelwagentje toevoegt, waardoor je een gevoel van onmiddellijke klantwaardering krijgt:
U kunt veel tijd besparen bij het ontwerpen van een responsieve website als u een responsief framework toevoegt aan uw workflow. Een HTML-framework zoals Bootstrap gebruikt in een HTML-template is een goed uitgangspunt als u eenvoudige, statische websites wilt ontwerpen.
U kunt ook profiteren van premade-responsieve WordPress-thema's als u een complexere website wilt maken en een blog wilt opnemen in uw marketingstrategie. Frameworks zoals deze zijn ook een goede keuze als je geen ervaren coder bent maar alles zelf wilt doen.
Minimalistisch design is de laatste jaren enorm gegroeid en met goede reden. Het elimineert alle rommel, maakt het gemakkelijker voor bezoekers om zich te concentreren op uw inhoud, waardoor de conversieratio's verbeteren, en helpt uw website sneller te laden omdat het minder elementen gebruikt. Het past ook goed bij responsief webontwerp omdat het u kan helpen belangrijke websitegebieden te markeren en de aandacht te vestigen op uw calls-to-action.
Het opnemen van deelknoppen op uw website kan uw inhoud helpen meer zichtbaarheid te krijgen en meer verkeer te genereren. Met deelknoppen kun je je inhoud echter vaak blokkeren, waardoor je deze moeilijker kunt lezen op kleinere schermen. Zorg ervoor dat de deelknoppen netjes schalen op kleinere schermen door ze te testen op een mobiel apparaat of overweeg ze uit te schakelen op schermen die kleiner zijn dan 768 px.
Zodra u de tips voor responsief webontwerp hierboven heeft geïmplementeerd, loont het om te controleren of uw site nu reageert. Er zijn tal van tools online waarmee u de reactietijd van uw site kunt testen. Dit zijn de drie beste tools die we u aanraden te gebruiken:
Google heeft zijn eigen versie van de mobielvriendelijke test en het is vrij eenvoudig. U voert de URL van uw website in en klikt Analyseren, en wacht dan op de resultaten. Als uw site mobielvriendelijk is, ziet u een groen bevestigingsbericht. Als dit niet het geval is, geeft de test aan waarom de website de test niet heeft doorstaan en wordt u gewezen op bronnen om de problemen op te lossen.
Screenfly van QuirkTools laat u zien hoe uw website er uit zal zien op verschillende schermformaten. Deze tool helpt je niet door handige hints en suggesties toe te voegen, maar je kunt zien hoe je website wordt weergegeven op smartphones, desktops en zelfs grote tv-schermen.
Ten slotte kunt u met MobileTest.me een bepaald mobiel apparaat kiezen, uw URL invoeren en met uw site communiceren alsof u zich op het opgegeven apparaat bevindt. Deze tool is vooral handig omdat u kunt zien hoe uw website werkt op een mobiel apparaat, testformulieren en knoppen, en begrijpt u of uw bezoekers een goede gebruikerservaring hebben. U kunt het alleen gebruiken of in combinatie met de bovenstaande twee hulpprogramma's om ervoor te zorgen dat uw website echt responsive is.
Het creëren van een responsief webontwerp is niet langer optioneel. Het is een noodzaak. Responsief webontwerp maakt het voor iedereen gemakkelijker om uw site zonder problemen te bekijken en kan van invloed zijn op de reputatie van uw merk en op uw conversiepercentages. Met de bovenstaande tips en trucs voor responsief webontwerp kunt u uw bedrijfswebsite er geweldig uit laten zien, ongeacht het apparaat dat uw bezoekers gebruiken en ervoor zorgen dat ze ook een geweldige gebruikerservaring hebben.
Accentsconagua