Een mobiele Internetsite

© 2012 Hein Pragt

Tegenwoordig staat er op iedere smartphone en elke tablet computer een mobiele versie van een webbrowser applicatie. Er is tegenwoordig zelfs een ruime keuze uit diverse mobiele webbrowsers voor verschillende platformen. Voor de meeste mensen betekent mobiel Internetten dat men overal en altijd online kan zijn, via een laptop, PDA of tegenwoordig via de mobiele telefoon. De moderne smartphones en tablets hebben ook een redelijk groot kleuren scherm wat mobiel browsen op het Internet zeer goed mogelijk maakt. Het is zakelijk gezien een ideale oplossing voor mensen die veel onderweg zijn maar tegenwoordig wordt het (door de sterk dalende tarieven) ook steeds meer gebruikt door consumenten. Sinds de introductie van de iPhone, Android telefoons en diverse soorten tablet computers heeft mobiel internetten en het aantal mobiele Internetsites een grote vlucht genomen.

Veel sites hebben een speciale mobiele variant die vaak op het subdomein m.domeinnam.nl gezet is en veel sites detecteren automatisch de mobiele browser en sturen de bezoeker automatisch door naar de mobiele versie van de website. Maar aangezien de meeste nieuwe telefoons en tablets een vrij groot scherm hebben is het vaak niet meer nodig om de speciale mobiele versie van een site te bezoeken en kan de keuze beter aan de bezoeker zelf overgelaten worden door middel van een link. Afgezien van het formaat zijn er nog wel een aantal andere zaken waar men bij een mobiele site op moet letten zoals navigatie en "hover" functionaliteit. Aangezien een mobiele webbrowser via een klik en sleep interface bediend kan worden werken zogenaamde "hover" effecten niet op een mobiel platform. Wanneer u dit dus in uw website heeft verwerkt voor functionaliteit, zoals een uitklap menu, dan zal dit op een mobiele browser niet werken. Het is dan beter om de standaard site aan te passen en zo gebruikersvriendelijk te maken voor zowel de desktop webbrowser als de mobiele webbrowser.

Welke snelheden zijn er mogelijk op de verschillende netwerken?

• GSM: 9.6 Kb/s
• GPRS: 52 Kb/s
• EDGE: 240 Kb/s
• UMTS: 384 Kb/s
• HSDPA: 1.8 Mbit/s

Deze snelheden zijn theoretisch en kunnen in de praktijk door verschillende oorzaken afwijken, de snelheden zijn niet erg groot en dit is wel iets waarbij u rekening moet houden bij het opzetten van een mobiele site. Plaatjes moet u echt verkleinen in plaats van het verkleind weergeven door middel van css of attributen. Het gaat wel allemaal over de lijn en zeker in mobiele toepassingen is de verbindingsnelheid een belangrijk aandachtsput.

Een andere mogelijkheid van mobiel internetten is door middel van een WiFi netwerk wat buiten het GSM netwerk omgaat. Het zijn draadloze verbindingen die alleen dekking bieden in de omgeving van zogenaamde hotspots. Deze hotspots kunnen bijvoorbeeld op en in restaurants, hotels, benzinestations, bibliotheken en NS stations staan. Gebruikers kunnen er tegen betaling (of soms gratis) inloggen. De snelheid van WiFi kan variëren tussen 100 tot 1000 Kb/s.

Meer over GSM techniek kunt u lezen op: www.heinpragt.com/gsm

© 2010 Hein Pragt

Een mobiele website bouwen werkt net iets anders dan het maken van een gewone website maar waneer u als gewent bent aan XHTML is de overgang niet erg groot. Een moderne mobiele website moet gemaakt worden met XHTML basic of XHTML mobile profile maar ook zal HTML5 en CSS3 een nieuwe standaard gaan worden. Voor mensen die nog HTML gebruiken zijn hier een aantal basis regels voor XHTML:

