Zwei Herzen schlagen in meiner Brust: als Kommunikationsdesigner bin ich während meines Studiums sowohl durch eine hervorragende Print- als auch durch eine intensive Online-Schule gegangen, die jede für sich sehr viel Spaß gemacht haben. Man kann demnach sagen, ich fühle mich beiden Lagern stark verbunden. Auch oder aber gerade weil ich mich schon immer mehr in Richtung Web orientiert habe – ich lebe nun seit gut zehn Jahren davon –, möchte ich mich für den Webentwickler stark machen und dem Grafikdesigner mit diesem Artikel einige Tipps an die Hand geben, um den gemeinsamen Workflow zu verbessern. Vielleicht lassen sich in Zukunft dadurch für den ein oder anderen Zeit und Nerven sparen.

Am Anfang steht das Layoutprogramm

Es kommt nicht selten vor, dass ich von Grafikern aus Agenturen, die in der Regel den Printmarkt bedienen, fertige Screenlayouts erhalte, die ich mittels HTML, CSS & Co. für das Web umsetzen soll. Hier gibt es die unterschiedlichsten Varianten: die einen schicken mir offene InDesign-Dateien, andere bevorzugen das Illustrator-Format und wieder andere schreiben lieber ein PDF. Zusätzlich im Anhang dann oft noch ein Word-Dokument, das beschreibt, was zu tun ist. – Ja, als gelernter Kommunikationsdesigner kann ich sehr gut nachvollziehen, das man das Programm zum Layouten wählt, in dem man sich am wohlsten fühlt. Doch ist es auch die beste Wahl für die Umsetzung eines Weblayouts?

Ich würde sagen: »Nein!«

Wieso nicht und warum ich eine Software wie Photoshop präferiere – um mal das am häufigsten genutzte pixelbasierte Grafikprogramm in Agenturen zu nennen – möchte ich in den folgenden Absätzen erklären.

Der Pixel ist dein Freund

Auf dem Bildschirm und folglich auch im Internet wird in der Einheit Pixel gerechnet, nicht in Punkt, Millimeter oder Zentimeter wie es beim Print der Fall ist. Dies gilt für alle Maße: Innen-, Außen-, Zeilenabstände sowie Schriftgrößen, Rahmendicke, usw. Aus diesem Grund sind Programme, die Pixel-Layouts ausspucken, den üblichen Layoutprogrammen vorzuziehen. Entsprechend kann man z.B. in Photoshop die Ebenen hervorragend dazu benutzen, einspaltige und/oder mehrspaltige Layoutvarianten zu demonstrieren oder das Navigationsmenü sowie unterschiedliche Hyperlinks zu simulieren. Mein Tipp: Niemals die Ebenen auf eine einzelne Hintergrundebene reduzieren. Der Webentwickler wird es euch danken.

Automatisch die richtige Auflösung

Im Internet wird alles in 72dpi angezeigt. Demzufolge muss das Screendesign auch in dieser Auflösung angelegt werden. Bilder, die mit 300dpi aus dem Print-Bereich kommen, sollte man in Photoshop mit Für Web Speichern sichern. Die Auflösung wird dadurch automatisch auf 72dpi gesetzt. Dadurch, dass wir nun in der relativen Einheit Pixel rechnen, sind dpi für das Internet erst einmal irrelevant. Ein dpi-Wert wird erst dann interessant, wenn man Internetseiten oder genauer gesagt die dort vorhandenen Bilder ausdrucken möchte. Ob ich z.B. ein 300px mal 300px großes Bild mit 72ppi oder mit 300ppi abspeichere, macht sowohl für die Größe am Bildschirm als auch für die Dateigröße keinen Unterschied. Aus diesem Grund ist es am einfachsten, seine Bilder über den Photoshop-Dialog Für Web Speichern zu sichern. Hierdurch erhält man die Möglichkeit auf die letztendlich relevante Dateigröße durch Kompressionsraten bzw. Anpassung der Farbpalette Einfluss zu nehmen. Mein Tipp: Für Fotos mit weichen Farbübergängen empfiehlt sich das JPEG-Format, bei Grafiken mit harten Konturen wählt man am besten das PNG-Format.

Im Rausch der Farben

Während man im Print-Bereich in CMYK arbeitet, werden die Farben auf dem Bildschirm in RGB dargestellt. Somit freut sich der Webentwickler zweifelsohne, wenn er alle Farbdefinitionen bereits umgewandelt als RGB- oder HEX-Werte erhält. Vollton-Farben wie Pantone oder HKS gibt es im Internet übrigens nicht, wer hätte das gedacht? ;)

Ein Layout gefällig?

