Wie jedes Jahr ein Muss für alle Webworker, die sich für mehr Qualität im Web einsetzen (wollen). Dieses Mal haben wir die Artikel mit Kniffen aus dem Praxisalltag auch bewusst kurz gehalten, perfekt für Zwischendurch. Es gibt also keine Ausreden. :)

Für diejenigen unter euch, die vielleicht zum ersten Mal von dieser Aktion hören, denen möchte ich ebenso die Adventskalender aus den Jahren 2008, 2007, 2006 und 2005 ans Herz legen. Sicherlich ist dort noch die ein oder andere Perle versteckt. Reinschauen lohnt sich.

Dieser Artikel dürfte hoffentlich nicht nur Webdesigner, Webentwickler oder Usability-Experten interessieren, auch die Entscheider der zuständigen Verkehrsunternehmen sollten für sich daraus einige wichtige Informationen ableiten können.

Mit meinem Umzug nach Berlin Anfang des Jahres benötigte ich natürlich neue Visitenkarten. Somit ging ich zuerst einmal auf die Suche nach einer recht jungen, noch unverbrauchten Schrift. Klar war, es sollte eine Antiqua sein, also eine Schrift mit Serifen. Zu der Zeit las ich gerade im Blog von I love Typography (iLT), um mich ein bisschen inspirieren zu lassen, als ich über den iLT eigenen Schriftzug stolperte. Es war Liebe auf den ersten Blick. Nach kurzer Recherche fand ich heraus, dass es sich bei der verwendeten Type um die Skolar von David Březina handelt, die ganz frisch bei der Foundry TypeTogether vertrieben wird. Neben dem obligatorischen Font Tester und einer kompletten Glyphen-Übersicht gibt es zudem ein sehr schön gestaltetes PDF. Meine erste Erkenntnis: Der Italic-Schnitt ist sogar noch schicker als der Gerade. Meine zweite: Die Schrift ist beachtlich gut ausgebaut. So erhalte ich nicht nur meine geliebten Small Caps und Ligaturen sondern auch tabellarische, proportionale Versal- & Mediävalziffern sowie alternative Buchstabenformen und Ornamente. Lange Rede kurzer Sinn, alle bis dahin vorhandenen vier Schnitte – mittlerweile gibt es derer sechs – wurden gekauft.

Vielsagende Details

Für meine neuen Visitenkarten wollte ich nicht nur eine außergewöhnliche Schrift, auch die Art des Drucks war mir enorm wichtig. Dabei kam eine Karte aus dem üblichen Offset-Druck oder noch schlimmer aus dem Digitaldruck, die man gefühlt in neun von zehn Fällen in der Hand hält, nicht in Frage. Nein, ich wollte etwas Besonderes. In meinen Bookmarks fand ich dann per Zufall einige Beispiele, die im amerikanischen Letterpress-Verfahren gedruckt worden sind. Ich war abermals sehr angetan davon, denn bei dieser Methode entsteht durch die Hochdruckform eine Prägung im Papier – die Schattierung –, die man auf der Rückseite ertasten kann. Jetzt musste ich also nur noch einen Drucker hier in Berlin und Umgebung finden, der im Hochdruckverfahren arbeitet, was zugegeben gar nicht so einfach war. Aber Internet sei Dank stieß ich auf den interessanten Druckerey Blog von Martin Z. Schröder.

Alt bewährte Handwerkskunst

Von da an ging alles sehr unkompliziert und zügig von statten. Ich schrieb eine kurze Anfrage per E-Mail, die zügig binnen 24 Stunden beantwortet wurde. Wir machten einen Termin aus, um alle Details besprechen zu können. Nicht nur die Papierfrage wurde geklärt – ich entschied mich für Römerturm Precioso weiß matt 300g/m² – auch erfuhr ich, dass meine Visitenkarten mittels Magnesium-Klischee, eine Art Stempel, gedruckt werden müssen. Damit man die Schattierung auf der Rückseite ertasten kann, ist man gezwungen sehr hohen Druck auf das Papier auszuüben. Bleilettern würden in dem Fall zerstört werden, weil sie zu weich sind. Das Magnesium-Klischee dagegen ist hart genug und hält ohne weiteres dem Druck der Boston-Klapptiegelpresse stand. Zur Anfertigung des Druckstocks wird dann lediglich ein einfarbiges PDF benötigt, aus dessen Daten das Klischee geätzt wird.

Der Farbschnitt – oder das Tüpfelchen auf dem ‚i‘

Zu guter Letzt hatte ich noch einen speziellen Veredelungswunsch und hoffte, dass mir mein Drucker diesen ebenfalls erfüllen kann: Die Visitenkarten sollten an den Kanten mit einem Farbschnitt versehen werden. Was soll ich sagen, er war nicht nur sehr angetan von der Idee, er setzte meinen Wunsch auch bestens um. Sowohl beim Anfertigen des Farbschnitts als auch beim darauf folgenden Andruck der Karten konnte ich ihm über die Schulter gucken. Heutzutage ist man es ja gewohnt, dass alles automatisch und auf Knopfdruck von statten geht. Nicht so in der Offizin von Martin Z. Schröder, hier ist präzise Handarbeit an der Tagesordnung, was ich sehr zu schätzen weiß. Abschließend lässt sich sicher festhalten, dass ich mit dem Ergebnis äußerst zufrieden bin und die Druckerey auf diesem Wege gern weiterempfehle.

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.