Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: Mobile

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Sonnenseiten: Mobile

Mobile Webseiten sind stark im Kommen, aber deren Design weicht oftmals stark von dem ab, was wir über normale Browser zu sehen bekommen. Ein Beispiel, wie man Seiten an das bestehende Design anlehnen kann, ohne es zu stark zu verfremden, hat Fabian Tempel gefunden.

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.

Screenshot: Mezzoblue, mobile Version

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.

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.

Kommentare

Dieter Welzel
am 13.07.2008 - 23:21

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

Permanenter Link

Dieter Welzel
am 13.07.2008 - 23:40

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.

Permanenter Link

Christoph
am 14.07.2008 - 14:00

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/

Permanenter Link

Ansgar Hein
am 14.07.2008 - 17:26

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.

Permanenter Link

Die Kommentare sind geschlossen.