Mobile Optimizer

Pas je site automatisch aan voor mobieltjes: Mobile Optimizer regelt het voor je, zodat jouw site altijd goed leesbaar is op desktop en mobiel, met optimale snelheid binnen komt en geen onnodige bandbreedte gebruikt.

Mobiel Web

Het gebruik van mobiele browsers heeft een grote vlucht genomen. Steeds meer mensen gaan onderweg het internet op met hun smartphones en tablets. Ondertussen hebben de meeste sites nog helemaal geen mobiele versie. Een webpagina met de maten voor een beeldscherm leest niet fijn op een klein scherm. Al die grote afbeeldingen kosten bovendien onnodig veel bandbreedte (en dat geldt ook voor inhoud die wel wordt geladen maar vervolgens voor mobieltjes wordt verborgen met display: none). En het geheel mist snelheid. Als jouw site dat allemaal goed heeft geregeld, heb je daarmee een flinke voorsprong.

Dynamische aanpassing voor mobieltjes

Met de uitbreidingsmodule Mobile Optimizer kan je de inhoud en lay-out van pagina's dynamisch aanpassen, afhankelijk of deze bezocht wordt met een gewone desktop/browser of met een mobiele browser. Dit is een eigenschap die, zover wij weten, tot nu toe alleen is weggelegd voor sites met Mobile Optimizer. Vaak is het zo dat als je de mobiele versie van een site wilt bekijken je daarvoor een aparte website moet bezoeken, waarvan het adres vaak begint met "m". Met Mobile Optimizer kan de bezoeker altijd naar hetzelfde bekende webadres, Mobile Optimizer verzorgt de rest.

Tijdsbesparing voor de webredacteur

In de prakijk betekent dit dat een webredacteur de content voor maar één site voor zowel desktop als mobiel hoeft te onderhouden en dat scheelt veel tijd.

Dynamische aanpassing van pagina-inhoud

Uitgangspunt is dat een website die op één webadres voor verschillende apparaten te bezoeken is, thematisch dezelfde inhoud moet bieden. Een pagina zou in desktop/browsers op enkele plekken wat uitgebreidere teksten kunnen hebben. Anderzijds zijn mobiele browsers wellicht beter af met kortere versies (uiteraard wel altijd van dezelfde strekking), omwille van de bandbreedte- of ruimtebesparing. Zo zou een grote afbeelding voor desktop/browsers voor mobieltjes beter gemist kunnen worden, of worden vervangen door een een kleine versie van diezelfde afbeelding.

Instellen welke inhoud

SiteOptimizer biedt hier een oplossing hiervoor. De webmaster of redacteur kan in de HTML-code van een pagina speciale codes plaatsen, waarmee ingesteld kan worden of een afbeelding of een tekstpassage mag worden weergegeven:

  • in uitsluitend desktop/browsers
  • in uitsluitend mobiele browsers
  • of zowel in desktop- als in mobiele browsers.

Mobile Optimizer ziet dus aan speciale markeringen in de HTML welke afbeelding of tekst bestemd is voor desktop en welke voor mobiel.

Dynamische aanpassing van de lay-out

De lay-out van de site wordt door Mobile Optimizer automatisch aangepast afhankelijk van welke browser de site wordt bezocht: in een desktop of een mobiele browser. Uiteraard heeft de webdesigner hiervoor wel eerst een extra stylesheet gemaakt met aanpassingen voor mobiel dan wel voor desktop, die door de Mobile Optimizer ingelezen en toegepast kan worden.

CSS voor mobiel en tablet

Ontwerpen voor smartphones en tablets vergt enige specifieke kennis. Je kunt met Mobile Optimizer volstaan met één aparte stylesheet voor mobiel en één voor desktop. Zonodig kunnen wij je hierbij van dienst zijn.

Handmatig kiezen

Op tablets - mits herkend in de aan TeraWurfl ontleende database - wordt standaard de mobiele versie van de site getoond, handig als je onderweg bent zonder WiFi verbinding: de site komt met optimale snelheid binnen en gebruikt zo min mogelijk bandbreedte. Uiteraard is de tablet ook geschikt voor de desktop/versie, dus als er een WiFi verbinding is kan de lezer altijd handmatig kiezen voor desktop/weergave.

Omdat Site Optimizer (en daarmee ook Mobile Optimizer) als schil rondom externe webapplicaties zoals bijvoorbeeld WordPress gedraaid kan worden, kunnen die applicaties ook profiteren van de automatisch aanpassing van de lay-out voor mobiele browsers.

Toegepaste techniek

  1. Om de inhoud en lay-out van pagina's aan te kunnen passen moet Mobile Optimizer uiteraard eerst detecteren welke browsers de site bezoeken en of dit mobiele browsers zijn. Voor die detectie wordt gebruikt gemaakt van degegevens van Tera-Wurfl. Dit project houdt een uitvoerige database bij van alle bekende mobiele browsers en hun kenmerken en capaciteiten. Klanten die gehost zijn op de server van SmartScripts en die Mobile Optimizer hebben aangeschaft hoeven deze database niet zelf te downloaden en onderhouden. Op onze server wordt namelijk in één centrale database een kopie van Tera-Wurfl opgeslagen, regelmatig bijgewerkt en vervolgens aan de sites van klanten beschikbaar gesteld.
  2. Mobile Optimizer maakt net als Site Optimizer uitgebreid gebruik van caching op de server en van caching op de computers van klanten (conditonal gets). In de praktijk leidt dit tot merkbaar sneller ladende pagina's, ook op mobieltjes.
  3. Indien mobiele browsers dat ondersteunen, worden de pagina's bij een eerste bezoek met gzip-compressie toegezonden. Ook dit leidt weer tot veel sneller laden van de pagina's.