Innenmaße im Webdesign

tempa wrote this 18:56:

Der mobile Websurfer ist im Vormarsch. Die Geräte werden peut-a-peut so gut und erschwinglich, dass man am Ende generell mit dem mobilen Surfer rechnen muss. Das heißt dann, dass die 800er-Auflösung wieder stärker vertreten sein wird, wenn ich den Kommentar von „Majoran“ bei Robert Basic korrekt interpretiere. Ich persönlich habe eine starke Präferenz zum 1280×960-Fenster und genieße Innenmaße von 1256×800px (Bei Bedarf nehme ich 90px dazu oder Schalte auf Vollbild mit den 1600er-Maßen), was man meinen Designs anmerkt, obwohl ich beim Designen mich auf eine Viewport-Vorlage (PSP-Datei ca. 638KB) entsprechend dem 1024×768-Fenster beschränke um einer Großzahl der Nutzer einen Bestview im Viewport zu gewährleisten und teste im Grunde nur, ob das Design im 800er noch erträglich ist.

Wenn die 800 Auflösung wieder stärker im Kommen ist, dann ist meine bevorzugte Bildbreite von 500 Pixel zu breit. Die Spielfläche in einem 800-Monitor bei geöffneter History- oder Favoriten-Sidebar ist lediglich ca. 370 Pixel:

Webdesign-Viewport-Matrix (500er-Vorschau)

Misst man das Fenster unter Berücksichtigung einer History, oder Favoriten/Lesezeichen-Sidebar und einer zusätzlichen Symbolleiste, so erhält man in der 1024er-Ansicht Innenmaß von 815×610 px Zieht man noch einmal 220 Pixel für einen Navigationseitenstreifen ab, so bleibt eine Breite von 590 Pixel für den Inhalt. Sicher, sicher … liquide Designs, die im Viewport atmen. Ich bin mir der Technik bewußt, uns berücksichtige veränderliche Innenmaße, was häufig schon in der Planungsphase eines freien Templates bei dem weder die Inhalte noch der spätere Zweck, Anwendertyp feststeht. Aber selbst bei einem Template, das sich dem Viewport proportional anpasst
gibt es eine Komponente mit einer festen Pixelbreite: die Bildillustration. Will man nicht jedes Bild durch einen Flash-Render jagen (Medienfreunde: Flexible Flash), der die Bildgröße in den Proportionen den Fenster anpasst.

Manche ergeben sich schlicht den Gegebenheiten und machen die Not zur Tugend, wie z.B. das UX-Magazin, das seine Site in viele kleine Bausteine unterteilt hat und diese durch Floats je nach Fenstergröße neu ordnet:

Das Baustein-Design des UX-Magazin

Ich finde jedoch, wenn ich nicht wie UX-Max das Design ganz und gar auf Kleinteilig zum auf-Platz-purzeln einstelle, dass das 370px oder hier im folgenden 365px-breiten Bild zu klein ist, um mttig gut auszusehen und zu breit ist, um links oder rechts mit umlaufendem Text dargestellt zu werden.

Viewport Webmatrix (365px-Ansicht)

Zuviele Details gehen verloren, die in der 500er-Ansicht noch erkennbar sind. … zumindest mir gesunden, guten Augen. Man könnte natürlich alternative Stylesheets anbieten, die dann parallel auch ein kleineres Bild auslösen. Für dynamische Seiten, die per PHP, ASP, Perl, Zope, Linux oder jeder anderen beliebigen serverseitigen Script-/Programmiersprache im Grunde kein Problem. Auch mein PHP-Script, um mir das Auslesen der der Bildgröße zu ersparen und Alpha-Transparenz im IE<7 darzustellen, ist schnell angepasst, um im Falle eines vorhandenen mobile-Stylesheet-Cookies des Stylesheetswitcher, Bilder im Format vollautomatisch anzupassen. Es ist nicht erforderlich separat und umständlich manuell diese Bilder zu skalieren sowie einzubinden, das wäre eine nur eine Aufgabe für HTML-Puristen.

Mit der Zunahme der mobilen Surfer könnte auch 640×480 Pixel Fenster, vor dem selbst das UX-Magazin kapituliert, wieder populär und damit nicht mehr ignoriert werden.

Andere Weblogautoren, die sich damit beschäftigt haben:

Beim letzten Link nicht zu früh freuen. Das Ziel sich anpassender Bilder ist nicht mit HTML&CSS zu erreichen — noch nicht. Es geht um DIVs Hintergrundkacheln und Bildausschnitte.

One Response to “Innenmaße im Webdesign”

  1. Templaterie Blog Says:

    […] Photoshop 7-Datei gezippt gibt hier zum Download (Kleines Update siehe hier). Die roten Markierungen und das Rote Feld deuten die typischen Grenzen des 800×600 Viewports […]

Leave a Reply