holgerkoenemann.com » Web Design

Feste oder flexible Breite? Eine Alternative.

Holger — Fri, 04 Dec 2009 14:55:16 +0000

Webseiten kann man grob in zwei Kategorien einteilen: Die Seiten mit fester Breite und die mit flexibler, sich der Fenstergrösse anpassenden Breite.

Fest vs. flexibel

Feste Breiten sind dabei wesentlich häufiger zu finden, da diese das pixelgenaue Designen und Gestalten erlauben. Die Seite sieht bei allen Besuchern gleich aus, unabhängig von der gewählten Monitorauflösung und Fenstergrösse. Flexible Layouts findet man daher häufig bei inhaltslastigen Seiten mit wenigen grafischen Elementen. Eben bei Internetseiten bei denen die optimale Platzausnutzung wichtiger ist als die konsistente Darstellung eines einheitlichen Designs. Gutes Beispiel hierfür ist www.amazon.de.
Aber gerade feste Layouts schränken die Webdesigner mehr und mehr ein. Die Verbreitung von großformatigen Bildschirmen nimmt zu und sogar Auflösungen von 2560×1600 Bildpunkten und mehr sind mitlerweile nicht mehr exotisch. Internetseiten mit festen Größen müssen sich aber an dem kleinsten gemeinsammen Nenner orientieren. Als Standard gilt hierfür mittlerweile eine Auflösung von 1024×768. Aber wenn man bei einer Breite noch eventuelle Scrollbalken und Browserrahmen abzieht, bleibt ein sicherer Wert von normalerweise 950px – 984px Breite für eine Internetseite übrig. Bei grossen Displays wirkt diese dann ganz schön verloren…

Hat man also nur die Wahl zwischen zwei Übeln?

Nein, sogenannte “semi- flexible” Layouts kommen immer mehr in Mode. Die Seite skaliert in ihrer Grösse mit, allerdings nur innerhalb eines festen Bereiches. Z.B. zwischen 780px – 1200px. Damit nutzt die Seite die volle Breite bei einer Auflösung von 1280×1024px (<- vermutlich der nächste Standard) aus, wird aber bei höheren Aulösungen nicht grösser. Bei kleineren Auflösungen verkleinert sich das Layout mit, so dass bei einer Auflösung von 800×600px keine Scrollbalken zu sehen sind.

Technisch läßt sich dies, zumindest in aktuellen Browsern, recht einfach umsetzen. Einem DIV Container muss per CSS nur eine maximale und eine minimale Weite zugeteilt werden. Hat man beispielsweise im HTML Code einen Container mit dem Klassen Namen “content” definiert und dazu folgende Klasse in der CSS Datei hinterlegt:
.content { min-width: 780px; max-width: 1200px; background-color: red; height: 200px; }

bekommt man eine rote Box die bis zu einer Grösse von 1200px mit skaliert, aber nicht grösser wird und auf der anderen Seite bis zu 780px klein wird, aber eben nicht kleiner.
Hier das Live Beispiel

Und hier noch ein paar gute Beispiele aus dem “realen Leben”:
Made by Sofa
socialcast.com

Fazit

Zwar macht diese Technik etwas mehr Optimierungsaufwand nötig als bei nur einer festen Breite, schließlich muss man für 2-3 Auflösungen optimieren. Der Spielraum von einigen hundert Pixeln lässt aber noch genug Platz für die Gestaltung mit Bildern und Grafiken, ohne die konsistente Darstellung zu gefährden. Hinzu kommt, dass Nutzer mit einer höheren Auflösung einen tatsächlichen Mehrwert haben und Besucher mit einer niedriegeren Auflösungen nicht ausgeschlossen oder durch Scrollbalken “diskriminiert” werden.
Alles in allem zumindest eine Alternative die sich stärker am Nutzer orientiert und einen Kompromiss bietet, wenn das nächste Mal die Frage “fest oder flexibel” ansteht.

17 minimalistische Internetseiten die ich mag

Holger — Tue, 11 Aug 2009 07:44:46 +0000

Bigcartel.com

bkwld.com

Brilliancy.eu

buddycarrskateboards.com

chrisbarr.net

distrop.com

feedafever.com

gb-studio.tv

guzzle.it

hugeinc.com

madebysofa.com

mohawkpaperstore.com

nickfinck.com

raggededgedesign.com

supereightstudio.com

thisisjamhot.com

vlourenco.com

Blueprint CSS Framework

Holger — Tue, 20 Jan 2009 14:36:13 +0000

