Mobiel internet wordt steeds gewoner. Steeds meer mensen hebben een telefoon, PDA of combinatie daarvan die overal online kan zijn. Maar niet iedere site is optimaal mobiel te bekijken, waaronder Naar Voren. Toch is dat met CSS snel op te lossen.

Toen de slimme jongens van het W3C bezig waren met CSS, bedachten ze dat het wel handig zou zijn als je de CSS afhankelijk van het type medium kon aanpassen. Ze stelden een lijst van 16 verschillende media op, en gaven gebruikers de optie om ze met @media [naam] { } aan te roepen. Hoewel er 16 mediatypes zijn, worden er maar twee écht gebruikt: screen en print. Daarnaast zijn er echter nog twee die je nu ook al kunt gaan gebruiken: projection, ondersteund door Opera en gebruikt om presentaties te maken en handheld, waar we het in dit artikel over gaan hebben.

Handheld media type

Het handheld mediatype is bedacht om speciale CSS naar zogenaamde handheld devices te versturen: mobieltjes, PDA’s en iPhones (een categorie apart, niet?). In theorie klinkt dit heel mooi, maar zoals zo vaak met CSS blijkt het in de praktijk net niet zo te werken. De mobiele markt is namelijk overspoeld met tal van verschillende mobiele browsertjes, die bijna allemaal niets doen met het handheld mediatype. Bijna iedere mobieltjesfabrikant heeft namelijk een eigen browser ontwikkeld, ieder met een eigen manier om de stijl op ‘het echte internet’ te laten lijken. En nu zitten wij, front-enders, dus met de gebakken peren.

Er gloort echter hoop aan de horizon: Opera Mini, recente Nokia-mobieltjes met een op Webkit (van Safari) gebaseerde browser en Windows Mobile luisteren allemaal wel (bijna) netjes naar onze handheld instellingen. Om dat te laten zien gaan we voor Naar Voren een handheld stylesheet maken. Voordat we dat doen moeten we wel een paar regels vaststellen:

• het gemiddelde mobieltjesscherm is 176px breed
• de inhoud zal gelinialiseerd worden
• Een layout kun je dus niet maken, stijlen gebeurt met behulp van kleur, van boven naar beneden.

Dat waren enige van te voren vastgestelde technische beperkingen, we zullen ze later verduidelijken. In de loop van dit artikel zullen we er ongetwijfeld nog wel meer tegenkomen.

Even los van de techniek: We houden onszelf nu eigenlijk een beetje voor de gek. Wie gaat er nou dit soort artikelen lezen op zijn mobieltje? Niemand! Naar Voren heeft dus eigenlijk weinig te zoeken op een handheld device. Daarom: als je geen reden hebt om de informatie mobiel beschikbaar te stellen, dan moet je daar eigelijk ook geen tijd in steken. Voor informatie die medewerkers of klanten snel mobiel moeten kunnen opzoeken is het nut ongeëvenaard: Zorg ervoor dat ze op een goede, snelle manier bij relevante informatie komen en je laat zeker een goede indruk achter. Om te demonstreren hoe je een site omzet naar een mobiele versie, gebruiken we Naar Voren als proefkonijn.

Een testomgeving maken

Om onze handheld stylesheet te testen op onze gewone computer hebben we twee dingen nodig: De Opera Mini simulator en de Windows Mobile Software Development Kit. De Opera Mini simulator werkt gewoon online, zet bij Menu > Settings wel even Mobile view aan. In de Windows Mobile SDK is het wat moeilijker: je moet ActiveSync installeren en de device emulator manager (wordt mee geïnstalleerd) daar aan koppelen. Als het goed is ziet Naar Voren er nu zo uit:

Gedaan? Dan kunnen we nu aan de slag!

Definieer een handheld stylesheet

Je kan een handheld stylesheet definiëren door een nieuw CSS-bestand te maken en die met onderstaande HTML-code aan te roepen:

<link src="link/naar/handheld.CSS" media="handheld" rel="stylesheet">

