Open Source im professionellen Einsatz
Linux-Magazin 08/2014
© Tatiana Grozetskaya, 123RF

© Tatiana Grozetskaya, 123RF

Webbrowser-Fensterbreiten-gesteuerte Anzeigelogik in Perl

Breit nur bei Bedarf

Damit sein Blog sowohl auf Desktop-Monitoren als auch auf modernen Mobiltelefonen mit hochauflösender Grafik gut aussieht, hat Perlmeister Schilli mit CSS und Media-Queries eine von der Browserbreite abhängige Umschaltautomatik gebaut.

496

Die Optik meines USA-Blogs Usarundbrief.com entlarvt, dass das Seitenlayout mehr als zehn Jahre auf dem Buckel hat. Auf dem Laufsteg sollen Modetrends ja alle 30 Jahre wiederkehren. Dass mein Webdesign in Kürze nochmals vorbeischaut und meine Seiten von allein wieder en vogue werden, halte ich dagegen für wenig wahrscheinlich.

Da bleibt mir wohl nichts anderes übrig, als selbst Hand anzulegen. Die Website hatte ich damals mit dem Perl-Template-Toolkit aufgezogen – unter strikter Trennung von Inhalt (jetzt auf Github [2] ) und Layout. So sollte es nicht schwerfallen, die Seiten-Garderobe einer radikalen Designänderung zu unterwerfen.

Von bunten Kästen mit runden Ecken und anderem Firlefanz abgesehen, zeichnet sich gutes Webdesign heute vor allem dadurch aus, dass der Inhalt einer Website auf den kleinen Displays von Mobiltelefonen genauso lesbar ist wie auf einem Desktop-Monotor ( Abbildung 1 , [3] ). Das lösen manche Site-Betreiber durch spezielle Mobilseiten, zu denen sie den Browser lotsen, sobald sie anhand des Useragent-Headers feststellen, dass der User im Moment auf ein Minidisplay in seiner Hand starrt. Die Mobilseiten verzichten dann beispielsweise auf Navigationselemente, die dicke Finger auf Smartphones gewöhnlich verfehlen.

Abbildung 1: Auf einem breiten Desktop stören Navigationselemente neben dem Inhalt nicht.

Doppelt hält nicht besser

Nach der Lehre des Responsive Design stecken Webentwickler aber nicht eigenen Aufwand in besondere Mobilseiten, sondern gehen einen Ressourcen sparenden Weg. Mittels CSS und so genannter Media-Queries antwortet eine HTML-Seite mit jeweils passenden Leistungsmerkmalen auf die Displays: Auf kleinen Bildschirmen fallen manche Navigationselemente weg, Logos schrumpfen und meist seitlich nebeneinander platzierte Bereiche reihen sich untereinander an.

Online PLUS

In einem Screencast demonstriert Michael Schilli das Beispiel: http://www.linux-magazin.de/2014/08/plus .

Mit Zwicker und Leselupe

Vor allem stört bei meinem Blog ein Feature von Smartphone-Browsern: Trotz kleinen Displays schneiden sie aufgerufene Seiten nicht ab, sondern zoomen so weit heraus, dass die gesamte Seitenbreite erscheint. Bei für PC-Displays gebauten Seiten kann das kein Mensch lesen, und der mobile User hat beide Finger voll zu tun, mit Gesten auf eine lesbare Schriftgröße zu kommen und per Panning wie mit einer Lupe im Inhalt herumzufahren ( Abbildung 2 ).

Eine Seite, die nun alle Displaygrößen gleichermaßen bedient, schaltet zuerst das Zoom-Feature ab. Mit dem Tag

<meta name="viewport" content="width=device-width,initial-scale=1.0">

im Headerteil des HTML-Dokuments bricht nun (gewollt) auf kleinen Displays das Chaos ( Abbildung 3 ) aus: Der Browser schneidet gnadenlos den rechten Teil der Seite ab, Teile des Inhalts auf der linken ebenfalls. Statt auf den Inhalt blickt der User manchmal auf riesige Logos und Navigationselemente. (Der Desktop-User bleibt verschont, denn er sieht nach wie vor das Original-Layout.) Klar ist: Nach diesem ersten Schritt muss die Seite ihren Inhalt dynamisch neu strukturieren, sobald sie bemerkt, dass ein Handy-User darin herumstöbert.

Abbildung 2: Das iPhone zeigt die Seite auf große Distanz, sodass sie zwar in voller Breite erscheint, aber ohne Zoomen nicht lesbar ist.
Abbildung 3: Die HTML-meta-Anweisung an den Viewport unterdrückt die Zoomfunktion des iPhone. Die Folge ist abgeschnittener Text.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 4 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Der Perl-Screencast zum Linux-Magazin 2014/08

    Webbrowser-Fensterbreiten-gesteuerte Anzeigelogik in Perl: Damit sein Blog sowohl auf Desktop-Monitoren als auch auf modernen Mobiltelefonen mit hochauflösender Grafik gut aussieht, hat Perlmeister Schilli mit CSS und Media-Queries eine von der Browserbreite abhängige Umschaltautomatik gebaut.

  • GIS-APIs

    Online-Kartendienste gehören zu den Standard-Accessoires von Anwendern, die Dienstreisen, Wanderungen und Ausflüge planen oder abrechnen. Dieser Artikel zeigt, wie Programmierer die Karten-APIs von Google und Open Streetmap in Javascript-Dateien einbinden, die der Webserver ausliefert.

  • Ein Stift für jedes Blatt

    Identische Darstellung auf dem Linux- und dem Windows-Bildschirm oder in PDF-Dokumenten sowie performante Ausgabe von 2D-Grafiken - mit seinen Backends erledigt Cairo die Hauptarbeit.

  • Perl und C

    Der Perl-Interpreter perl ist in C geschrieben und bietet recht komfortable Schnittstellen, um ihn mit erstaunlich schnellen Zusatzfunktionen auf Maschinenebene aufzupeppen. Allerdings profitieren nur ganz bestimmte Anwendungen tatsächlich vom Mixed Language Programming.

  • Perl-Snapshot

    Was harmlos mit ein paar sonderbaren Katzenbildern begann, ist zu dem Internetphänomen schlechthin angeschwollen: Memes, mit Witztexten versehene Fotos, und animierte Gag-Gifs. Kein Witz: Mit Perl lassen die sich prima selbst bauen und individuell gestalten.

comments powered by Disqus