» direct naar zoek en menu

Tijdschrift voor webwerkers » Artikel #107

Mobiel internet - 7 stappen naar een betere site

Met de stijgende populariteit van mobiele telefoons die geschikt zijn voor internet, wordt het steeds belangrijker om webpagina’s ook geschikt te maken voor telefoons en PDA’s. Steeds meer mensen willen op de hoogte blijven, ook als ze onderweg zijn.

mobile image

Toen ik mijn spiksplinternieuwe Sony Ericsson K700i kreeg, was ik de eerste twee dagen alleen maar bezig met het op afstand bedienen van mijn Macs met behulp van Bluetooth. Later, toen ik de meegeleverde WAP 2.0 browser opstartte, viel me op hoe navigeerbaar en goed opgezet de website van de BBC was, en realiseerde ik me hoe waardevol een dergelijke website is als je hem wilt bekijken op een mobieltje.

Daarom hier mijn zeven tips voor beter mobiel internetten. Voordat we beginnen moet ik alvast vermelden dat de technologie nog niet gestandaardiseerd is, en wat op het ene apparaat werkt hoeft nog niet te werken op het andere. Aan het einde van het artikel vertel ik hier nog wat meer over.

1. Serveer een toepasselijk stylesheet op elke pagina

De browser in de telefoon zal zijn best doen om gebruik te maken van je ‘main’ stylesheet. Als je een handheld stylesheet maakt zou het apparaat deze moeten gebruiken. Gebruik het link element, aangezien sommige handhelds @import of @media niet begrijpen. Sommige moderne telefoons gebruiken zowel screen-stijlen als handheld-stijlen, anderen negeren beiden.

<link rel="stylesheet" media="screen" type=
"text/css" href="weblog_css" />
<link rel="stylesheet" media="handheld" type=
"text/css" href="mobile_css" />

Mooi. Nu kun je een nieuw stylesheet maken om mee aan de slag te gaan. Ik begon met mijn standaard-stijlen hierin te plaatsen, en dan te selecteren welke CSS ik nodig heb en welke stukken ik weg moet halen omdat ze niets toevoegen of zelfs tot ellende leiden.

2. Properties van de body definiëren

Het duurde even voor ik doorhad dat ‘widths’ en ‘margins’ een slechte ervaring opleveren bij een handheld. Als een scherm maar 176 pixels breed is, heb je niks aan een marge van 10px om je content. Stel direct je marges en padding in op 0. Het heeft niet zo veel zin om fonts in te stellen, maar kleur en achtergrond zijn belangrijk hier.

