Tablets und Notebooks

REPORT: Tablet-Displays und Ergonomie - unterschätzte Faktoren

Tablets gibt es zig Varianten, mit unterschiedlichen Display-Größen, -Auflösungen und - Formaten. Im Idealfall ist ein Tablet ideal zum Surfen geeignet, taugt für die Darstellung beliebiger Dokumente, kann "Papier-Zeitschriften" und Ebook-Reader ersetzen. Genau das scheint aber nicht allen Herstellern klar zu sein, es gibt enorme Unterschiede in der Praxis. Dieser Report klärt auf und hilft, das perfekte Tablet zu finden.

Preis, Hersteller, Geschwindigkeit, Qualität, Schnittstellen, Ausstattung – das alles ist im Fall von Tablets erstmal total egal. Tablets sind knallhart gesagt ganz einfach Bildschirme, Displays, die man in der Hand hält. Außen ist ein Rahmen rum, damit man die Dinger irgendwie brauchbar halten kann.

Macht man die Bilddarstellung weg, dann bleibt bei Tablets nicht viel übrig. Oben Apple Ipad, rechts Samsung Galaxy Tab, unten Microsoft Surface.

Lässt man totalen Schwachsinn mal weg, dann gibt es bei Tablet-PCs vier verschiedene  Betriebssysteme: Apple Ios (nur auf Ipads), Android (zig Hersteller) sowie Windows RT und Windows 8 (von Microsoft und auch anderen Herstellern). Wer ein Apple-Fan ist, der kauft ein Tablet von Apple, muss sich bestenfalls zwischen dem "kleinen Ipad" und dem "großen Ipad" entscheiden.

Apple ist der einzige Hersteller, der seine Tablets alleine entwirft, die Hardware bestimmt und  auch mit dem Betriebssystem ausstattet. Googles Android wird in zig Tablets verschiedener Hersteller verbaut, die Preisspanne reicht von 100 Euro bis gut 600 Euro. Tablets mit Microsoft Betriebssystemen gibt es direkt von Microsoft und auch von weiteren Herstellern. Generell sind auch die Microsoft-Tablets im oberen Preisbereich angesiedelt. Microsoft will direkt Apple an den Kragen und in der Billig-Ecke gar nicht mitmischen.

Grundsätzlich kann man auch mit dem billigsten Tablet alles Erdenkliche anstellen. Die meisten werden ein Tablet aber vermutlich haben wollen, um damit Webseiten anzugucken, optische digitale Inhalte, Online-Magazine und dergleichen. Ein 100 Euro Tablet kann man natürlich auch als digitalen Bilderrahmen, Video-/Audioplayer einsetzen - bei einem teureren Tablet wäre es aber Geldverschwendung nur so was damit zu machen.

Klar ist es cool wenn ein Tablet so perfekt ist, dass alles damit geht – und das ist generell auch bei jedem Tablet der Fall. Die Frage ist wie gut. Was mit einem Tablet auf jeden Fall perfekt gehen muss, ist sauber im Internet surfen können. Webseiten müssen möglichst perfekt und lesefreundlich dargestellt werden. Und bereits da wird es ganz schnell richtig übel.

Es ist Wahnsinn, wie schmerzlos in vielen Testberichten Tablets belobsudelt werden, bei denen es bereits an ganz einfachen ergonomischen Dingen scheitert…

