VisionEars wordt Mulberries Agency

Wij gaan vanaf 1 september verder onder de naam Mulberries Agency. Naast de vertrouwde service die je van ons gewend bent hebben we ons ook gespecialiseerd op het gebied van Marketing Automation en Experiment Marketing.

Bekijk hier de website van Mulberries Agency Sluit popup

Download je gratis ebook: Marketing automation - 6 systemen vergeleken

Zoek je naar software om meer leads te converteren? Download onze gratis ebook waarin wij de 6 meest gebruikte softwarepakketten met elkaar vergelijken!

Download je gratis ebook: Infograpic stappenplan

Voor een geslaagde infographic heb je meer nodig dan goede data en een mooi design. Het moet een verhaal vertellen dat aansluit bij de doelgroep. Download ons heldere stappenplan en ga voor die perfecte infographic.

Download je gratis ebook: 10 tips voor een optimale webshop homepagina

De homepagina van je webshop is enorm belangrijk, want het is de first impression die telt. Een geoptimaliseerde homepagina is belangrijk voor het succes van je webshop.

Gratis consult: snelheidsoptimalisatie

Een snelle(re) website draagt bij aan de gebruikerservaring en levert meer conversies en dus omzet op. Wij helpen je graag op weg!

Wie onderstaand formulier invult, ontvangt een uitnodiging van een gratis consult. Tijdens dit gesprek bekijken we de betreffende website(s) en bespreken we samen alle mogelijkheden en valkuilen.

Gratis consult: Webshop optimalisatie

Voor een geslaagde webshop heb je meer nodig dan mooi design. Een goede gebruikerservaring, technisch in orde en zoekmachine geoptimaliseerd. Neem contact op voor een GRATIS consult. Wij nemen je webshop onder de loep zodat jij precies weet waar je kansen liggen en nog meer rendement uit je webshop kan halen.

Download jouw gratis ebook
  • Blog

Responsive Webdesign, hoe werkt het?
03
Apr 2014
Web & interaction design

Responsive Webdesign, hoe werkt het?

03 apr 2014 | Yoeri | Web & interaction design

Met de komst van responsive webdesign zorgt u ervoor dat uw website op iedere schermgrootte goed te bekijken is. Maar hoe werkt Responsive webdesign nu precies? In deze blog leg ik u de werking van responsive webdesign uit en ga ik in op de zaken waar u rekening mee moet houden.

Fluid design

Een website optimaliseren voor een mobiel apparaat is eenvoudiger dan u denkt. U moet echter al bij het maken van het webdesign rekening mee houden. De term fluid design betekend dat een ontwerp van de website procentueel is opgebouwd. Er wordt dus nauwelijks meer geprogrammeerd met vaste pixels, maar met percentages. Dit zorgt ervoor dat uw website zich automatisch schaalt naar de grootte van het scherm. Bijvoorbeeld bij een sectie met drie kolommen wordt de breedte per kolom 33% van de schermgrootte.

States & breakpoints

Maar 33% van een smartphone scherm is toch niet te lezen hoor ik u denken. Dat klopt, daarom wordt er bij Responsive Webdesign gebruik gemaakt van verschillende states. Een state betekend niets meer dan een andere indeling afhankelijk van de grootte van het scherm. Door middel van breakpoints wordt bepaald vanaf welke grootte er wordt gewisseld van state. Voor een website zijn er dus minimaal drie verschillende states verreist. Één voor een smartphone, één voor een tablet en één voor desktops en laptops. Echter voor een optimaal resultaat zou u ervoor kunnen kiezen om er meerdere te maken. Denk bijvoorbeeld aan de verschillende standen van een scherm (portrait/landscape) of de uiteenlopende resoluties van desktops en laptops.

rwd-breakpoints

Media queries

De technische realisatie van deze breakpoints gebeurt door middel van media queries. Media queries worden gedefinieerd in de CSS (stijlelementen van een website) van de website. Media queries kunnen op twee manieren worden ingezet. Een is tijdens de aanroep van de CSS bestanden en de andere is in de CSS bestanden zelf. Bij de eerste methode wordt er op basis van een bepaalde schermgrootte een ander CSS bestand geladen, terwijl bij de tweede methode in het CSS bestand wordt bepaalde welke stijlelementen er uitgevoerd moeten worden.

Mobile/content first

Om een succesvolle Responsive website te creëren moet u goed nadenken over wat belangrijk is op uw website. Deze manier van denken is een voorbeeld van de mobile/content first gedachte. Bij deze manier van denken wordt er begonnen met het 'ontwikkelen' vanuit een mobiele variant van uw website. U gaat nadenken over wat uw bezoeker zeker moet vinden op uw website. In andere woorden, wat is de belangrijkste content op uw website? Op een mobiel apparaat laat u de minder relevante elementen weg, deze worden alleen getoond op een groter scherm (door middel van de media queries). Als u minder relevante elementen niet weglaat, kan het voor uw bezoeker als een overdosis aan informatie worden beschouwd.

Responsive webdesign is een mooie oplossing voor het toenemend gebruik van mobiele internet bezoekers. Wanneer u goed nadenkt over hoe u responsive webdesign inzet, kan het u als bedrijf veel voordelen op leveren. Uw website is ontwikkeld voor alle schermformaten en uw bezoekers kunnen snel alle benodigde informatie vinden wat weer leidt tot meer tevreden bezoekers en een hoger conversiepercentage. 

 

Deel deze blog post:

Yoeri Fleuren | Webdeveloper

Webdevelopment is Yoeri op het lijf geschreven. Vragen over Magento? Yoeri is je man!

Neem contact met mij op Contact
blog comments powered by Disqus
© 2008-2019 - VisionEars B.V. - Meetbaar online succes