In Opera zie je nu ongestijlde content. Als je de pagina nu in Windows Mobile bekijkt, dan sijpelt er toch nog een stuk stijl door. Wanneer Windows Mobile namelijk geen handheld stylesheet tegenkomt, dan neemt hij dingen over uit de screen-stijl. Op zich best logisch, maar niet zoals het eigenlijk hoort. Het is handig als we de pagina in beide browsers er zoveel mogelijk hetzelfde uit laten zien. We gebruiken hiervoor een CSS-reset, zoals bijvoorbeeld die van Yahoo:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
 margin:0;
 padding:0;
 text-align:left;

}
table {
 border-collapse:collapse;
 border-spacing:0;
}
fieldset,img { 
 border:0;
}
address,caption,cite,code,dfn,th,var {
 font-style:normal;
 font-weight:normal;
}
ol,ul {
 list-style:none;
}
caption,th {
 text-align:left;
}
h1,h2,h3,h4,h5,h6 {
 font-size:100%;
 font-weight:normal;
}
q:before,q:after {
 content:'';
}
abbr,acronym { border:0;
}

Schuingedrukt zie je "text-align:left;", Dit komt niet uit de Yahoo CSS-reset, maar zit er in om de tekst in Windows Mobile netjes uitgelijnd te krijgen. Verder zijn ook de reset voor het strong en em element niet gebruikt, omdat we die toch zo willen houden.

Het ziet er weer bijna hetzelfde uit, nog een aantal stijlen worden overgenomen uit het screen stylesheet, maar eventuele problemen kunnen we later oplossen. We gaan nu weer wat Naar Voren terugbrengen, beginnende met de kleuren en de header.

Kleuren

De kleuren kunnen we bijna helemaal overnemen uit ons screen stylesheet. De achtergrondplaatjes vervangen we door vergelijkbare kleuren, dat scheelt weer wat bits en dus downloadtijd.

