Mobile Websites auf hochauflösenden Displays – so geht’s mit HTML5 und CSS3

28. April 2015 / Kategorie Webdesign
CSS3 HTML5 Mobile Website Responsive Design
Mobile Website auf hochauflösenden Dispalys

Seit dem Erscheinen von hochauflösenden Displays mit Retina-Technologie machen sich die Webentwickler weltweit Gedanken darüber, wie man mittels HTML der hochqualitativen Darstellung von Grafiken auf den neuen Geräten Rechnung tragen kann. Hierfür wurden passende Tags im HTML5-Standard sowie entsprechende CSS3-Elementbeschreibungen geschaffen, die für diese Aufgabe sehr nützlich sind.

Das „Retina-Problem“
Die Displays in modernen Smartphones haben mittlerweile eine höhere Auflösung als herkömmliche Desktop-Monitore. Ein Foto im JPG-Format, welches auf dem heimischen Computerbildschirm den gesamten sichtbaren Bereich einnimmt, füllt auf einem Retina-Display nur ein Viertel des Displays aus, da hier die Bildpunkte eine höhere Dichte aufweisen. Damit das Bild hier nicht zu klein dargestellt wird, rechnen moderne Smartphones und Tablet-PCs die Grafiken um, so dass sie displayfüllend dargestellt werden. Durch diesen Vorgang werden Bilder allerdings unscharf und „pixelig“. Hier ist der Webentwickler gefordert, mittels sogenanntem Responsive Webdesign die Usability einer mobilen Website zu steigern, wobei er folgende Informationen in seinem Design sinnvoll verarbeiten muss:

  • Der Webdesigner kennt die Größe des Originalbildes (Breite mal Höhe in Pixeln).
  • Der Webdesigner kennt die Größe, in der das Bild auf der Website dargestellt werden soll.
  • Der Browser auf dem Gerät des Betrachters kennt die Größe des sichtbaren Bereiches.
  • Der Browser kennt die Auflösung des Displays.

Die Lösung dieser Aufgabe gehört mittlerweile zum Alltag beim Aufbau von optimierten Websites mit Responsive Design.

Lösung mit HTML5
Der HTML5-Standard bringt neue Tags mit, die es ermöglichen, Websites zu erstellen, die für die Anzeige auf kleinen hochauflösenden Displays optimiert sind. Besonders die Erstellung von WebApps (kleine Applikationen, welche vollständig im Browser laufen) wird dadurch unterstützt. Solche WebApps sind auf allen Betriebssystemen lauffähig, es müssen also nicht verschiedene Versionen für iOS, Android oder WindowsPhone produziert werden. Die Entwicklungskosten werden somit drastisch gesenkt.

In der Praxis funktioniert die korrekte Darstellung von hochauflösenden Fotos auf mobilen Websites so, dass mehrere Bilddateien desselben Fotos in unterschiedlichen Auflösungen bereitgehalten werden. Mit speziellen HTML5-Tags wird der Browser dazu veranlasst, die Auflösung und den sichtbaren Bereich des verwendeten Endgerätes zu ermitteln. Die Ergebnisse werden dann dazu verwendet, die jeweils passende Bilddatei zu laden und darzustellen.

Beim Einsatz des HTML5-Standards muss allerdings auch berücksichtigt werden, dass einige ältere Browser die neuen Auszeichnungsmerkmale noch nicht verarbeiten können. Hier gilt es also abzuwägen, ob man diese Technik einsetzen möchte. Fallback-Lösungen (Verwendung von herkömmlichen HTML-Tags, wenn der Browser keinen HTML5-Code versteht) sorgen jedoch dafür, dass Fotos zumindest in Standardauflösung auf jeden Fall korrekt dargestellt werden.

Flexibler Einsatz von CSS3
Das Problem der HTML5-Inkompatibilität mit älteren Browsern kann man mit dem Einsatz des CSS3-Standards und seinen neuen Elementbeschreibungen umgehen. Diese Definitionen und Attribute können sogar gezielt für einzelne Browserversionen und Browser-Engines eingesetzt werden. Hier ist man in Sachen Abwärtskompatibilität zu früheren Browserversionen auf der sicheren Seite. Wie auch bei der HTML5-Variante werden mittels CSS3-Stylesheets mehrere Versionen desselben Bildes in unterschiedlichen Auflösungen bereitgehalten, die – abhängig von der Display-Auflösung des Endgerätes – herangezogen werden. Natürlich sind auch hier Fallback-Lösungen vorgesehen. Ein großer Vorteil ist die Möglichkeit der Abfrage von Endgeräte-Parametern wie Auflösung und Viewport (sichtbarer Bereich des Browsers) mit sogenannten Media-Query-Abfragen. Abhängig vom Ergebnis können dann nicht nur passende Grafikdateien eingesetzt werden, sondern es kann auch nahezu jedes andere CSS-Attribut verwendet werden. So ist es beispielsweise möglich, einen Rahmen um ein Bild zu platzieren, dessen Linienbreite abhängig von der Displayauflösung ist.

JavaScript-Lösungen und Frameworks
Wer den Aufwand der vollständig manuellen Erstellung von HTML5- und CSS3-Code scheut, sollte auf JavaScript-basierende Lösungen zurückgreifen. Hier sei auf „Retina Images“ hingewiesen, welches unter Zuhilfenahme eines Cookies die Display-Auflösung im Gerät speichert und daraufhin ein Bild in der passenden Auflösung lädt und darstellt. Wer seine Website mit einem Framework aufbauen möchte, dem sei das Twitter-Bootstrap empfohlen. Das Standard-Layout stammt unverkennbar von der Twitter-Website. Bootstrap ist mittlerweile das weltweit am häufigsten eingesetzte Framework, wenn es um den Einsatz von responsivem Webdesign geht. Herkömmliche Webseiten werden grafisch in hervorragender Weise auf Smartphone- und Tablet-Browsern dargestellt, da Bootstrap konsequent auf HTML5 und CSS3 setzt. Das sichtbare Ergebnis ist auf allen Mobilbrowsern identisch und sieht noch dazu einfach gut aus. Die Einarbeitungszeit in das Produkt ist kurz, schon mit wenigen Schritten gelangt man zu vorzeigbaren Ergebnissen.

Haben wir Ihr Interesse geweckt? Wenn Sie mehr über dieses Thema erfahren möchten, kontaktieren Sie uns unter 0951/ 700 990 oder schreiben Sie uns direkt unter info@webda.de.