lo-ga-rie words, lines .. life

Eerste stapjes in de wondere wereld van mobiele websites

Toen ik werd getracteerd op een url met een website die gewoon heel netjes rendere op het schermpje van mn Hero dacht ik: daar wil ik meer van weten!
Een eerste stap was natuurlijk de wordpress addon die er zorgt dat deze website het zelfde doet; maar zelf uitzoeken je weet zelf :)

Ok wat verwacht ik op het moment van een mobiele browser wil ik me er druk om gaan maken:

• Enige vorm van HTML4 / xHTML ondersteuning
• Enige vorm van CSS; minimaal 1.0
• Javascript?

WAP browsers vallen wat mij betreft af nu aangezien ik me nu vooral focus op wat er anders is qua html opmaak en CSS gebruik, WAP sites zijn gewoon een eigen niche (die uitsterft).
Eigenlijk hou ik het nu dus op "smartphones" en dus op:

• Windows Mobile 6.1+ (brakke ie6 achtige render engine)
• (Symbian) -- kan ik nu niet zelf testen
• Android (Webkit)
• iPhone (Webkit)

De 3 doelgroepen die ik kan testen bieden tegenwoordig allemaal browsers aan die zelf kunnen switchen tussen de normale en de mobiele website. Sommige mensen zullen het fijner vinden om je echte website te zien en zelf te pannen en zoomen, anderen weer niet; dus die keuze laten we aan de gebruiker zelf; maar bieden in eerste instantie wel een eigen website aan. Hoe gaan we dat doen?

Webserver:

Je kan 2 paden bewandelen: Alles client-side of Server-client. Ik vind hier persoonlijk Server-client mooier werken; de HTML die we uiteindelijk aan de browser geven is helemaal geoptimaliseerd en zo minimaal mogelijk en dus minder bytes om te downloaden terwijl je trein een tunnel inrijdt en 3G wegvalt.
Uit het request object wat je binnenkrijgt op de server kan je destileren welke user-agent gebruikt wordt om de pagina te bekijken, aan de hand daarvan kan je redirecten, een andere masterpage aanbieden, een response variablele aanpassen; wat jij wilt ;)
Voor de bovenstaande browsers moet 1 van de volgende strings in je user-agent staan:

• "iphone",                   // Apple iPhone
• "ipod",                      // Apple iPod touch
• "aspen",                  // iPhone simulator
• "dream",                  // Pre 1.5 Android
• "android",              // 1.5+ Android
• "cupcake",              // 1.5+ Android
• "Windows CE"    //windows mobile

Client-side:

Om voor alle platformen het zelfde aan te bieden maken we gebruik van een 1 kolom structuur; een content item is altijd 100% breed

< !DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<_html_>
  <_head_>
    <_title_>Mobiele test site
  
  <_body_>
    <_h1_>Welkom op de mobiele test site

      <_h2_>Content item titel
      <_p_>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper laoreet pharetra. Donec malesuada nulla at est dictum viverra. Proin scelerisque orci ut massa dapibus viverra. Praesent adipiscing aliquam dapibus. Pellentesque at nibh sem, et dictum diam. Vivamus vel ante vitae ligula tempor auctor at vel ante. In lacinia quam vel odio placerat tristique. Vestibulum eu diam velit, vitae eleifend neque. Aenean nunc velit, tristique egestas tempus a, dapibus id mauris. Aenean pulvinar imperdiet sem sed vestibulum. Curabitur consectetur consectetur mi id luctus. 

      <_h2_>Content item titel
      <_p_>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper laoreet pharetra. Donec malesuada nulla at est dictum viverra. Proin scelerisque orci ut massa dapibus viverra. Praesent adipiscing aliquam dapibus. Pellentesque at nibh sem, et dictum diam. Vivamus vel ante vitae ligula tempor auctor at vel ante. In lacinia quam vel odio placerat tristique. Vestibulum eu diam velit, vitae eleifend neque. Aenean nunc velit, tristique egestas tempus a, dapibus id mauris. Aenean pulvinar imperdiet sem sed vestibulum. Curabitur consectetur consectetur mi id luctus. 

* Sorry voor de incorrecte HTML maar anders krijg ik niet alle tags zichtbaar ...

.post {
	-webkit-border-radius: 8px; /* rounded corners in webkit */
        -moz-border-radius: 8px; /* rounded corners in firefox */
	background-color: #fff;
	padding: 10px;
	margin-bottom: 12px;
	position: relative;
	margin-right: 10px;
	margin-left: 10px;
	border: 1px solid #b1b1b1;
	overflow: hidden;
}

Maar hoe breedt is dat dan? iPhone is makkelijk dat is minimaal 320px (portrait mode); Android was makkelijk maar met de komst van Android 1.6 ondersteund Android ook meerdere resoluties zoals WindowsMobile dat al doet. Met onderstaande 2 meta tags geven we aan de browser aan wat er verwacht mag worden:

<_meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">  
<_meta name="MobileOptimized" content="240" /> 

* Sorry voor de incorrecte HTML maar anders krijg ik niet alle tags zichtbaar ...
Zo, nu hebben we een 1 kolom template die altijd 100% breed is op wat voor resolutie we ook kijken, op wat voor OS.

Uiteindelijk krijg je dan dit te zien:

Lo-Ga-Rie Mobile

Windows Mobile heeft standaard een zeer brakke browser die iets weg heeft van IE6 maar dan nog erger. Het is wel erg handig om je site eerst te bekijken in IE6 voor je de emulator of je telefoon aanslingert, Veel voorkomende problemen die je hebt in IE6 heb je namelijk ook in Windows Mobile IE. Gebruik ook vooral geen png files, die doen het leuk op je iPhone, Android en Windows Mobile 6.5 maar Windows Mobile 6.1 heeft een png fix nodig. Of het überhaubt werkt weet ik niet eens maar het includen en uitvoeren van een pngfix neemt zo veel tijd in beslag dat het echt niet slim is om dit te proberen. In dit geval kan je, als je dan toch echt png's wilt gebruiken voor IE een andere CSS aan te spreken. Een goed idee hier is bij het serveren van je pagina je server al een id of class op de body te zetten.

Meer later