Hoewel het aantal websites zonder mobiele optimalisatie afneemt, blijven er enkele die alleen voor desktop zijn ontworpen. Helaas is de vorige 'mobilizer'-webservice van Google stopgezet. De spirituele opvolger van de service is Google Weblight, ontworpen rond optimalisatie voor langzame verbindingen in plaats van sites te herzien voor mobiel kijken. Naast de service van Google zijn er een aantal praktijken en hulpmiddelen waarmee rekening moet worden gehouden bij het ontwikkelen van een site met mobiel in gedachten.
Stappen
Deel 1 van 2: Experimenteren met Google Weblight
Stap 1. Analyseer hoe Weblight werkt
Weblight is een algoritme dat door Google is gemaakt om gebruikers te voorzien van snellere en lichtere paginaladingen in slechte netwerkomstandigheden. Dit betekent dat Weblight geen gebruikersinterface heeft en op de backend werkt. Pagina's zijn ontdaan van hun complexere elementen, waardoor een uitgeklede, lichtgewicht ervaring wordt geboden, in plaats van een die expliciet is geoptimaliseerd voor het mobiele platform.
Stap 2. Test sitewijzigingen met Weblight
Voeg op uw mobiele apparaat eenvoudig uw volledige site-URL toe aan het einde van het weblight-adres (als uw website bijvoorbeeld "mywebsite.com" is, voert u https://googleweblight.com/?lite_url=https://mywebsite.com in). De pagina laadt een vereenvoudigde maar functionele versie van zichzelf. Met de verwijderde elementen kunnen sommige sites er veel beter uitzien op de schermen van mobiele apparaten.
Stap 3. Herken de beperkingen
Houd er rekening mee dat dit geen expliciete conversietool is die is ontworpen voor gebruikersinteractie. Hoewel het handmatig invoeren van de website in een mum van tijd kan worden gebruikt, is Weblight ontworpen voor snelheid, niet voor bruikbaarheid.
Deel 2 van 2: Ontwerpen voor mobiele compatibiliteit
Stap 1. Houd rekening met de beperkingen van mobiele apparaten
Mobiele apparaten delen een aantal aspecten die ze onderscheiden van hun desktop-tegenhangers. Deze kernfuncties moeten de belangrijkste overwegingen zijn bij het maken van een site voor mobiel gebruik.
- Kleine schermen en verticaliteit: hoewel de schermresoluties op mobiele apparaten voortdurend verbeteren, blijven de grootte en vormfactor een punt van zorg voor het ontwerp van de site. Het ontwerpen van een site in een lay-out met één kolom is het beste voor telefoons (tablets kunnen vaak desktopsites gebruiken zonder al te veel problemen).
- Aanraakinterfaces: pagina-elementen moeten worden geplaatst met de grootte van een vinger in gedachten. Elementen die mouseover gebruiken, moeten worden geminimaliseerd of opnieuw ontworpen voor aanraking (bijv. vervolgkeuzemenu's).
- Gegevenssnelheden: een van de grote voordelen van mobiele apparaten is het gebruik buiten het wifi-bereik, maar gegevensverbindingen zijn doorgaans langzamer en minder betrouwbaar. Gebruikersinterfaces (UI) moeten eenvoudig blijven en inhoud moet zichtbaar en toegankelijk zijn. Te veel rommel zal de laadtijden vertragen en navigatie bemoeilijken.
Stap 2. Gebruik een Content Management Systeem (CMS)-service
Voor degenen die met minder middelen ontwikkelen, is het gebruik van een CMS-service zoals Wordpress of Squarespace een geweldige optie voor goedkoop, gebruiksvriendelijk mobiel ontwerp. Thema's die gebruikmaken van responsief webontwerp, bieden de gemakkelijkste sjabloon voor een mobiele site.
Responsive webdesign is een theorie van webdesign die het gebruik van vloeiende ontwerpelementen promoot om soepele overgangen van ontwerp en bruikbaarheid op verschillende platforms mogelijk te maken
Stap 3. Test de schermen van mobiele apparaten met desktopsoftware
Er zijn een aantal gratis webapplicaties waarmee u mobiele apparaten kunt emuleren om de esthetiek en functionaliteit van de website te testen. Het gebruik van deze tools is net zo eenvoudig als het selecteren van het gewenste testapparaat en vervolgens naar de doelwebsite gaan om een voorbeeld te bekijken. De meeste zullen tools bevatten voor variabelen zoals schermoriëntatie, pixeldichtheid of zelfs browserselectie. Een paar populaire voorbeelden zijn:
- Emulator voor Chrome-apparaatmodus
- mobilephoneemulator.com
- screenfly (een subset van quirktools)
- mobiletest.me (betaald lidmaatschap)