1. Alle tags en attributen in kleine letters, in XHTML moeten alle tags en attributen met kleine letters geschreven worden. <Table> en <TABLE> zijn dus fout.
2. Alle tags moet afgesloten worden, elke tag die geopend en gesloten kan worden moet goed gesloten worden, een <div> moet dus gesloten worden met </div>.
3. Sluiten lege tags is ook verplicht, sommige tags werden in HTML vaak gebruikt zonder gesloten te worden zoals de <br> tag. In XHTML moet deze wel gesloten worden, dit kan zowel door <br></br> als <br />.
4. Tags moeten correct ingesloten worden, wanneer er tags binnen andere tags gebruikt worden moeten ze in tegenovergestelde volgorder gesloten worden.<p><b>tekst?</p></b> zal in HTML goed renderen maar is in XHTML niet meer toegestaan, hier moet het <p><b>tekst?</b></p> zijn.
5. Quotes gebruiken voor alle attributen, in XHTML dienen alle waardes van attributen tussen enkele of dubbele aanhalingstekens te staan. <table border=0> is dus fout het moet <table border="0"> zijn.

Het XHTML Basic document type bevat de minimale set mogelijkheden die nodig zijn om een XHTML pagina te kunnen bouwen en bevat daarnaast figuren, formulieren, basis tabellen en object ondersteuning. XHTML Basic is ontworpen voor Web clients die de volldedige set van XHTML eigenschappen niet ondersteunen, zoals bijvoorbeeld mobiele telefoons en PDA's. Het doel van XHTML Basic is te dienen als een gezamenlijke taal die ondersteund wordt door verschillende soorten User Agents.

Een minimale XHTML Basic pagina zou er als volgt uit kunnen zien:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Een minimaal XHTML Basic document</title>
</head>
<body>
<p>Dit is een paragraaf</p>
</body>
</html> 

Hier staat de Nederlandse vertaling van de XHTML Basic specificaties van het W3C XHTML Basic W3C Aanbeveling

Wilt u uw (bestaande) website toegankelijk maken voor mobiele internetgebruikers dan moet u met een aantal zaken rekening houden. Het ontwikkelen van een mobiele website is zeer uitdagend door een aantal factoren.

• De meeste telefoons en pda's hebben kleine en variërende schermgrootte.
• Vaak kunnen cookies niet gebruikt worden.
• Sommige mobiele browsers ondersteunen geen JavaScript.
• De iPhone ondersteunt geen Flash.
• Er is een zeer variabele ondersteuning voor CSS.
• De verbindingssnelheden zijn relatief traag.
• Navigatie moet zeer compact en efficiënt gemaakt worden door ruimtegebrek en het vaak ontbreken van een toetsenbord.

Het formaat van de schermen van de mobiele browsers.

• Android (Motorola Droid) 480x854
• Android (MyTouch) 320x480
• Android (Nexus One) 480x800
• Apple iPhone 320x480
• Apple iPad 1024x768
• Palm Pre 320 x 480

Bij Android kan de scherm grootte varieren afhankelijk van de hardware van de leveranciers, de HTC Magic en de HTC Dream hebben een scherm van 320x480 pixels maar de HTC Passion heeft een resolutie van 800x600 pixels. Dit is wel iets om rekening mee te houden.

Probeer niet alle functionaliteit van uw reguliere website één op één over te zetten naar uw mobiele website maar denk goed na en ga zelf eens met een mobiele browser uw eigen site bezoeken en zie de problemen die u tegenkomt. Gebruik een "liquid layout" die er goed uitziet op alle mobiele apparaten en die dus onafhankelijk is van hun schermbreedte en schermhoogte. Er zijn ook sites die de breedte van de pagina vastleggen op bijvoorbeeld 240 of 320 beeldpunten maar hiermee doen ze mensen die groter schermen hebben of die hun telefoon gekanteld hebben te kort met grote ongebruikte vlakken. Het beste is om met standaard XHTML de layout vloeiend te maken voor alle scherm afmetingen. Dit was ook de oorspronkelijke bedoeling van SGML en HTML maar helaas was "uitgevers land" hier nog niet aan toe.

Gebruik XHTML Mobile Profile of XHTML Basic als de opmaaktaal van uw website en houd u aan de standaard. U kunt JavaScript en / of AJAX gebruiken op uw mobiele website maar dient er voor te zorgen dat dit alleen extra is en dat de gebruiker ook zonder Javascript gebruik moet kunnen maken (zij het iets beperkter) van uw website. Ook ondersteunen niet alle mobiele browsers CSS stylesheets niet even goed, ook hier gaat op dat u het beste kunt gaan voor de "best of both worlds" hoewel dit gezien het aantal mobiele platformen en browsers wel meer dan twee zal zijn. U kunt zich ook richten naar een speciaal platform zoals de iPhone, maar aangezien steeds meer mobiele browsers WbKit als basis hebben kunt u zich ook hier op richten. Maak plaatjes kleiner zodat ze minder bandbreedte verbruiken en houd de totale paginagrootte zo klein mogelijk en plaats zeker geen onnodige afbeeldingen.

Detectie scripts voor mobiele gebruikers

Er zijn momenteel enkele scrips in PHP en ASP waarmee men een mobiele bezoeker kan herkennen en omleiden naar de mobiele versie van de site. Dit klinkt als een goede service maar daar ben ik het niet mee eens. Ten eerste testen deze scripts op een aantal eigenschappen waarmee men de mobiele browser kan herkennen, dit is een zeer uigebreide lijst en met de groeiende hoeveelheid mobiele toestellen zult u deze lijst permanent moeten bijwerken. Ook is het vaak zo dat de mobile site niet de volledige inhoud heeft van de "gewone" site waardoor mensen met een mobiele browser dus niet meer alle inhoud van de site kunnen raadplegen. De beste optie is om op de pagina's van de "gewone" site een knop of link op te nemen naar de mobiele variant waardoor u de mobiele gebruikers de mogelijkheid geeft om zelf te kiezen voor de mobiele variant van de site.

Een subdomein of top level domein.

De extensie .mobi is speciaal uitgegeven voor mobiele Internetsites, maar het blijkt toch dat de meeste sites gebruik maken van het subdomein m. op het bestaande domein. De extensie .mobi blijkt meest gebruikt te worden voor nieuwe mobiele websites en niet voor bestaand sites. Zo zijn veel sites zoals www.nu.nl ook bereikbaar voor mobiele gebruikers via het m.nu.nl subdomein. Let wel op de hier www komt te vervallen, www is eigenlijk ook een defacto subdomein dat dus vervangen zal worden door m. voor de mobiele website. Aangezien dit bij de meeste hosting providers kostenloos en zeer eenvoudig te relaliseren is heeft het dus de voorkeur boven een nieuw domein.

© 2010 Hein Pragt

WebKit is een verzameling software bibliotheken die het mogelijk maakt om webpagina's te renderen. Bij de introductie waren de onderdelen WebCore en JavaScriptCore open-source en in juni 2005 werd heel WebKit open source. Sindsdien is de ontwikkeling van WebKit heel snel gegaan. WebKit komt oorspronkelijk bij Apple technici vandaan en is in eerste instantie ontwikkeld voor de Safari browser en het doel van het WebKit project was het verbeteren van de compatibiliteit van Safari. WebKit is een van de eerste browser engines die de Acid3 test heeft doorstaan met een score van 100 uit 100 tests. Buiten Mac OS X en de iPhone wordt WebKit ook gebruikt door Nokia voor hun mobiele browsers en word het gebruikt binnen het Android platfrom van Google en in Adobe AIR. Ook Microsoft gebruikt WebKit voor het renderen van de tekst in Microsoft Messenger for Mac en gebruikt Google WebKit in zijn browser Google Chrome. We kunnen stellen dat WebKit de standaard voor mobiele browsers en dus de referentie van mobiele Internetsites is.

© 2010 Hein Pragt

<a href="tel:9205551212">Klik hier om te bellen!</a>

De wijze waarop de pagina initieel getoond zal worden kunt u bepalen door enkele nieuwe metadata tags: (Width, Height, Initial-Scale, User-Scalable, Minimum-Scale, Maximum-Scale)

Voorbeelden

<meta name="viewport" content=" user-scalable=no" />
<meta name="viewport" content="width=320" />

Meer informatie kunt u lezen op: developer.apple.com/iphone

© 2010 Hein Pragt

Er bestaan ondetussen al een redelijke set van gestandariseerde en niet gestandariseerd metadata tags. Aangezien de inhoud van metadata tags geen effect heeft op browsers die dit niet ondersteunen en het feit dat de Google spider ze wel ziet en gebruikt, kunt u ze beter wel gebruiken in uw mobiele site. Hier staat een lijst van vee voorkomende metadata tags met enige uitleg.

De MobileOptimized Metadata tag

Microsoft heeft de MobileOptimized Metadata tag bedacht om de layout te bepalen binnen Internet Explorer Mobile en het geeft de breedte in pixels aan. In IE Mobile zal het tot gevolg hebben dat een éénkoloms layout gebruikt zal worden met de voorgschreven breedte.

<meta name="MobileOptimized" content="320" />

Tevens al deze tag door soomige browsers en spiders herkent worden om een mobiele website te herkennen.

De Viewport Metadata tag

Veel browsers van smartphones verkleinen de webpagina's om in het scherm venster te passen waarna er ingezoomd kan worden op een deel van de pagina. Door middel van de Viewport Metadata tag kunt u de afmeting en schaalbaarheid van het browser venster op het mobiele toestel beïnvloeden. Dit werkt op de Safari Mobile voor de iPhone, Android browser, webOS browser in de Palm Pre en de Opera Mini, Opera Mobile and BlackBerry browsers.

De wijze waarop de pagina initieel getoond zal worden kunt u bepalen door enkele nieuwe metadata tags: (Width, Height, Initial-Scale, User-Scalable, Minimum-Scale, Maximum-Scale)

<meta name="viewport" content=" user-scalable=no" />
<meta name="viewport" content="width=320" />

Of

<meta name="viewport" content="width=240, height=320, user-scalable=yes,
initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />

© 2012 Hein Pragt

Bent u de standaardbrowser op uw smartphone of tablet beu of mist u bepaalde functies dan is de Dolphin Browser een uitstekende optie. De Dolphin Browser heeft enkele handige functies die u niet in de standaard browser van uw iOS- of Android toestel terug zult vinden. Zo krijgt u uw bladwijzers te zien wanneer u van de linkerkant van het scherm naar het midden veegt en wanneer u van rechts naar het midden veegt krijgt u op de tabletversie een overzicht van de geopende tabbladen en de beschikbare plugins. Ook is het mogelijk verschillende touchcommando's aan websites koppelen. Schrijft u bijvoorbeeld de letter G met uw vinger op het scherm dan zal de homepage van Google wordt geopend. Hetzelfde kunt u doen voor Facebook met de letter F. U kunt zelf letters of tekens aan websites toewijzen en vooral op een telefoon of tablet is het zeer handig wanneer u met uw koude vingers snel naar een website wilt gaan.

Tabbladen worden net als bij Chrome boven aan de pagina naast elkaar weergegeven. Daarnaast is het mogelijk om via een nieuw tabblad de zogenaamde Webzines te openen. Je favoriete nieuwssites worden dan in een magazine-achtige lay-out gegoten, zoals Flipboard voor de iPad dat ook doet. Bij de Androidversie van de Dolphin Browser kun je net als bij hedendaagse desktopbrowsers add-ons installeren. En als je de Dolphin Browser op meerdere apparaten gebruikt, kunt u de instellingen en bladwijzers synchroniseren door een account aan te maken en hiermee in te loggen. De Dolphin Browser lijkt misschien een gewone web browser maar er zitten zeer vernieuwende features in en bovendien is het een razendsnelle browser die zeer snel de pagina's zal laden.

Ook mooi zijn de aanwezige tabs, wat voor enkele gebruikers noodzakelijke functionaliteit is, deze zitten ook in Safari op de iPad met iOS 5, maar op de iPhone is dit niet aanwezig. Met de Dolphin Browser dus wel. Bij meerdere tabs is het simpelweg een kwestie van links naar rechts en andersom vegen om bij de juiste tab uit te komen. Dit gebruik van tabs verkort de wachttijden ook aanzienlijk, aangezien in veel gevallen Safari de pagina opnieuw laadt zodra u van pagina wisselt, nu blijft het staan waar u was. Dolphin Browser is gratis beschikbaar voor de iPhone en iPod Touch, de iPad en voor Android smartphones en -tablets.

Link: http://dolphin-browser.com/

© 2008 Hein Pragt

WAP staat voor Wireless Application Protocol en het is een internationale standaard voor het aanbieden van internetdiensten via de GSM telefoons. WAP werkt op het GSM netwerk en dus ook op via GPRS. Eigenlijk is WAP het protocol waarmee mobiele telefoons met het netwerk communiceren, de content op de webserver zal via het "normale" http protocol verlopen, de inhoud van de pagina's zal in WML of XHTML Mobile Profile zijn opgemaakt in plaats van HTML. Aangezien WAP nog ontwikkeld werd in de periode dat de meeste mobiele telefoons nog een klein en beperkt scherm hadden en de bediening meestal via de nummer toetsen verliep, is WML een zeer beperkte opmaaktaal en is WAP niet geschikt om Internetsites te ontsluiten die uitgebreide pagina's aanbieden. WAP maakt gebruik van de standaard 9.6 Kb/s GSM dataverbinding en dit komt theoretisch neer op ongeveer 1000 tekens per seconde. WAP is nooit echt doorgebroken in Nederland ondanks dat sommige bedrijven er wel diensten voor ontwikkeld hebben.

