Im Zuge von HTML5, aber vor allem CSS3 ist es möglich, auch grafisch komplexe Webseiten zu erstellen, ohne dabei exzessiven Gebrauch von Grafiken zu machen. Daher stellt sich die Frage: Warum überhaupt noch der lästige Zwischenschritt über Adobe Photoshop/Fireworks, (Illustrator) oder GIMP?

Jeder (Frontend-)Webentwickler wird es kennen: Erst wird ein grafischer Entwurf in einem beliebigen Grafikprogramm erstellt und nach den Kundenwünschen hin optimiert und die finale Version wird schließlich entweder durch den Grafiker direkt oder von einem HTML/CSS Spezialisten in den Browser gebracht. Bisher ein gängiger Prozess in der Branche.
Die Alternative dazu wäre, das Layout direkt im Browser zu entwerfen und somit schnell einen für den Kunden benutzbaren Entwurf zu schaffen. Die Vorteile liegen auf der Hand: Der Zwischenschritt des “psd2html” entfällt völlig und der Kunde bzw. Endverbraucher bekommt sofort einen Eindruck der “realen” Webseite. Er kann über Elemente hovern und sich das Ergebnis direkt in seiner gewohnten Umgebung für Webseiten ansehen: In seinem Browser. Doch was spricht eigentlich für einen zunächst rein grafischen Entwurf? Hier möchte ich eine kleine Gegenüberstellung beider Methoden anführen.

Entwurf im Grafikprogramm

Pro	Contra
Ermöglicht schnellen, vorzeigbaren Entwurf Einfaches Ändern von Positionen, Schriftarten, Farben, etc. Kann durch geübten Grafiker/Mediengestalter durchgeführt werden Aufwändige Effekte möglich Starten auf “leerer Leinwand” möglich Freie Entfaltung der Kreativität ohne Restriktionen	Muss im Nachhinein für den Browser umgesetzt werden Enthält u.U. viele (überflüssige) Grafiken, verlangsamt evtl. die Seite Ist möglicherweise nicht oder nur sehr schwer vor allem cross-kompatibel 1:1 umsetzbar Beeinflusst u.U negativ die Barrierefreiheit Kein reales Surf-Erlebnis seitens des Kunden Im Nachhinein können bei vielen Grafiken nur sehr umständlich Veränderungen angewendet werden

Entwurf direkt im Browser

Pro	Contra
Zum großen Teil einfache Veränderung von Schrift, Farben und Positionen (sauberes Markup und CSS vorausgesetzt) Kein nachträgliches psd2html nötig Webseite direkt benutzbar Ist zwangsläufig 1:1 umsetzbar Auch um Nachhinein einfache Veränderbarkeit, da in den meisten Fällen Grafiken-arm	Benötigt im Vorhinein einen groben Entwurf Erfordert tiefe Kenntnisse in HTML und CSS um volle Kreativität auszuschöpfen Effekt nur bedingt einsetzbar, CSS3 wird nicht von allen Browsern voll unterstützt Positionierung nicht per Drag&Drop möglich, sehr technische Arbeit während des kreativen Prozesses

Natürlich ließen sich hier noch mehr Argumente sowohl für das Eine als auch das Andere finden.

Die beiden Hauptargumente sind wohl das intuitivere kreative Arbeiten auf der Seite der Grafikprogramm-Benutzer sowie der Wegfall von psd2html auf der Seite der Im-Browser-Gestalter. Doch wie entwerfe ich überhaupt eine Webseite im Browser?

Gestalten im Browser

Vorbereitung

Ganz ohne Vorstellung des späteren Layouts geht es nicht. Dieser erste Schritt sollte entweder auf Papier oder im Kopf des Gestalters erfolgen. Bei der Benutzung eines Grafikprogramms kann auch im Nachhinein noch die Struktur ohne Probleme geändert werden, schließlich muss vorher kein Markup festgelegt werden. Mit dieser groben Vorstellung legen wir also das Markup in (X)HTML fest.

Layout

In Photoshop/Fireworks haben wir Lineale und ein Raster. Im Browser zunächst nicht, aber es gibt ja so genannte Grid-Layout Frameworks. 960.gs ist ein simples, aber effektives Grid-System, um symmetrische und pixelgenaue Webseiten zu entwerfen. Damit können wir uns auch ein Raster über unsere Webseite legen.

Gestalten

CSS3 macht es möglich: Wir können nahezu jede erdenkliche grafische Spielerei ohne Grafiken umsetzen. Schatten, Farbverläufe, runde Ecken, gedrehte Elemente. Doch wie eigentlich über all gilt hier: Weniger ist mehr. Das W3C hält hier einige Informationen zu bereit.

Hilfsmittel

LESS ist eine erweiterte Form von CSS, damit lassen sich Variablen für Farben deklarieren oder auch Anweisungen gruppieren. Dieses Vereinfacht die nachträgliche Änderung von Farben und Schriftarten enorm und sorgt für eine Übersichtliche Notation der Style-Angaben. Übrigens ist es auch hervorragend dazu geeignet, die ganzen -webkit und-moz Präfixe nur einmal zu deklarieren.

Fazit

Letztendlich ist es der persönliche Geschmack, der entscheidet, wie und womit ich eine Webseite entwerfen möchte. Für manche mag “Im Quelltext gestalten” eine zu große Restriktion der Kreativität darstellen, andere hingegen mögen dieses als den natürlichen Prozess einer Webseite ansehen. Die letztendlich wichtigen Aspekte sind schlussendlich gleich: Eine Webseite muss gut strukturiert, sauber codiert, benutzerfreundlich, barrierearm und schnell zu laden sein. Dieses lässt sich mit beiden Methoden realisieren, man sollte also beides in Betracht ziehen und für sich entscheiden, welches das wirtschaftlichere und effizientere Werkzeug ist.

Verknüpft.

• 12 nützliche Tipps

Sozial vernetzt.