pooker.blog

Nachdem ich aus Gründen des aktuellen Arbeitsaufkommens nur wenig Zeit für neue Romane hatte, hier zunächst meine Quickies des Webkraut-Adventskalenders 2007 auf einen Blick.

8.12.

Grafiklayout, Styleguide oder HTML-Prototyp?

Der Erstellung einer Website ist – unabhängig vom Umfang – immer ein Workflow in mehreren Schritten aus Planung, Konzeption und Umsetzung. Für die inhaltliche, technische und visuelle Darstellung dieser Phasen gibt es verschiedene Möglichkeiten.

Grafische Layouts

Grafische Layouts werden vorwiegend mit Bildverarbeitungs- oder Vektorprogrammen umgesetzt. Diese Methode stammt aus dem Print-Bereich und soll die Optik einer exemplarischen Website visualisieren.

Vorteile

• Grundlayouts sind flexibel und schnell umzusetzen
• Einbindung der Elemente des Corporate Designs
• Kunde kann sich “ein Bild machen” von seiner Site

Nachteile

• Nur Einzeldokumente in fixem Gestaltungsraster
• Aktion und Interaktion sind nicht darstellbar
• Detaillierte Darstellungen sind nicht praktikabel

Grafische Layouts sind keine Webseiten und nur als “optische Krücke” zu gebrauchen. Primäre Eigenschaften einer Website lassen sich nicht darstellen. Sinnvoll und flexibel können grafische Layouts für die Kundenkommunikation eingesetzt werden, man sollte sich aber auf die Visualisierung von Grundgerüst, Farben und Kurzbeschreibung der Inhalte beschränken.

Eine interessante Weiterentwicklung ist die Grey-box-Methode von Jason Santa Maria. Hier liegt der Fokus auf die Einbindung webspezifischer Elemente und der Positionierung der Inhalte. Auf Layout und Farben wird verzichtet. Diese “Graukästen” bieten ein gutes Werkzeug für die interne Arbeit des Webdesigners, auch als Grundlage für grafikbasierte Layouts.

Online-Styleguides

Ein Online-Styleguide erweitert die aus dem Printbereich bekannte Darstellung von Elementen eines visuellen Basiskonzeptes um die interaktiven und webspezifischen Elemente einer Website. Beispielhaft ist der Online-Styleguide der Bundeswehr.

Vorteile

• Idealfall eines medienunabhängigen Corporate Designs
• Einbeziehung aller Elemente der späteren Website
• Keine Visualisierungsproblematik eines Layouts

Nachteile

• Hoher Aufwand vor der Umsetzungsphase
• Realisierbar nur mit detaillierter Planung aller Elemente
• Gefahr späterer gestaltungs- und funktionsrelevanter Änderungen

Die Erstellung eines Online-Styleguides ist nur für sehr große Sites oder Portale sinnvoll. Im Idealfall ist der Online-Styleguide Teil eines Corporate Designs und berücksichtigt die spezifischen Anforderungen einer Website.

HTML-Prototypen

“Rapid Prototyping” bezeichnet die Methode, ein Website-Projekt von Beginn an als (X)HTML-Projekt umzusetzen. Die Grenzen zwischen Planung, Konzeption und Umsetzung sind kaum noch vorhanden.

Vorteile

• Medienkonformer Workflow bezüglich Inhalt, Technik und Design
• Flexibel einsetzbar durch Verwendung von Webstandards
• Ideal für Usability-Kontrolle und in der Kundenorientierung

Nachteile

• Hohe Anforderungen an das Know-how des Webdesigners
• Ständige Wechsel zwischen Planungs- und Umsetzungsschritten
• Notwendigkeit ständiger Kontrolle der Browserkompatibilität

Die Vorteile machen das HTML-Prototyping theoretisch zur perfekten Methode mit unschlagbaren Vorteilen, Browserprobleme führten aber immer zu unkalkulierbarem Mehraufwand. Ein idealer Weg für HTML-Prototyping ist die Arbeit mit bewährten Templates oder einem Framework.

13.12.

Mehrfacher Einsatz von Hintergrundgrafiken

Hintergrundgrafiken sind bei vielen Webseiten ein wichtiger Bestandteil des Designs. Durch wiederholten Einsatz lassen sich die Gefahren langer Ladezeiten durch zu große oder zu zahlreich verwendete Grafiken vermeiden.

Einsatzgebiete

Hintergrundgrafiken werden eingesetzt, um entweder dem Grundlayout eine Figur-Grund-Beziehung zu geben (z. B. Faux-Columns-Technik oder abgerundete Ecken), bzw. um einzelne Seitenbereiche oder Elemente optisch hervorzuheben.

Mehrfache Verwendung einer Grafik

CSS bietet mit den Werten für das background-Element zahlreiche Möglichkeiten:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Die Syntax background-attachment: fixed; sollte man aus Rücksicht der Browserkompatibilität nur für das body-Element verwenden.

