Mobiele viewports zooming plugins

Blogs
Maxlead
Geschreven door Maxlead
Geschreven op: 19 maart 2015Bewerkt op: 3 juni 2024
Maxlead - online-marketing-blog-artikel

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.

Overige Blogs & Insights

Kennis
Maxlead - 6W9A8343_Abovo Maxlead klantendag 2024 kleiner formaat
Hoe organiseer je internationale marketing teams met aandacht voor zowel schaalbaarheid als lokale relevantie?
Blog
Maxlead
Maxlead
Maxlead - WhatsApp Image 2024-11-07 at 09.51.35_3b5e936c
MeasureCamp Bratislava: 150 vakidoten bij elkaar
Blog
Maxlead
Maxlead
Maxlead - 6W9A3131.jpg
De gamechanger voor B2B succes – Meld je aan
Blog
Maxlead
Maxlead
Maxlead - pexels-wdnet-106344
Alles wat je moet weten over de meetproblemen in Google Analytics
Blog
Maxlead
Maxlead
Maxlead - AB-6W9A7726_Abovo Maxlead klantendag 2024
Abovo Maxlead viert 25-jarig jubileum
Blog
Maxlead
Maxlead
Maxlead - view-man-handling-money-funds-wealth-prosperity
Attributie: pas op, reken jezelf niet rijk!
Performance Marketing
Blog
Maxlead
Maxlead
Maxlead - Google_Update_OGT_1200x627
Websites worden hard geraakt door Google Updates. Is er nog hoop?
SEO
Blog
Nina
Nina
Maxlead - uitgelicht-Behoud third party cookies
Van uitstel komt afstel: third-party cookies blijven in Chrome
SEA
Blog
Lois
Lois
Maxlead - NIMA-marketing
Nima Marketing Day: de kracht van een slecht idee
Performance Marketing
Blog
Martine
Martine
Nieuwsbrief
Ontvang het laatste nieuws uit de wereld van een dynamisch online marketingbureau.
We mailen je maximaal één keer per maand.

Kunnen wij je helpen?

ik wil graag