body {
 background:#FFF8DD;
 color:#211;
}
a{color:#ba0808;}

De header

De header op de gewone site biedt plek voor het logo, het menu en een zoekfunctie. De meeste van deze elementen worden echter absoluut gepositioneerd, en staan niet in de header zelf. Windows Mobile kan geen absolute positionering aan en daarom zullen deze elementen dus onderaan de pagina komen te staan. Gelukkig staat er wel een skip-link naar het menu, dus we zorgen er voor dat die duidelijk in beeld komt. We maken de achtergrondkleur donkerder en de tekst dikgedrukt

Bij de content hoeven we niet zoveel werk te doen: Helaas zijn de titels van de nieuwste artikelen een plaatje, waardoor we er niet zoveel mee kunnen. Alle titels daarna maken we dikgedrukt en we zorgen dat er wat extra ruimte tussen de artikelen komt.

De Zijlijn

De Zijlijn gebruikt dezelfde opbouw als de lijst met artikelen, dus die is ook netjes gestijld. Nog even een mooie kop en dan zijn we hier klaar mee. Toch? Wacht even, De Zijlijn, dat zijn allemaal externe links. Op een mobieltje ga je waarschijnlijk niet naar een site om door te klikken naar een andere site en daar artikelen te lezen. Het is dan dus beter als we de gehele Zijlijn gewoon verbergen. Dat doen we met een #extra { display:none; } in de CSS. Zo blijft de lengte van de pagina binnen de perken en geven we wat extra aandacht aan de eigen content.

We verbergen direct ook de knoppen voor grote en normale letters, de footer en de tagline om ruimte vrij te maken. Dat kan omdat het onderdelen zijn die geen (de letterknoppen) of weinig (footer en tagline) functionaliteit bieden op een mobiele telefoon.

Overigens heb ik uit betrouwbare bron gehoord dat de knop voor grote letters — op deze site — binnenkort gaat verdwijnen, dus daar hebben we dan al helemaal geen last meer van.

Naast deze elementen staat er helemaal onder aan de pagina, onder de lijst met artikelen, een korte uitleg over Naar Voren. Ook hier heeft een mobiele gebruiker weinig aan, dus deze paragraaf willen we eigenlijk ook verbergen. Helaas heeft hij geen ID of class, maar het onderdeel daarvoor wel. Met behulp van de + selector kunnen we het dus toch verbergen: .meer + p { display:none;}.

Het blokje code met de class meer verwijst naar de feeds. Opera pikt dit lekker snel op en zet helemaal bovenaan de pagina een linkje naar de feeds, maar ook in Windows Mobile zijn de feeds simpel leesbaar door op de RSS-link te klikken.

Het menu en de zoekfunctie

Onderaan de pagina vinden we het menu en de zoekfunctie. Het menu op de site is horizontaal, maar helaas leent het smalle scherm van een handheld zich daar niet zo goed voor. Daarom maken we er met display:block een verticale lijst van. In Windows Mobile mist de home-knop, in het screen stylesheet wordt die namelijk verborgen. In het handheld stylesheet maken we hem dus weer zichtbaar en overschrijven direct ook wat andere instellingen om het er hetzelfde uit te laten zien. In Windows Mobile blijven lijstjes inspringen, dit kun je verder niet aanpassen.

De zoekfunctie ziet er in zowel Opera Mini als Windows Mobile al duidelijk uit. Wel geven we het zoekveld nog een witte achtergrondkleur mee, zodat hij ook wit is in Windows Mobile.

Waar zijn we nu?

Om te komen waar we nu zijn hebben we eerst alle stijlen op nul gezet, vervolgens hebben we de kleuren toegepast, gekeken welke onderdelen écht belangrijk waren voor bezoekers (en de rest verborgen) en de overgebleven content hebben we geoptimaliseerd voor het smalle scherm. Een schoonheidsprijs zal het niet winnen, maar dat hoeft ook nog niet in de mobiele browsermarkt. Een handige, functionele site met relevante informatie is het doel wat we hebben nagestreefd, en volgens mij zijn we daar aardig bij in de buurt gekomen.

Het stylesheet ziet er nu zo uit. Het is een mix van simpele stijlen toevoegen, en de problematische stijlen uit het screen stylesheet uitzetten.

body{
 background:#FFF8DD;
 color:#211;
}
a{
 color:#ba0808;
 text-decoration:underline;
}
input{
 background:#fff;
}
ol, ul{
 padding:1em 0;
}
ol li, ul li{
 margin:0;
 padding:0;
}
h3 {
 font-size:1.2em;
 padding-top:1em;
 font-weight:bold;
}
h3 img {
 width:100%;
}
#spring {
 font-weight:bold;
 background:#eee8cc;
 width:100%;
}
#logo img {
 display:block;
}
#navigatie {
 padding-top:1em;
 position:relative;
}
#extra,#copy,#groter,#normaal,.meer + p,#tag {
 display:none;
}
#menu li a {
 display:inline;
 float:none;
}

body #menu #m01,#menu {
 display:block;
}
#menu li {
 display:block;
}

CSS3 bonus

Ho! Wacht! Stop! Nog niet weggaan, ik heb nog een bonusje: in het begin had ik het er al even over, er zijn een aantal verschillende CSS-mediastijlen. CSS3 voegt daar nog meer leuke dingen aan toe: media-functionaliteit. Door te testen op verschillende eigenschappen, kun je je CSS aanpassen op bijvoorbeeld de hoogte, breedte en hoeveelheid kleuren van je medium. Opera 9 en Safari 3 ondersteunen deze functionaliteit beide al. Deze media-functionaliteit is vooral handig voor handheld, omdat we daar geen JavaScript kunnen gebruiken om op mogelijkheden te testen. Maar net als elke CSS-technologie zal het nog wel even duren voordat we het echt kunnen gebruiken.

Meer lezen over het maken van mobiele websites?

Wil je meer informatie dan zijn dit goede startpunten.

• 7 Usability Guidelines for Websites on Mobile Devices
• Mobile Web Development research
• dotMobi Mobile Web Developers Guide (pdf)
• Vitamin - Coding for the mobile web

• Home
• Artikelen
• Colofon