Vorteilhaft bei der gezielten Verwendung ist die Tatsache, dass eine Grafik nicht allein aus sich heraus wahrgenommen wird, sondern immer im Kontext mit der Umgebung. Beispiel: ein Photoshop-Schatten ist lediglich ein Graustufenverlauf. Dieser Verlauf wird in der Wahrnehmung des Betrachters nur dann zu einem Schatten, wenn er an eine Fläche grenzt, die heller oder dunkler ist als der tiefste Tonwert des Graustufenverlaufs. Ist der Flächentonwert identisch, erscheint er wie ein abschließender Verlauf.

Diese einfachen Verläufe (vertikal und horizontal) könnte man mehrfach auf einer Website einsetzen:

Hintergrundgrafik mit background-repeat: repeat-x

Die Beispiele 1 bis 3 zeigen den Graustufenverlauf als Schatten, der per background-position: left bottom und repeat-x dargestellt wird. Hintergrund-Tonwerte bestimmen die Wirkung des Schattens. Beispiel 4 zeigt einen mit der Hintergrundfarbe verbundenen Verlauf. In den Varianten 5 und 6 wird die an die Top-Position platzierte Grafik als sanfter Übergang in die Hintergrundfarbe wahrgenommen, in Beispiel 6 mit einer negativen vertikalen Verschiebung (background-position: 0 -10px;). Man könnte jetzt das Beispiel 4 als Link-Element wählen, der beim Hovern Beispiel 6 anzeigt. Wie sehr zusätzliche Grafikelemente die eigene Wahrnehmung beeinflusst, sieht man an den Ausschnitten rechts: die Beispiele sind identisch, wirken jedoch ohne Rand und Schatteneffekt im direkten Kontext mit dem Hintergrund anders.

Hintergrundgrafik mit background-repeat: repeat-y

Horizontal laufende Grafiken in vertikaler Wiederholung werden oft zur Abgrenzung von Spalten (Layout oder Seitenbereiche) eingesetzt. Diese kann wie in den Varianten 1 und 4 auch unsichtbar sein (Position right in linker, bzw. left in rechter Spalte). Man sieht anhand der Beispiele 4 und 5, dass der Verlauf im Tonwert anders wahrgenommen wird, in Beispiel 4 wirkt er erheblich heller. Im Beispiel 6 wirkt die Abgrenzung weicher, die linke Spalte bekam einen 1-Pixel-Rand mit einem mittleren Grau aus dem Verlaufsbereich. Rechts die Wirkung innerhalb einer einheitlichen Umgebungsfarbe unter Verwendung von border, z. B. für Elemente oder transparente Div-Container vor einer entsprechenden Hintergrundgrafik. Die Linien selbst sind jeweils einfarbig, erscheinen aber wie Verläufe, beeinflusst durch die differenzierten Tonwerte in der Umgebung. Diese wahrnehmungsbezogenen Methoden ermöglichen so interessante Effekte in der Gestaltung von Webseiten.

20.12.

Mit Webstandards Zeit und Geld sparen

Beim Thema Kostenersparnis durch Webstandards wird von Standardistas meistens das Argument des schlanken Quellcodes vorgebracht, der zu geringeren Provider- und Traffic-Kosten führt. Das trifft zwar für umfangreiche und stark frequentierte Sites zu, das Argument greift dennoch zu kurz. Die tatsächliche Kostenersparnis macht sich vielmehr durch den erheblich reduzierten Abeitsaufwand bemerkbar, unabhängig vom Umfang einer Webseite.

Eine mit Frames, Tabellenlayouts und Font-Tags verseuchte Webseite erscheint kostentechnisch nur im Moment der Online-Stellung ohne erkennbare Nachteile. In allen Projektphasen davor und in den Änderungsphasen danach verursacht eine semantisch strukturierte, nach geltenden Webstandards erstellte Webseite weniger Aufwand und Kosten.

Auch im Webdesign gilt: Zeit ist Geld. Es ist die Summe gesparter Minuten, Stunden und Tage, die sich nicht nur während des Projekt-Workflows positiv auf die Kosten auswirkt. Die gesamte Lebensdauer einer Website ist ständigen Designveränderungen, Erweiterungen und Anpassungen unterworfen.

Freiheit, Kontrolle, Transparenz

Das wichtigste Kostenargument für semantischen Webseiten ist die strikte Trennung der Präsentation von den eigentlichen Inhalten der (X)HTML-Seiten. Diese Trennung bringt dem Webdesigner drei wichtige Vorteile:

1. Freiheit zur Gestaltung von Inhalt und Form
2. Kontrolle über den gesamten Workflow
3. Transparenz des Quellcodes

Vorteile in der Planungsphase

Der Webdesigner hat die Freiheit, zuerst die (X)HTML-Seiten nach den Anforderungen der Inhalte zu codieren, er kann sogar sämtliche Einzelseiten fertig stellen, ohne sich Gedanken über die Präsentation zu machen. CSS-Layouts ermöglichen sogar die Planung eines Projektes auf der Grundlage eines fertigen Designs.

Vorteile in der Konzeptionierungs- und Umsetzungsphase

Nur selten wird ein Website-Projekt vom Kunden von der Planung bis zur Umsetzung durchgewunken. Ergänzung von Elementen oder die Modifizierung einiger Attribute in der CSS-Datei sind oft in Minuten erledigt.
HTML-Prototyping und/oder CSS-Frameworks ermöglichen einen ökonomischen Workflow, selbst wenn der Kunde kurz vor dem Launch gestaltungsspezifische Änderungswünsche formuliert. Der Webdesigner verliert weder kostbare Zeit, noch die Kontrolle über das Projekt.

Vorteile in der Website-Pflege

Unschlagbar sind Webstandards in der Praxis von Aktualisierungen und Relaunches. Nicht alles kann schnell und problemlos geändert oder ergänzt werden, der Webdesigner kann sich aber auf die Inhalte konzentrieren. Die Transparenz des Quellcodes garantiert auch bei seltenen Aktualisierungen ein schnelles Einarbeiten in den Aufbau der Webseite.

Die korrekte Einhaltung der Webstandards ermöglicht mit überschaubarem Aufwand sogar die seitenübergreifende Ergänzung von IDs und Klassen, selbst ein komplettes Layout auf der Basis von float-Umgebungen lässt sich über die CSS-Datei verändern. Die Modifizierung des Designs ohne Änderung der Inhalte lässt sich sogar in wenigen Tagen realisieren. Zeit- und kostensparende Vorteile, die nicht einmal bei einem rudimentären Tabellenlayout vorhanden sind.

24.12.

Transparenzeffekte mit PNG-24 und CSS

Bildtransparenzen bieten im Webdesign viele Einsatzmöglichkeiten. Monochrome PNG-Deko-Bilder “verschmelzen” beispielsweise über definierter background-color optisch mit den Hintergrundfarben von Webseiten: Ideal für verschiedene Website-Templates und in der Konzeptionierungsphase.
Wird dem Bild ein Link zugewiesen, ergeben sich interessante Hover-Effekte. Hier ein grundsätzliches Beispiel mit einer PNG-Datei und Änderung der Hintergrundfarbe.

Leider ist die Datenmenge bei PNG mit Alphakanal größer als bei JPEG- oder GIF-Bildern. Weder der IE5, noch der IE6 konnten PNG-24-Alphakanäle anzeigen, mittlerweile gibt es aber geeignete Javascript-Lösungen. Auch die dunklen PNG-Farben lassen sich vermeiden.

Ein Weihnachtsmotiv: Vorbereitung in Photoshop

Bild 1 zeigt die Vorlage für die spätere PNG-Datei (Bild 2). Zunächst wählen wir gezielt die gewünschten Bildbereiche aus. Eine bequeme Auswahlmöglichkeit mit Transparenzen bekommt man unter “Auswahl – Farbbereich auswählen…”. Mit der Pipette klickt man auf den dunkelsten Bereich und definiert die Toleranz mit “200″.

Mit “Befehlstaste-C” und anschließendem “Befehlstaste-V” erhalten wir ein neue Ebene mit dunklen Farbbereichen. Wir wählen zusätzlich eine helle Flächen aus, verkleinern die Toleranz auf “80″ und generieren eine neue Ebene mit hellen Farbbereichen.

Zuletzt folgt die Lichthöhe, mit einem Auswahlrechteck eingegrenzt und einer Toleranz von “200″. Die Ebenen auf transparentem Hintergrund werden nun über “Für Web speichern…” als einzelne PNG-24-Datei (Transparenz) im Web-Ordner abgelegt.

Transparenzeffekte mit CSS

Effekte werden per CSS als MouseOver-Aktion mit der Pseudoklasse :hover definiert. Dass und wie man in der Praxis solche Effekte auch für Tastaturbenutzer mittels :focus und :active zugänglich macht, zeigt der Beitrag von Tomas Caspers.

Beispiele

Drei Beispiele für Transparenzeffekte findet Ihr in unserem Testcase. Dort liegen auch die verwendeten Bilddateien zum Download bereit.

Transparenzeffekt: background-color

Beispiel 1 zeigt den Effekt über eine Änderung der Hintergrundfarbe beim Hovern. Die halbtransparenten roten Bereiche der Christbaumkugel erscheinen vor dem gelben Hintergrund orangefarben.

Transparenzeffekt: background-image

Beispiel 2 verwendet ein Hintergrundbild in der gleichen Größe wie die PNG-Datei. Per background-position: 0 -200px; zunächst versteckt, erscheint das Hintergrundbild beim Hovern mit background-position: 0 0; hinter der PNG-Datei. Der unruhige, türkisfarbene “Fleck” wirkt durch die PNG-Transparenz hindurch.

Transparenzeffekt: background-position und background-repeat

In Beispiel 3 wird der obere Teil der Hintergrundgrafik (background-repeat: repeat-x) versteckt und erst beim Hovern mit background-position: 0 -120px; am unteren Bildende gezeigt. Zusätzlich wurde dem PNG eine Klasse mit 2-Pixel-Rand zugewiesen, der in modernen Browsern beim Hovern eine andere border-color zeigt.