Webpagina's die zijn geoptimaliseerd voor gebruik op mobiele apparaten, verschillen van die op desktop- en laptopcomputers. Deze laatste zijn ontworpen voor grote schermen en nauwkeurig klikken met de muis, terwijl mobiele webpagina's geschikt zijn voor kleinere schermen en onnauwkeurig tikken met de vinger.
- Ontworpen voor kleinere schermen en onnauwkeurige vingertikken.
- Ontworpen voor grote schermen met nauwkeurig klikken met de muis.
Aangezien het merendeel van de websitebezoeken afkomstig is van mobiele apparaten, hebben siteontwerpers de taak om versies te leveren die werken met zowel mobiele apparaten als desktopcomputers. De meest gebruikelijke benadering is het gebruik van responsief webontwerp, dat automatisch de juiste versie levert op basis van het apparaat en de schermgrootte van de gebruiker, zoals gedetecteerd door de browser.
In ieder geval verschillen mobielvriendelijke webpagina's op een aantal manieren van desktopversies.
Pagina-ontwerp: mobiele schermen hebben minder ruimte
- Smartphone- en tabletschermen hebben een diagonaal van 4 tot 10 inch.
-
Inklapbare of uitvouwbare menuwidgets vervangen zijbalken en omvangrijke kopmenu's.
- Grafiek over de volledige breedte met gerechtelijk gebruik van ruimte tussen tekst.
- De meeste desktopmonitoren meten diagonaal 19 inch tot 24 inch.
- Gesponsorde links en grote banneradvertenties komen vaker voor.
- Dichtere tekst met meer ruimte voor afbeeldingen.
Het meest voor de hand liggende verschil tussen desktop- en mobiele webpagina's is de schermruimte. Hoewel de meeste desktopmonitoren diagonaal minstens 19 inch tot 24 inch meten, zijn tablets meestal rond de 10 inch. Smartphones zijn ongeveer 4 inch diagonaal. Door simpelweg uit te zoomen wordt een webpagina niet succesvol geconverteerd naar een mobielvriendelijke versie omdat het de tekst onleesbaar maakt en een extra stap vereist van de sitebezoeker. Nauwkeurig tikken op kleine elementen wordt ook onmogelijk.
Om het probleem op te lossen, kunnen ontwerpers zijbalken en afbeeldingen verwijderen die niet strikt noodzakelijk zijn. In plaats daarvan gebruiken ze kleinere afbeeldingen, vergroten ze de lettergrootte en vouwen ze inhoud samen in uitbreidbare widgets. Deze beperking van onroerend goed heeft geleid tot een heel ander soort denken bij webontwerpers.
Ook inklapbare of uitbreidbare menuwidgets vervangen doorgaans zijbalken en omvangrijke kopmenu's. In hun streven om elke millimeter schermruimte te laten tellen, verwijderen ontwerpers overtollige witruimte, terwijl ze de leesbaarheid nauwlettend in de gaten houden.
Een massa gesponsorde links en grote banneradvertenties werken gewoon niet op een telefoon of kleine tablet. In plaats daarvan komen kleine pop-upadvertenties vaker voor op mobiele webpagina's.
Lay-outs met tekst rond een afbeelding spelen niet goed op mobiele apparaten. In plaats daarvan geven ontwerpers die afbeeldingen vaak de volledige breedte van het scherm en voeren ze de tekst eronder of boven uit. Evenzo verdeelt een goed webontwerp tekst in stukken voor de leesbaarheid; niemand wil stevige tekstmuren lezen. Dit wordt nog belangrijker op kleine schermen. Het oordeelkundig gebruiken van witruimte is cruciaal.
Paginabesturing: desktopprecisie versus mobiele blobs
-
Grote tikgebieden of hotspots voor nauwkeurigere navigatie.
- Andere URL: voegt de letter "m" toe. Vaak een optie om de desktopversie van een site te bekijken.
- Inloggegevens hebben vaak speciale ruimte, soms met toegankelijkheid voor vingerafdrukken.
- Nauwkeuriger op cursor gebaseerde links en knop.
In tegenstelling tot een precieze muisaanwijzer op uw bureaublad, is de menselijke vinger een klodder, en tikken vereist grote doelen op het scherm voor hyperlinks. Mobielvriendelijke sites bieden grote tikgebieden (of hotspots) om nauwkeurige navigatie te vergemakkelijken.
Mobielvriendelijke webpagina's bevatten vaak ook de letter m in hun adressen; het mobiele adres van Facebook is bijvoorbeeld m.facebook.com. De mobiele URL wordt meestal automatisch voor je gekozen wanneer je surft met een mobiele tablet of smartphone. In sommige gevallen zie je een tikbare link waarmee je kunt overschakelen naar de normale desktopversie van de pagina.
Inlog- en wachtwoordvelden die bedoeld zijn voor desktops en laptops worden klein en onbruikbaar op een telefoon, dus webuitgevers maken deze groter en geven ze soms hun eigen pagina's voor gebruiksgemak. Inloggen met een vingerafdruk of een ander account, zoals Google of Facebook, wordt steeds gebruikelijker naarmate de apparaat- en servicemogelijkheden evolueren.
Waarom maakt het uit?
Mobiele webpagina's zijn ontworpen voor draagbare apparaten en verschillen behoorlijk van pagina's die zijn gemaakt voor lezen op een desktop. Hoewel u meestal de desktopversie van een webpagina op een mobiel apparaat kunt bekijken en vice versa, zijn ze anders ontworpen om de inhoud gemakkelijker te kunnen bekijken, lezen en navigeren.
