Het is geen verrassing dat een recent rapport van het VN-agentschap, de Internationale telecommunicatie-unie , voorspeld dat er meer mobiele abonnementen op de planeet zullen zijn dan mensen binnen de komende 9 maanden. De 'smartphonerevolutie' is zeker bij ons en als zodanig is mobiel webdesign de afgelopen jaren explosief gegroeid.
Dit betekende dat webontwikkelaars grip moesten krijgen op het ontwerp van mobiele sites, als ze willen concurreren en hun bedrijf toekomstbestendig willen maken. Met dit in gedachten heb ik een aantal toptips bedacht om ontwikkelaars een beginpunt te geven, waarbij ik enkele dingen in gedachten moet houden voordat ik verder ga.
Een snelle blik op hoe ver mobiele apparaten zijn gekomen sinds de introductie van de iPad zal bevestigen dat mobiele technologie een snel veranderende en steeds veranderende industrie is en daarom is het verstandig om te overwegen hoe je toekomstbestendig ontwerp kunt maken.
Dit betekent dat het bijhouden van de nieuwste trends van essentieel belang is om op de een of andere manier ervoor te zorgen dat de site over een paar jaar levensvatbaar is. Responsief ontwerpen is natuurlijk op dit moment al een rage en waarschijnlijk zal dit deel uitmaken van je plan.
Hoewel het veilig is om aan te nemen dat de meeste van uw bezoekers smartphones zullen hebben, is het de moeite waard om te overwegen dat niet iedereen het zal doen, dus misschien moet u dit in het ontwerp verwerken. Het is de moeite waard om de doelgroep in de planningsfase te onderzoeken, zodat u grip krijgt op de gangbare apparaten en het gedrag van de gebruiker.
Mobiele webbezoekers hebben niet altijd toegang tot websites terwijl ze onderweg zijn en dit is iets om in gedachten te houden. Mobiel browsen gebeurt vaak tijdens het wachten; in de trein, in de auto of zelfs op de bank thuis.
Dit betekent dat het ontwerp te snel naar beneden halen, zodat het te simplistisch is, contraproductief kan zijn. Als je een 'bare-bones'-site hebt met weinig inhoud, zou dit voor het publiek onaangenaam kunnen zijn, omdat je site niet echt nuttig is en als niets anders dan een te grote banneradvertentie kan worden beschouwd.
Mobiel tegenwoordig wordt net zoveel gebruikt als, misschien zelfs meer dan, de desktop voor surfen op het internet, dus houd hier rekening mee tijdens het ontwerpproces en zorg ervoor dat uw site eenvoudig te gebruiken is, maar toch inhoudrijk.
Het optimaliseren van mobiele websites is ook van vitaal belang, vooral voor bestemmingspagina's, omdat deze het toegangspunt tot de website zijn. Dit betekent dat een mobiele website moet worden geoptimaliseerd met de gebruiker in gedachten, evenals de zoekmachine, om een eenvoudige navigatie-ervaring, duidelijke tekst, eenvoudige formulieren met één klik en relevante meta-informatie en alt-tags te geven.
Bestandsgroottes moeten in termen van gewicht worden beschouwd en een sterke call-to-action moet worden opgenomen op bestemmingspagina's. Als u formulieren moet gebruiken, houd ze dan zo eenvoudig mogelijk, met zo weinig mogelijk invoervelden, zodat de gebruiker niet gefrustreerd raakt en weggaat.
Hetzelfde geldt voor acties; houd ze eenvoudig en gebruik ze alleen als dat nodig is. Hoewel het misschien leuk is om een chique navigatiesysteem te hebben, verwacht het als het onbruikbaar is een hoog bouncepercentage.
Waar knoppen moeten worden gebruikt, zorg ervoor dat ze de 'duimtest' passeren, wat betekent dat je comfortabel een knop moet indrukken met je duim, zonder andere inhoud te raken die je naar een ongewenste pagina zou kunnen leiden.
Optimalisatie is iets dat moet worden overwogen bij het bouwen van een responsieve website. Er is de laatste tijd veel discussie geweest over de vraag hoe responsief ontwerp het internet vertraagt en of het in essentie het verdwijnen van responsieve sites betekent. Er zijn echter voorwaardelijke laadtechnieken die een site kunnen versnellen om ervoor te zorgen dat apparaten niet automatisch de volledige desktopversie van de site downloaden.
CSS- en JavaScript-bronnen moeten worden gecomprimeerd en er is voldoende open-sourcesoftware beschikbaar om hierbij te helpen. Bijvoorbeeld, UglifyJS kan worden gebruikt met JavaScript om code en te comprimeren Kompas kan worden gebruikt om schonere opmaak te creëren, evenals sprites en extensies, zonder al te veel gedoe en hard werken.
Bij het gebruik van responsief ontwerp zijn een van de belangrijkste dingen om aan het begin te definiëren het raster en uw breekpunten. Nogmaals, er zijn er veel gereedschappen online die u kan helpen bij het definiëren van kolommen en hun breedte en dakgoten.
Sommige ontwikkelaars willen graag breekpunten instellen op basis van de resolutie, maar dit is niet echt de beste oplossing, omdat er zoveel mobiele apparaten op de markt zijn en de resoluties in de loop van de tijd veranderen.
Dit betekent dat breekpunten gebaseerd moeten zijn op ontwerp en inhoud, in plaats van op resolutie. Om breekpunten en grids te testen, kan het browservenster tijdens het ontwerpproject worden gebruikt om te zien hoe de inhoud zich gedraagt als het formaat wordt gewijzigd.
Idealiter zou het natuurlijk moeten vloeien en je kunt zoveel breekpunten gebruiken als je nodig hebt om dit te bereiken.
Niet alle mobiele OS zijn hetzelfde gemaakt, zoals u weet, dus het is de moeite waard om de richtlijnen te bekijken als het gaat om het bouwen voor bijvoorbeeld Android en iOS en de browsers die daarop kunnen worden gebruikt.
Houd er rekening mee dat gebruikers op verschillende besturingssystemen browsen en sommige oudere versies. Het is dus handig om ervoor te zorgen dat de mobiele website achterwaarts compatibel is. Hier is het handig om te kijken naar analyses voor de hoofdsite, indien van toepassing, omdat u kunt zien op welke apparaten uw doelgroep toegang tot de site heeft.
Uiteraard zal het analyseren van de site na voltooiing van de site u ook helpen om noodzakelijke wijzigingen aan te brengen en te leren voor de toekomst.
Zoals we allemaal weten, is content weer de baas van het web en is het plannen van contentmodules dus belangrijk. Het gedrag van inhoudsmodules moet worden gedefinieerd om ervoor te zorgen dat ze worden weergegeven zoals ze moeten wanneer de gebruiker navigeert en actie onderneemt.
Dit betekent dat u moet kijken en definiëren hoe inhoud wordt weergegeven bij het wisselen tussen een desktop en een mobiel scherm om te bepalen hoe de modules zichzelf gaan stapelen en ordenen.
In dit opzicht is het vaak eenvoudiger om dit vast te zetten in de planningsfase. Maak een schets van hoe u de weergave van inhoud voor ogen heeft en werk vervolgens uit hoe dit kan worden bereikt.
Probeer echter niet te vastgelopen te raken bij het definiëren van alles. Hoewel uw hoofdpagina's wireframes nodig hebben, hoeft dit niet noodzakelijkerwijs te volgen dat elke afzonderlijke pagina zal. Het creëren van een master-set voor schermafmetingen en -oriëntatie zou eigenlijk voldoende moeten zijn.
Bouw eerst een prototype en test grondig, waarbij u ervoor zorgt dat alle aspecten werken terwijl u verder gaat. Het is ook verstandig om de gebruiker goed in gedachten te houden tijdens het testen, zodat navigatie eenvoudig is en bij voorkeur maximaal drie lagen. Probeer iemand te vinden die niet technologisch ingesteld is, maar verschillende apparaten gebruikt om de site te testen.
Mobiel webdesign is een noodzakelijke uitdaging om als ontwerper grip te krijgen, om een complete service aan de klant te bieden. Zoals zoveel dingen in het leven, is een van de belangrijkste aspecten plannen, zodat je een duidelijk idee hebt hoe je verder kunt gaan.
Effectieve planning en het in gedachten houden van de gebruiker helpen u de meeste hindernissen te overwinnen die u waarschijnlijk zult tegenkomen, en grondige tests zullen de rest opnemen. Denk responsief, snel en eenvoudig, met uitstekende nuttige inhoud en je kunt niet ver verkeerd gaan.
Uitgelichte afbeelding / thumbnail, mobiel webbeeld via Shutterstock.