Im Gegensatz zum Medium Print, wo das Endprodukt eine feste Größe besitzt, wie z.B. ein DIN-A2-Plakat, eine DIN-A4-Broschüre oder ein DIN-Lang-Flyer, kann man bei Internetseiten nicht voraussagen, wie der Besucher diese anschauen wird. Besitzt er einen in die Jahre gekommenen 19'' Röhrenmonitor, guckt er sich die Seiten auf seinem 15'' Laptop an oder steht zu Hause gar ein 24'' Widescreen TFT-Display? Für den Grafikdesigner bedeutet dies, sich noch vor der Gestaltung über die Art des Layouts Gedanken zu machen, da nachträgliche Änderungen immer mit einem großem Zeitaufwand verbunden sind. Folgende drei Varianten haben sich etabliert (Mischformen einmal ausgenommen, die es ebenso zu sehen gibt):

Feste Layouts

Beim festen Layout gibt es eine starre, unveränderliche Breite von z.B. 960px. D.h. bei einer kleinen Monitorauflösung von 1024px wird der Viewport fast komplett ausgefüllt, dagegen bei einer großen Auflösung von 1920px erhält man links und/oder rechts jede Menge Freiraum.

Fluide Layouts

Ein fluides Layout verhält sich genau entgegengesetzt zum festen Layout: es passt sich der Breite des Monitors an. Diese Flexibilität ermöglicht es dem Screendesigner, den Bildschirm effektiver auszunutzen. Einziger Nachteil des ganzen, er verliert die Kontrolle über das Aussehen der Webseiten, da sie allen Besuchern etwas anders dargestellt werden. Besitzt man z.B. ein recht großes Widescreen Display, kann es zu unschönen Zeilenlängen kommen, wodurch die Leserlichkeit in Mitleidenschaft gezogen wird.

Elastische Layouts

Gedanklich sowie technisch am schwierigsten umzusetzen sind elastische Layouts. Alle Werte stehen in Abhängigkeit zur Schriftgröße. Sprich das komplette Layout inklusive aller Bilder wird skalierbar, ähnlich dem Seitenzoom des Browsers. Vergrößert man die Text, wächst der Rest der Seite proportional mit. In Zeiten stark variierender Displaygrößen – iPhone vs. 24'' Monitor – ist es daher durchaus sinnvoll darauf zurückzugreifen.

Schriften richtig eingesetzt

Nicht alle Schriften, die für eine Drucksache zur Verfügung stehen, können infolgedessen auch für Internetseiten verwendet werden. Die korrekte Darstellung einer Schrift im Internet hängt in erster Linie nicht vom Screendesigner ab, sondern vor allem vom Besucher der Website, der die Schrift auf seinem Rechner installiert haben muss. Darum ist es sinnvoll sein Layout von vornherein auf die üblichen Systemschriften abzustimmen. Welche das im Einzelnen sind, kann man in der Studie von Karin Wehle zur Verbreitung von Schriftarten aus diesem Jahr nachlesen.

Für den Einsatz alternativer Schriften im Netz jenseits der Systemfonts gibt es zwar bereits einige Möglichkeiten, diese sind aber entweder noch nicht ganz ausgereift oder es hapert an der Massenkompatibilität bzw. an den Schriftlizenzen. Da das Thema sehr umfangreich ist und im Internet diesbezüglich gerade sehr viel passiert, möchte ich es hier nur am Rande erwähnen. Bei gegebener Zeit gibt es dazu sicher einen eigenen Weblogartikel von mir. Auf den Punkt gebracht, für den bedenkenlosen Schriftgebrauch existieren derzeit einfach noch zu viele Einschränkungen.

Formatvorlagen – das A und O

Ebenso wichtig wie die Schriftwahl ist die richtige Verwendung der Schriftgrößen, die in den Formatvorlagen festgelegt werden. Der Grafikdesigner sollte wissen, dass in allen Browsern die Schriftgröße standardmäßig auf 16px voreingestellt ist. Diese Größe sollte aus meiner Sicht für Mengentext auch nicht unterschritten werden, da sonst die Leserlichkeit am Bildschirm leidet. Außerdem ist es für Internetseiten üblich bis zu sechs Überschriften zu definieren: von h1, einer großen wichtigen Headline bis hin zu h6, einer kleinen unwichtigen Subline. Weiterhin würde es der Webentwickler sehr begrüßen, wenn er Richtlinien für Zitate, Listen, Tabellen oder sonstige Elemente vom Grafikdesigner erhält, sofern sie für die Website angedacht sind.

Satztechnische Hindernisse

Im Print-Bereich hat man die volle Kontrolle über den Einsatz der Typografie. Man kann auf alles Einfluss nehmen. Im Internet sieht das leider ein bisschen anders aus. Wissenswert ist z.B. dass es keine Worttrennungen am Ende einer Zeile gibt. Deshalb sollte man immer ein Auge auf seine Texte und die Spaltenbreite legen, da es schnell zu Löchern in der Flatterzone kommen kann. Ein daran anknüpfendes No-Go für den Satz im Internet sind manuell gesetzte harte Umbrüche und Trennungen. Der Text sollte fließen. Bedauerlicherweise gibt es weder flexible Leerzeichen noch einzelne Spationierungen. Entweder entschließe ich mich einen Leerschlag zu setzen oder keinen. Geschütze Leerzeichen dürfen hingegen verwendet werden. Unterstreichungen sollten ausschließlich Textlinks vorbehalten bleiben, weil man damit etwas Anklickbares assoziiert. Für Auszeichnungen innerhalb des Textes kann man besser den Italic- oder Bold-Schnitt benutzen, auch Small Caps sind eine gute Alternative. Grundsätzlich sollte darauf verzichtet werden, Schrift in Bilder umzuwandeln, wie es in der Vergangenheit gern gemacht wurde. Zum einen kann der Besucher so keine Wörter mit der Mouse markieren, um sie zu kopieren. Zum anderen können Suchmaschinen wie Google diese Texte nicht auslesen und in den Suchindex aufnehmen.

