X Zurück
November 11th, 2015

Nach Smartphone und Tablet jetzt der Fernseher – Webseiten auf TV-Browsern


geschrieben von Heiko Plümer

Die Webseite für Desktops auf kleine Displays zu optimieren war bis vor Kurzem Hauptteil des Responsive Webdesigns. Jetzt kehrt sich die Perspektive um: Nach Smartphone und Tablet werden die Displays nun immer größer. Denn mittlerweile können sich auch TV Geräte mit dem Internet verbinden.

Surfen über einen großen Bildschirm wird stetig beliebter. Dabei werden die Screens immer größer und die Auflösung steigt. Fernseher mit Computerzusatzfunktionen wie Internetfähigkeit, Online Videotheken und Apps bestimmen den aktuellen Markt. Die jüngste Generation vom Smart TVs funktioniert mit denselben Browsersystemen wie Mobiltelefone.

Die eigene Webseite für die Nutzung auf mobilen Geräten zu optimieren ist heute unumgänglich. Trotzdem sind noch lange nicht alle Internetseiten für die mobile Nutzung angepasst. Und schon steht die nächste Veränderung an - Webseitenoptimierung für die Nutzung auf großen Bildschirmen.

Probleme bei der Nutzung von Webseiten auf TV-Geräten

Bei den unterschiedlichen Displaygrößen, die Fernsehgeräte heutzutage haben, weichen die Auflösungen zum Teil enorm voneinander ab. Viele Webseiten nutzen das durch Full-HD und 4K entstehende Platzangebot nicht aus und bieten eine userfreundliche Nutzung nur für kleinere Bildschirmauflösungen. Die am häufigsten genutzte Auflösung für die Darstellung von Webseiten beträgt aktuell 1366 x 768 Pixel (Stand: Januar 2015, Quelle: www.w3schools.com. Zum Vergleich: Ein aktueller UHD-Fernseher verfügt über eine Auflösung von 4096 × 2160 Bildpunkten.

Durch die ungenutzte Fläche werden beispielsweise Texte zu klein dargestellt und sind ohne Zoom kaum zu lesen. Daher müssen entweder die Betriebssysteme oder die Webseiten auf die Veränderung reagieren. Die Herausforderung besteht darin, dass eine Webseite auf möglichst verschiedenen Auflösungsgruppen funktioniert.

Ein weiteres Problem ist die Navigation der Webseiten auf großen Bildschirmen. Was bei herkömmlichen Fernsehern mit der Fernbedienung gesteuert wird, bei Smartphones über den Touch Display und bei Desktop PCs mit der Maus, ist für internetfähige Fernsehgeräte nicht so einfach zu lösen.

Unterschiedliche Lösungen für die Bedienung von TV-Geräten

Steuerung mit Touch-Display und Sprachbefehlen

Die neueste Generation von Smart TVs und externen Streaming Devices (z.B. Playstation, Xbox, Apple TV, etc.) hat nur noch wenige Eigenschaften eines herkömmlichen Fernsehers oder Desktop PCs. Vielmehr ähnelt die Bedienung einem Smartphone in Großformat. Das zeigt sich besonders an der Fernbedienung. Diese ist mit einem Touchpad, für die Bedienung des Fernsehers ausgestattet und besitzt nur noch wenige Knöpfe.

Für eine Bedienung der ganz anderen Art sorgt die Steuerung per Sprachebefehl: Mit Hilfe intelligenter Assistenz kann das Fernsehgerät bedient werden. Eine neue Lösung bietet zum Beispiel das Apple TV 4. Dank eingebautem Mikrofon in der Fernbedienung, kann die Suche nach Filmen oder Webseiten auch über den Sprachassistenten Siri erfolgen. Microsoft bietet bei der xBox durch die Kinect Steuerung einen ähnlichen Ansatz.

Steuern per Smartphone App

Eine andere Alternative ist die Steuerung mit dem eigenen Smartphone. Dieses wird mit dem TV-Gerät über eine App verbunden. Über den Bildschirm des Smartphones kann dann der Fernseher bedient werden.

Steuerung mit Gesten

In der Zukunft haben Fernbedienungen in allen möglichen Variationen womöglich keinen Platz mehr. Bereits jetzt kann beispielsweise der Fernseher über die xBox Kinect Technologie durch Arm- und Handgelenksbewegungen aus fast jedem Winkel gesteuert werden. Eine Kamera erkennt die Bewegungen und setzt die Befehle auf dem Bildschirm um.

Webseitenoptimierung: Grundbaustein - Responsive Webdesign

Um das Webdesign zu verbessern ist es das Wichtigste, den Inhalt einer Webseite unabhängig von Browsern, Betriebssystemen und Display-Größen gut sichtbar und bedienbar darzustellen. Die geräteunabhängige Zugänglichkeit der Webseite sollte dabei an erster Stelle stehen, das Layout sich am genutzten Endgerät orientieren. Damit eine Webseite auf möglichst vielen verschieden großen Geräten gleich aussieht und bedienbar ist, sind die folgenden Elemente entscheidend.

Relative Größenangaben für Responsive Layouts

In der Vergangenheit war es üblich, absolute Größen für die Breite des Layouts, Schriften, Bereiche und Bilder in Pixeln anzugeben. Das war praktisch, da die Auflösung der Bildschirme früher noch relativ ähnlich war. Mittlerweile sind die Größen der Displays nicht vorhersehbar und dadurch ist nicht immer klar, wie viel Fläche für HTML-Elemente verfügbar ist. Deshalb sollte eine absolute Positionierung vermieden werden und unbedingt relative Größenangaben in Prozent benutzt werden. So entstehen keine leeren oder ungenutzten Flächen im Layout. Das betrifft vor allem die CSS-Eigenschaften width, height, margin und padding bei Blockelementen.

Media Queries

Die Formatierungsanweisung für ein Medium erfolgt durch Media Queries. Media Queries sind Kriterien, welche die Darstellung eines Dokuments für die verschiedensten Ausgabemedien festlegen und das Responsive Layout für Webseiten umsetzen. Damit sind sie eine Grundvoraussetzung für angepasste Layouts. Eine Media Query beginnt mit dem CSS-Ausdruck „@media“, gefolgt von den gerätespezifischen Bedingungen wie beispielsweise die maximale Breite des Bildschirms. CSS-Styles, die ohne eine Beschränkung durch „@media“ im Stylesheet stehen, gelten unabhängig von der Größe des Viewports für alle Bildschirme. Es ist nicht möglich, die Vielzahl an unterschiedlichen Geräten gezielt anzusprechen, die es heutzutage gibt. Deshalb ist es ratsam, zwei bis drei sogenannte Breakpoints zu setzen, an denen sich das Layout ändert.

Smartphone: Liegt das Design unterhalb von 760 Pixeln, folgen die Inhalte linear

Tablet: Das Design liegt zwischen einer Breite von 760 und 980 Pixeln

Klassische Browserfenstergröße: Die klassischen Fenstergrößen liegen zwischen 980 und 1280 Pixeln

Große Monitore / TV: Designs ab 1280 Pixeln sind für große Monitore oder TV-Geräte. Dabei bleibt das Layout unverändert, nur Schrift und Bilder werden größer.

Wer wissen möchte, wie seine Webseite auf verschiedenen Browsern funktioniert, findet im Internet eine Menge an Simulatoren und Emulatoren (z.B. Browserstack) für fast jeden Browser. So kann das grundsätzliche Verhalten der Webseite auf verschiedenen Browsern getestet werden. Es muss aber berücksichtigt werden, dass die Darstellung durch Simulatoren oder Emulation nicht identisch zu den tatsächlich genutzten Geräten ist.

Für eine tatsächliche Nachbildung sollte ein charakteristischer Vertreter der Betriebssysteme und Abmessungen aus jeder Produktgruppe bestimmt werden, um darauf unterschiedliche Browser zu installieren. Hilfreich sind hier Device Labs, in denen die Webseiten und Applikationen direkt auf den entsprechenden Geräten getestet werden können (z.B. Open Device Lab).

In den kommenden Jahren werden virtual Reality Systeme wie die Orculus Rift von Facebook oder die Hololens von Microsoft ihre Markt-Tauglichkeit erreichen und für eine Disruption des klassischen Anzeigegerätemarktes sorgen. Dies hat zur Folge, dass die Anforderungen in der Gestaltung und Umsetzung von Webseiten und Applikationen noch weiter steigen werden.

0 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.