Innovation

Entwicklung mobiler Websites, Teil 2: Design

Dino Esposito

 

Die Entwicklung mobiler Websites ist von einigen Mythen umgeben, die zumeist auf der Vorstellung beruhen, dass eine mobile Lösung eine Ableitung aus einer vorhandenen Desktopwebsite ist. Der Begriff Ableitung beschreibt dabei meiner Meinung nach sehr treffend das Verhältnis zwischen einer mobilen und einer Desktopwebsite. Das Kernproblem liegt in den Details, wie die mobile Website eigentlich von der vollständigen Desktopwebsite abgeleitet wird.

Sie möchten den Benutzern die bestmögliche Navigation für ihr jeweiliges Gerät bieten, sei es ein gewöhnlicher PC, ein Smartphone, ein Tablet PC oder ein altmodisches Handy. (Ich gehe hier nicht auf eine entstehende Familie von Großbildschirmgeräten wie Smart-TVs ein, für die in naher Zukunft ein eigenes Rendering erforderlich werden wird.) Sie möchten den Benutzern außerdem eine Gruppe von Seiten bieten, die mit dem anfordernden Gerät optimal angezeigt werden können. Wie würden Sie das Markup auswählen, das am besten zu einem bestimmten Gerät passt? Dies ist meiner Meinung nach ein wunder Punkt, der einige Aufmerksamkeit und Analyse verdient, damit Sie nicht auf die Mythen hereinfallen und die tatsächlichen Verhältnisse übersehen.

Der Mythos "Eine Site passt für alles"

Den meisten Entwicklern ist bewusst, dass eine mobile und eine Desktopwebsite unterschiedlich aussehen müssen. Die Bildschirmgrößen sind verschieden, die Rechenleistung ist verschieden, und insbesondere sind die Anwendungsfälle auf einer mobilen Website seltener und weitgehend verschieden. Dennoch ist die Vorstellung, nur eine Website aufzubauen, die sich automatisch an verschiedene Auflösungen anpasst, für viele Entwickler verlockend. Dies kann allerdings eine riskante Vorgehensweise sein, mit mehr Nachteilen als Vorteilen. Realistisch gesehen, hängt die das Für und Wider von der Art der Anwendung ab: Je komplizierter die Website, desto mehr spricht dagegen und desto weniger dafür. Was bedeutet es eigentlich genau, über eine einzige Seite zu verfügen, die sich an mehrere Geräte anpasst? Viele Entwickler denken mit Schrecken an die Zeiten vor wenigen Jahren (wenn nicht noch heute) zurück, als der Aufbau einer Website bedeutete, sich in einem Chaos von unterschiedlichen (Desktop-) Browsern mit unterschiedlichen Möglichkeiten zurechtzufinden. Aus diesem Grund begrüßen die meisten Entwickler die Vorstellung einer einzigen Website, die Besucher mit jedem Gerät (Laptops, Tablet PCs, Handys, E-Readern, Smart-TVs usw.) besuchen können, die jedoch für jede Gruppe eine andere Benutzererfahrung bereitstellt. 

Der Punkt ist, dass bei Desktopbrowsern die Unterschiede hauptsächlich im Bereich der Wiedergabe liegen. Mobile Geräte fügen dem Problem jedoch eine weitere Dimension hinzu: unterschiedliche Fähigkeiten. Daher sollte das Ziel sein, eine Website aufzubauen, die automatisch die bestmögliche Benutzererfahrung auf den unterschiedlichen Geräten bereitstellt, und sich nicht auf die bestmögliche Wiedergabe des Inhalts versteift.

Klingt dieser Unterschied spitzfindig? Nun, die Frage clientseitige oder serverseitige Anpassung mobiler Inhalte ist heutzutage noch nicht abschließend geklärt. 

 Mir scheint, dass die Vorstellung einer einzigen Website mit einheitlichem Inhalt, an den der Server sich je nach dem verwendeten Gerät anpasst, in der Regel nicht funktioniert, sondern höchstens in Ausnahmefällen. Der Mythos, dass eine Website für alles passt, beruht auf der Fähigkeit des Browsers, auf der Grundlage einiger physischer Eigenschaften des Geräts dynamisch das angemessenste CSS-Stylesheet auszuwählen. Darauf wollen wir genauer eingehen.

