EinSeitig

Idee

Für eine kleine Visitenkarte im Netz genügt eine Seite, die alle wichtigen Informationen beinhaltet. Alle wichtigen Inhalte erschließen sich umgehend, nachdem die Seite geladen ist. Zusätzlichen Wartezeiten gibt es nicht.

Typischerweise bestanden Dokumente aus der Geburtsstunde des WWW nur aus einer Seite mit Text. Überwiegend waren das wissenschaftliche Texte, die durch (Hyper)Links auf einander verwiesen.

Da wir nicht mehr in der digitalen Steinzeit leben, muss auch eine reine Informationsseite (in Englisch auch Onepager genannt), nicht wie ein langer Aufsatz aussehen. Durch den Einsatz von Javascript und CSS kann die Seite in gut lesbare und abgrenzbare Abschnitte unterteilt werden. Die Leser sind auch etwas ungeduldiger als 1994.

Eric Meyer zeigte mit seinem S5, dass sich damit auch ganze Präsentationen aufbauen lassen.

Zusätzlich muss heute noch beachtet werden, dass Besucher, die Seite mit unterschiedlichen Geräten ansehen. Sie ist daher auch für mobile Endgeräte und große Monitore zu optimieren.

Browser ohne Javascript zeigen immer noch die einfache Seite, der Inhalt bleibt zugänglich. Nutzer neuerer Geräte haben davon einen Nutzen. Die "anderen Seiten" erläutern die verwendeten Techniken.

Javascript

Diese Seite habe ich im Quelltext umfangreich kommentiert. Zusätzlich möchte ich einige Aspekte hervorheben.

Mein Anspruch war es, eben nicht das allgegenwärtige jquery zu verwenden und zusätzlich noch jquery mobile. Beide Bibliotheken vereinfachen das Arbeiten erheblich, sind aber selbst gepackt keine Leichtgewichte mehr.

Für diesen Onepager ist die Anforderung lediglich die Sichtbarkeit von Elementen zu verändern. Für Mobilbrowser wird noch ein zusätzlicher button erzeugt. Daher steht der Nutzen der o.g. Bibliotheken, insbesondere beim mobilen Zugang in gar keinem Verhältnis zur Ladezeit.

Der Komfort von Bibliotheken besteht u.a. in einem einfachen Zugriff auf das DOM. Zwei kleine Funktionen dieser Seite erlauben Kurzschreibweisen, um auf id's mittels $('idee') bzw. Tags mittels $t('a',$t('nav')[0]) zuzugreifen.

Die zweite Variante sieht etwas komplizierter aus, als von jquery gewohnt, gibt aber in dem Beispiel ein array zurück, welches alle a-Elemente im ersten Navigationselement zurück.

Die meisten Funktionen gehen in allen Webbrowsern. Da alte Internet Explorer die event-Handler anders aufrufen, ist die Hilfsfunktion addEvent nötig. Zusätzlich wird die load-Funktion im IE mit windows.onload aufgerufen, was in diesem Fall gleichzeitig genutzt wird, um die 2 unbekannten Elemente (nav, section) dem IE bekannt zu machen.

Jede section enthält jetzt abgrenzbare Inhalte und bis auf die gewählte, werden die anderen per Zuweisung von display:none unsichtbar geschaltet. Damit ensteht der Eindruck von individuellen Seiten.

Eine mobile Ansicht gibt es nur für Browser, die media queries interpretieren. Damit dürfte eigentlich bislang nur der Browser auf Windows Mobile ausgeschlossen sein, der bislang noch auf dem Internet Explorer 7 basiert. Das sollte sich demnächst aber ändern. Die mobile Ansicht benötigt mehr Platz für eine Navigation, damit man diese mit den Fingern gut treffen kann, gleichzeitig steht aber eine kleinere Fläche zur Verfügung.

Mit window.getComputedStyle wird daher abgefragt, ob ein bestimmtes Stilmerkmal existiert, was ich per media query zugewiesen habe. Damit ist ein perfektes Zusammenspiel zwischen CSS und Javascript möglich. Wird auf diese Weise ein Mobilgerät "enttarnt", gibt es einen extra Button mit dem komfortabel ein Menü zugeschaltet werden kann.

Ohne Javascript bleibt sowohl auf dem Desktop als auch auf Mobilegeräten jederzeit der gesamte Inhalt zugänglich. Auf moderen Smartphones wäre dies jedoch sehr beschwerlich, da die Navigation diesen teilweise verdeckt. Die Wahrscheinlichkeit halte ich für eher gering.

Cascading Style Sheets

Der Anteil der mobilen Endgeräte nimmt ständig zu und wird in der Bedeutung noch weiter zunehmen. Daher war es mir wichtig, zunächst die mobilen Stile zu entwickeln. Die Fingernavigation erfordert Test auf echten Geräten, ansonsten empfehle ich das Android SDK und den Simulator von Opera Mobile. Nachdem ich mit dem Ergebnis einigermaßen zufrieden war, habe ich die mobilen Stile in die media query eingepackt und eine Desktopansicht entwickelt, die auch auf alten Browsern funktioniert.

Meiner Meinung nach sind conditional comments für die alten IE nicht mehr nötig. Der "Feinschliff" für moderne Browser erfolgt dann in media queries für große Bildschirme.

Ich habe der Angabe von max-device-width den Vorzug gegeben, da Firefox mobile und Opera mobile max-width nicht so richtig verdaut haben. Die eher seltsame Angabe dem html-Element eine unterbrochene Rahmenlinie zuzuweisen, ist lediglich zur Erkennung durch das Script gedacht. Diese Regel ist nur wirksam, wenn die maximale Breite des Gerätes unter 600 Pixeln liegt.

Sehr schön finde ich das CSS Muster. Lea Verou hat eine Seite eingerichtet, wo sie Muster sammelt. Vorsicht, bei einigen Firefoxtests hat dies zu einer erheblichen CPU-Belastung geführt. Vielleicht wird daran noch intensiv gearbeitet, es ist ja noch ein experimentelles Feature.

Mittlerweile kann auch CSS Column gut verwendet werden. Während ich die Desktopstile noch für verbesserbar halte, denke ich, dass das reduzierte mobile Design abgeschlossen ist.

In diesem Zusammenhang muss ich mich noch mal mehr mit der Wirkung von Schriften auf Smartphones auseinandersetze. Zunächst gebe ich den "eingebauten" Schriften den Vorzug, auch wenn beispielsweise Android nur 4 Schriften mitbringt.