vorige Präsentation: Details zu Layout | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Responsive Design
Wie im Kapitel Das Web und HTML beschrieben gibt es viele verschiedene Ausgabegeräte für Webseiten. Für die Gestaltung des visuellen Layouts von Webseiten spielt dabei die die Auflösung und die Pixeldichte eine wichtige Rolle.
Hier ein Überblick über mögliche Bildschirm-Auflösungen:
basierend auf http://en.wikipedia.org/wiki/Image:Vector_Video_Standards2.svg
Vergleichen Sie die höchsten hier dargestellte Auflösungen mit der geringsten Auflösungen. Da Breite und Höhe (mehr als) verdreifacht sind, steht bei der höchsten Auflösung also (mehr als) die neunfache Fläche zur Verfügung!
Die typische Auflösung hat sich über Jahre stark verändert. Diese Statistik von w3schools.org reicht von 2000 bis 2016. In diesem Zeitraum hat sich die Mehrheit langsam von 800x600 (bis 2003) auf 1024x768 (bis 2008) und schließlich auf höhere Auflösungen verschoben. Achtung: Das war bevor mobile Endgeräte wichtig wurden.
Die Angabe der Auflösung erfolgt in Pixel – die reale Größe des Ausgabegerätes (24“ Desktop, 13“ Laptop, mobiles Endgerät) ist bei gleicher Pixel-Auflösung sehr unterschiedlich! Mobile Geräte haben oft eine höhere Pixeldichte:
Gerät | Erscheinungsjahr | Pixel | Diagonale Inch | Pixel per Inch |
---|---|---|---|---|
Altes 19” LCD Display | 2008 | 1280 × 1024 | 19 in | 86 ppi |
15” Macbook Pro | 2007 | 1440 × 900 | 15.4 in | 110 ppi |
Sony PSP 7th gen | 09/2005 | 480 × 272 | 4.3 in | 128 ppi |
Apple iPhone3 | 06/2009 | 480 × 320 | 3.5 in | 163 ppi |
15” Macbook Pro ‘Retina’ | 06/2012 | 2880 × 1800 | 15.4 in | 220 ppi |
Apple iPhone4 | 06/2010 | 960 × 640 | 3.5 in | 326 ppi |
Apple iPad 3rd gen | 03/2011 | 2048×1536 | 12 in | 264 ppi |
Apple IPhone7 | 10/2016 | 1334×750 | 4.7 in | 326 ppi |
Amazon Kindle Paperwhite | 12/2012 | 768×1024 | 6 in | 212 ppi |
ASUS Zenbook UX305 | 04/2015 | 3200 x 1800 | 13.3 in | 577 ppi |
Google Nexus One | 1/2010 | 800 × 480 | 3.7 in | 254 ppi |
Samsung Galaxy S7 | 2/2016 | 2560×1440 pixel | 5.1 in | 577 ppi |
12” Macbook ‘Retina’ | 03/2015 | 2304 × 1440 | 12 in | 226 ppi |
Hier findet man einen Faktor 6 zwischen hächster und geringster Pixeldichte.
Mit mydevice.io kann man den aktuellen Browser vermessen. Dort gibt es auch eine ausführlichere Liste von aktuellen Geräten.
Von diesen „Brutto-Angaben“ über die Größe der zur Verfügung stehenden Fläche sind nun noch der Platz für den Fensterrahmen des Browsers, für Scrollbalken, Symbolleisten, und eventuell eingeblendete Favoritenleisten abzuziehen, um den „netto“ verbleibenden Raum für die Gestaltung der Webseite zu erhalten.
Wie gehen WebdesignerInnen mit den verschiedenen Auflösungen und Pixeldichten um? Ein paar Varianten:
Dazu ein strenges Urteil:
Im nächsten Kapitel werden mit “Responsive Design” und “Responsive Images” die aktuellen Antworten im Web Design vorgestellt.
vorige Präsentation: Details zu Layout | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Responsive Design
/
#