CSS-Medienabfragen

Seit CCS 3 sind Medienabfragen eine Browserfunktion mit dem Zweck, die Entwicklung von Sites zu vereinfachen, auf die über Geräte mit unterschiedlichen Bildschirmgrößen zugegriffen werden kann. Es ist zu beachten, dass der Begriff 'Gerät' in diesem Zusammenhang auch Laptops und Desktop-PCs einschließt. Daher kann die Bildschirmgröße zwischen den 24 Zoll eines Desktopmonitors und den 3 Zoll der meisten Smartphones variieren.

Die Idee hinter den CSS-Medienabfragen ist es, eine Website mit einem einzigen Satz von Funktionen zu erstellen und dann durch Laden verschiedener Stylesheets für verschiedene Medien unterschiedliche CCS-Formate darauf anzuwenden. Die große Verbesserung bei CSS 3 besteht darin, dass das Bildschirmseitenmedium jetzt auf Geräte eingeschränkt werden kann, die einem gegebenen Satz von Regeln entsprechen. Hier folgt ein Beispiel für eine Medienabfrage:

    <link type="text/css"
      rel="stylesheet"
      href="downlevel.css"
      media="only screen and (max-device-width: 320px)">

Sobald es auf einer Webseite (oder ASP.NET MVC-Ansicht) platziert ist, verbindet das voranstehende Markup die downlevel.css-Datei nur dann, wenn die Seite über einen Browser mit einer Breite von 320 Pixeln oder weniger angezeigt wird. Durch Verwendung einiger der voranstehenden Elemente können Sie das Rendern von beliebigen Seiten für Geräte mit unterschiedlicher Bildschirmgröße optimieren. Erfreulicherweise wird die Stylesheetregel dynamisch angewendet und passt den Seiteninhalt auch an, wenn der Benutzer die Größe des Browserfensters auf dem Desktop verändert.

Es sollte beachtet werden, dass bei CSS-Medienabfragen keine explizite Überprüfung des Browsertyps auf mobil oder Desktop stattfindet; was zählt, ist nur die effektive Bildschirmgröße. Wenn Sie allerdings eine Medienabfrage verwenden, um Browser mit einer Bildschirmbreite von mehr als 320 Pixeln herauszufiltern, wählen Sie mit Sicherheit alle mobilen Geräte und Handys mit dieser Bildschirmgröße aus.

In der Medienabfrage sollte das Schlüsselwort "Only" einzig und allein hinzugefügt werden, um die Medienabfrageanweisung vor Browsern zu verstecken, die keine Medienabfragen unterstützen. Diese Browser erkennen den Medientyp tatsächlich nicht und fahren einfach munter mit dem Rendern fort. Heutzutage ist die Vorstellung verbreitet, dass es genügt, einer Site Medienabfragen hinzuzufügen, um sie für mobile Clients bereit zu machen. Ich bin da etwas anderer Meinung. CSS-Medienabfragen tragen dazu bei, den Seiteninhalt mobilgerätefreundlicher zu machen, sie tragen jedoch überhaupt nicht zur Optimierung der mobilen Website in anderen entscheidenden Aspekten bei, wie z. B. der Anzahl der HTTP-Anfragen pro Seite und der Menge der heruntergeladenen Daten.

Außerdem können Medienabfragen nur eine begrenzte Anzahl von Browsereigenschaften unterscheiden. Eine vollständige Dokumentation zu Medienabfragen finden Sie unter bit.ly/yOuW7q.