WML (Wireless Markup Language)

Wireless Markup Language (WML) is een markup taal taal vergelijkbaar met XHTML die speciaal ontwikkeld is voor mobiele telefoons die gebruikmaken van het WAP protocol en het is net als XHTML gebaseerd op XML. WML documenten worden opgevraagd van de webserver door middel van een WAP gateway die bij de mobiele provider als proxy server tussen de mobiele telefoon en het internet staat. De WAP gateway zet de WML pagina om in een formaat dat verwerkbaar is voor mobiele telefoons. WML 1.0 is afgeleid van HDML (Handheld Device Markup Language) dat ontwikkeld werd door Openwave (Unwired Planet) en het is door de tijd verder ontwikkeld tot versie 1.3. Daarnaast werd in Japan door het bedrijf NTT DoCoMo gewerkt aan een compacte versie van HTML voor mobiele telefoons voor de webdienst IMODE en werkte het W3C aan een lichte versie van XHTML voor kleine apparaten zoals PDA's en mobiele telefoons. Uit ale deze ontwikkelingen is uiteindelijk XHTML Mobile Profile ontstaan, een subset van XHTML 1.1 gebaseerd op XHTML Basic met enkele aanvullende functies van Compact HTML en WML 1.x. WML 2.0 is weer structureel anders, werkte men in WML 1.x met zogenaamde deck's die uit cards bestaan, WML 2.0 werkt meer als (X)HTML documenten.

De basiseenheid van WML is een card en deze cards worden samen gegroepeerd in decks. Een deck is het hoogste element in een WML document. Wanneer men een deck ontvangt zal steeds de eerste card uit dat deck geactiveerd en getoond worden. WML is gebaseerd op XML, wanneer u iets weet van XML of XHTML zal WML u zeer bekend voorkomen.

Entiteiten

Tekst in WML kan numerieke of benoemde tekstentiteiten (named entities) bevatten voor het weergeven van alle tekens die buiten de standaard tekenset vallen. Omdat de entiteiten zelf beginnen met een ampersand (&) teken zal dit in het document dus omgezet moeten worden in de bekende benoemde entiteit &amp;. Elke entiteit begint met een ampersand en eindigt op een puntkomma. Bij een numerieke entiteit gebruikt met het Unicode nummer van het speciale teken. (Voorbeeld: &#169; © Copyright teken)

Tags

De notatie van tags binnen WML is gelijk aan XML en XHTML en kan ook attributen bevatten, <tag> is de open tag, </tag> geeft het einde van een element aan en <tag/> kan gebruikt worden als het om een leeg element gaat zoals <br />.

Een deck.

Een deck is de basiseenheid in WML en deze begint en eindigd met een <wml> tag waarmee de andere elementen omsloten worden.

<wml> <!-- Deze tag is het begin van het deck -->
...
</wml> <!-- Deze tag sluit het deck af -->

Binnen deze tags zullen een of meerdere cards voorkomen.

<card id="card1" title="Hallo">  <!-- Deze tag begint een card -->
...
</card> <!-- Deze tag sluit een card af -->

Het element card heeft dus een begintag en attributen waarvan de id verplicht is omdat er anders geen onderscheid gemaakt kan worden tussen de verschillende cards.

Het documenttype een WML document

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM/DTD WML 1.1//EN"
  http://www.wapforum.org/DTD/wml_1.1.xml>

Voorbeeld van een eenvoudig WML deck dat één card bevat.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM/DTD WML 1.1//EN"
  http://www.wapforum.org/DTD/wml_1.1.xml>
<wml>
  <card id="Eerste_Card" title="Eerste Card">
    <p>
    Mijn eerste WML voorbeeld
    </p>
  </card>
</wml>

Meer over WAP en WML kunt u vinden op: www.openmobilealliance.org