Hoe smartphonekanalen op websites in te schakelen

Het internetgebruik via mobiele apparaten is toegenomen sinds de lancering van de Apple iPhone. Vanwege de verschillende schermformaten van mobiele apparaten en hun touchscreeninterface verschijnen of functioneren websites niet op een mobiel apparaat op dezelfde manier als ze verschijnen of functioneren op een computerscherm. Om het aantal lezers te behouden, maakt u een smartphoneversie van uw website met behulp van cascading style sheets.

Beperkingen van het browsen op smartphones

Het browsen op smartphone verschilt op twee manieren van browsen op de computer. Ten eerste is de beschikbare schermgrootte op een smartphone veel kleiner dan op een computer, wat betekent dat sommige websites rommelig of in sommige gevallen onleesbaar lijken op een smartphone. Een smartphone-gebruiker moet naar beneden scrollen of inzoomen op een website die is geoptimaliseerd voor weergave op de computer. Ten tweede reageren smartphones op aanraakklikken in plaats van cursorbewegingen, en dus kunnen website-elementen die veranderen op basis van cursorbeweging problematisch zijn op een smartphone. Bijvoorbeeld, elementen die veranderen wanneer de cursor erboven zweeft, gedragen zich niet op de gewenste manier op een smartphone omdat zweven niets op een smartphone doet. Ook kunnen vervolgkeuzemenu's problematisch zijn voor sommige smartphonegebruikers.

CSS relatieve maten

Als u de grootte van bepaalde elementen op uw website wijzigt, hoeft u alleen het CSS-bestand voor uw site te wijzigen. Voor leesbaarheid van smartphones, wijzigt u uw CSS-dimensies en lettergroottes in relatieve eenheden in plaats van absolute eenheden. De breedte en hoogte van specifieke elementen moeten bijvoorbeeld worden gegeven in percentages in plaats van pixels. Hiermee worden elementen op grootte gesorteerd op basis van een percentage van het browservenster of bovenliggend element. Gebruik voor de lettergroottes ems in plaats van pixels. Eén em is gelijk aan de huidige lettergrootte in pixels. Daarom is twee ems twee keer de huidige lettergrootte, enzovoort. Deze wijzigingen moeten in een afzonderlijk CSS-bestand worden opgeslagen.

CSS-weergave-eigenschappen

Om een ​​element volledig van uw site te verbergen, voegt u de eigenschap "display: none" toe aan de CSS-stijl van dat element. De eigenschap "display: none" verbergt een element volledig zodat het geen ruimte inneemt in het venster. Gebruik dit op elementen zoals vervolgkeuzemenu's of afbeeldingen die te veel schermruimte in beslag nemen. Hierdoor kunnen de andere elementen van uw website in het venster worden ingedeeld alsof het verborgen element er nog nooit is geweest. Als u deze wijziging gebruikt, moet u ervoor zorgen dat belangrijke informatie van het verborgen element ergens anders op uw pagina zichtbaar is.

De browser omleiden

Wanneer een apparaat een website opent, leest het eerst het gedeelte van het HTML-document. U kunt een koppeling maken naar meerdere CSS-stijlpagina's in de sectie van een document. Als een mobiel apparaat uw website laadt, laadt de browser het stijlblad dat wordt aangeduid met het attribuut media = "handheld" in plaats van het standaard stylesheet. U kunt de browser ook omleiden naar verschillende stijlpagina's op basis van de schermgrootte. Dit kan handig zijn als u uw website anders wilt inrichten voor verschillende mobiele apparaten. Zie Bronnen voor een lijst met veelgebruikte dimensies van het smartphonescherm.

Alternatieve HTML

Als u de organisatie en lay-out van uw site drastisch wijzigt buiten een nieuw CSS-bestand, wilt u mogelijk een nieuw HTML-bestand maken met de gewenste wijzigingen. Als u een ander HTML-bestand maakt, moet u de browser omleiden naar het nieuwe HTML-bestand als de gebruiker de site op een smartphone bekijkt. Naast het detecteren van de mobiele browser, moet u het script aanpassen om door te verwijzen naar uw alternatieve HTML-pagina. Zie bronnen voor een koppeling naar scripts voor het detecteren van een mobiele browser.