Mobiele viewports zooming plugins
Maxlead brengt deze maand verslag uit van de #MobileMadness Google hangouts; hoe optimaliseer je je website voor de mobiele bezoeker, zodat je beter voorbereid bent als vanaf 21 april mobielvriendelijk een rankingfactor wordt. Vandaag ging de hangoutsessie over de volgende mobiele topics: Viewports Zoomen Plugins
Hieronder vind je onze samenvatting. Als je de hangoutvideo zelf wilt bekijken kan dat uiteraard ook via deze link. Wel moeten we bekennen dat deze hangouts voor mobiel vooral gericht zijn op het type responsive website. Er is tot nu toe niet echt gesproken over een mobiele site op aparte URL’s of domeinnaam, of de dynamische variant. De reden die hier zeer waarschijnlijk achter ligt is dat Google zelf de voorkeur geeft aan responsive design.
Viewport & Zoomen
Omdat velen onder ons dagelijks gebruik maken van verschillende apparaten (zoals desktop, tablet, mobiel), is het belangrijk dat een webpagina voor elk van die apparaten goed meeschaalt; een browser moet kunnen begrijpen hoe de pagina geserveerd wordt als een gebruiker deze opent op een iPhone 4 of Samsun SII, in plaats van een desktop.
Zonder het instellen van de viewport wordt de pagina geschaald naar de desktopafmeting. In 9 van de 10 gevallen zul je dan moeten inzoomen op de content voor het beste resultaat. Zeker herkenbaar, heel irritant en vooral niet mobielvriendelijk.
Screenshot: links een website waarbij je nog moet inzoomen wil je iets kunnen lezen. Bij het rechter voorbeeld is dat niet meer nodig.
Wat kun je doen om de leesbaarheid te verbeteren.
Stap 1: Implementatie meta name=”viewport”
Om te voorkomen dat je je helemaal gek zoomt, adviseert Google de tag meta name=”viewport” te implementeren in de <head> van de broncode:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
De tag meta viewport geeft de browser instructies hoe de afmetingen en schaling van de pagina moeten worden aangepast op basis van de breedte van het apparaat.
Hoe check je of de tag is geïmplementeerd?
Heel simpel door met je muis in de tekstpagina te gaan staan (niet op een afbeelding), je rechter muisknop aan te klikken en vervolgens doorklikken in het menuutje op ‘view source’ of ‘paginabron weergeven’.
Vervolgens zoek je met ‘Ctrl F’ naar het woord ‘viewport’.
Screenshot van de broncode met de ‘viewport’ tag:
Stap 2: Maak je website passend voor elk apparaat
Hier is waar het verhaal wat technischer wordt tijdens de video hangout. We proberen in grote lijnen duidelijk te maken wat Google bedoelt en aanbeveelt. Je kunt ook de video bekijken vanaf minuut 6. Of laat het simpelweg over aan je webbouwer en doe de ‘mobielvriendelijk’ test na implementatie.
Nadat de viewport tag is geïnstalleerd wil dat niet betekenen dat je in de meeste gevallen ook klaar bent. Doordat het huidige design misschien alleen rekening houdt met desktop afmetingen (pixels) kan het zijn dat je als mobiele gebruiker horizontaal moet scrollen omdat de pagina’s te breed zijn voor mobiel.
Screenshot van een opmaakcode waar de pixels zijn benoemd in het CSS* (Cascading Style Sheets) voor een desktop apparaat en dus te breed voor een mobiel apparaat:
Test dus na implementatie van de viewport tag hoe de verschillende pagina’s in de site eruit zien op een mobiel apparaat. Zeer waarschijnlijk zullen er nog aanpassingen moeten worden gedaan. Er zijn 2 opties om pagina’s beter mee te laten schalen met het apparaat.
Optie 1: Percentages in plaats van pixels
Deze optie kan voor de webbouwer lastig zijn en meer werk met zich meebrengen, dus overleg of dit de beste keuze is. Zeer waarschijnlijk komt hij of zij zelf al met een oplossing. Pas de pixels aan naar percentages; werk met een (window) breedte van 100%. Voorbeeld: als je bij een afbeelding zowel links als rechts een marge wilt behouden van 10%, zet de afbeelding dan op 80% zodat deze automatisch meeschaalt met de breedte van het apparaat waar iemand op kijkt.
Screenshot waar in de stylesheet pixels is aangepast naar percentages:
Optie 2: CSS @media queries
Bij het gebruik van media queries in je CSS bestand kun je specifiek aangeven hoe de pagina er moet komen uit te zien op een mobiel apparaat. Zodra een browser dit detecteert worden de correcte afmetingen geserveerd voor het specifieke apparaat. Je kunt voor mobiel als je wilt zelfs een deel van het design aanpassen, zoals
- hoofdmenu verbergen in een hamburger menu
- achtergrond kleuren aanpassen
- andere icoontjes tonen
- afbeeldingen onder elkaar in plaats van naast elkaar
- in sommige gevallen geen afbeelding tonen
- elementen verplaatsen van links naar rechts
Kortom, via de @media queries kun je de site zo aanpassen dat het voor een mobiele gebruiker beter wordt de pagina te bekijken.
Screenshot waar gebruik wordt gemaakt van @media queries voor het mobiel serveren:
Meer informatie over media queries kun je onder andere vinden in de ‘Web Fundamentals’ van Google.
Plugins
Het laatste onderwerp is in zijn geheel niet onbelangrijk en moet zeker rekening mee gehouden worden. Websites maken (regelmatig) gebruik van plugins waardoor een browser bepaalde ‘webinhoud’ kan tonen. Echter, sommige plugins worden niet ondersteund door mobiele apparaten. We spreken hier bijvoorbeeld over Flash, Silverlight en Java. Dit kan als gevolg hebben dat er gaten vallen in een pagina. Of dat je een melding krijgt dat iets niet wordt ondersteund (zie voorbeeld hiernaast). Ook weer niet mobielvriendelijk.
Test dus altijd van tevoren of bepaalde elementen wel werken op een mobiel apparaat.
Een extra tip die onze spreker gaf, als je video’s toont aan mobiele gebruikers zorg dan minimaal dat je een caption en anders een transcript toevoegt zodat iemand kan lezen wat er op de video wordt getoond in het geval de internet verbinding traag is en de video vastloopt. Of puur omdat iemand de capaciteit niet heeft een video te beluisteren.
Test test test
Wij kunnen het niet vaak genoeg zeggen, maar test altijd alles van tevoren. Het resultaat kan er anders uitzien dan wat je had verwacht. Een foutje is zo gemaakt waardoor bijvoorbeeld de horizontale scrollbalk alsnog wordt getoond.
Uiteraard werden aan het eind van de sessie nog snel even de volgende mobiele tool en informatie bronnen gepromoot:
Sessie nummer 3 is volgende week donderdag 26 maart. Dan worden de onderwerpen ‘tap targets, margins en font sizes’ behandeld. Mis het niet of wacht onze samenvatting af die na afloop zal volgen.
*=CSS (Cascading Style Sheets) dit zijn webbestanden waarin de opmaak van pagina-elementen worden benoemd die vervolgens je pagina-opbouw verzorgen.