Die CSS-Medienabfrageeigenschaften teilen Ihnen etwas über das Gerät mit, jedoch nicht alles, was Sie benötigen. So erhalten Sie keinen Hinweis zum Betriebssystem, erfahren nicht, ob die Geräte mobil sind oder nicht und ob es sich um einen Tablet PC oder ein Smartphone oder vielleicht um einen Bot handelt. Ebenso wenig haben Sie bei CSS-Abfragen eine Vorstellung, ob der anfordernde Browser Asynchronous JavaScript und XML und Document Object Model-Manipulation unterstützt, wie er mit HTML 5 und jQuery Mobile umgeht, oder welche Art von Markup er bevorzugt.

Da Medienabfragen eine CSS-Funktion sind, werden sie vom CSS-Subsystem des Browsers verarbeitet. Es stellt sich heraus, dass Medienabfragen nur einen Satz von Elementformaten auswählen können, die einige Elemente, die entweder zu groß sind oder auf einem kleinen Bildschirm reduziert werden können, ausblenden oder in der Größe verändern. Bei CSS-Medienabfragen zahlen Sie immer die Kosten für das Herunterladen und Speichern dieser Elemente, auch wenn sie gar nicht angezeigt werden. Sie können JavaScript auf den Seiten verwenden, um Bilder programmgesteuert herunterzuladen und zu konfigurieren. Auf diese Weise können schwere Elemente besser verwaltet werden. Diese zusätzliche Arbeit müssen Sie allerdings selber tun.

Und nicht zuletzt erfordern Medienabfragen einen Browser, der CSS 3 unterstützt. Das bedeutet, dass CSS-Medienabfrage bei den meisten Smartphones gut funktionieren, nicht jedoch bei älteren Geräten, und nicht einmal bei Windows Phone 7. Sie können sich für eine Medienabfragelösung für alle Browser entscheiden, indem Sie sich das jQuery-Plug-In unter bit.ly/JcwwFY besorgen. Allerdings besteht auch in diesem Fall keine Garantie, dass der mobile Browser, auf dem Sie dieses Plug-In ausführen, wirklich jQuery ausführen kann.

Insgesamt sind CCS-Medienabfragen keine Technologie, die speziell auf die Entwicklung mobiler Websites ausgerichtet ist. Die Flexibilität der CSS-Medienabfragen macht sie jedoch attraktiv, wenn verschiedene Geräte mit einer einzigen Codebasis bedient werden sollen. Sie können in einigen Fällen eine Lösung sein, CSS-Medienabfragen sind jedoch nicht für jedes Szenario das Verfahren der Wahl.

Multi-Serving

Der serverseitige Weg zur Entwicklung mobiler Websites basiert auf der Idee, dass die Website eine Anfrage erhält, den Benutzeragenten aufruft und diese Information verwendet, um die effektiven Möglichkeiten des Browsers festzustellen. Auf Basis dieser Erkenntnis trifft die intelligente Website eine Entscheidung, welches der am besten geeignete Inhalt für das anfragende Gerät ist.

Wie kann man etwas über die Möglichkeiten des Browsers erfahren? Derzeit scheint es die effektivste Strategie zu sein, Device Description Repository (DDR) zu verwenden, also eine Datenbank, die nahezu alle möglichen Eigenschaften nahezu aller Geräte speichert, und die kontinuierlich aktualisiert wird, wenn neue Geräte auf den Markt kommen. Worin unterscheidet sich ein DDR vom ASP.NET Request.Browser-Objekt? In gewisser Weise kann das Request.Browser-Objekt als ein einfaches DDR angesehen werden, das brauchbare Informationen zu Desktopbrowsern enthält, aber keine besonders genauen Informationen über mobile Geräte. 

Es gibt Tausende von Modellen mobiler Geräte, und ihre Anzahl nimmt ständig zu. Die Eigenschaften in einem Geräteprofil, die für Entwickler interessant sind, können sich von Fall zu Fall unterscheiden, insgesamt summieren sie sich jedoch leicht auf ein paar hundert. Welche Optionen gibt es heute, um genaue Geräteinformationen zu erhalten?

