Kolumne: Dino talks

DDR – interessant und lohnenswert (Teil 2)
Kommentare

Probleme von Media Queries bei Mobilgeräten
Media Queries sind mit CSS 3 eingeführt worden; bei älteren Browsern dürfen Sie also kaum mit einer Unterstützung rechnen. Doch wie sieht es bei mobilen

Probleme von Media Queries bei Mobilgeräten

Media Queries sind mit CSS 3 eingeführt worden; bei älteren Browsern dürfen Sie also kaum mit einer Unterstützung rechnen. Doch wie sieht es bei mobilen Browsern aus? Smartphones und Tablets unterstützen CSS 3 vollständig und somit gilt das – größtenteils – auch für Media Queries. Dies lässt sich aber nicht für alle Mobilgeräte verallgemeinern. Wenn Sie Ihre Site mithilfe von Media Queries erstellen, funktioniert sie sicherlich auf Smartphones, doch nicht auf jedem Mobilgerät. Irgendwann ist ein Plan B gefragt.

Die vollständige Syntax von Media Queries ist umfangreicher, als ich sie hier skizziere. Die komplette Dokumentation dazu finden Sie unter [3]. Kurz gesagt, können Sie in Media Queries Parameter wie die physische Gerätebreite, Bildschirmbreite, Ausrichtung (Quer- oder Hochformat) sowie einige andere weniger interessierende Parameter in Bezug auf die Farbtiefe verwenden.

Es ist eine Sache, eine Webseite in weniger als 320 Pixel Breite auf einem Laptop wiederzugeben, und eine ganz andere, dieselbe Seite auf einem einfachen Mobiltelefon zu rendern. Wenn Sie das Rendern über Media Queries steuern, verlagern Sie die ganze Arbeit auf den Client; mit anderen Worten: ein möglicherweise leistungsschwaches Gerät muss alles bewältigen. Es lässt sich nicht beeinflussen, was wirklich auf das Gerät heruntergeladen wird; Sie haben kaum die Möglichkeit, kleinere Bilder für schwächere Geräte bereitzustellen, bestenfalls können Sie das Layout ändern, indem Sie DOM-Elemente ausblenden und den Browser zwingen, Prozentwerte für die Größen von Elementen und Schriften zu berechnen. Es versteht sich von selbst, dass die resultierende Performance bei wirklich komplizierten Benutzeroberflächen nur auf leistungsfähigen Smartphones wie dem iPhone 4 akzeptabel ist. Gefällt Ihnen das? Nein? Dann lesen Sie weiter.

Einstieg in DDRs

Ein DDR ist ein serverseitiges Framework, das überraschend einfach arbeitet: Es übernimmt den User-Agent-String und gibt eine Datenstruktur zurück, in der es bekannte Fähigkeiten des erkannten Geräts zusammenfasst. Zu den typischen Fähigkeiten gehören is_mobile, is_tablet, screen_width, operating_system, version, support_ajax etc. Die Liste der Eigenschaften ist gewöhnlich recht lang; WURFL kann zum Beispiel bis zu 500 verschiedene Fähigkeiten pro Gerät zurückgeben. Vor allem aber ist ein DDR ein dynamisches Wesen, und es können im Laufe der Zeit neue Fähigkeiten sowie neue Geräte und aktualisierte Werte hinzukommen.

Die Informationen, die Sie aus einem DDR beziehen, kommen nicht von einer Softwarekomponente (d. h. dem Browser), sondern stellen manuell gepflegte Inhalte dar. So kann es passieren, dass Sie für ein bestimmtes Smartphone eine Antwort wie zum Beispiel „unable to play MPEG“ erhalten, was aber einfach heißt, dass das Gerät als ungeeignet erachtet wird, diese Videos wiederzugeben, nur weil ihm etwa ein Ad-hoc-Grafikprozessor fehlt.

Anhand der Informationen, die Sie aus einem DDR bekommen, können Sie unterschiedliche Markup-Blöcke einrichten, bestenfalls einen für jede Kategorie mobiler Geräte, die Sie bedienen möchten. Der Vorteil dabei ist, dass Sie die vollkommene Kontrolle über das Layout haben und dies als reines HTML- oder ASP.NET-Layout verfassen können. Zudem gibt es keinen Overhead, da nur das heruntergeladen wird, was tatsächlich erforderlich ist.

Ein DDR zu verwenden, heißt nun nicht, dass Sie für jedes bekannte Gerät unterschiedliche Markups produzieren müssen. Normalerweise definieren Sie einen Satz von Regeln, die eine Makrokategorie von Geräten definieren, und erstellen dafür Ad-hoc-Markup. So könnte eine Regel lauten: „width-greater-than-400 and operating-system-any-of-iphone-android-wp7“.

Zusammenfassung

Media Queries verkörpern keine spezifische Technik für die mobile Entwicklung, doch sind sie von Haus aus recht flexibel und eignen sich deshalb dafür, unterschiedliche Geräte von einer einzigen Codebasis aus zu bedienen. Manche Entwickler glauben, dass sich eine Site durch einfaches Hinzufügen von Media Queries für mobile Clients präparieren lässt. CSS Media Queries helfen zwar dabei, die Seiteninhalte benutzerfreundlicher zu gestalten, doch sie wirken sich einfach nicht auf andere entscheidende Bereiche der Optimierung aus, wie zum Beispiel die Anzahl der HTTP-Anfragen pro Seite, die Bandbreite, ob DOM-Manipulierung und Ajax unterstützt werden oder ob ein Touchscreen vorhanden ist. Als Ad-hoc-Markup ist wahrscheinlich eine Lösung effektiver, die auf serverseitigen DDRs basiert. Und natürlich ist immer Platz für Hybridlösungen, bei denen Sie mithilfe von Ad-hoc-Markup unter Verwendung von Media-Queries-Logik die Entwicklung vereinfachen.

Dino Esposito ist CTO bei e-tennis.net, einer Firma, die sich auf webbasierte und mobile Lösungen für Sportereignisse in ganz Europa spezialisiert hat. Außerdem ist Dino der Autor von „Programming ASP.NET MVC3“, Microsoft Press, 2011.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -