Web(CSS)Design

Auf der Suche nach der optimalen Darstellung

design (5K)

Design sollte sich immer an den Inhalten orientieren.

Eine Liste derjenigen Webseiten, die Ihnen gefallen, b.z.w. nicht gefallen, kann in der Anfangsphase der Designentwicklung sehr hilfreich sein.

Auf Grundlage Ihrer Wünsche und Vorstellungen erstelle ich einen Designentwurf als Grundlage für die spätere Umsetzung in CSS.


layout (6K)

Bei aller Orientierung am Inhalt bleibt noch weiter Spielraum für ihre individuelle Entscheidung. Vieles ist eine Frage des persönlichen Geschmacks: bei jeder Entscheidung sollten jedoch auch Benutzerfreundlichkeit und Zugänglichkeit bedacht werden.

Die optische Präsentationsweise hat eine direkte Rückwirkung auf die Wahrnehmung der Inhalte. Diese kann im positiven Fall verstärkend, im negativen verwirrend und ablenkend sein.

Wichtige Weichenstellungen

  • Entscheidung über die grafische Aufteilung des Hauptfensters. Ein-, Zwei- oder Drei-Spalten Layout? Fixe Breite oder variable Anpassung an die Breite des Browser-Fensters?
  • Entscheidung über die Art der Menüführung. Diese sollte sich an der Zielgruppe orientieren.
  • Festlegung des Farbkonzepts. Bei der Auswahl der Palette ist es heute nicht mehr nötig, sich auf die websicheren Farben (websafe colours) zu beschränken. Eine Farbe sollte dominieren. Natürlich sollte man immer für gute Lesbarkeit und ausreichenden Kontrast sorgen.
  • Festlegung der bevorzugten Schriftfamilien, Größenproportionen und spezieller Stile für Überschriften, Bildunterschriften, Listen etc.
  • Festlegung des zu verwendenden Bildmaterials und der Art der Einbindung in den Textfluss. Eventuelle Neuerstellung von Grafiken, um die optimale Einbindung in das Gesamtlayout zu erreichen.

Umsetzung

codieren (5K)

Auf Grundlage des ersten Designentwurfs werden ihre Seiten in HTML oder XHTML und CSS umgesetzt.

Die konsequente Trennung von Form und Inhalt mittels CSS wird dabei zu einem deutlichen Performancegewinn beim Seitenaufbau, zur Verbesserung der Bedienbarkeit und zur Barrierefreiheit Ihrer Seiten beitragen.

Semantisch sinnvolle Auszeichnung und fehlerfreies Markup machen sich später auch beim verbesserten Ranking in den Suchmaschinen bemerkbar.

Zur Textauszeichnung (dem sogenannten Markup) verwende ich keine WYSIWYG-Editoren. Die Auszeichnung erfolgt direkt auf Quelltextebene, bzw. mittels selbsterstellter PHP-Scriptingtools, die auf den jeweiligen Einzelfall zurechtgeschnitten werden.

Semantisches, schlankes und übersichtliches Markup - und die Abkoppelung der Designanweisungen in eine ausgelagerte CSS-Datei - sorgen dafür, dass bei einem Redesign nur die CSS-Datei ersetzt werden muss. Die (semantische) Struktur der XHTML oder HTML-Seiten bleibt erhalten.

Während des Arbeitsprozesses werden alle Seiten laufend in modernen Browsern auf durchgängige Darstellung getestet. Wenn Sie es wünschen, werden auch ältere Browser berücksichtigt.

Der Quelltext ihrer Seiten und die zentrale CSS-Datei wird abschließend einem Validatortest beim W3C unterzogen.