Kleine Unterschiede dürfen sein

Zum Betrachten einer Internetseite stehen einem jede Menge Browser in diversen Versionen zur Verfügung. Auf Grund der teilweise doch krassen Unterschiede, wie die einzelnen Browser den HTML- & CSS-Code interpretieren, werden Internetseiten browserübergreifend mit sehr hoher Wahrscheinlichkeit nicht identisch dargestellt. Neben der Wahl des Browsers gibt es zudem weitere Faktoren, die die Anzeige einer Internetseite beeinflussen können. Deswegen macht es auch keinen Sinn auf eine starre Eins-zu-eins-Umsetzung des Weblayouts zu bestehen. Vielmehr sollte man vorher mit dem Webentwickler klären, in welchen Browsern bzw. Browserversionen die Website nahezu perfekt wiedergegeben werden muss.

Erweiterbar & dynamisch

Wenn ein Buch, eine Broschüre oder ein Katalog einmal gedruckt worden ist, dann ist der Inhalt wie auch die Anzahl der Seiten festgelegt. Was in Schwarz gedruckt wurde, bleibt schwarz. Wo ein kleines Foto zu sehen ist, dort wird niemals ein vollflächiges Bild erscheinen. Ganz anders präsentiert sich das Internet: Seiten müssen nicht alle dieselbe Länge haben, können gescrollt werden, die Seitenanzahl ist quasi unbegrenzt, Farben und Formen wechseln ihren Zustand. Das WWW ist ständig in Bewegung. Es lebt sprichwörtlich von der Interaktion und den dynamischen Inhalten. Das beste Beispiel, das jeder kennt, ist ein simpler Hyperlink. Er kann je nach Situation fünf unterschiedliche Zustände annehmen, die ebenfalls vom Grafikdesigner bei der Gestaltung zu berücksichtigen sind:

• Wie sieht ein unbesuchter, noch niemals aktivierter Link aus?
• Wie stelle ich einen besuchten Link dar, den ich bereits einmal angeklickt habe?
• Was passiert mit dem Link, wenn ich mit dem Mousecursor drüberfahre?
• Und was geschieht mit ihm, wenn ich mit der Mousetaste auf ihn klicke?
• Wie reagiert der Link, wenn ich ihn mit der Tastatur ansteuere?

Darüber hinaus gibt es auch andere Interaktionsmöglichkeiten wie z.B. Checkboxen, Klappmenüs oder Formulare bis hin zu aufwendig umgesetzten Bildergalerien, Slideshows und interaktiven Fahrplänen. Die Möglichkeiten sind unbegrenzt. Der Grafikdesigner sollte sich ruhig etwas Zeit nehmen und sich im Internet inspirieren lassen, sich nach Anregungen umschauen oder sich von seinem Webentwickler aktuelle Beispiele zeigen lassen, um ein Gespür dafür zu bekommen, was aktuell alles machbar ist.

Fazit

Einem besseren Workflow zwischen Grafikdesigner und Webentwickler sollte nichts mehr im Wege stehen, wenn man die Ratschläge zur Erstellung eines Weblayouts beherzigt. Noch einmal zusammengefasst sehen diese wie folgt aus:

• Verwende für das Screendesign am besten ein pixelbasiertes Grafikprogramm.
• Lege das Screendesign inklusive Bilder in RGB und 72dpi an.
• Mach Dir vor dem Gestaltungsbeginn Gedanken über die Art des Layouts.
• Benutze derzeit am besten nur Systemschriften.
• Definiere Formatvorlagen für die unterschiedlichen Textelemente.
• Beharre nicht auf eine starre Eins-zu-eins-Umsetzung des Screendesigns.
• Das Internet ist erweiterbar und dynamisch. Arbeite mit einer interaktiven Idee im Hinterkopf.

Und ansonsten

Kommunikation ist der Schlüssel zum Erfolg: Es gibt keine dummen Fragen, nur nicht gestellte. Deshalb sprecht miteinander!

Habe ich etwas Wichtiges vergessen oder gibt es einen Punkt, bei dem ihr anderer Meinung seid? Schreibt mir doch aus eurer Erfahrung als Grafikdesigner bzw. Webentwickler, worauf es euch bei der Erstellung eines Screendesigns ankommt.