< Mein schönster 3. Oktober | Bulletproof-Colorset: redglossy >

05 Okt 2007 Potentiell problematisch: Banner

Diese Diskussion in den Kommentaren des Bulletproof-Dokumentationsblogs wirft ein altes Problem neu auf – Flexible Layouts vs. Banner.

Nehmen wir an, wir haben für ein Blog eine tolle Banner-Grafik gefunden, Format: 960x150 Pixel. Klarer Pawlow für Webgestalter: Fixe Breite und Höhe. Man legt dieses Banner als Hintergrundgrafik hinter ein Container-div, im Falle eines Serendipity-Blog bietet sich #serendipity_banner an, und zurrt für dieses div mittels width: 960px; und height: 150px; die Maße via CSS fest. Im Fall von BP, wo alle Elemente des Blogs über ein umfassendes div namens #wrapper zusammengehalten werden, würde man die Breite vermutlich eher diesem Container zuweisen, und damit hat es sich dann schon erledigt mit dem flexiblen Layout. Nun bekommt jeder Besucher unabhängig von der eigenen Größe des Browserfensters das Blog auf 960 Pixeln Breite serviert.

Lässt man jedoch die Breite des Containers flexibel, sieht das Ganze in breiteren Browserfenstern suboptimal aus. Nehmen wir mal ein 1024 Pixel breites Browserfenster und ein Standard-BP an – dort ist #wrapper in base.css auf 95% Breite eingestellt, was ungefähr auf 972 Pixel hinausläuft, ergo 12 Pixel »Rand« ergibt. Was in 1024 durchaus noch zu verschmerzen wäre, ist bei 1280 und mehr Pixeln Breite nur noch hässlich.

Vorab: Die Ideallösung gibt es so nicht. Meine persönliche Empfehlung wäre die folgende: Man nehme ein Banner von 1280 Pixeln Breite, lasse die Breite für #wrapper flexibel auf 95%, weise jedoch #wrapper mittels max-width: 1280px; eine maximale Breite zu. Bei der Wahl des Banners sollte man bedenken, dass ggf. rechts ein gehöriges Stück abgeschnitten wird. »Wichtige« Einzelheiten sollten sich also links befinden. Wie weit links, das hängt letztlich von den eigenen Besuchern ab – ich würde dabei nach wie vor von 800x600 Pixeln ausgehen, was bedeuten würde, dass diese Besucher nur die »linken 760 Pixel« des Banners sehen.

0 Trackbacks

Trackback-URL

  1. Keine Trackbacks

0 Kommentare

RSS Feed (Kommentare) für diesen Eintrag

  1. Noch keine Kommentare

Kommentar schreiben

Bitte die Hinweise beachten.

Hinweise

Textile-Formatierung erlaubt
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Gravatar, Twitter, Identica, Favatar Autoren Bilder werden unterstützt.

Pflichtfelder sind mit * markiert.

Kommentare, die mindestens einen Link enthalten, werden moderiert. Kommentare, die mindestens 3 Links enthalten, werden abgewiesen. Sorry – Spamschutz.

Bei Emoticons, die mitten in Sätzen stehen, möglichst keine Nasen einsetzen [ :), ;) usw. ], da es ansonsten im Zusammenspiel mit Textile zu Merkwürdigkeiten kommen kann.