print logo

Neue technische Standards im Einsatz: HTML5 und CSS3 von Mobile Responsive Design bis GEO-Location

Neue technische Standards HTML5 und CSS3
TWT Group GmbH | 30.07.2012
Ob eine bessere Einbettung von Video- und Audioinhalten, skalierbare Webseiten sowie zahlreiche neue Elemente für Web-Applikationen oder mobil optimierte Newsletter – das machen die neuen technischen Standards HTML5 und CSS3 möglich. Für Entwickler, Webseiten-Betreiber und Marketer bedeutet dies ein Umdenken hin zu hochdynamischen Web-Applikationen und mobil-optimierten Nutzersituationen.

Audio und Video werden im HTML5 Web groß geschrieben: Mit Hilfe des Canvas- und Videotags wird die Integration von dynamischen Grafiken und Bildern sowie Videos vereinfacht. Das Abspielen von Bewegtbildformaten wird flexibler, da spezielle Abspielzeitpunkte festgelegt werden können. Das unterstützt eine Harmonie zwischen Webseiten und verschiedenen Content-Varianten, für die zuvor ein Player oder PlugIn installiert werden musste. HTML5 gilt als der zukünftige de-facto Standard für das Erstellen von Webseiten, als ebenso relevant zeigt sich CSS3: Für ein erfolgreichen responsiven Webdesigns sind CSS Media Queries das Herzstück. Media Queries werden von allen modernen Browsern nativ unterstützt, können mit verschiednenen Features gekoppelt werden und eigenen sich daher besonders für die Anwendung gewünschter Stylesheets für bestimmte Endgeräte. Einige Beispiele für den Einsatz der neuen Webstandards fasst die Düsseldorfer Full-Service-Internet-Agentur TWT Interactive zusammen:

E-Mail: Bewegtbildintegration dank HTML5

Studien belegen, dass emotionaler Bewegtbild-Content die Klickraten und Aufmerksamkeit erhöht. Die Integration von Videos in E-Mails dank HTML5 unterstützt ein crossmediales Marketing für eine kanalübergreifende Nutzung mit Smartphones und Tablets. Vorbei sind die Zeiten als E-Mail-Marketer für Bewegtbild in ihren E-Mails auf die Verwendung von großen, animierten GIFs oder proprietären Javascript-Plugins setzen mussten, um Problemen mit E-Mail-Clients zu umgehen. Bei der Integration von Bewegtbild-Content in Newslettern fällt zunehmend der Begriff des zukünftigen Webstandards HTML5, denn die auf HTML5 basierenden Videos in Mailings werden auf mobilen Geräten wie iPhone, iPad und einigen Android-Geräten, sowie unter Apple Mail und Hotmail unterstützt. Es gibt nur wenige Clients für die derzeit eine Alternativ-Variante erstellt werden sollte. Die verstärkte Unterstützung von HTML5 durch E-Mail-Clients ermöglicht einen flexibleren Einsatz von Videos in Kampagnen-Mailings und Newslettern.

Mobile Newsletter: Responsive Design mit CSS 3

Die wachsende mobile Internetnutzung führt dazu, dass auch Newsletter zunehmend über mobile Endgeräte abgerufen werden. Kleinere Displays, geringere Auflösung und die Bedienung via Touchscreen stellen dabei besondere Anforderungen dar. Darüber hinaus erschweren unterschiedliche Betriebssysteme, Browser und E-Mail-Clients sowie fehlende Standards das Vorhaben. Um diesen Aspekten
erfolgreich begegnen zu können, zeigt sich der Einsatz von Responsive Design als wirkungsvolle Optimierungsmaßnahme. Durch die dynamische Anpassung des Newsletters an die Displaygröße auf Basis von sogenannten Media Queries (CSS3) kann so eine optimale Darstellung auf mobilen Endgeräten gewährleistet werden. Ebenso einfach wie wirkungsvoll: Endgeräte mit einer Bildschirmbreite über einem festgelegten Wert zeigen Version A der E-Mail und Geräte mit einer definierten maximalen Bildschirmbreite Version B. Eine reine Textversion wird lediglich in Einzelfällen ausgespielt, wie das explizite Aufrufen durch den Nutzer oder wenn der Mail-Client keinen Bild-Download unterstützt.
Aber nicht nur das Layout soll ansprechen: Zu den Erfolgstreibern für den mobilen Einsatz von Newslettern gehören eine gezielte Kombination von Text- und Bild oder sogar der Einsatz von Bewegtbildmaterial sowie eine gute Bedienbarkeit der Inhaltselemente.

Mobile Webseiten: Web-Apps mit HTML5 und CSS3

Dank HTML5 sind plattformunabhängige Web-Apps eine erfolgversprechende Alternative gegenüber nativen Apps, die aufwändig mit der jeweiligen Programmiersprache für iOS, für Android und für Windows Phone 7 erstellt werden. Die Web-Apps werden nicht direkt auf dem Endgerät installiert, sondern nur über eine URL angesteuert und basieren auf HTML, CSS3 und Javascript. Das ermöglicht auf allen kompatiblen Geräten eine nahezu identische Nutzung. Als speziell für Smartphones optimierte, mobile Website bzw. Webportal kann sie alle Features moderner Online-Technologien bündeln und liefert Updates, Erweiterungen und Informationen unmittelbar und jederzeit erreichbar. Im mobilen Vertrieb wird diese Art in Form von mobilen Business Apps immer beliebter: Damit die Außendienstmitarbeiter jederzeit auf relevante Kundendaten zugreifen können, setzen Unternehmen verstärkt auf die Anbindung an das CRM-System über die iPhones und iPads der Mitarbeiter. Eine Echtzeiterfassung ermöglicht es, unmittelbar auf Kundenwünsche eingehen zu können und adhoc die Auftragserfassung abzuwickeln.

Geo-Location: HTML5 im ortsbezogenen Marketing

Dank „Geo-Location API“ ist es nun möglich, auf die GPS-Positionsdaten, die Höhe, die Geschwindigkeit und die Messgenauigkeit eines Gerätes zuzugreifen – auch offline. Das heisst neben mobilen Endgeräten kann auch der stationäre Rechner mit der HTML5 Geo-Location-Funktion anstelle der Verwendung einer IP-Adresse lokalisiert werden. Mit HTML5 und der Lokalisierung im Browser erschließen sich viele Einsatzszenarien, die bisher technisch zu aufwändig erschienen. Von kurzfristig, abverkaufsorientierten Maßnahmen bis hin zu nachhaltigen, integrativen Kampagnen bestehen viele Gestaltungsmöglichkeiten im ortsbezogenen Marketing. Ein steigender Trend lässt sich daher bei den sogenannten “Smart Notifications” verzeichnen. Diese Next Generation-Services sind im Hintergrund einer mobilen Anwendung aktiv, um orts- und interaktionsbezogene Benutzerdaten in Echtzeit zu verarbeiten und dem Nutzer bei relevanten Informationen automatisiert eine Push-Benachrichtigung anzuzeigen. So sind intelligente Benachrichtigungen auf der Suche nach einem Ersatzteil mit dem Lagerstatus im nächstgelegenen Fachgeschäft oder für Alternativ-Vorschläge zum “Besuch beim Italiener” denkbar.

Weitere Informationen unter: http://www.twt.de/news/blog/im-einsatz-geo-location-web-app-und-video-mailings-auf-basis-von-html5.html