Macht man die Bilddarstellung weg, dann bleibt bei Tablets nicht viel übrig. Oben Apple Ipad, rechts Samsung Galaxy Tab, unten Microsoft Surface.
Hier wurden mit dem Firefox-Screenshot-Addon „Fireshot“ jeweils komplette Startseiten von Webseiten geknipst. Von links nach rechts: Bild.de, Stern.de, Spiegel.de, Heise.de, Pcwelt.de und Nickles.de. Die Werbung um die Seiten rum und ganz oben wurde jeweils weggeschnitten – die Bildcollage zeigt hier also quasi die wirklichen Inhalte der Startseiten.
Diese Bildflächen und Dimensionen sind bei einem Display mit 1.366 x 768 denkbar (wenn man völlig krummes Zeugs mal außer Acht lässt).
Auf welchem Display in welcher Position lässt sich eine typische Webseite am besten darstellen? Hinweis: Die Elemente hier im Bild haben aus Platzgründen nicht die Originalgröße aber das Größenverhältnis wurde natürlich – wie auch bei allen Bildern hier – beibehalten.
Original-Darstellung: Die Querausrichtung des Displays (obere Bildreihe) ist bei Webseiten komplett für den Arsch. Hier geht Platz (grauer Bereich) verloren, es wird kostbare Display-Fläche verschwendet. Klar kann man „reinzoomen“ damit der Bildschirm voller wird – die Gesamtinformationsfülle wird dabei aber (nach unten hin) weniger. Unten links das 4:3 Hochkant-Format. Hier passt alles. Die beiden Hochkant-Formate daneben mit 16:9 und 16:10 sind (bei einer Display-Breite von dann nur 854 und 768 Pixel) fatal. Hier kann die Webseite nicht in Originalgröße dargestellt werden. Man muss entweder links/rechts scrollen oder die Darstellung verkleinern, wobei Bildinformationen verloren gehen.
Gezoomte Darstellung: Hier wurde die Webseite-Darstellung jeweils so gezoomt, dass sie das komplette Display ausfüllt. Gerade bei einem „mickrigen“ Display mobiler Geräte will man schließlich keinen Platz vergeuden. Bei der oberen Bildreihe gilt: alle Displays sind hier breiter als nötig, die Webseiten-Darstellung wird verbreitert. Auch klar erkennbar: von 4:3 bis 16:9 Seitenverhältnis nimmt die sichtbare Informationsmenge gravierend ab, weil „unten“ halt immer mehr Platz wegfällt. Bei der unteren Reihe ist es dank Hochformat exakt andersrum: von 4:3 bis 16:9 nimmt die sichtbare Informationsmenge zu. Im Fall eines sehr großen Displays mit 20 Zoll oder besser noch mehr macht das Spaß. Bei einem 10 Zoll Display (oder gar kleiner) aber nicht. Die Seiten müssen zu arg verkleinert werden, damit sie das Display füllen. Der Sieger ist auch hier wieder ganz klar unten links. Die Darstellung ist identisch wie im Bild zuvor, weil hier praktisch nicht gezoomt werden muss.
Ipad mit Retina-Auflösung. Theoretisch würde die Bild.de-Webseite so wie hier gezeigt dargestellt werden. Da die Bildbreite des Retina-Ipad in jeder Ausrichtung viel größer ist als die der Webseite, geht Platz verloren (weiße Flächen).
So sieht es realistisch aus, die Webseite wird auf den verfügbaren Platz gezoomt.
Apple hat sich beim Ipad von Anfang an für ein 4:3 Display entschieden. Warum wohl?
Achtung: Das ist eine Fotomontage, die Gehäusegrößenverhältnisse der Tablets stimmen nicht exakt! Es geht hier nur darum zu zeigen, welche Informationsmenge einer Webseite bei den unterschiedlichen Seitenverhältnissen überhaupt untergebracht werden kann. Wie Groß ein Display ist und welche Auflösung es hat, spielt bei dieser Betrachtungsweise keine Rolle.
Ipad blau, Surface grün. So sieht es mit der sichtbaren Fläche in der Praxis aus - im Querformat und im Hochformat. Das Bild hier wurde mit 100 DPI Auflösung gemacht.
Microsoft Surface Pro Tablet mit 16:9 Display. Das sieht generell sehr schick aus. Deutlich erkennbar ist auch, dass die neue Modern UI Startseite auf "Breite" gemünzt ist. (Foto: Microsoft)
Beispiel Bild.de: wie praktisch jede Webseite kommt Deutschlands meistabgerufene Tageszeitung im Internet natürlich im Hochformat.
Auch Bild.de gibt es längst als „App“ für Windows 8/RT.
Beispiel Zalando-Webseite, im Browser: Die Web-Darstellung dieses Shop-Betreibers ist wie  üblich im Web auf "Hochformat" optimiert, wird von oben nach unten angeguckt.
Die Zalando-App für Windows 8/RT. Es geht mit einer großen Startseite, einem Foto los. Funktionell wird hier gar nichts geboten. Es muss also erstmal nach rechts gewischt werden. Das führt zu einer weiteren, sehr großzügig gestalteten Seite, bei der zwischen "Damen", "Herren" und "Kinder" gewählt werden kann. Oben gibt es noch ein Suchfeld.
Nach Anlicken von "Herren" kommt das nächste Menü. Dort sucht man "Shirts", klickt drauf und gelangt dann zu den Shirts.
Links Messenger-Chat-App, rechts die Zalando-App. Bei dieser "Zwei-Apps-gleichzeitig"-Darstellung versagt das Charms-Menü, es gibt überhaupt keine Möglichkeit zum Teilen. Der Charms-Bar enthält nur den Hinweis "Diese App kann nicht teilen".
Windows 8/RT ist das einzige Tablet-Betriebssystem bei dem zwei Apps brauchbar nebeneinander dargestellt werden können: die schmale (hier rechts die Karte) ist jeweils exakt 320 Bildpunkte breit, die große kriegt den Rest vom Display.
Hier der Flipper, in voller Pracht bei Hochformat-Drehung des Tablets.
Macht man die Bilddarstellung weg, dann bleibt bei Tablets nicht viel übrig. Oben Apple Ipad, rechts Samsung Galaxy Tab, unten Microsoft Surface.
Hier wurden mit dem Firefox-Screenshot-Addon „Fireshot“ jeweils komplette Startseiten von Webseiten geknipst. Von links nach rechts: Bild.de, Stern.de, Spiegel.de, Heise.de, Pcwelt.de und Nickles.de. Die Werbung um die Seiten rum und ganz oben wurde jeweils weggeschnitten – die Bildcollage zeigt hier also quasi die wirklichen Inhalte der Startseiten.
Diese Bildflächen und Dimensionen sind bei einem Display mit 1.366 x 768 denkbar (wenn man völlig krummes Zeugs mal außer Acht lässt).
Auf welchem Display in welcher Position lässt sich eine typische Webseite am besten darstellen? Hinweis: Die Elemente hier im Bild haben aus Platzgründen nicht die Originalgröße aber das Größenverhältnis wurde natürlich – wie auch bei allen Bildern hier – beibehalten.
Original-Darstellung: Die Querausrichtung des Displays (obere Bildreihe) ist bei Webseiten komplett für den Arsch. Hier geht Platz (grauer Bereich) verloren, es wird kostbare Display-Fläche verschwendet. Klar kann man „reinzoomen“ damit der Bildschirm voller wird – die Gesamtinformationsfülle wird dabei aber (nach unten hin) weniger. Unten links das 4:3 Hochkant-Format. Hier passt alles. Die beiden Hochkant-Formate daneben mit 16:9 und 16:10 sind (bei einer Display-Breite von dann nur 854 und 768 Pixel) fatal. Hier kann die Webseite nicht in Originalgröße dargestellt werden. Man muss entweder links/rechts scrollen oder die Darstellung verkleinern, wobei Bildinformationen verloren gehen.
Gezoomte Darstellung: Hier wurde die Webseite-Darstellung jeweils so gezoomt, dass sie das komplette Display ausfüllt. Gerade bei einem „mickrigen“ Display mobiler Geräte will man schließlich keinen Platz vergeuden. Bei der oberen Bildreihe gilt: alle Displays sind hier breiter als nötig, die Webseiten-Darstellung wird verbreitert. Auch klar erkennbar: von 4:3 bis 16:9 Seitenverhältnis nimmt die sichtbare Informationsmenge gravierend ab, weil „unten“ halt immer mehr Platz wegfällt. Bei der unteren Reihe ist es dank Hochformat exakt andersrum: von 4:3 bis 16:9 nimmt die sichtbare Informationsmenge zu. Im Fall eines sehr großen Displays mit 20 Zoll oder besser noch mehr macht das Spaß. Bei einem 10 Zoll Display (oder gar kleiner) aber nicht. Die Seiten müssen zu arg verkleinert werden, damit sie das Display füllen. Der Sieger ist auch hier wieder ganz klar unten links. Die Darstellung ist identisch wie im Bild zuvor, weil hier praktisch nicht gezoomt werden muss.
Ipad mit Retina-Auflösung. Theoretisch würde die Bild.de-Webseite so wie hier gezeigt dargestellt werden. Da die Bildbreite des Retina-Ipad in jeder Ausrichtung viel größer ist als die der Webseite, geht Platz verloren (weiße Flächen).
So sieht es realistisch aus, die Webseite wird auf den verfügbaren Platz gezoomt.
Apple hat sich beim Ipad von Anfang an für ein 4:3 Display entschieden. Warum wohl?
Achtung: Das ist eine Fotomontage, die Gehäusegrößenverhältnisse der Tablets stimmen nicht exakt! Es geht hier nur darum zu zeigen, welche Informationsmenge einer Webseite bei den unterschiedlichen Seitenverhältnissen überhaupt untergebracht werden kann. Wie Groß ein Display ist und welche Auflösung es hat, spielt bei dieser Betrachtungsweise keine Rolle.
Ipad blau, Surface grün. So sieht es mit der sichtbaren Fläche in der Praxis aus - im Querformat und im Hochformat. Das Bild hier wurde mit 100 DPI Auflösung gemacht.
Microsoft Surface Pro Tablet mit 16:9 Display. Das sieht generell sehr schick aus. Deutlich erkennbar ist auch, dass die neue Modern UI Startseite auf "Breite" gemünzt ist. (Foto: Microsoft)
Beispiel Bild.de: wie praktisch jede Webseite kommt Deutschlands meistabgerufene Tageszeitung im Internet natürlich im Hochformat.
Auch Bild.de gibt es längst als „App“ für Windows 8/RT.
Beispiel Zalando-Webseite, im Browser: Die Web-Darstellung dieses Shop-Betreibers ist wie  üblich im Web auf "Hochformat" optimiert, wird von oben nach unten angeguckt.
Die Zalando-App für Windows 8/RT. Es geht mit einer großen Startseite, einem Foto los. Funktionell wird hier gar nichts geboten. Es muss also erstmal nach rechts gewischt werden. Das führt zu einer weiteren, sehr großzügig gestalteten Seite, bei der zwischen "Damen", "Herren" und "Kinder" gewählt werden kann. Oben gibt es noch ein Suchfeld.
Nach Anlicken von "Herren" kommt das nächste Menü. Dort sucht man "Shirts", klickt drauf und gelangt dann zu den Shirts.
Links Messenger-Chat-App, rechts die Zalando-App. Bei dieser "Zwei-Apps-gleichzeitig"-Darstellung versagt das Charms-Menü, es gibt überhaupt keine Möglichkeit zum Teilen. Der Charms-Bar enthält nur den Hinweis "Diese App kann nicht teilen".
Windows 8/RT ist das einzige Tablet-Betriebssystem bei dem zwei Apps brauchbar nebeneinander dargestellt werden können: die schmale (hier rechts die Karte) ist jeweils exakt 320 Bildpunkte breit, die große kriegt den Rest vom Display.
Hier der Flipper, in voller Pracht bei Hochformat-Drehung des Tablets.
Macht man die Bilddarstellung weg, dann bleibt bei Tablets nicht viel übrig. Oben Apple Ipad, rechts Samsung Galaxy Tab, unten Microsoft Surface.
Hier wurden mit dem Firefox-Screenshot-Addon „Fireshot“ jeweils komplette Startseiten von Webseiten geknipst. Von links nach rechts: Bild.de, Stern.de, Spiegel.de, Heise.de, Pcwelt.de und Nickles.de. Die Werbung um die Seiten rum und ganz oben wurde jeweils weggeschnitten – die Bildcollage zeigt hier also quasi die wirklichen Inhalte der Startseiten.
Diese Bildflächen und Dimensionen sind bei einem Display mit 1.366 x 768 denkbar (wenn man völlig krummes Zeugs mal außer Acht lässt).
Auf welchem Display in welcher Position lässt sich eine typische Webseite am besten darstellen? Hinweis: Die Elemente hier im Bild haben aus Platzgründen nicht die Originalgröße aber das Größenverhältnis wurde natürlich – wie auch bei allen Bildern hier – beibehalten.
Original-Darstellung: Die Querausrichtung des Displays (obere Bildreihe) ist bei Webseiten komplett für den Arsch. Hier geht Platz (grauer Bereich) verloren, es wird kostbare Display-Fläche verschwendet. Klar kann man „reinzoomen“ damit der Bildschirm voller wird – die Gesamtinformationsfülle wird dabei aber (nach unten hin) weniger. Unten links das 4:3 Hochkant-Format. Hier passt alles. Die beiden Hochkant-Formate daneben mit 16:9 und 16:10 sind (bei einer Display-Breite von dann nur 854 und 768 Pixel) fatal. Hier kann die Webseite nicht in Originalgröße dargestellt werden. Man muss entweder links/rechts scrollen oder die Darstellung verkleinern, wobei Bildinformationen verloren gehen.
Gezoomte Darstellung: Hier wurde die Webseite-Darstellung jeweils so gezoomt, dass sie das komplette Display ausfüllt. Gerade bei einem „mickrigen“ Display mobiler Geräte will man schließlich keinen Platz vergeuden. Bei der oberen Bildreihe gilt: alle Displays sind hier breiter als nötig, die Webseiten-Darstellung wird verbreitert. Auch klar erkennbar: von 4:3 bis 16:9 Seitenverhältnis nimmt die sichtbare Informationsmenge gravierend ab, weil „unten“ halt immer mehr Platz wegfällt. Bei der unteren Reihe ist es dank Hochformat exakt andersrum: von 4:3 bis 16:9 nimmt die sichtbare Informationsmenge zu. Im Fall eines sehr großen Displays mit 20 Zoll oder besser noch mehr macht das Spaß. Bei einem 10 Zoll Display (oder gar kleiner) aber nicht. Die Seiten müssen zu arg verkleinert werden, damit sie das Display füllen. Der Sieger ist auch hier wieder ganz klar unten links. Die Darstellung ist identisch wie im Bild zuvor, weil hier praktisch nicht gezoomt werden muss.
Ipad mit Retina-Auflösung. Theoretisch würde die Bild.de-Webseite so wie hier gezeigt dargestellt werden. Da die Bildbreite des Retina-Ipad in jeder Ausrichtung viel größer ist als die der Webseite, geht Platz verloren (weiße Flächen).
So sieht es realistisch aus, die Webseite wird auf den verfügbaren Platz gezoomt.
Apple hat sich beim Ipad von Anfang an für ein 4:3 Display entschieden. Warum wohl?
Achtung: Das ist eine Fotomontage, die Gehäusegrößenverhältnisse der Tablets stimmen nicht exakt! Es geht hier nur darum zu zeigen, welche Informationsmenge einer Webseite bei den unterschiedlichen Seitenverhältnissen überhaupt untergebracht werden kann. Wie Groß ein Display ist und welche Auflösung es hat, spielt bei dieser Betrachtungsweise keine Rolle.
Ipad blau, Surface grün. So sieht es mit der sichtbaren Fläche in der Praxis aus - im Querformat und im Hochformat. Das Bild hier wurde mit 100 DPI Auflösung gemacht.
Microsoft Surface Pro Tablet mit 16:9 Display. Das sieht generell sehr schick aus. Deutlich erkennbar ist auch, dass die neue Modern UI Startseite auf "Breite" gemünzt ist. (Foto: Microsoft)
Beispiel Bild.de: wie praktisch jede Webseite kommt Deutschlands meistabgerufene Tageszeitung im Internet natürlich im Hochformat.
Auch Bild.de gibt es längst als „App“ für Windows 8/RT.
Beispiel Zalando-Webseite, im Browser: Die Web-Darstellung dieses Shop-Betreibers ist wie  üblich im Web auf "Hochformat" optimiert, wird von oben nach unten angeguckt.
Die Zalando-App für Windows 8/RT. Es geht mit einer großen Startseite, einem Foto los. Funktionell wird hier gar nichts geboten. Es muss also erstmal nach rechts gewischt werden. Das führt zu einer weiteren, sehr großzügig gestalteten Seite, bei der zwischen "Damen", "Herren" und "Kinder" gewählt werden kann. Oben gibt es noch ein Suchfeld.
Nach Anlicken von "Herren" kommt das nächste Menü. Dort sucht man "Shirts", klickt drauf und gelangt dann zu den Shirts.
Links Messenger-Chat-App, rechts die Zalando-App. Bei dieser "Zwei-Apps-gleichzeitig"-Darstellung versagt das Charms-Menü, es gibt überhaupt keine Möglichkeit zum Teilen. Der Charms-Bar enthält nur den Hinweis "Diese App kann nicht teilen".
Windows 8/RT ist das einzige Tablet-Betriebssystem bei dem zwei Apps brauchbar nebeneinander dargestellt werden können: die schmale (hier rechts die Karte) ist jeweils exakt 320 Bildpunkte breit, die große kriegt den Rest vom Display.
Hier der Flipper, in voller Pracht bei Hochformat-Drehung des Tablets.
Macht man die Bilddarstellung weg, dann bleibt bei Tablets nicht viel übrig. Oben Apple Ipad, rechts Samsung Galaxy Tab, unten Microsoft Surface.
Hier wurden mit dem Firefox-Screenshot-Addon „Fireshot“ jeweils komplette Startseiten von Webseiten geknipst. Von links nach rechts: Bild.de, Stern.de, Spiegel.de, Heise.de, Pcwelt.de und Nickles.de. Die Werbung um die Seiten rum und ganz oben wurde jeweils weggeschnitten – die Bildcollage zeigt hier also quasi die wirklichen Inhalte der Startseiten.
Diese Bildflächen und Dimensionen sind bei einem Display mit 1.366 x 768 denkbar (wenn man völlig krummes Zeugs mal außer Acht lässt).
Auf welchem Display in welcher Position lässt sich eine typische Webseite am besten darstellen? Hinweis: Die Elemente hier im Bild haben aus Platzgründen nicht die Originalgröße aber das Größenverhältnis wurde natürlich – wie auch bei allen Bildern hier – beibehalten.
Original-Darstellung: Die Querausrichtung des Displays (obere Bildreihe) ist bei Webseiten komplett für den Arsch. Hier geht Platz (grauer Bereich) verloren, es wird kostbare Display-Fläche verschwendet. Klar kann man „reinzoomen“ damit der Bildschirm voller wird – die Gesamtinformationsfülle wird dabei aber (nach unten hin) weniger. Unten links das 4:3 Hochkant-Format. Hier passt alles. Die beiden Hochkant-Formate daneben mit 16:9 und 16:10 sind (bei einer Display-Breite von dann nur 854 und 768 Pixel) fatal. Hier kann die Webseite nicht in Originalgröße dargestellt werden. Man muss entweder links/rechts scrollen oder die Darstellung verkleinern, wobei Bildinformationen verloren gehen.
Gezoomte Darstellung: Hier wurde die Webseite-Darstellung jeweils so gezoomt, dass sie das komplette Display ausfüllt. Gerade bei einem „mickrigen“ Display mobiler Geräte will man schließlich keinen Platz vergeuden. Bei der oberen Bildreihe gilt: alle Displays sind hier breiter als nötig, die Webseiten-Darstellung wird verbreitert. Auch klar erkennbar: von 4:3 bis 16:9 Seitenverhältnis nimmt die sichtbare Informationsmenge gravierend ab, weil „unten“ halt immer mehr Platz wegfällt. Bei der unteren Reihe ist es dank Hochformat exakt andersrum: von 4:3 bis 16:9 nimmt die sichtbare Informationsmenge zu. Im Fall eines sehr großen Displays mit 20 Zoll oder besser noch mehr macht das Spaß. Bei einem 10 Zoll Display (oder gar kleiner) aber nicht. Die Seiten müssen zu arg verkleinert werden, damit sie das Display füllen. Der Sieger ist auch hier wieder ganz klar unten links. Die Darstellung ist identisch wie im Bild zuvor, weil hier praktisch nicht gezoomt werden muss.
Ipad mit Retina-Auflösung. Theoretisch würde die Bild.de-Webseite so wie hier gezeigt dargestellt werden. Da die Bildbreite des Retina-Ipad in jeder Ausrichtung viel größer ist als die der Webseite, geht Platz verloren (weiße Flächen).
So sieht es realistisch aus, die Webseite wird auf den verfügbaren Platz gezoomt.
Apple hat sich beim Ipad von Anfang an für ein 4:3 Display entschieden. Warum wohl?
Achtung: Das ist eine Fotomontage, die Gehäusegrößenverhältnisse der Tablets stimmen nicht exakt! Es geht hier nur darum zu zeigen, welche Informationsmenge einer Webseite bei den unterschiedlichen Seitenverhältnissen überhaupt untergebracht werden kann. Wie Groß ein Display ist und welche Auflösung es hat, spielt bei dieser Betrachtungsweise keine Rolle.
Ipad blau, Surface grün. So sieht es mit der sichtbaren Fläche in der Praxis aus - im Querformat und im Hochformat. Das Bild hier wurde mit 100 DPI Auflösung gemacht.
Microsoft Surface Pro Tablet mit 16:9 Display. Das sieht generell sehr schick aus. Deutlich erkennbar ist auch, dass die neue Modern UI Startseite auf "Breite" gemünzt ist. (Foto: Microsoft)
Beispiel Bild.de: wie praktisch jede Webseite kommt Deutschlands meistabgerufene Tageszeitung im Internet natürlich im Hochformat.
Auch Bild.de gibt es längst als „App“ für Windows 8/RT.
Beispiel Zalando-Webseite, im Browser: Die Web-Darstellung dieses Shop-Betreibers ist wie  üblich im Web auf "Hochformat" optimiert, wird von oben nach unten angeguckt.
Die Zalando-App für Windows 8/RT. Es geht mit einer großen Startseite, einem Foto los. Funktionell wird hier gar nichts geboten. Es muss also erstmal nach rechts gewischt werden. Das führt zu einer weiteren, sehr großzügig gestalteten Seite, bei der zwischen "Damen", "Herren" und "Kinder" gewählt werden kann. Oben gibt es noch ein Suchfeld.
Nach Anlicken von "Herren" kommt das nächste Menü. Dort sucht man "Shirts", klickt drauf und gelangt dann zu den Shirts.
Links Messenger-Chat-App, rechts die Zalando-App. Bei dieser "Zwei-Apps-gleichzeitig"-Darstellung versagt das Charms-Menü, es gibt überhaupt keine Möglichkeit zum Teilen. Der Charms-Bar enthält nur den Hinweis "Diese App kann nicht teilen".
Windows 8/RT ist das einzige Tablet-Betriebssystem bei dem zwei Apps brauchbar nebeneinander dargestellt werden können: die schmale (hier rechts die Karte) ist jeweils exakt 320 Bildpunkte breit, die große kriegt den Rest vom Display.
Hier der Flipper, in voller Pracht bei Hochformat-Drehung des Tablets.
Macht man die Bilddarstellung weg, dann bleibt bei Tablets nicht viel übrig. Oben Apple Ipad, rechts Samsung Galaxy Tab, unten Microsoft Surface.
Hier wurden mit dem Firefox-Screenshot-Addon „Fireshot“ jeweils komplette Startseiten von Webseiten geknipst. Von links nach rechts: Bild.de, Stern.de, Spiegel.de, Heise.de, Pcwelt.de und Nickles.de. Die Werbung um die Seiten rum und ganz oben wurde jeweils weggeschnitten – die Bildcollage zeigt hier also quasi die wirklichen Inhalte der Startseiten.
Diese Bildflächen und Dimensionen sind bei einem Display mit 1.366 x 768 denkbar (wenn man völlig krummes Zeugs mal außer Acht lässt).
Auf welchem Display in welcher Position lässt sich eine typische Webseite am besten darstellen? Hinweis: Die Elemente hier im Bild haben aus Platzgründen nicht die Originalgröße aber das Größenverhältnis wurde natürlich – wie auch bei allen Bildern hier – beibehalten.
Original-Darstellung: Die Querausrichtung des Displays (obere Bildreihe) ist bei Webseiten komplett für den Arsch. Hier geht Platz (grauer Bereich) verloren, es wird kostbare Display-Fläche verschwendet. Klar kann man „reinzoomen“ damit der Bildschirm voller wird – die Gesamtinformationsfülle wird dabei aber (nach unten hin) weniger. Unten links das 4:3 Hochkant-Format. Hier passt alles. Die beiden Hochkant-Formate daneben mit 16:9 und 16:10 sind (bei einer Display-Breite von dann nur 854 und 768 Pixel) fatal. Hier kann die Webseite nicht in Originalgröße dargestellt werden. Man muss entweder links/rechts scrollen oder die Darstellung verkleinern, wobei Bildinformationen verloren gehen.
Gezoomte Darstellung: Hier wurde die Webseite-Darstellung jeweils so gezoomt, dass sie das komplette Display ausfüllt. Gerade bei einem „mickrigen“ Display mobiler Geräte will man schließlich keinen Platz vergeuden. Bei der oberen Bildreihe gilt: alle Displays sind hier breiter als nötig, die Webseiten-Darstellung wird verbreitert. Auch klar erkennbar: von 4:3 bis 16:9 Seitenverhältnis nimmt die sichtbare Informationsmenge gravierend ab, weil „unten“ halt immer mehr Platz wegfällt. Bei der unteren Reihe ist es dank Hochformat exakt andersrum: von 4:3 bis 16:9 nimmt die sichtbare Informationsmenge zu. Im Fall eines sehr großen Displays mit 20 Zoll oder besser noch mehr macht das Spaß. Bei einem 10 Zoll Display (oder gar kleiner) aber nicht. Die Seiten müssen zu arg verkleinert werden, damit sie das Display füllen. Der Sieger ist auch hier wieder ganz klar unten links. Die Darstellung ist identisch wie im Bild zuvor, weil hier praktisch nicht gezoomt werden muss.
Ipad mit Retina-Auflösung. Theoretisch würde die Bild.de-Webseite so wie hier gezeigt dargestellt werden. Da die Bildbreite des Retina-Ipad in jeder Ausrichtung viel größer ist als die der Webseite, geht Platz verloren (weiße Flächen).
So sieht es realistisch aus, die Webseite wird auf den verfügbaren Platz gezoomt.
Apple hat sich beim Ipad von Anfang an für ein 4:3 Display entschieden. Warum wohl?
Achtung: Das ist eine Fotomontage, die Gehäusegrößenverhältnisse der Tablets stimmen nicht exakt! Es geht hier nur darum zu zeigen, welche Informationsmenge einer Webseite bei den unterschiedlichen Seitenverhältnissen überhaupt untergebracht werden kann. Wie Groß ein Display ist und welche Auflösung es hat, spielt bei dieser Betrachtungsweise keine Rolle.
Ipad blau, Surface grün. So sieht es mit der sichtbaren Fläche in der Praxis aus - im Querformat und im Hochformat. Das Bild hier wurde mit 100 DPI Auflösung gemacht.
Microsoft Surface Pro Tablet mit 16:9 Display. Das sieht generell sehr schick aus. Deutlich erkennbar ist auch, dass die neue Modern UI Startseite auf "Breite" gemünzt ist. (Foto: Microsoft)
Beispiel Bild.de: wie praktisch jede Webseite kommt Deutschlands meistabgerufene Tageszeitung im Internet natürlich im Hochformat.
Auch Bild.de gibt es längst als „App“ für Windows 8/RT.
Beispiel Zalando-Webseite, im Browser: Die Web-Darstellung dieses Shop-Betreibers ist wie  üblich im Web auf "Hochformat" optimiert, wird von oben nach unten angeguckt.
Die Zalando-App für Windows 8/RT. Es geht mit einer großen Startseite, einem Foto los. Funktionell wird hier gar nichts geboten. Es muss also erstmal nach rechts gewischt werden. Das führt zu einer weiteren, sehr großzügig gestalteten Seite, bei der zwischen "Damen", "Herren" und "Kinder" gewählt werden kann. Oben gibt es noch ein Suchfeld.
Nach Anlicken von "Herren" kommt das nächste Menü. Dort sucht man "Shirts", klickt drauf und gelangt dann zu den Shirts.
Links Messenger-Chat-App, rechts die Zalando-App. Bei dieser "Zwei-Apps-gleichzeitig"-Darstellung versagt das Charms-Menü, es gibt überhaupt keine Möglichkeit zum Teilen. Der Charms-Bar enthält nur den Hinweis "Diese App kann nicht teilen".
Windows 8/RT ist das einzige Tablet-Betriebssystem bei dem zwei Apps brauchbar nebeneinander dargestellt werden können: die schmale (hier rechts die Karte) ist jeweils exakt 320 Bildpunkte breit, die große kriegt den Rest vom Display.
Hier der Flipper, in voller Pracht bei Hochformat-Drehung des Tablets.

Artikel kommentieren