Share
Responsief webdesign is al heel lang een belangrijke trend - zelfs voordat Mashable 2013 uitgeroepen tot het jaar van responsive webdesign. Koppel dat met een toenemend gebruik van mobiele apparaten met verschillende schermformaten en het is gemakkelijk te begrijpen waarom internet er niet over zal praten.
Maar wat betekent responsief webdesign voor eigenaren van kleine bedrijven? Wat nog belangrijker is, waarom zou u zich moeten bezighouden met responsieve webdesign?
Als het gaat om het promoten en vermarkten van uw bedrijf, kan een goed ontworpen website uw meest waardevolle bezit zijn. Maar als u wilt dat het echt effectief is, is een aantrekkelijk ontwerp alleen niet genoeg. Uw website moet ook responsief zijn.
De belangrijkste reden waarom u een responsieve website wilt, is het feit dat het gebruik van mobiele apparaten om op internet te surfen al enkele jaren voortdurend in de lift zit en geen tekenen van vertraging vertoont..
Vanuit zakelijk oogpunt betekent dit dat als uw website niet goed reageert op kleinere schermen en moeilijk te lezen en te navigeren is, uw bezoekers eerder geneigd zullen zijn om naar de site van een concurrent over te gaan.
Eenvoudig gezegd, responsief webontwerp is geen luxe, het is een noodzaak en het is nu het perfecte moment om ervoor te zorgen dat uw website reageert.
Als u zich afvraagt wat responsief webontwerp echt is en waarom het ertoe doet, bent u bij ons aan het juiste adres. In dit artikel leggen we uit hoe responsief webontwerp werkt, waarom u een responsieve website moet overwegen en in het echte leven enkele voorbeelden van responsief webontwerp laten zien. Laten we erin duiken!
De term responsive web design is bedacht door Ethan Marcotte in 2010 en verwijst naar het ontwerpen van websites die reageren op het apparaat waarop ze worden bekeken om gebruikers een naadloze, optimale gebruikerservaring te bieden.
In de kern volgt responsief webontwerp de drie belangrijkste principes: vloeistofrasters, responsieve media en mediaquery's. In sommige gevallen maakt responsief webontwerp ook gebruik van de metatagtag van het kijkvenster als een apparaat de initiële breedte of schaal van een website niet kan bepalen, waardoor mediaquery's niet worden geactiveerd. Hier zijn de basale responsieve webontwerpprincipes uitgelegd:
Vloeiende rasters werken net als elk ander ontwerpraster - hiermee kunt u elementen op een pagina op een visueel aantrekkelijke manier rangschikken. In tegenstelling tot een traditioneel raster, wordt een flexibel raster echter verkleind op basis van de schermgrootte en kan het worden aangepast aan elke breedte omdat het relatieve meeteenheden zoals percentages of em-eenheden gebruikt, in plaats van vaste eenheden zoals pixels.
Met mediaquery's kunt u nog specifieker worden met uw responsieve ontwerp en dit overeenkomstig aanpassen op basis van een bepaald schermformaat. In termen van de leek gebruiken websites mediaquery's om gegevens te verzamelen waarmee ze de grootte van een scherm kunnen bepalen en vervolgens de juiste CSS-stijlen kunnen laden.
Het derde kernprincipe van responsief webontwerp is responsieve of flexibele media. Aangezien moderne websites veel afbeeldingen, video's en andere mediabestanden gebruiken, is het noodzakelijk dat deze typen inhoud reageren op verschillende schermformaten..
Normaal zouden ontwerpers de afbeeldingsdimensies opnemen in hun CSS-stylesheet. Maar dit werkt niet voor responsief ontwerp vanwege de hierboven genoemde vaste meeteenheden. In plaats daarvan moet u de eigenschap max-width gebruiken voor afbeeldingsbestanden, video's en andere mediatypen. Om ervoor te zorgen dat mediabestanden niet langs de container gaan en op basis van de schermgrootte mooi worden geschaald, moet de eigenschap max-width op 100% worden ingesteld.
Zoals eerder vermeld, komt de metatag voor de viewport in beeld wanneer mediaquery's niet worden geactiveerd omdat een apparaat de initiële breedte van een website niet kan bepalen. Om dit te bestrijden, kwam Apple met de viewport-metatag.
De viewport-metatag heeft meestal een beginschaal met hoogte- of breedtewaarde ingesteld op 1, waarmee het probleem wordt opgelost dat de schaal van de website niet wordt herkend door de verhouding tussen de hoogte of breedte van het apparaat en de viewportgrootte te gebruiken.
Nu we de kernprincipes van responsive webdesign hebben behandeld, laten we eens kijken naar enkele real-world responsive web design voorbeelden:
Als webontwikkelaar is het geen wonder dat de website van Susan Jean Robertson de best practices volgt als het gaat om webdesign, wat inhoudt dat ervoor moet worden gezorgd dat haar website er geweldig uitziet, ongeacht welke apparaat bezoekers gebruiken.
Hoewel haar site vrij eenvoudig en minimaal is, heeft deze een paar afbeeldingen die niet alleen goed schalen op basis van de schermgrootte, maar ook verschuiven van een lay-out met twee kolommen naar een lay-out met één kolom op kleinere schermen. Het menu, dat vaak verschuift naar een hamburgermenu op kleinere schermen, blijft hetzelfde omdat het niet veel links bevat, dus het is niet nodig het te verbergen.
De BMW-website gebruikt veel afbeeldingen en achtergrondvideo's, wat het meest uitdagende onderdeel van responsief webontwerp kan zijn.
Zoals u kunt zien aan de hand van de onderstaande schermafbeelding, doet BMW uitstekend werk om ervoor te zorgen dat alle afbeeldingen en video's reageren op verschillende schermformaten. Je zult ook het gebruik van een hamburgermenu op mobiele apparaten opmerken.
Field Notes dient als een mooi voorbeeld van een e-commerce website die er geweldig uitziet op zowel mobiele als desktopapparaten.
Ze gebruiken het standaard hamburgermenu op kleinere schermen en de productrijen vergroten of verkleinen de rijen met vier kolommen in rijen met twee kolommen. De calls-to-action blijven zichtbaar en kunnen gemakkelijk worden aangeklikt, zelfs als de schermgrootte wordt verlaagd en de productafbeeldingen ook netjes worden geschaald.
Een aantrekkelijke geïllustreerde achtergrond is het eerste dat je op de website van KlientBoost ziet en die achtergrond ziet er geweldig uit, ongeacht hoe je het formaat van het browservenster aanpast.
Naast het gebruik van een hamburgermenu, gebruikt KlientBoost ook een andere logoversie op kleinere schermen en werkt de rest van de lay-out op de gebruikelijke manier: meerdere kolommen stapelen zich op in een enkelvoudige kolom.
Het laatste exemplaar op onze lijst is afkomstig van WillowTree Apps, een digitaal bureau waarvan de website een strakke lay-out gebruikt met veel afbeeldingen om hun inhoud en portfolio te tonen.
U zult merken dat de afbeeldingen volledig responsief zijn en het standaardpatroon volgen om gestapeld te worden vóór de postfragmenten in één kolom, vergelijkbaar met de rest van de inhoud. Hier is een hamburgermenu aanwezig evenals CTA-knoppen die zelfs op kleinere schermen duidelijk zichtbaar blijven.
De bovenstaande websites zijn slechts het topje van de ijsberg als het gaat om responsieve webdesigninspiratie. U kunt nog veel meer voorbeelden vinden in onze verzameling van 25 beste voorbeelden van responsief webontwerp.
Responsive web design gaat niet alleen over het volgen van de nieuwste trends in webdesign. Als u een responsieve lay-out voor uw website kiest, heeft dit veel voordelen voor uw bedrijf die van invloed kunnen zijn op uw verkeer, SEO en inkomsten. Hier zijn de vijf belangrijkste redenen waarom u een responsief webontwerp voor uw website zou moeten overwegen.
De belangrijkste reden om een responsief webontwerp te adopteren, is het feit dat u uw bezoekers een betere gebruikerservaring biedt en de bruikbaarheid van uw website verbetert. Als bezoekers niet gedwongen worden om onmiddellijk in alle richtingen te scrollen, te knijpen en in te zoomen om uw inhoud te lezen, zullen ze meer geneigd zijn om voor een langere periode op uw website te blijven. Ze kunnen eenvoudig van de ene naar de andere pagina navigeren en hebben geen problemen om een formulier in te vullen of op uw call-to-action-knop te klikken.
Zoals we eerder al vermeldden, tonen statistieken aan dat meer dan de helft van alle webverkeer in de wereld afkomstig is van mobiele apparaten, wat betekent dat zodra uw website reageert, u veel betere kansen heeft om die bezoekers aan te trekken. Als ze op uw website terechtkomen en een website hebben die er geweldig uitziet en werkt, zelfs op kleinere schermen, hebben ze geen reden om weg te navigeren, zodat uw bedrijf vast staat dat leads en klanten meer mobiel kunnen zijn.
Afgezien van responsief webdesign, is een andere internettrend die een must is geworden, een snellaadwebsite. En dankzij vloeibare rasters en responsieve media hebben responsieve websites betere laadtijden dan niet-reagerende websites. Dit leidt ertoe dat bezoekers meer tijd op uw site doorbrengen, wat ons naar het volgende punt brengt - conversiepercentages.
Zodra bezoekers meer tijd op uw website doorbrengen, heeft u een betere kans om ze van bezoekers om te zetten in leads en vervolgens in abonnees en kopers. Volgens onderzoek zijn de gemiddelde succespercentages voor smartphoneapparaten 64% hoger dan de conversieratio's voor desktops. Dit is een direct gevolg van de verbeterde gebruikerservaring die ontstaat door het hebben van een website die gemakkelijk te gebruiken is op verschillende schermformaten en snellere laadtijden.
Ten slotte is een betere SEO-rangorde absoluut een van de vijf belangrijkste voordelen van responsief webontwerp. Immers, als je niet kunt worden gevonden in zoekmachines, is het bijna onmogelijk om organisch verkeer voor je website te krijgen. Volgens Google is sinds april 2015 de responsiviteit van uw website een van de rangordesignalen die bepalen hoe uw website wordt weergegeven in de zoekmachines. Google is echter niet de enige zoekmachine die dit aanbeveelt. Bing heeft duidelijk op zijn blog aangegeven dat het bouwen van websites die voor alle platforms zijn geoptimaliseerd de sleutel is tot een succesvolle SEO-strategie.
Nu we de belangrijkste voordelen van responsief webontwerp hebben besproken, bespreken we hoe u aan de slag kunt.
Het eerste dat u moet doen, is het testen van de reactietijd van uw website. U kunt een tool gebruiken zoals de mobielvriendelijke test van Google. Het enige dat u hoeft te doen, is de URL van uw site invoeren en de tool analyseert uw site en vertelt u of deze reageert of niet. U krijgt ook suggesties voor wat u moet doen om ervoor te zorgen dat uw website mobielvriendelijk is.
Zodra u weet of uw site reageert of niet, is het tijd om geïnspireerd te raken met voorbeelden van responsieve websites. U zult precies kunnen zien hoe die websites gebruik maken van de hierboven besproken kernprincipes en hoe zij andere noodzakelijke functies hebben geïmplementeerd.
De volgende stap is om een responsieve sjabloon of een thema voor uw site te kiezen. Als u tot nu toe HTML-sjablonen hebt gebruikt en wilt blijven gebruiken, zijn er genoeg responsieve HTML-sjablonen waaruit u kunt kiezen. Begin met ons overzicht van de beste responsieve HTML-sjablonen die beschikbaar zijn op onze marktplaats.
Als WordPress uw gekozen platform is, dan zult u blij zijn te weten dat er geen tekort is aan responsieve WordPress-thema's, ongeacht in welke branche uw bedrijf behoort.
Nadat u ervoor heeft gezorgd dat uw site een responsieve sjabloon of een thema gebruikt, is het tijd om het naar een hoger niveau te tillen met extra tips en trucs. Gebruik onze gids als een startpunt om ervoor te zorgen dat uw website de best mogelijke gebruikerservaring levert en volledig reageert.
Responsief webdesign verdwijnt niet snel. Het is eigenlijk de weg van de toekomst en het heeft een aantal voordelen die van invloed zijn op de bedrijfsresultaten van elke ondernemer.
Als u klaar bent om uw website naar een hoger niveau te tillen, begin dan met een make-over met een van onze responsieve HTML-sjablonen of WordPress-thema's en gebruik de tips en trucs in dit artikel om u in de juiste richting te wijzen.
Accentsconagua