Webdesign voor mobiel – deel 2

9 mei 2009 om 12:52

In mijn eerste artikel voor Heeftstijl.nl heb ik een introductie gegeven in de aandachtspunten voor mobiel webdesign. Voor die mensen die aan de slag willen met het ontwerpen en ontwikkelen van mobiele websites is dit artikel geschreven. Ik zal de basis toelichten voor het gebruiken van HTML en CSS om een site te maken die optimaal te gebruiken is vanaf de mobiele telefoon, met behulp van XHTML Mobile Profile en belangrijke informatiebronnen.

Waar ontwerp je voor?

Voordat je aan de slag gaat met een volledig grafisch ontwerp, is het belangrijk om even de tijd te nemen om na te denken over de mobiele apparaten waarvoor je de website maakt. Is het puur bedoeld voor de iPhone? Moeten alle mobiele telefoons de website kunnen bekijken? Of werk je met een minimale schermresolutie waar de website goed op bekeken kan worden?

hs_mobile1Afhankelijk van het antwoord op deze vraag, zul je de relevante data die je nodig hebt om het ontwerp te maken op internet moeten vinden. Je kunt bij DeviceAtlas (http://www.deviceatlas.com) je registreren voor een gratis Developer licentie. Hiermee kun je op de site gegevens opzoeken van duizenden mobiele apparaten. Schermafmetingen, verbindingsmogelijkheden, maar ook specifieke informatie over de browser van het mobiele apparaat. Zo kun je bijvoorbeeld de bruikbare schermafmetingen vinden, zodat je niet zelf meer uit hoeft te zoeken hoe breed de scrollbalk is, en hoeveel ruimte de adresbalk inneemt.

In dit artikel zullen we een site maken voor de Nokia N95 8GB. Als basis voor het ontwerp van de mobiele site nemen we het design van Heeftstijl.nl. In de database van DeviceAtlas zien we dat we een bruikbare schermbreedte hebben van 234 pixels. Daar kunnen we wat mee! Een snelle Photoshop-klus later ziet het voorbeeldontwerp eruit zoals hiernaast weergegeven.

Ik ga hier niet dieper in op het interactieontwerp. Laat dit bij een echt project niet achterwege! Er is immers een klein scherm, en veelal een moeilijke manier van navigeren door een website met enkel pijltjestoetsen. Zorg dus dat dit goed in elkaar steekt bij een echt project.

Aan de slag met XHTML

Nu je de grafische schil voor ogen hebt, is het tijd om de HTML-pagina in elkaar te zetten. In de database van DeviceAtlas staat dat de Nokia N95 naast XHTML Basic 1.0, ook XHTML Mobile Profile 1.0, 1.1 én 1.2 ondersteunt. Lang niet alle mobiele telefoons ondersteunen al deze varianten, en daarom gebruik ik voor dit voorbeeld nu XHTML Mobile Profile 1.0. Deze kent een zeer goede ondersteuning, en je kunt de pagina’s die je hierin maakt altijd later nog updaten met de mogelijkheden van 1.1 en 1.2.

Een goed begin is het halve werk, en het definiëren van de juiste encodering en doctype helpt de mobiele browser goed op weg. Begin je HTML-pagina dan ook met het volgende:
[sourcecode language=”js”]

[/sourcecode]
Zo is de encodering vastgesteld op UTF-8, en is het doctype gedeclareerd als XHTML Mobile Profile 1.0. De HTML-pagina kan nu verder opgebouwd worden. Let goed op dat je elementen met kleine letters schrijft. Schrijf dus niet <DIV>, maar <div>. Ook is het belangrijk dat je regelmatig je een stuk testcode valideert met de W3C Validator op http://validator.w3.org/. Zo kom je er ook achter of je attributen probeert te gebruiken die niet ondersteund worden door XHTML Mobile Profile 1.0. Het “align” attribuut voor afbeeldingen wordt bijvoorbeeld niet gebruikt in XHTML Mobile Profile 1.0. Regelmatig testen voorkomt dat de pagina zich anders gaat gedragen dan dat jij het wil.

Er zijn ook attributen die XHTML Mobile Profile toevoegt aan elementen, specifiek gericht op het gebruik door mobiele apparaten. Zo kunnen hyperlinks het “acceskey”-attribuut mee krijgen, waarmee gebruikers de cijfertoetsen kunnen gebruiken om direct de hyperlink te openen.

Een beetje style met CSS

Als de HTML af is, kunnen we het geheel stylen met CSS. Je kunt zelf bepalen hoe strikt je de verschillende grafische elementen definieert. Lettergroottes kunnen tot op de pixel nauwkeurig worden ingesteld, maar dit wordt niet aangeraden bij mobiel webdesign. Het aantal dots per inch kan sterk verschillen bij mobiele apparaten, en afmetingen definiëren met behulp van percentages wordt dus daarom sterk aangeraden.

Het gebruik van randen om tabellen en div’s op te maken werkt niet op elke mobiele browser even goed. Elke mobiele browser ondersteunt ‘solid’ randen, maar andere randstijlen zoals ‘dotted’ en ‘ridge’ zijn niet op elk mobiel apparaat te zien. Vaak worden deze dan vervangen door een ‘solid’ rand. Hou hier vooral rekening mee.

Ook het gebruikmaken van ‘float’ is een punt dat veel getest moet worden, afhankelijk van het mobiele apparaat waarop gericht wordt. Oudere mobiele browsers kunnen nogal eens in verlegenheid gebracht worden wanneer ze dit moeten afhandelen. Recentere mobiele browsers en toestellen zullen hier echter minder last van hebben. Een vergelijking tussen CSS 2.1 en CSS voor mobiele browsers, CSS MP, is te vinden op http://mobiforge.com/designing/story/comparison-css-21-css-mp-wcss-and-css-level-1.

Maar gaat dit ook werken?

Als de XHTML in elkaar zit, en het verder is uitgewerkt met CSS, rest de vraag of het er ook goed uit komt te zien op de mobiele telefoon. Het ziet er allemaal goed uit in Firefox en Internet Explorer, maar de echte test moet nog komen. Dus zit er niets anders op dan te testen op de apparaten waarvoor je de site hebt ontworpen. Sommige telefoonfabrikanten leveren zelfs emulators voor hun toestellen, zoals Research in Motion die een Blackberry emulator aanbiedt, en Nokia die emulators aanbiedt voor hun Symbian platform. Dit kunnen handige tools zijn om vanaf de computer een indruk te krijgen van de manier waarop mobiele toestellen de website weer zullen geven.

hs_mobile2Mijn voorbeeldpagina ziet er in de emulator van Google’s Android, met een T-Mobile G1 uiterlijk, als volgt uit:
Dit lijkt al aardig op wat het grafisch ontwerp voor ogen had! Natuurlijk valt er nog veel te optimaliseren, maar voor dit voorbeeld is het duidelijk dat je ook op de mobiele telefoon tegenwoordig mooie, kleurrijke en uitdagende websites kunt bekijken. Mobiele websites hoeven er niet uit te zien als Teletekst. Mobiele sites kunnen net zo mooi en kleurrijk zijn als iedere andere site!

Nog een laatste tip: laat je gemaakte pagina’s vooral eens bekijken door http://ready.mobi. Het is niet zaligmakend, maar het geeft een redelijke indruk van de snelheid waarmee je pagina zichtbaar zal zijn voor mobiele bezoekers.

Links naar enkele emulators:

 

Remco Hübner studeert Communicatie & Multimedia Design aan de Hogeschool Rotterdam. Hij is verbonden aan eCommerce-specialist De Nieuwe Zaak te Zwolle, om met zijn afstudeerscriptie de implementatie van mobiele websites in Nederland te laten groeien.

Remco’s LinkedIn: http://www.linkedin.com/pub/5/798/49

Over de auteur

  • http://www.annejanroeleveld.nl Anne Jan Roeleveld

    Thanks Remco voor deel 2! Weer erg interessant, deze tips kan ik goed gebruiken.
    M’n retweet heb je in ieder geval: http://twitter.com/annejan88/status/1745532775
    :)

  • http://www.joelcox.nl Joël Cox

    Leuk artikel. Maar ik denk toch dat meer mensen zich gaan richten op apparaten met een behoorlijk schermoppervlak, zoals de G1 en iPhone.

    Nog een goede iPhone emulator is iPhoney: http://www.marketcircle.com/iphoney/

  • http://www.remcohubner.nl Remco Hübner

    Bedankt voor de reacties!

    @Joël Cox: hier ben ik het voor een groot deel wel mee eens; de schermresoluties van mobiele telefoons tegenwoordig wordt ook steeds groter. Voor mijn huidige projecten ga ik uit van een minimale schermresolutie van 240×320, waarbij ik wel mijn best doe om het ook nog bruikbaar te houden voor 176×220. Maar ik ben het helemaal met je eens dat de mobieltjes met een groter scherm meer een target zullen worden voor mobiele websites. Heeft er tegelijk ook mee te maken dat het steeds moeilijker word om een mobieltje te kopen met een scherm dat een lagere resolutie heeft dan 240×320 (wat naar mijn mening helemaal geen slechte zaak is).

    Nadeel van iPhoney is dat ook deze enkel bruikbaar is op een Mac; het is te hopen dat Apple ook gaat denken aan de Windows-gebruikers, en hen ook de SDK geeft om te kunnen ontwikkelen voor de iPhone.

  • Pingback: Webdesign voor mobiel – deel 2 « Remco's Musings()

  • http://www.jmsolutions.nl JMS

    ik vind dat je je als webbouwer niet druk hoeft te maken over welk presentatie medium de eindgebruiker heeft. Als je je conformeert aan de webstandaarden zou het medium de website moeten tonen zoals de gebruiker dit verwacht.

    Meer over mijn kijk op dit onderwerp, http://www.nietnuttig.nl/2009/03/10/websites-comp

  • http://twitter.com/Louise_L Louise Leenders

    hee Remco Hübner, kom ik jou opeens weer tegen.. Alles goed met je?