Herinnert u zich het internet rond 1997? Pagina’s zijn ontworpen voor CRT-monitoren met lage resolutie en langzame modems. Tekst beheerste het web, en af en toe versierden JPEG- en GIF-afbeeldingen hier en daar pagina’s. Meestal zagen we ze niet, omdat het uitschakelen van afbeeldingen een zekere manier was om wat extra snelheid uit een inbelmodem te halen. Ruim tien jaar later is het hele internetlandschap veranderd. Breedbandinternet via kabel en DSL-verbindingen is de standaard in de ontwikkelde wereld, en webpagina’s kunnen complexere elementen gebruiken – massa’s afbeeldingen, transparantie-effecten en zelfs video – om inhoud te leveren. We kunnen zelfs hele films van internet naar onze computers streamen zonder te wachten tot de bestanden zijn gedownload!
Hoe groot de verschuiving naar monitoren met hogere resolutie, breedbandsnelheden en fraaie grafische opties ook is geweest, een tweede trend heeft een grote impact gehad op het World Wide Web zoals het nu bestaat. Naarmate de telefoontechnologie geavanceerder en goedkoper is geworden, zijn smartphones een integraal onderdeel van de internetervaring geworden. Mobiele apparaten vormen een belangrijke toegangspoort tot het internet voor miljoenen en miljoenen gebruikers die geen pc bezitten. In India is het gebruik van de populaire webbrowser Opera Mini tussen maart 2010 en maart 2011 bijvoorbeeld met 300 procent toegenomen. In veel delen van de wereld bevindt het venster op internet zich niet op een 23-inch monitor. Het staat op een 3-inch telefoonscherm. Zelfs goedkope ‘domme’ telefoons zonder touchscreen of krachtige hardware kunnen op internet surfen.
Voer de mobiele website in. Omdat de populariteit van mobiel internetgebruik hand in hand is gegaan met snelle internetdiensten en krachtigere computerhardware, staan ontwikkelaars van online-inhoud voor een unieke uitdaging. Websites die zijn ontworpen voor grote monitoren, snelle computers en snel internet leunen zwaar op grafische afbeeldingen en geavanceerde programmering die niet altijd werken op de kleinere schermen en langzamere netwerken van mobiele apparaten. De oplossing ligt in mobiele websites: pagina’s die specifiek zijn afgestemd op het werken op kleinere apparaten en die belangrijke inhoud leveren, terwijl de grafische weergave die het laden van pagina’s vertraagt, wordt verminderd. Hoewel mobiele websites opzettelijk eenvoudiger zijn dan volledige sites, betekent dit niet dat ze eenvoudig te bouwen zijn. Mobiele websites vereisen nog steeds aandacht voor ontwerp en technologie, en de strikte beperkingen van mobiele hardware maken de zaken er niet eenvoudiger op.
Waarom mobiele websites speciale ontwerpoverwegingen nodig hebben
De sprong van een desktopbrowser naar een mobiele browser gaat niet alleen over het verkleinen van het scherm. Het gaat erom het geluid weg te halen. Wanneer u een mobiele website ontwerpt, maakt u de zaken niet alleen kleiner. Je denkt opnieuw na over wat belangrijk is.
Desktopgebruikers verwachten visuele flair. Ze hebben de bandbreedte en het aantal pixels om dit aan te kunnen. Mobiele gebruikers? Niet zo veel. Een gebruiker met een 3G-verbinding in een landelijk gebied wacht niet tot een heldenafbeelding is geladen. Ze willen de tekst. Ze willen de gegevens. Als je een desktopervaring op een mobiel apparaat forceert, ben je niet innovatief. Je bent een obstakel.
Dit creëert een specifiek probleem voor ontwikkelaars. Hoe breng je de behoefte aan rijke inhoud in evenwicht met de realiteit van beperkte middelen?
De belangrijkste beperkingen van mobiel webontwerp:
- Schermruimte is schaars. Een 3-inch scherm kan niet dezelfde indeling weergeven als een 23-inch monitor. Navigatie moet intuïtief zijn en niet uitgebreid.
- De kracht van de hardware varieert enorm. Hoewel smartphones krachtiger zijn geworden, bestaan er nog steeds basistelefoons. Code die soepel op een iPhone werkt, kan verstikken op een Android-apparaat op instapniveau of op een featurephone.
- Netwerkinstabiliteit is de norm, niet de uitzondering. In tegenstelling tot de stabiele breedbandverbinding thuis fluctueren mobiele netwerken. Zware assets doden de laadtijden.
Het is een koorddansen. Je hebt te veel geknipt en de site ziet er kapot uit. Je houdt te veel, en het laadt alsof het weer 1998 is.
“Mobiele websites zijn opzettelijk eenvoudiger dan volledige sites, maar dat betekent niet dat ze gemakkelijk te bouwen zijn.”
Het gaat niet om
Schermvastgoed dicteert het ontwerp
Het komt neer op vierkante centimeters. Of beter gezegd: het gebrek daaraan.
Zelfs de grootste smartphoneschermen (diagonaal groter dan 10,2 cm) zien eruit als postzegels naast een desktopmonitor. Resolutiecijfers kunnen stijgen, maar de natuurkunde liegt niet. Een hoog aantal pixels op een klein scherm kan nog steeds geen volledige website leesbaar weergeven. Uiteindelijk moet je knijpen om in te zoomen en vecht je tegen lay-outs met meerdere kolommen die van navigatie een spelletje mep-een-mol maken.
Bij goed mobiel webdesign gaat het niet om het verkleinen van een desktopsite. Het gaat erom opnieuw te beginnen met lay-outs met één kolom.
Dat betekent dat alles in één verticale stroom wordt gecondenseerd. U herschikt navigatielinks. Je haalt decoratieve rommel weg. U vernauwt de primaire kolom zodat deze past bij de werkelijke breedte van de telefoon. De meeste monitoren zijn brede rechthoeken. Telefoons? Het zijn hoge stroken. Natuurlijk kun je het apparaat naar de liggende modus draaien, maar de standaardervaring is portret. Ontwerp eerst voor de smalle strook.
Dan is er het probleem met de invoermethode.
Desktopbrowsers zijn afhankelijk van de muis. Beweeg de muis over een menu en er verschijnt een vervolgkeuzelijst. Probeer dat eens met een duim. Het werkt niet. Mobiel webontwerp vereist een heroverweging van deze ‘mouseover-statussen’. Menu’s moeten worden aangetikt, niet zwevend. Knoppen moeten groot genoeg zijn voor een vinger, niet voor een precieze cursor. Als uw site afhankelijk is van hover-effecten, is deze op mobiel al kapot.
De nachtmerrie van apparaatfragmentatie
Bouwen voor de desktop is al moeilijk genoeg. Je hebt Internet Explorer die aanvallen gooit, Firefox doet zijn ding en Chrome eet al het RAM-geheugen op. Maar mobiel? Het is een heel ander beest.
De hardwarevariatie is verbluffend. Aan de ene kant heb je ‘domme’ telefoons met kleine schermen met een lage resolutie en standaardbrowsers. Aan de andere kant heb je smartphones met scherpe touchscreens met hoge resolutie en krachtige processors.
Eén maat past niet allemaal. Soms heb je aparte interfaces nodig.
Kijk op Facebook. Het biedt niet alleen dezelfde HTML voor iedereen. Het detecteert welk apparaat u gebruikt. Als u een iPhone of Android gebruikt, krijgt u een op maat gemaakte ervaring die is geoptimaliseerd voor dat specifieke scherm en de specifieke browsermogelijkheden. Als u een featurephone gebruikt, krijgt u een lichtere versie.
Eén mobiele site is niet genoeg. Je moet ontwerpen voor het apparaat, niet alleen voor de browser.
Deze detectielogica vormt de brug tussen de gebruiker en de juiste interface. Het is de technologie die het ontwerp mogelijk maakt.
Slimmer, niet eenvoudiger
Het vereenvoudigen van de interface betekent niet dat de ervaring wordt verdoezeld. Mobiel kan zelfs krachtiger zijn dan desktop voor specifieke taken.
Smartphones hebben hardware die pc’s niet hebben. Camera’s. GPS. Versnellingsmeters.
QR-codes zijn een perfect voorbeeld. Richt uw camera op een code en hij lanceert onmiddellijk een website of downloadt een app. Geen typende URL’s. Geen zoeken. Gewoon scannen en gaan.
Kaarten koppelen aan GPS-gegevens om u realtime routebeschrijvingen of restaurantaanbevelingen te geven op basis van uw exacte locatie. Dit is niet alleen ‘een kleinere website’. Het is een ander hulpprogramma.
Voor het creëren van een efficiënte mobiele site is slim gebruik van deze backend-technologie nodig. Het gaat niet alleen om CSS en HTML. Het gaat erom het apparaat zelf te benutten. Design en technologie zijn twee kanten van dezelfde medaille. Je kunt het één niet hebben zonder het ander.
Laten we eens nader bekijken hoe die detectie plaatsvindt. Hoe weet Facebook dat je een iPhone gebruikt en niet een oude Nokia?
Ten dienste van de mobiele ervaring: detectie, subdomeinen en gebruikerskeuze
Je ziet de strakke lijnen en leesbare tekst. Het ziet er eenvoudig uit. Onder de motorkap is het een puinhoop van slimme techniek. Modern webdesign is afhankelijk van Cascading Style Sheets of CSS. Deze code dicteert lettertypen, kleuren, marges en paginabreedte. De inhoud bevindt zich in een database of HTML-bestanden. CSS bepaalt hoe die inhoud eruit ziet.
Elke eerder genoemde ontwerpaanpassing gebeurt hier. Om een mobiele site snel te maken, ruilt u een zware achtergrondafbeelding in voor een effen kleur. Dit bespaart bandbreedte. Het zorgt ervoor dat de pagina sneller laadt.
Het bouwen van de site is stap één. Mensen ertoe aanzetten het te gebruiken is stap twee. Er bestaat niet één juiste manier om een mobiele site op te leveren. Er zijn verschillende opties.
De eenvoudigste methode is een link. Je zet het op de volledige site. Er staat ‘Bekijk mobiele site’. Vaak gebruiken ontwikkelaars een subdomein zoals m.website.com. Dit is gemakkelijk te ontleden. Website.com gaat naar de desktopversie. m.website.com gaat naar de mobiele versie. Sommige sites gebruiken i.website.com vanwege de iPhone. De code werkt op dezelfde manier.
Sommige gebruikers moeten m.website.com handmatig typen. De meeste sites automatiseren dit proces.
Hoe mobiele websites uw apparaat detecteren
Andere technieken zijn complexer. Veel sites detecteren uw apparaattype automatisch. Zij beslissen welk CSS-bestand moet worden weergegeven op basis van uw hardware.
Dit gebeurt door het apparaat te bevragen. De server controleert identificerende factoren zoals de schermbreedte in pixels. Het leest de user-agentstring. Deze string geeft aan welke browser de pagina laadt.
Mediaquery’s zijn regels CSS-code. Ze verwijzen naar de tekenreeks van de user-agent. Ze kiezen specifieke identificerende factoren. Als de user-agent zich identificeert als een mobiele browser met een smal scherm, laadt de server de mobiele pagina.
Deze methode heeft gebreken. In sommige browsers kunt u de user-agent spoofen. Nieuwe browsers geven voortdurend nieuwe strings vrij. Servers sturen doorgaans de juiste site naar het juiste apparaat. Maar het is niet perfect.
Dit identificatiesysteem sluit aan op een andere optie. Geef de gebruiker een keuze. Navigeer naar IMDB.com op een telefoon. Het laadt de mobiele site automatisch. U wordt ook gevraagd een mobiele app te downloaden. De app biedt meer functies.
Voor- en nadelen van mobiele browsers
Mobiele sites werken doorgaans beter dan volledige sites op smartphones. Ze zijn op maat gemaakt voor kleine schermen. ‘One size fits all’ werkt zelden.
Maar ‘beter’ is relatief. Mobiele sites bieden een beperkte ervaring. Ze houden rekening met apparaatbeperkingen. Navigatie verdwijnt vaak. Er is niet genoeg schermruimte om menu’s altijd zichtbaar te houden.
Interactie met een site is het moeilijkste onderdeel van mobiel browsen. Het scrollen door een invoerformulier kost tijd. Velden selecteren is vervelend. Typen op een telefoon gaat langzamer dan op een computer. Aanraakschermen en softwaretoetsenborden maken dit nog erger.
Telefoonbrowsers kunnen cookies opslaan. Ze onthouden wachtwoorden zoals desktopbrowsers dat doen. Dit helpt. Browsers met desktop-equivalenten zoals Firefox voor Android en Opera Mobile kunnen gegevens synchroniseren. U draagt uw opgeslagen gegevens over van uw computer. Dit vereenvoudigt het browsen op beide platforms.
Telefoons hebben ook trucjes. Knijpen om te zoomen vergroot de tekst. Met tikken om te zoomen wordt een alinea aangepast aan de schermbreedte.
Waarom Flash-video mislukt op mobiele apparaten
Flash-video is onderdeel van elke discussie over mobiel browsen. Het vergt veel van processors. Het verkort de levensduur van de batterij. Het is door de jaren heen verbeterd. Het werkt op veel apparaten.
Het werkt op geen enkel Apple-apparaat.
Apple blokkeert Flash-video op iOS. Ze ondersteunen in plaats daarvan HTML5-video. YouTube gebruikt HTML5-video. Veel andere sites doen dat ook.
U kunt Flash-video’s insluiten in mobiele webpagina’s. Het druist in tegen de principes van mobiel ontwerp. Eenvoud is de grootste kracht van mobiele sites. Ze laden snel omdat ze tekst en kleine afbeeldingen gebruiken. Flash verbreekt dit.
Door Flash op uw site te plaatsen, worden iPhone-gebruikers beperkt. Ze kunnen geen interactie hebben met de pagina. Je verliest een groot deel van je publiek.
Mobiel winkelen: is het eigenlijk veiliger dan desktop?
Hier is een draai. Uw telefoon is wellicht de veiligere plek om uw creditcard neer te leggen.
De meeste webvirussen richten zich op Windows. Ze draaien niet op iOS of Android. U bent in wezen onzichtbaar voor een groot deel van de malware, simpelweg omdat u niet op een pc zit. Moderne telefoons ondersteunen HTTPS- en SSL-codering, net als uw laptop.
Maar wees niet eigenwijs.
Je moet nog steeds de URL-balk bekijken. Zoek naar het slotpictogram. Blijf bij gerenommeerde sites. Als een site er op een desktop vaag uitziet, ziet deze er op een telefoon ook schetsmatig uit. Gewoon kleiner. Het dreigingslandschap verandert, maar het principe blijft bestaan. Voorzichtig is beter dan sorry.
Ontwerp van mobiele pagina’s uitgelegd
Wat is eigenlijk een mobiel pagina-ontwerp?
Het is niet zomaar een verkleinde website. Het is een specifieke optimalisatie voor touchscreens en smalle viewports. Denk kleiner. Eenvoudiger. Geen rommel.
Desktopsites zijn afhankelijk van muisbewegingen en nauwkeurige klikken. Mobiel is afhankelijk van duimen. Dat verandert alles. Knoppen worden groter. Menu’s worden verborgen. Inhoud krijgt prioriteit. Als je een dikke alinea op een 6-inch scherm probeert te lezen, vecht je tegen het apparaat. Een goed mobiel ontwerp stopt het gevecht voordat het begint.
Mobiele websites versus traditionele sites
Mensen verwarren deze termen voortdurend. Laten we ze scheiden.
Een standaard website is gebouwd voor desktops. Toetsenborden. Muizen. Grote monitoren. Er wordt van uitgegaan dat je over bandbreedte en geduld beschikt.
Er wordt een mobiele website gebouwd voor smartphones en tablets. Het verwijdert het vet. Functies die niet werken op touchscreens worden verwijderd. Afbeeldingen worden gecomprimeerd. Scripts worden lichter.
Het verschil is belangrijk.
Waarom? Omdat mobiele sites sneller laden. Ze gebruiken minder data. Dit is niet alleen een gemak voor Apple-gebruikers in Manhattan. Het is een noodzaak voor mensen in ontwikkelingslanden waar snel internet een luxe is en geen nutsvoorziening. Als uw site zwaar is, kunnen ze deze niet laden. Periode.
Waarom mobiel ontwerp belangrijk is
Het komt neer op wrijving.
Browsen op het bureaublad is efficiënt. Mobiel browsen is handig. Je hebt internet op zak. Maar typen op een glazen scherm is vervelend.
Een goed mobiel ontwerp zorgt ervoor dat die verveling verdwijnt. Het respecteert uw tijd. Het respecteert uw data-abonnement. Het respecteert het feit dat u waarschijnlijk loopt terwijl u het gebruikt.
Reclame werkt hier ook. Maar gigantische pop-ups? Nee. Deze worden sowieso door de meeste mobiele browsers verboden. Google AdSense voldoet aan de eisen. Klein. Niet opdringerig. Relevant.
Het mobiele internet is geen mindere versie van het desktopweb. Het is een ander dier. Behandel het zo.
