desktop

Mailbox blog

Mobile + tablet

Mailbox blog

Bolletjes

responsive design

Wat is “responsive webdesign” en hoe je website aan te passen aan de nieuwe regels. En wat zijn de meest voorkomende problemen bij niet mobiel vriendelijke websites ?

Wat is responsive design ?

Je kan er niet rond. Vanaf 21 april heeft Google aangekondigd een positieve discriminatie toe te passen voor mobiel vriendelijke websites versus NIET mobiel vriendelijke websites. Uiteraard is dit een gradueel proces maar de teneur is duidelijk gezet.

Het begrip “responsive design” is een relatief nieuw begrip en leidt soms tot verwarring. Als je bijvoorbeeld een website hebt die een volledig andere versie toont aan gebruikers van tablets of smartphones, dan spreken we niet van responsive design maar van een mobiele website.

Responsive design is een techniek daarentegen waarbij de manier waarop verschillende pagina-elementen getoond worden in functie is van de breedte van het gebruikte scherm.  Zo heeft een standaard ipad een breedte (ook wel viewport genoemd) van 1024 pixels in de breedte en 768 in de hoogte. Uiteraard gelden deze formaten zowel voor een landscape als portrait oriëntatie. Op css tricks kan je er mee over vernemen.

Responsive design is dus met andere woorden ook een kwestie van logische organisatie van de elementen van je pagina. Als je bijvoorbeeld gebruikt maakt van een rechterkolom die ongeveer 1/4 van de schermbreedte in beslag neemt, dan wordt dat moeilijk om te tonen NAAST mekaar op en klein apparaat zoals een iphone5. Hoe ga je dan die pagina dan organiseren ?

De meest voorkomende problemen

Een van de meest voorkomende problemen, is de grootte van de fonts die gebruikt wordt op kleinere apparaten. Traditioneel werd een font-grootte van 12 of 13 pixels voorzien omdat dit voldoende leesbaar was op grote schermen. Maar als je een website op je iphone bezoekt, dan is die font duidelijk te klein. Via media-queries in je stylesheet, kan je in functie van de breedte van je scherm gaan naar een font-grootte van 16 pixels of meer. Of met andere woorden : als de breedte van het scherm kleiner is dan 1024 pixels, gebruik dan een font-grootte van minimum 16 pixels.

Een ander probleem is de grootte van de beelden. Op websites worden bijvoorbeeld 3 thumbnails getoond met een breedte van 341 pixels. watmoet er nu gebeuren als de schermbreedte minder is dan 1023 pixels ? Dan verwijnt 1 van de 3 buiten het scherm en nemen de twee eerste beelden telkens de helft in van het beeldscherm. Het zou dus beter zijn om vanaf 768 pixels de foto’s in volle breedte te tonen omdat dit duidelijker is voor de gebruiker.

Een laatste type van problemen, betreft de menu. Vaak zie je dat de menu’s pietluttig klein zijn geworden op mobiele apparaten. Beste is dus om een menu-structuur en ontwerp te maken die specifiek op maat is van kleinere apparaten.

De meeste wordpress thema’s voorzien dit standaard in de lay-out van de pagina’s maar de iets oudere thema’s niet.  In dat geval blijft er niets anders over dan een op maat gemaakt menu aan te maken en te integreren in je website. Meestal wordt een drop down menu getoond die verticaal scrolt, in tegenstelling tot menu’s voor een breder scherm waar eerder horizontaal gewerkt wordt.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on email
Email
Share on print
Print
Andere WordPress berichten

Google adwords : 10 praktische tips [update 2020]

De digitalisering van onze maatschappij gaat sneller dan ooit. Daar zit een pandemie voor iets tussen, maar het is ook een natuurlijke evolutie. Aankopen gebeuren hoe langer hoe meer online, van alle mogelijke producten. En uiteraard wil jij daar een graantje van meepikken. Dus heb je een website en/of een webshop laten maken. En nu?

adsense a/b testing

De bedoeling van adsense a/b testing is om varianten van advertentie-settings met mekaar te vergelijken en de efficiency van beide gevallen met mekaar te vergelijken : de performantie en CTR, het gebruik van kleuren enz.

WordPress SEO : de beste WordPress plugins

Wie vandaag een website in WordPress website bouwt, kan niet zonder WordPress SEO optimalisatie: je website zal geoptimaliseerd moeten zijn voor de zoekmachine van Google anders word je gewoonweg nooit gevonden. Het SEO algoritme wordt door de firma Google regelmatig aan grote wijzigingen onderworpen. Ook bij Google zijn er steeds andere en vernieuwde inzichten. Deze inzichten worden vervolgens doorgevoerd in het befaamde algoritme.

De Missing Link in SEA : Google Store Visits

Zou het niet fijn zijn te weten welk percentage van je bezoekers in je winkel gekomen zijn ow wille van een bepaalde online advertentie-campagne die je opgezet hebt ?

Door de site te blijven gebruiken, ga je akkoord met het gebruik van cookies. meer informatie

Deze site is standaard ingesteld op 'cookies toestaan", om je de beste mogelijke blader ervaring te geven. Als je deze site blijft gebruiken zonder je cookie instellingen te wijzigen, of als je klikt op "Accepteren" hieronder, dan geef je toestemming voor het gebruik van Cookies.

Sluiten