Über diesen sehr lesenswerten und weiterführenden Artikel zum Redesign von drupal.org im Blog von Mark Boulton, bin ich auf das kleine aber feine Framework “BlueprintCSS” gestoßen. Ich hatte zwar am Rande schon einmal davon gehört, es mir aber selber nie angesehen.
Kurz zum Hintergrund: Ein CSS Framework ist im Prinzip nichts anderes als eine Sammlung von CSS Klassen und dazugehörigen HTML Elementen, die man immer mal wieder braucht, oder eh notwendig sind, um z.B. die Browserkompatibilität zu gewährleisten, die Printausgabe zu steuern usw. Vermutlich jeder Webdesigner hat sich eine solche Sammlung (mehr oder weniger gut und aufgeräumt) selber angelegt, oder greift auf eines der grossen Frameworks (z.B. Yahoos YUI, oder das aus deutschen Landen stammende YAML von Dirk Jesse) zurück, um nicht immer wieder bei Null anfangen zu müssen.
Während die grossen Vertreter jedoch versuchen, möglichst alle Bereiche des User Interface Designs abzudecken, fokusiert sich Blueprint wesentlich stärker auf CSS Websites und Grids. Es ist dadurch wesentlich schlanker und einfacher zu durchblicken. Hinzu kommt, dass nicht versucht wurde für alle möglichen (und unmöglichen) Elemente Beispiele und Klassen beizufügen, die wenigen aber gleich schön und ansehnlich gestaltet wurden. Die obligatorische Testseite wirkt schon fast wie eine richtige und fertige, zugegebener Maßen minimalistische, Website.
Alles in allem keine Konkurrenz zu den eierlegenden Wollmilchsäuen am Markt, aber wenn es “nur” um eine klar strukturierte Internet- Seite geht und die Möglichkeit, schnelle und gute Ergebnisse zu erzielen, ohne dabei ersteinmal jede Menge Ballast über Bord schmeißen zu müssen, perfekt.

In 20 Minuten zur perfekten Website

Holger — Mon, 01 Sep 2008 13:53:20 +0000

So oder so ähnlich könnte der leicht übertriebende Werbeslogan eines eher mittelmäßigen Webbaukastens für Anfänger lauten…oder eine Methode die eigene Internetseite konstant, Tag für Tag und Stückchen für Stückchen zu verbessern und zu optimieren. Es müßte also eigentlich heißen, “wie man eine bestehende Internetseite innerhalb von 20 Minuten täglich nahezu perfekt machen kann.”
Der Vorteil einer Internetseite ist ja gerade, dass diese dynamisch verändert werden kann. Eine einmal fertiggestellte Seite muß nicht in diesem Status verharren. Viele Webseite- Betreiber nutzen diesen Vorteil des Mediums Internet aber nicht. Eine Webseite soll fertig sein und funktionieren…und nach drei bis fünf Jahre ist ein Redesign fällig. In der Zwischenzeit geschieht gar nichts…mal von der allmonatlichen Aktualisierung der Newsrubrik abgesehen.
Um dem entgegen zu wirken habe ich mir angewöhnt etwa 20 Minuten täglich zu investieren, um mir Gedanken über meine eigene Webseite zu machen. Vornehmlich nach der Beantwortung aller E-Mails am Morgen und kurz vor der eigentlichen Arbeit. Mit der ersten Tasse Kaffe des Tages bewaffnet guck ich mir meine Seite einfach nur an und überlege, was wie verbessert werden könnte. Was gefällt mir mittlerweile nicht mehr? Vielleicht doch noch einen Rechtschreibfehler oder eine unglückliche Formulierung übersehen? Vielleicht hier noch eine kleine Grafik einbauen und dort eine Farbe kräftiger hervorheben? Alles Dinge die man dann am nächsten Tag, in den nächsten 20 Minuten, nach und nach umsetzen kann. So entwickelt sich die eigene Seite weiter, bietet Besuchern immer wieder etwas neues, Fehler werden entdeckt und können ausgebessert werden und die eigene Seite bleibt immer auf dem neusten Stand. Weiterer Vorteil: Dieses “ich-mag meine-eigene-Internetseite-nicht-mehr-und-brauche-eine-komplett-neue” Gefühl, dass sich bei mir (<- sicherlich kennen andere Webdesigner dieses Gefühl auch…)spätestens nach einer Woche nach dem Start einer Seite einstellt, wird dadurch stark abgemildert.

Wie steht ihr dazu? Wie und wie häufig schraubt ihr an der eigenen Internetseite herum?