![]()
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.