Es gab Zeiten, da durften Ärzte nicht für sich werben. Heute hat sogar mein Zahnarzt eine Website. Er hat mir versichert, dass ihn darüber zunehmend auch neue Patienten finden. Es gibt also anhaltend Anwendungsfälle mit relativ konstanten Inhalt. Dazu habe ich ja auch schon mal im Blog geschrieben. Hier reicht eine Seite (Onepager), die aber mit Javascript in Kleinteile “zersägt” wird, um die Inhalte ein bisschen abzusetzen und die gesamte Seite lesbarer zu gestalten.

Wenn ich die (momentane) HTML5-Spezifikation nicht völlig falsch verstanden habe, kann man jeden Inhaltszusammenhang in eine section packen. Da Javascript dafür sorgt, dass jeweils nur ein Bereich angezeigt wird, mutet es wie eine mehrseitige Präsenz an. Damit werden Ressourcen gespart, da insgesamt weniger Daten übertragen werden. Es gibt keine zusätzlichen Requests, da das CSS und Javscript im head des Dokuments stehen. Bei kleinen Dateien lohnt die Auslagerung in seperate Dateien nicht.

Diese Vorteile kommen noch mehr zur Geltung, wenn die Seite mit einem Smartphone genutzt wird. Das coole an Smartphones ist, dass sie spätestens alle 2 Jahre erneuert werden und Javascript immer läuft.

Desktoprechner werden steuerlich in 4-5 Jahren abgeschrieben und noch länger genutzt. Daher finden sich dort noch ein paar Uraltbrowser, deren Zeit aber abläuft. Netscape 4.6 ist ja auch verschwunden.

Auf mobilen Geräten kann man CSS @media-queries voraussetzen. Selbst wer unbedingt Windows Mobile benutzt und nicht reflexartig Opera Mobile installiert hat, findet nach dem Mango-Update jetzt den IE9 vor, der dies auch versteht. Für mich sind damit handheld-Angaben obsolet.

Für meinen konkreten Anwendungsfall ist es wichtiger auf den Fall zu reagieren, wann die Navigation nicht mehr ins portrait-Format passt. Seltsamerweise gibt es im Netz nicht viele Tipps, die sich mit der Navigation auf kleinen Screens auseinandersetzen. Ich habe nur ein Tutorial auf CSS-Tricks gefunden, das mir aber nicht gefiel. Ich wollte ein Menü, das ich auch noch treffe, nachdem ich meiner Mutter den Garten umgegraben habe.

Ich habe die Navigation gestaltet und brauchte nur noch einen Button, um die Navigation sichtbar bzw. unsichtbar zu machen. Der Button sollte gut sichtbar und erreichbar sein. Die zunächst naheliegende Variante, den button mit Pseudoelementen zu kreeiren habe ich wieder verworfen. Einerseits ist ein solcher Button im Firefox Mobile schwer bedienbar und andererseits fällt sofort auf, dass touch- und hover-Events sich deutlich unterscheiden. Das Mobiltelefon bemerkt natürlich nicht, dass der Finger weg ist und die Navigation bleibt solange sichtbar, bis der Finger irgendwo auf den Screen tippt. Unschön.

Bei meiner Lösung galt es sicherzustellen, dass der mit Javscript erzeugte button nur bei der Verwendung der mobilen @media-queries gezeigt wird, . Empfohlen sei hier die Angabe max-device-width. Angaben ohne -device- interpretieren manche Mobilbrowser nicht. Das Ungetüm

mobile = window.getComputedStyle($t('html')[0], null).getPropertyValue('border-top-style') === 'dashed' ? 'true' : 'false';

fragt nach einen bestimmten Stilmerkmal des html-Elements, dem ich für kleine Screens, oben eine gestrichelte Linie zugewiesen habe. Screenshot der Seite mit Windows Mobile Einige mobile Browser habe diese tatsächlich angezeigt, weswegen ich die Liniestärke auf 0 gesetzt habe. Wenn das Stilmerkmal vorhanden ist, muss also die @media-query funktionieren. Glücklicherweise beherrschen auch alle diese Browser .getComputedStyle. Es gibt neuere Smartphones, die im landscape-Modus mehr Pixel anzeigen, als die hier angesetzten 600px. Daher wird bei jedem resize-Event, also auch beim Drehen, die Funktion checkScreen() aufgerufen. Damit bei kleineren Displays nicht ständig neue Buttons entstehen, muss überprüft werden, ob er noch nicht erzeugt wurde. Mit .removeChild(button) ist er nur aus dem DOM entfernt, aber noch vorhanden. Diesen Fall galt es zu berücksichtigen. Die Mobilvariante ist jetzt fertig.

Die allgemeinen Stilregeln verhelfen auch alten IE’s zu einer bedienbaren Seite. Moderne Browser zeigen mehrere Spalten sowie CSS-Muster. Letztere können erheblich Performance kosten.

Demo eines Onepagers für alle Displaygrößen