Een website converteren naar een mobiele browser
Mobiele apparaten, zoals smartphones en tablets, zijn goed voor meer dan de helft van al het internetverkeer. Maar volgens onderzoek van BrightEdge in 2014 is meer dan een kwart van de websites die mensen bezoeken niet goed geconfigureerd voor deze apparaten, wat hen gemiddeld 68 procent aan verkeer kost. Het goed aanpassen van uw eigen website voor mobiele browsers vereist planning en testen. De codering zelf is echter meestal niet erg uitdagend, vooral als je al bekend bent met CSS. Als je een platform als WordPress gebruikt, hoef je helemaal geen code te kennen.
Gemeenschappelijke platforms
Sinds de komst van de iPhone hebben ontwikkelaars achter websiteplatforms zoals WordPress, Joomla en Drupal mobiel ontwerp geïntegreerd. Drupal wordt bijvoorbeeld geleverd met mobielvriendelijke thema's in de oorspronkelijke installatie. Elk van deze platforms heeft mobiele thema's die zijn ontworpen om in werking te treden zodra uw website detecteert dat deze wordt geopend door een mobiele browser. Andere thema's zijn al mobielvriendelijk en reageren op aanraakbewegingen net zoals ze reageren op muisklikken, zonder het ontwerp of de lay-out van uw website op verschillende apparaten aanzienlijk te veranderen.
CSS en HTML gebruiken
Gebruik voor HTML-websites een trapsgewijze stylesheet of CSS-bestand om de mobiele versie van uw pagina's weer te geven wanneer ze worden geopend door een mobiele browser. Hoewel het mogelijk is om CSS te coderen om specifieke apparaten te detecteren, is een meer gebruikelijke benadering het specificeren van lay-outs op basis van schermgrootte in pixels. Indien gewenst kunt u één stijl hebben voor grote schermen, één voor tablets en één voor mobiele telefoons. Het gebruik van CSS heeft als bijkomend voordeel dat u de code slechts één keer hoeft te schrijven - in het CSS-bestand. Elk van uw pagina's heeft dan slechts een enkele regel code nodig om de stijlen uit CSS te halen.
Interactieve functies aanraakscherm
Als u een webpagina hebt geconfigureerd als een interactieve ervaring voor bezoekers die JavaScript of HTML5 gebruiken, is het van vitaal belang dat u weet hoe uw website zal reageren op aanraakgebeurtenissen, niet alleen in een mobiele browser, maar ook op een groeiend aantal desktops met aanraakschermen . In de meeste gevallen kunt u overwegen om aanraakgebeurtenissen en gebaren toe te voegen aan uw ontwerpcode. In JQuery is bijvoorbeeld het equivalent van een muisklik op een aanraakscherm een tikgebeurtenis, die wordt geactiveerd wanneer een gebruiker het scherm aanraakt en vervolgens van het scherm haalt. Afhankelijk van je pagina, wil je misschien ook de standaardinstellingen van de mobiele browser uitschakelen, zoals knijpen om in te zoomen of slepen om te scrollen, door gebruik te maken van "preventDefault"-gebeurtenissen.
Testen en verifiëren
De beste manier om uw nieuwe mobiele website te testen, is door uw eigen mobiele apparaat te gebruiken. Onderzoek de stijl en pagina-indeling, navigeer met aanrakingen en gebaren en bekijk uw afbeeldingen nauwkeurig om er zeker van te zijn dat ze er scherp uitzien. U kunt ook de webbrowser van uw computer gebruiken om een mobiel beeldscherm te emuleren. Druk in Google Chrome bijvoorbeeld op "F12" om de Developer's Console te openen. Klik op het pictogram "Instellingen" en klik vervolgens op het tabblad "Emulatie" om een apparaat zoals een Google Nexus of Apple iPad te selecteren.
