Artikel
Sonnenseiten: Mobile
Für die Darstellung auf mobilen Endgeräten nutzt Dave Sheas Webseite mezzoblue.com ein alternatives Stylesheet, das für die Ausgabe auf den kleinen Displays optimiert wurde. Dabei wird der Inhalt linearisiert dargestellt und auf große Bilder sowie auf Hintergrundbilder bewusst verzichtet, um das zu ladende Datenvolumen zu minimieren. Dennoch finden sich Stilelemente wie die Navigation und der Seitenabschluss sowie Buttons und kleinere Bilder auch im mobilen Layout wieder.
Allerdings stellen die neuesten Geräte, gerade Smartphones, Webseiten oft in ihrem normalen Layout dar, d.h. die medienspezifische Ausgabe der Stylesheets mit media="screen/handheld" ist oftmals wirkungslos. Dave Shea hat für dieses Problem ein PHP-Script in seine Seiten implementiert, das den Browsertyp des jeweiligen Gerätes herausfindet und somit die gewünschte CSS-Datei lädt. Zusätzlich bietet „mezzoblue“ jedoch die Möglichkeit zwischen den Layoutvarianten zu wählen, um dem User nicht eine Darstellungsform aufzuzwingen. Somit entscheidet letztendlich der Betrachter, in welcher Form er die Seite auf seinem mobilen Gerät anschauen möchte. Diese Art „Style-Switcher“ wird im mobilen Layout im Kopfbereich der Seite angezeigt, so dass eine schnelle Auswahl des Designs möglich ist.
Dave Shea geht aber noch einen Schritt weiter und hat „mezzoblue“ noch für andere Browser-Arten optimiert. Die neueste Generation von Spielekonsolen, z.B. Nintendos Wii, haben ebenfalls Webbrowser integriert, mit denen man Webseiten auf dem Fernsehbildschirm anschauen kann. Ein drittes Stylesheet ist ebenfalls über den Styleswitcher erreichbar, um die TV-Variante des Layouts aufzurufen.
In allen drei Darstellungsformen ist das unverkennbare Design der Seite wiederzuerkennen und stellt somit eine sehr gelungene Umsetzung mittels CSS von Webseiten für den mobilen Einsatz dar.
Zum Autor
Fabian Tempel arbeitet als Frontend Developer bei netz98 in Mainz. Er ist Fan des CSS-Frameworks YAML, Befürworter von Progressive Enhancement und schreibt in seinem Blog über Webentwicklung und Webstandards.
Zur Aktion
Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.
- Info:
- Sonnenseiten: Mobile ist Beitrag Nr. 433
- Autor:
- Fabian Tempel am 13. Juli 2008 um 08:00
- Kategorie:
- Sonnenseiten
Kommentare
Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.
Kommentar-Feed für diesen Beitrag
Entschuldige, das Kommentarformular ist zurzeit geschlossen.
Danke für diese wertvolle Sonnenseite in Sachen Mobile und das in Erinnerung rufen dieser Technik. Ich glaube, dass dies derzeit der beste Ansatz zur Berücksichtigung von mobilen Ausgabegeräten ist. Meine private Website will ich demnächst mal mit dieser Technik auch für Mobilgeräte zugänglich machen.
Hier noch der Link zum entsprechenden Blogbeitrag von Dave Sheas.
Beste Grüße
Dieter
Kommentar by Dieter Welzel - 13. Juli 2008 um 23:21
Einen Nachtrag habe ich noch bezüglich mobile Version für WordPress:
Es gibt ein WordPress-PlugIn namens WordPress PDA & iPhone Plugin. Das ist leider erst mal nur in Englisch und das Stylesheet muss man ggf. noch an die eigenen Stilelemente anpassen.
Eingedeutscht habe ich die Version 1.2.1, die man bei Bedarf bzw. Interesse von meinem Blog herunterladen kann.
Kommentar by Dieter Welzel - 13. Juli 2008 um 23:40
Die Webseite Macnotes.de hat auch eine mobile Version der Homepage (eine für "normale" Mobilgeräte und eine extra für iPhone und iPod touch). Ist auch sehr gelungen!
Mehr darüber: http://www.macnotes.de/abonnieren/
Kommentar by Christoph - 14. Juli 2008 um 14:00
Tja, da sind sie wieder: Browser-Weichen. War ja nur eine Frage der Zeit, bis es wieder so kommen würde. Richtig glücklich macht mich das als Webentwickler nicht, auch wenn es sonnige Aussichten auf mobile Gestaltung bietet.
Kommentar by Ansgar Hein - 14. Juli 2008 um 17:26