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.