body {margin:0;padding:0;color:#333;background:#FFF;}

3. Maak een plaatje voor een header

Wat? Op een mobieltje?! Ja. Kijk maar eens naar de site van de BBC op je mobiel en zie hoe perfect de header er uitziet. Dit is de enige grafische versiering die ik je zeker aanraad, omdat het een herkenbare welkomstboodschap geeft aan de bezoeker en de downloadtijd niet negatief lijkt te beïnvloeden, noch te veel schermruimte inneemt. Mijn header is 176px breed bij 20 hoog, bevat mijn favicon en de naam van de site. Simpel. Op het scherm van de telefoon ziet het plaatje er trouwens kleiner uit dan het is.

mobile header

Het zou goed kunnen dat je het bestaande header-plaatje uit moet zetten, door het in een display:none class te zetten die niet in je mobiele stylesheet is opgenomen. Zet op de zelfde manier de code van je header voor de mobiele site in een display:none stijl die je niet gebruikt in je default.css.

In mijn homepage worden de twee headers dus als volgt getoond, ingepakt in twee verschillende “hide” classes:

<div class="hide"><img src="/images/mobile.jpg" alt=
"masthead" /></div>
<div class="hideme"><img src="/images/laptop.jpg" alt=
"masthead" title="masthead" /></div>

4. Voeg ‘skip anchors’ toe

Eerlijk waar, zelfs als je ze normaal niet gebruikt (en dat zou je toch eigenlijk echt moeten doen), dan zijn “skip to content” en “back to top” anchor links van levensbelang wanneer je een mobiel apparaat gebruikt. Ik zal je maar niet vertellen hoe langzaam de scroll-functie is op de K700i. Laten we het er maar op houden dat het leven daar te kort voor is. Hier geef ik de bezoeker de mogelijkheid om direct te springen naar mijn blog id, zonder dat ze het menu van de site hoeven te doorlopen.

<span id="skiptocontent"><a href=
"#blog">Skip to content</a></span>

Je kunt meerdere “top” links gebruiken in de pagina, maar het principe is hetzelfde.

5. Verwijder onnodige stijling

Minder is hier absoluut meer. Loop al je normale styles door (die je misschien gekopieerd hebt naar je mobiele stylesheet) en haal alles weg wat gevaarlijk kan zijn. Ik haalde bijvoorbeeld alle font properties weg, alle achtergrondplaatjes, alle styling op de links en een hele boel extra's die het mooier maakten, zoals borders en floats (want je gaat geen kolommen laten floaten op een scherm van 176px breed, nietwaar?), en ik haalde alle informatie over margins en padding weg uit alle stijlen. Verwijder ook de styling op alle lijstjes die deel uitmaken van de navigatie. Een kaal lijstje met een opsommingsteken ervoor is namelijk precies wat de bezoeker wil zien op een mobiel apparaat.

Eén ding waar ik wel aan vastgehouden heb op mijn site is de CSS die het uiterlijk van de reacties bepaalt. Commentaren die om-en-om een andere achtergrondkleur hebben maken het onderscheid met de hoofd-content mooi duidelijk op een klein scherm.

Ik heb ook alle verwijzingen naar ‘width’ uit de CSS gehaald. Laat die content maar naar de volgende regel springen zoals hij zelf wil. Op die manier is je site er beter op voorbereid om ook lekker te werken op PDAs, browsers op grotere telefoons, enzovoorts.

6. Beslis over je plaatjes

Gooi je plaatjes niet rücksichtslos je site uit. Je wilt waarschijnlijk de kop van de site laten zien. Gebruik in plaats daarvan CSS om te bepalen uit welke onderdelen je de plaatjes verwijdert. De meeste blogs hebben plaatjes van 300-400px breed in de entries, die wel laden in een telefoon, maar je zult er alleen de linkerkant van kunnen zien. Ik heb de plaatjes uit een aantal gedeeltes van de site weggehaald door middel van een CSS-oplossing als:

#blog img {display:none;}

Zo kan ik beslissen in welke ids of classes ik plaatjes wil gebruiken. Het is allemaal een kwestie van context. Als je iets schrijft over een plaatje in een artikel, dan ligt het voor de hand dat je het plaatje wél laat zien, ook al zie je maar een gedeelte. Gebruik gewoon je boerenverstand, en doe wat voor jou het beste werkt.

Je kunt ook het volgende proberen om de plaatjes te laten passen in het scherm:

img {max-width:165px;}

7. display:none is je vriend

Als laatste beslis je of je bepaalde content wilt laten zien aan de mobiele bezoeker. Het kan handig zijn om display:none in de id van je sidebar te gebruiken. Denk je maar eens in hoe ver je bezoeker moet scrollen als de inhoud van je sidebar onder je hoofd-content staat. Echt, dan wordt navigeren een hele toer. Je kunt er ook aan denken om de sidebar wel te houden, maar dan wel anchors toe te passen zodat je bezoekers er gemakkelijk naartoe en weer terug kunnen springen. Dit betekent natuurlijk wel dat je veranderingen in je markup moet aanbrengen, dus waarom toch niet die hele sidebar er uit gegooid?

Ten slotte

mobile imageWebsites laten zien op mobiele apparaten is een kwestie van compromissen sluiten. Tot de verbindingen sneller zijn en alle bezoekers de zelfde browser en schermgrootte hebben en CSS en andere markup beter ondersteund worden, zullen we offers moeten brengen.

Neem je webpagina's zoals ze getoond worden op een computer onder de loep. Denk na over welke onderdelen belangrijk voor je zijn, en zoek die gedeeltes uit waarvan het je het meest waarschijnlijk lijkt dat je ze wilt kunnen zien terwijl je in de trein zit, in de kroeg hangt, of aan het skiën bent. Grote kans dan de mening van een andere bezoeker grotendeels overeenkomt met die van jou. Wees medogenloos en kieper de onbelangrijke zaken er uit. Laat de meest recente posts zien, de reacties, een archief-lijst en korte achtergrondinformatie. Het kan heel bevrijdend werken om je reacties in de gaten te kunnen houden terwijl je onderweg bent.

Enkele simpele regels voor simpele browsers

Misschien heb ik het wel bij het verkeerde eind met een aantal van deze regels, maar de lijst hieronder stipt enkele van de belangrijkste eigenaardigheidjes en goede oplossingen aan die ik recent ben tegengekomen.

  1. Een “skip to content” link is bijzonder handig.
  2. Dat zelfde geldt voor een “back to top” link.
  3. Gebruik alt text voor plaatjes. Ligt voor de hand, maar erg belangrijk op mobiele apparaten.
  4. Cursieve tekst ziet er een beetje te gepixeled uit.
  5. hn tags lijken goed ondersteund te worden.
  6. Tables kun je beter niet gebruiken.
  7. De color en background-color properties worden goed ondersteund.
  8. Ondersteuning voor achtergrondplaatjes lijkt matig.
  9. Link styles worden vervangen door blauwe standaardlinks.
  10. Plaatjes moeten relevant zijn, en zeker klein.
  11. Je allerbeste vriend is de display:none property.
  12. Form elements worden goed ondersteund, maar doen niet altijd wat je van ze verwacht.

Meer weten?

Er is een hoop elkaar tegensprekende informatie beschikbaar over hoe je mobiele apparaten kunt ondersteunen. De beste bron van informatie is waarschijnlijk Jim Wilkinson’s Handheld Stylesheets-pagina, en ik raad je aan om die goed te lezen voordat je zelfs maar begint. Op die pagina vind je tevens een uitstekende lijst van relevante links.

Oh, en Andy Budd heeft meer geschreven over een K700i gebruiken als afstandsbediening voor de Mac.

Een soort disclaimer

mobile imageWees je er van bewust dat wanneer we het over mobiel internetten hebben, leveranciers zich niet op de zelfde manier aan standaarden houden als we dat op het internet gewend zijn. De ondersteuning is maar matig en informatie zoals die in dit artikel wordt gegeven werkt waarschijnlijk niet voor alle bezoekers. Dit is nieuwe technologie, en we hebben nog een lange weg te gaan voordat er een standaard voor mobiel browsen vaststaat.

Let er ook op dat mijn stappen werken op de K700i en sommige telefoons van Nokia. Tenzij ik de medewerkers van mijn lokale Orange telefoonwinkel een dag gegijzeld hou, zal het voor mij onmogelijk zijn om mijn site op alle soorten browsers op telefoons te testen. Wat ik met dit artikel wil bereiken is dat deze stappen je op weg helpen naar een site waar chocola van te maken is op een telefoon.

Hulp gevraagd

Ik kijk uit naar reacties, correcties en andere tips of advies over dit onderwerp. Net zoals iedereen probeer ik er maar het beste van te maken, zonder dat ik kan beschikken over duidelijke richtlijnen. En als je toevallig een website hebt waarvan je zelf vindt dat hij er prima uitziet op een mobiele telefoon, hoor ik dat ook graag. Ik zou het interessant en inspirerend vinden om rond te kijken op een paar goede sites terwijl ik wat aanknutsel.

Tenslotte

Zoals gezegd zijn er geen standaard oplossingen, omdat iedere situatie steeds weer een verschillende aanpak zal vragen. Maar ik heb geprobeerd om aan de hand van een aantal praktijkvoorbeelden te schetsen dat een goede voorbereiding in hoe je wilt communiceren het halve werk is. En het hebben van klanten is voor iedere leverancier het leukste dat er is.

Auteur

Simon Collison

woont in Nottingham, UK (waar ook Robin Hood vandaan komt). Hij is Lead Web Developer bij Agenzia Ltd, het beste internet-, design- en marketingbureau van de Britse Midlands.

Simon werkt aan XHTML, CSS en CMS dingen en schrijft er over voor Friends Of ED (deze lente komt er een boek van hem uit) en hij recenseert CSS-websites voor Stylegala.

Publicatiedatum: 13 april 2005

Let op

Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.

Copyright © 2002-heden » NAAR VOREN en de auteurs