Mobiele site *Updated*

Sommige mensen is het misschien al opgevallen door het nieuwe linkje boven de search balk bovenin maar er is nu toch echt een mobiele versie van deze website.

Na wat denken en puzzelen heb ik toch besloten een apart theme op deze site te zetten voor mobiele gebruikers want dit theme, hoe mooi verder ook op een goede monitor, voldoet eigenlijk niet voor een mobiele telefoon. Een tablet is nog goed te doen heb ik gezien maar op een mobiele telefoon is eigenlijk alles net te klein en ga je zoomen en moet je heen en weer scrollen. Het was het gewoon net niet.

Ik heb dus een mobiel theme in elkaar geknutseld gebaseerd op het (voor Drupal gebruikers) beroemde Zen theme. Dit had gelukkig weinig werk nodig want het Zen theme is ontwikkeld volgens het principe Responsive First wat het dus uitstekend geschikt maakt voor mobiele apparaten. De CSS aanpassingen die ik heb moeten doen zijn beperkt gebleven tot een (ruim opgezette) 31 regels. Tegenover 238 (ook ruim opgezette) regels in het default theme wat gebaseerd is op Marinelli.
Nou zegt dit natuurlijk weinig maar, geloof mij op mijn woord, het was verrassend weinig werk.

Ik heb wel een smerige hack moeten toepassen voor de overzichtspagina's, deze zijn natuurlijk allemaal ontworpen met monitoren in gedachten. Deze switch heeft het noodzakelijk gemaakt om een nieuwe, extra, set overzichtspagina's te maken. Natuurlijk kwam toen het probleem dat ik niet een en dezelfde link naar twee pagina's kan laten wijzen, dat is net zoiets als twee huizen op één adres hebben, dat werkt niet. Dus zit er nu in elke overzichtspagina een controle of hij aangeroepen is via het mobiele domein of het standaard domein. Is het een mobiele pagina en is hij aangeroepen via het standaard domein dan doet hij een interne redirect naar het mobiele domein en andersom.

Ondanks dat het een beetje een smerige oplossing is in Drupal termen werkt het prima, het enige nadeel is dat het met pagina's die niet in de cache zitten hierdoor soms wat trager is.

In alle gevallen, vanaf nu is deze site bereikbaar via:

Natuurlijk is de inhoud op alle domeinen hetzelfde verder.
Net als bij het huidige theme, laat me weten of jullie het mooi vinden en laat het me ook vooral weten als iets niet correct werkt of er niet goed uitziet op jouw mobiele telefoon.

Nog een paar dingen die mij opvielen aan het nieuwe mobile theme:

Mobiel normaal (rechtop) zorgt dat het hoofd menu en het zoekveld onderaan de pagina staan i.p.v. bovenaan waar ze zouden moeten staan, in deze situatie staat uitsluitend de link naar desktop site bovenaan en de 'breadcrumbs'. In deze mode komt een eventueel submenu wat normaal links staat weer onder het hoofd menu en het zoekveld te staan.
Persoonlijk vind ik dit best fijn, als je klaar bent met lezen heb je meteen het menu onderaan staan en hoef je niet eerst naar boven te scrollen.

Indien ik mijn mobiel draai (oftewel breedbeeld mode) dan verspringt het hoofdmenu samen met het zoekscherm naar boven, komt de liink naar de desktop site daar onder te staan en staat het submenu weer keurig links. Ik vind dit gedrag een beetje raar maar eerlijk gezegd best fijn.

Note, deze tests zijn gedaan met de standaard Android browser van Android 4.1.2 en de nieuwste Chrome voor mobiele apparaten. Beide zijn op een Samsung Galaxy SII geïnstalleerd met een resolutie van 480x800. Ik ben erg benieuwd of het met andere versies/resoluties nog steeds allemaal goed werkt.

*Update* Linkjes toegevoegd naar de diverse theme pagina's en Drupal website.