Share
Het valt niet te ontkennen dat responsief webontwerp steeds populairder en belangrijker is geworden sinds Google aankondigde dat mobielvriendelijke, responsieve websites een boost zullen zien in hun positie als zoekmachine in 2015.
Responsief ontwerp gaat echter ver terug. De eerste website met een lay-out die zich aanpast aan de breedte van verschillende viewports van de browser, werd rond 2002 ontworpen. Dankzij de vooruitgang in technologie en het feit dat ontwerpen voor het web altijd ontwerpen voor een groot aantal schermformaten betekende, was responsief webdesign een natuurlijk resultaat.
Maar het was pas in 2010 toen de term responsive web design officieel werd bedacht door Ethan Marcotte, een onafhankelijke webontwikkelaar die ook een boek schreef over responsief webontwerp.
Sindsdien is de technologie nog verder gevorderd en we hebben gezien dat steeds meer mensen hun smartphones en tablets gebruiken om niet alleen te bellen en berichten te verzenden, maar ook om het nieuws en andere interessante websites te bekijken. In de toekomst zal responsief webontwerp zeker blijven bestaan, aangezien de meeste experts blijvend hoge niveaus van gebruik van mobiele apparaten voorspellen.
Wanneer u al die dingen toevoegt, is het duidelijk dat responsief webdesign hier is om te blijven. Wat nog belangrijker is, er zijn nogal wat voordelen van responsief webdesign. In dit artikel bespreken we responsieve webontwerpfuncties en -voordelen. We laten u ook zien hoe uw website en bedrijf kunnen profiteren van het gebruik ervan.
Responsief ontwerp is mogelijk vanwege de kernprincipes die elke ontwerper, evenals elk modern framework en CMS, onderschrijven:
Vloeistofroosters vormen de kern van responsief ontwerp. Met rasters kunt u elementen op uw pagina uitlijnen en deze op een visueel aantrekkelijke manier weergeven, volgens een bepaalde hiërarchie. Vloeistofrasters worden geschaald afhankelijk van de grootte van het scherm van de gebruiker en zorgen ervoor dat alle pagina-elementen hetzelfde zijn. Hoewel het gebruik van rasters in de ontwerpwereld altijd al aanwezig was als het gaat om webdesign, werden eenvoudig reagerende rasters ontwikkeld om ontwerpers en ontwikkelaars te helpen bij het ontwerpen van websites. Na die initiële responsieve rasters brak een variëteit aan responsieve CSS-kaders op de scène, die allemaal hun code baseren op een vloeibaar raster.
Tegenwoordig zijn native grids gekomen om CSS in de vorm van "CSS Grid Layout Module". Browserondersteuning is nu redelijk solide en biedt enorme mogelijkheden voor webontwerpers die vloeiende, responsieve rasters willen verkennen, zonder te vertrouwen op frameworks.
Mediaquery's bestaan al sinds het begin van de jaren 2000, maar het was pas in 2012 dat ze een door W3C aanbevolen standaard werden. Net als vloeistofrasters vormen mediaquery's een hoeksteentechnologie achter responsief webontwerp. Dankzij mediaquery's kan een website gegevens verzamelen die helpen bij het bepalen van de grootte van het scherm dat een bezoeker gebruikt om toegang te krijgen. Zodra het die informatie heeft, laadt het voorwaardelijk CSS-stijlen die geschikt zijn voor die specifieke schermgrootte.
Responsief webontwerp werkt redelijk goed wanneer u alleen met tekst werkt. Moderne websites bevatten echter veel media zoals afbeeldingen en video's, wat nogal lastig kan zijn.
De juiste manier om met afbeeldingen en andere mediabestanden om te gaan, is door de eigenschap max-width te gebruiken in plaats van de dimensies van afbeeldingen of mediabestanden te gebruiken. Een voorbeeld ziet er als volgt uit:
img max-width: 100%; hoogte: auto;
Als u andere mediatypen wilt opnemen, wordt de aanpak van het stylen een beetje genuanceerder. De hoogte-eigenschap werkt niet, dus het toepassen van opvulling op de bodem van een container en het positioneren van de media in die container is de juiste keuze. Deze aanpak (hack) werd voor het eerst voorgesteld door Thierry Koblentz in 2009 en is nog steeds de meest robuuste manier om dingen te doen.
.wrapper-met-intrinsieke-ratio positie: relatief; opvulbodem: 20%; hoogte: 0; .element-to-stretch position: absolute; boven: 0; links: 0; breedte: 100%; hoogte: 100%;
Zodra u dit aan uw CSS-code toevoegt, worden alle afbeeldingen en mediabestanden in uw browser geschaald en komen ze niet verder dan hun container.
Nu we de kernprincipes van responsive webdesign hebben besproken, laten we ons verdiepen in de voordelen die dit met zich meebrengt.
Er zijn veel responsieve webontwerpvoordelen. Het kan een positieve invloed hebben op uw SEO, conversiepercentages, gebruikerservaring en vele andere aspecten van uw bedrijf die bijdragen aan uw groei. Hier zijn de 12 belangrijkste responsieve webontwerpfuncties en -voordelen.
Een responsieve website leidt tot een betere gebruikerservaring. Een belangrijke factor die de kwaliteit van de gebruikerservaring aangeeft, is de tijd die ze aan uw site besteden. Als ze het moeilijk vinden om te navigeren of te gebruiken omdat ze gedwongen zijn om constant te knijpen en in te zoomen, zullen ze niet op uw website blijven.
Maar als uw website wordt geschaald en reageert op de wijziging van de schermgrootte, hebben bezoekers geen problemen bij het openen van menu's, koppelingen, knoppen of het invullen van formulieren. Als gevolg hiervan zal hun gebruikerservaring beter zijn en zullen ze meer tijd op uw site doorbrengen.
Verbeterde gebruikerservaring en bruikbaarheid van de site kunnen vervolgens leiden tot meer verwijzingen naar mond-tot-mondreclame en nieuwe klanten voor uw bedrijf.
Statistieken tonen aan dat in het laatste kwartaal van 2017 bijna 52% van al het wereldwijde webverkeer afkomstig was van mobiele apparaten. Dat is goed voor meer dan de helft van al het internetverkeer en het laat zien dat je het je niet kunt veroorloven af te zien van responsief webontwerp. Begin met te onderzoeken hoeveel van uw bezoekers afkomstig zijn van mobiele apparaten en hoeveel tijd ze op uw site doorbrengen. Implementeer vervolgens responsief ontwerp en vergelijk de twee getallen. Zodra uw website zich aanpast aan de breedte van de viewport, ziet u een toename in mobiele bezoeken en langere tijd op site door dezelfde bezoekers.
Nog niet zo lang geleden was het gebruikelijk om een afzonderlijke mobiele versie van uw site te maken die werd weergegeven toen een kleinere schermgrootte werd gedetecteerd. Het ontwikkelen van een mobiele versie van uw site kost echter meer tijd dan het ontwikkelen van een responsieve website die er geweldig uitziet en werkt zoals bedoeld, ongeacht welk apparaat uw bezoekers gebruiken. Een ander nadeel van een versie van een mobiele website is het feit dat ze meer kosten omdat uw ontwikkelaar twee websites moet maken in plaats van één.
Rechtstreeks gebonden aan het bovenstaande punt is eenvoudiger website-onderhoud. Met twee versies van uw website moeten uw personeel of uw ontwikkelteam tijd en middelen verdelen over het beheren van twee websites. Met een responsieve website kunnen uw medewerkers minder tijd besteden aan onderhoudstaken en zich concentreren op belangrijkere taken zoals marketing, A / B-testen, klantenservice, product- of inhoudsontwikkeling en meer.
Een ander punt om in gedachten te houden met twee versies van uw website is het feit dat u in feite dubbele inhoud aanmaakt. Terwijl zoekmachines met de dag slimmer worden, moeten ze nog steeds begrijpen welke versie van de website belangrijker is. Als u een mobiele versie van uw site gebruikt, blijft uw inhoud hetzelfde, ook als de URL anders is.
Dit kan ertoe leiden dat beide versies van uw website een lagere positie in de zoekmachine hebben, omdat zoekmachines niet weten welke inhoud relevant is. Als u wilt dat beide versies van uw site een goede positie innemen, moet u twee afzonderlijke SEO-strategieën en -campagnes maken en aanzienlijk meer geld investeren in het produceren van originele en unieke inhoud voor zowel de desktopversie als de mobiele versie van uw site..
Omdat het hebben van twee afzonderlijke SEO-strategieën teveel tijd en geld kost, gebruiken de meeste website-eigenaren een canonieke tag op hun mobiele website die verwijst naar de desktopversie. Als gevolg hiervan worden de meeste afzonderlijke mobiele websites helemaal niet in zoekmachines gerangschikt.
Met een responsieve website kunnen alle bovenstaande hoofdpijn met succes worden vermeden. Als u twijfels had over het belang van responsief webontwerp, zou dit hen moeten helpen verlichten.
Wanneer u twee verschillende versies van uw website heeft, moet u twee sets website-analyse bijhouden, zodat u weet waar uw bezoekers vandaan komen en hoe ze omgaan met uw inhoud. Dit betekent dat u meerdere aanmeldingspagina's en bedankpagina's, conversiepunten, trechters en meer moet bijhouden.
Met een responsieve site daarentegen worden uw websitestatistieken aanzienlijk vereenvoudigd omdat u bovenaan een enkele set gegevens blijft. U kunt nog steeds inzicht krijgen in welke apparaten en browsers uw bezoekers gebruiken, waar ze afhaken en hoe lang ze op uw site doorbrengen, maar u hoeft geen gegevens uit meerdere rapporten te lezen om een accuraat beeld te krijgen.
Websites die responsief zijn, laden doorgaans sneller op alle apparaten, maar vooral op smartphones en tablets. Dankzij responsieve afbeeldingen en vloeiende rasters duurt het aanzienlijk minder lang voordat een pagina is geladen, wat een directe invloed heeft op de duur van het bezoek van uw gebruiker. Volgens onderzoek verlaat 53% van de mobiele bezoekers een site als pagina's meer dan drie seconden nodig hebben om te laden. Uit hetzelfde onderzoek blijkt ook dat websites die snel worden geladen profiteren van meer tijd op de site en van verbeterde conversiepercentages. Dit spreekt boekdelen over het belang van responsief webontwerp.
Bouncepercentage geeft het percentage bezoekers aan van een bepaalde website die weg van de site navigeren nadat ze slechts één pagina hebben gezien. Zoals we hierboven hebben vermeld, betekent een responsieve website dat bezoekers langer op uw site blijven, waardoor uw bouncepercentage daalt. Bezoekers zullen meer geneigd zijn om door te klikken en andere pagina's op uw site te lezen en alles te ontdekken wat u te bieden heeft.
Meer tijd op uw site en een lager bouncepercentage zijn goede eerste stappen om de gebruikerservaring van uw bezoeker te verbeteren en vertrouwen op te bouwen. Die verbeterde gebruikerservaring en vertrouwen leiden tot betere conversiepercentages, ongeacht of conversie betekent dat u zich aanmeldt voor uw nieuwsbrief, een aankoop doet of een telefoongesprek plaatst. Overweeg even dat de gemiddelde smartphone-conversiepercentages met 64% zijn gestegen in vergelijking met desktop en het is gemakkelijk te begrijpen waarom een responsieve website een must is.
Een ander voordeel van responsief webontwerp is een verbeterde rangorde in zoekmachines. Vanaf april 2015 houdt Google rekening met het reactievermogen van uw website als een van de signalen die de rangorde van uw website bepalen op de pagina met zoekresultaten van zoekmachines. Als uw website niet reageert, plaatst de gigant van de zoekmachine deze lager op de resultatenpagina, terwijl deze hoger wordt weergegeven als deze de mobielvriendelijke test doorstaat.
Een ander voordeel van responsief webontwerp is een verbeterde rangorde in zoekmachines. (Bron: Envato Elements)Wanneer dit correct wordt gedaan, kan responsief webontwerp leiden tot een toename van sociale shares voor uw inhoud. Dit is nog een van de voordelen van responsief webontwerp. Responsieve inhoud gecombineerd met responsieve socialemediaknoppen maken het eenvoudig om links naar uw site-pagina's te delen, zelfs op kleinere schermen. Dit kan uw geloofwaardigheid vergroten en u blootstellen aan een nieuwe doelgroep, wat vervolgens leidt tot meer verkeer en meer conversies. Tegelijkertijd kunnen sociale signalen indirect invloed hebben op uw positie in de zoekmachine omdat zoekmachines de verhoogde betrokkenheid en zoekvraag zullen opmerken.
Ten slotte is het vermeldenswaard dat een responsieve website u kan helpen bij het bouwen van backlinks. Backlinks spelen een belangrijke rol in elke SEO-strategie omdat ze zoekmachines laten zien dat andere websites uw site als een betrouwbare bron van informatie beschouwen. Als uw site niet reageert, zullen andere websites minder geneigd zijn om naar u te linken. Het koppelen aan een website die geen goede gebruikerservaring biedt, maakt ze er bovendien ook slecht uit.
Zoals u kunt zien, zijn er tal van voordelen voor het responsieve webontwerp voor uw bedrijf. Als uw website nog niet reageert, is het plannen van een herontwerp en een nieuwe, vloeiende lay-out een geweldige eerste stap. Hiermee kunt u bepalen welke pagina-elementen het belangrijkst zijn, welke pagina's kunnen worden verwijderd en hoeveel kopie u op uw site wilt behouden..
Zodra u duidelijk bent in de richting van uw herontwerp, kunt u een duik nemen in het kiezen van het juiste platform en het juiste thema of sjabloon voor uw site. Vervolgens kunt u de tips uit deze reeks zelfstudies implementeren en de conversieratio, betrokkenheid, SEO en meer van uw site verbeteren..
Accentsconagua