Das DDR namens Wireless Universal Resource File (WURFL) ist eine XML-Datenbank, die derzeit mehr als 15.000 Profile von mobilen Geräten enthält und Übereinstimmungen für eine halbe Million Benutzeragentenstrings vorhält. Jedes Profil enthält über 500 Funktionen. WURFL ist ein Open-Source-Framework, das in einem klassischen zweifachen Lizenzierungsmodell veröffentlicht wurde, AGPL v3 und kommerziell. WURFL ist auch als Cloud-Dienst verfügbar, und einige grundlegende Tarife, beschränkt auf wenige Eigenschaften, sind gebührenfrei. (Weitere Informationen finden Sie unter scientiamobile.com.) WURFL ist nicht das einzige DDR, das verfügbar ist, WURFL kann jedoch de facto als Standard gelten. Unter anderem wird WURFL von den mobilen Plattformen von Facebook und Google verwendet. WURFL hat APIs für PHP, Java und das Microsoft-.NET-Framework, und über NuGet lässt es sich problemlos in ASP.NET-Anwendungen einfügen.

Für die ASP.NET-Plattform liegt mit 51Degrees (51degrees.codeplex.com) eine weitere interessante DDR-Lösung vor. 51Degrees verwendete ursprünglich WURFL als Quelle für Geräteinformationen, es wurde jedoch kürzlich mit einer neuen internen Architektur und neuen Begriffen wieder veröffentlicht. 51Degrees ist eine rein kommerzielle Initiative, es bietet jedoch eine kostenlose Version des Frameworks, die auf vier Eigenschaften beschränkt ist: isMobile, ScreenPixelWidth, ScreenPixelHeight und LayoutEngine, das sich auf das Browserrenderingmodul bezieht. Hinsichtlich ihrer kostenlosen Angebote sind WURFL und 51Degrees nahezu gleichwertig, abgesehen von der Lizenzierung.

Wünsche und Anforderungen verstehen

Bei der Entwicklung von mobilen Websites geht es hauptsächlich darum, zu wissen, was Ihre Kunden wünschen und brauchen. Dies ist ein entscheidender Punkt, und er ist gelöst, wenn Sie über eine gute Auswahl von Anwendungsfällen verfügen. Speziell für mobile Websites glaube ich, dass die Hauptarbeit darin besteht, eine gute Auswahl von Anwendungsfällen zu erhalten. Darüber hinaus muss bei der Entwicklung von mobilen Websites berücksichtigt werden, dass die Surfen im Internet über mobile Geräte anders ist. Das bedeutet, dass zwar das Ziel darin besteht, nur eine Website zu haben, die sich den verschiedenen Geräten anpasst, dass dies jedoch nicht wie durch Zauberei nur mit einigen CSS-Dateien zu erreichen ist. CSS enthält fast keine Logik, aber Sie wünschen wahrscheinlich, dass die Logik bei der Entscheidung, welcher Inhalt für eine bestimmte Klasse von Geräte bereitgestellt werden soll, eine Rolle spielt.

Im nächsten Artikel werde ich darstellen, wie von einer Desktop- auf eine mobile Website umgeschaltet werden kann, sodass zwei Sites bereitgestellt werden, die jedoch wahrscheinlich die gleiche Benutzererfahrung bieten. Später werde ich genauer auf Browsersegmentierung und Alternativen zu Medienabfragen eingehen.

Dino Esposito ist der Autor von „Architecting Mobile Solutions for the Enterprise” (Microsoft Press, 2012) sowie „Programming ASP.NET MVC 3” (Microsoft Press, 2011) und Mitverfasser von „Microsoft .NET: Architecting Applications for the Enterprise“ (Microsoft Press 2008). Esposito lebt in Italien und ist ein weltweit gefragter Referent für Branchenveranstaltungen. Sie können ihm auf Twitter unter twitter.com/despos folgen.

Unser Dank gilt dem folgenden technischen Experten für die Durchsicht dieses Artikels: Steve Sanderson