Kolumne: Dino talks

DDR – interessant und lohnenswert
Kommentare

Ein Device Description Repository (DDR) ist nahezu obligatorisch, wenn Sie eine mobile Website erstellen möchten. Bei einem DDR handelt es sich um eine Datenbank, die Sie per Programm abfragen können, um möglichst viel über die erkannten Fähigkeiten des User Agents zu erfahren, der die Abfrage ausführt. Auf diese Weise erhalten Sie detaillierte Angaben zum Clientbrowser – ob er nun in das Gerät eingebettet ist oder vom Benutzer installiert wurde –, d. h. welche Fähigkeiten er besitzt, unter welchem Betriebssystem er läuft, wie groß der Bildschirm ist, welche Bild- oder Videotypen er vorzugsweise verarbeitet und ob es sich um ein Tablet, ein Smartphone oder vielleicht ein Smart-TV-Gerät handelt. Diese Informationsfülle bietet Ihnen ein wirkungsvolles Instrument, wenn es darum geht, das Markup zu definieren, um den anfordernden Browser zu bedienen. Doch trotz ihrer zunehmenden Beliebtheit sind DDRs in der allgemeinen Wahrnehmung von Entwicklern den CSS-Media-Queries unterlegen. Diese Ausgabe von „Dino talks“ gibt Ihnen nun einen kommentierten Vergleich von Media Queries und DDRs.

Windows Developer

Dieser Teil der Kolumne „Dino Talks“ von Dino Esposito ist erstmalig erschienen im Windows Developer 10.2012

Sollte Sie der Browserkrieg der 1990er Jahre verschreckt haben, machen Sie sich gleich auf eine ähnlich chaotische Situation gefasst, wenn Sie sich mit der Entwicklung für mobile Geräte befassen. Auf dem mobilen Sektor kann die Anzahl der Geräte, mit denen Ihre Site möglicherweise besucht wird, in die Tausende gehen. Es liegt auf der Hand, dass Sie gar nicht erst daran zu denken brauchen, alle diese Geräte zu berücksichtigen. So hat die Community schon beizeiten Sätze von Fähigkeiten definiert, die verschiedenartigen Geräteprofilen gemeinsam sind. Vor über zehn Jahren wurde das WURFL-Projekt als Open-Source-Initiative mit dem Ziel ins Leben gerufen, Daten über Geräte zu erfassen und verfügbar zu machen. Im Laufe der Jahre ist die Datenbank gewachsen, und die Initiative hat sich als recht erfolgreich herausgestellt. So wird die WURFL-Datenbank heute von Branchenriesen wie Google und Facebook verwendet. Weitere Informationen zu WURFL finden Sie unter [1]. WURFL bietet Ihnen ein plattformübergreifendes API, mit dem Sie die Fähigkeiten für einen bestimmte User-Agent-String abfragen können. WURFL ist für PHP, Java, .NET, C++ und sogar Ruby verfügbar. Vor Kurzem wurde die Lizenzierung von WURFL geändert und unter die Affero GPL v3 gestellt, ist also für Open-Source-Projekte weiterhin kostenlos, nicht mehr aber für kommerzielle Projekte, Websites eingeschlossen. In diesem Umfeld sind andere DDR-Frameworks auf dem Markt aufgetaucht. Ich beschränke mich hier aber nicht auf ein konkretes DDR-Framework. Vielmehr möchte ich veranschaulichen, weshalb die Verwendung eines DDR – welches DDR Sie auch bevorzugen – im Allgemeinen ein besserer Ansatz für Websites ist, die mit gerätespezifischen Eigenschaften umgehen müssen und auf Tablets, Smartphones, Laptops und Legacy-Telefonen unterschiedlich aussehen.

Die laterale Denkweise von Media Queries

Eine Lösung, die auf serverseitigem Code und zusätzlichen Tools wie zum Beispiel DDRs basiert, mag für viele Leute übermäßig komplex erscheinen. Sicherlich erschien sie komplex für diejenigen, die Responsive Webdesign (RWD) vorangebracht haben (um weitere Einzelheiten zu erfahren, beginnen Sie am besten auf der Wikipedia-Seite unter [2] und folgen dann einigen Links.) RWD ist wie ein Satz von Entwurfsregeln, nach denen Sie eine Website gestalten können, die sich dynamisch an das aktuelle Layout des Browsers anpasst, unabhängig davon, ob das Browserfenster in der Größe geändert oder die Seite auf einem kleinen oder besonders großen Gerät betrachtet wird. RWD beruht auf CSS 3 Media Queries und forciert flüssiges Seitendesign mit proportionalen Rastern und Größenänderung.

RWD an sich hat nichts mit Mobile zu tun. RWD ist weder eine Technologie noch eine Strategie, die speziell für das Erstellen mobiler Sites eingerichtet wurde. Gleichzeitig aber zielt RWD darauf ab, mit nur einer einzigen Codebasis die gleichen Inhalte in unterschiedlicher Weise basierend auf verschiedenen Bildschirmgrößen anzuzeigen. Als Strategie ist es genügend flexibel, um auch mobilen Szenarios gerecht zu werden. Deshalb glaube ich, dass es uns wie Manna vom Himmel geschickt wurde.

Die meisten mobilen Entwickler mögen RWD, weil sich damit ein wirkliches Problem umgehen lässt: das der Geräteerkennung. Wenn das Erkennen von Geräten so schwer und problematisch ist, warum umgehen wir dies nicht einfach und verwenden stattdessen CSS-Medienabfragen?

Die mit CSS 3 eingeführten Media Queries erweitern praktisch die Syntax der @media-Regel. Browser ermöglichen es, mit einem Ausdruck die zu ladende CSS-Datei anzugeben. Mithilfe mehrerer Ausdrücke (und mehreren CSS-Dateien) können Sie letztlich die Site effizient an Geräte anpassen, bei denen der Bereich der Bildschirmgrößen von den 24 Zoll eines Desktopmonitors bis hinab zu den 3 Zoll der meisten Smartphones reichen kann. Der folgende Code zeigt ein Beispiel für einen Ausdruck der Media Queries:

  

Nachdem ein kompatibler Browser das obige Markup verarbeitet hat, wird auf die Datei legacy-device.css nur verwiesen, wenn der Benutzer die aktuelle Seite über einen Browser mit einer minimalen Breite von 320 Pixel betrachtet. Es gibt nirgendwo Code, der den Typ des Browsers untersucht. Darüber hinaus funktioniert dasselbe Markup unabhängig davon, ob der Browser von einem Laptop (bei dem der Benutzer das Browserfenster in der Größe geändert hat), einem Tablet oder einem Mobiltelefon aufgerufen wird; es zählt allein die wahre Breite des Bildschirms.

Mithilfe von Media Queries kommen Sie für die Behandlung unterschiedlicher Geräte mit CSS, DOM-Manipulation und gegebenenfalls ein wenig JavaScript aus. Es liegt auf der Hand, dass das erforderliche CSS (und der Skriptcode) nicht trivial aussehen dürfte; doch andererseits ist es auch nicht unmöglich, ihn zu schreiben.

Letztlich läuft es bei CSS Media Queries im mobilen Sektor auf laterales Denken hinaus – eine intelligente und innovative Möglichkeit, die mit der Geräteerkennung verbundenen Probleme zu lösen. Lassen Sie User-Agent-Strings links liegen, konzentrieren Sie sich einfach auf die Bildschirmgröße und überlassen Sie dem Browser den Rest.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -