Was sich der Entwickler vom Designer wünscht

webgrafiker-webentwickler

Inspiriert durch die »8 SEO-Wünsche an Webdesigner und Webentwickler« haben Christoph und ich nach typischen Streitpunkten zwischen Grafik und Coding gesucht. Dinge, die Entwicklern klar sind, die aber der Designer nicht versteht – und umgekehrt.

Die Arbeitsfläche Bildschirm

Anders als bei Druckerzeugnissen weiß man im Netz nie, auf welches Medium man seine Information eigentlich bringt. Während der eine mit seinem Smartphone die Zeit in der U-Bahn verkürzt, sitzt der nächste mit seinem Ultrabook gemütlich auf der Couch, wieder ein anderer genießt das Online-Angebot auf einem 27″ Monitor am Schreibtisch.

Durch diese Vielzahl an möglichen Endgeräten gilt es also, schon vorab verschiedene Szenarien zu bedenken:

  • Wie sieht die Seite im Hochformat aus?
  • Was passiert mit meinem Hintergrundbild, wenn der Monitor des Besuchers breiter ist als mein Entwurf (Kann man es kacheln? Fadet es aus?)?
  • Nutzen die Besucher der Seite in der Regel 4:3-Monitore oder doch eher Schirme im Breitbildformat?

All diese Aspekte sind essentiell für den wichtigsten Teil der späteren Seite: den Inhalt. Denn warum kommt der Nutzer in der Regel auf eine Seite? Er sucht Inhalte und auf dieser Suche ist er ungeduldig. Also wird das Titelbild gescannt (nicht betrachtet, ist ja schließlich kein Museum), die Überschrift wird interpretiert und der erste sichtbare Text quergelesen. Ist der Besucher nicht im ersten Moment vom Angebot überzeugt, verlässt er die Seite wieder. Tut er das, erfährt Google davon und merkt sich Folgendes: Seite X liefert zu Suche Y nur unzureichende Ergebnisse. Man rutscht folglich im Ranking ab.

Diesen ersten Bereich, der dem Nutzer am meisten Auskunft liefert, nennt man »Above the fold«. Der Begriff stammt ursprünglich aus dem Zeitungswesen. Zeitungen werden in der Mitte gefaltet (»fold«), auf einen Stapel gepackt und so ausgelegt. Der Käufer sieht nur diesen oberen Teil (»above«) bevor er seine Entscheidung fällt. Entscheiden sich immer wieder Käufer gegen ein bestimmtes Blatt, wird dieses vom Kioskbesitzer, also in unserem Fall Google, erstmal weiter nach hinten gepackt – bis er die Zeitung irgendwann aus seinem Sortiment nimmt.

Deshalb ist es wichtig vorher zu wissen: WEM bietet mein Kunde WAS an und WOMIT wird dieses Angebot aufgerufen. Und erst wenn diese Aspekte wie Monitorauflösung, Seitenverhältnis, notwendige Alternativen, Inhalte etc. geklärt sind, kann es losgehen.

Ein schönes Beispiel ist die Website der Deutschen Bahn. Die Mobilseite (Screenshot) ist optimiert für schnelle Buchung, Fahrpläne und aktuelle Verspätungen. Die Desktop-Variante bietet zusätzlich Aktionen, Angebotsberatung oder allgemeine Infos zum Reisen mit der Bahn.

bahn.de Desktop – mehr Platz für mehr Angebot

bahn.de Desktop – mehr Platz für mehr Angebot

Typografie – oder Text im weitesten Sinne

Ähnlich wie bei der Bildschirm-Thematik wissen wir vorher nicht, welches Betriebssystem und welchen Browser die Besucher benutzen. Jede Plattform (Windows, OS X, Linux etc. pp.) hat andere Standardschriftarten, von den unterschiedlichen Betriebssystem-Versionen ganz zu schweigen. Grundsätzlich kann man sich also erst einmal nur auf diese Schriften verlassen. Welche das sind und ob man selbst überhaupt alle davon installiert hat, kann man bei den Jungs von web-praesenz.ch einsehen.

Ein bisschen Licht ins Font-Dunkel haben in letzter Zeit die Weiterentwicklung von Schriften auf der einen und der Browser-Fähigkeiten auf der anderen Seite gebracht. Angebote wie Adobes Typekit oder Google Web Fonts bieten Unmengen von größtenteils frei verfügbaren Schriften an, die auf Internetseiten eingebunden werden können. Ein entsprechender Schriftschnitt für die Layout-Phase in Photoshop oder InDesign lässt sich dort oft direkt runterladen. Manche Type-Foundries bieten sogar direkt eine Web-Version ihrer Schriften an, die man zusammen mit Print-Fonts lizensieren kann.

Allerdings ist Vorsicht geboten! Nicht jeder Schnitt sieht auch wirklich in allen Größen, allen Browsern und auf allen Systemen gut aus. Manchmal fransen die Buchstaben aus und ein angenehmes Lesen wird hier unmöglich.

Zum Glück haben die meisten Web-Font-Anbieter gleich Schriftbeispiele auf ihren Seiten – hier kann der gewünschte Text direkt im Browser auf seine Tauglichkeit hin überprüft werden.

Typekit – Schriften einbetten leicht gemacht

Typekit – Schriften einbetten leicht gemacht

Nur zur Sicherheit empfiehlt es sich jedoch eine Art Notfallschrift aus dem Pool der Standardschriften zu definieren. Sie sollte dabei der gleichen Klassifizierung entsprechen und in etwa die selbe Versalhöhe und Laufweite aufweisen.

Ein Buchstabe kann auch nicht aus seiner Haut

Ist die Schriftart einmal definiert, heißt es sich auf Schriftgrößen festzulegen. Wie groß sind Überschriften und wie viele verschiedene Gewichtungen habe ich bei Überschriften? Wie groß ist mein Fließtext bei welchem Zeilenabstand? Wie zeichne ich aus? Welche Farbe haben Links, nachdem ich sie besucht habe, während ich mit der Maus drüber fahre oder in dem Moment, in dem ich sie anklicke?

Wichtig ist bei den Schriftgrößen vor allem: Breite und Höhe immer unangetastet bei 100% lassen. Bitte keine Schriften zerren, quetschen oder sonstiges damit anstellen. Nicht nur, dass das ästhetisch mehr als fragwürdig ist, es ist – im Gegensatz zu Print – im Web technisch schlichtweg nicht realisierbar.

Auch Schriftgrößen wie 14,83pt sind einfach unnötig und funktionieren nur auf Papier und nicht digital. Was spricht denn gegen 15pt? Zudem Rendern die Browser und Betriebsysteme die Schriften und ihre Laufweite nicht exakt gleich. Soll also zum Beispiel ein Umbruch vermieden werden, indem die Schriftgröße um 0,176pt heruntergeschraubt und am Kerning rumgedoktert wird: vergesst es, am Ende sieht es eh überall anders aus.

Verlauf? Da lang!

Früher gab es nur eine Lösung für Verläufe wie in Hintergründen oder Buttons: ein Bild musste her. Je weitläufiger der Verlauf, desto größer das Bild. Je größer das Bild, desto länger die Ladezeiten. Je länger … ihr wisst schon.

Heute kann dank CSS viel mit technischen Anweisungen gelöst werden, ohne dass ein Bild zum Einsatz kommen muss. Doch derzeit gibt es hier noch Einschränkungen. Radiale Verläufe sind nur eingeschränkt möglich, das beste Ergebnis liefern lineare Verläufe. Doch auch diese können nicht in jedem beliebigen Winkel angelegt werden. Vertikal, horizontal oder diagonal sind hier die Bereiche, in denen gearbeitet werden kann. Mediaevent zeigt recht schön auf, wie das dann technisch funktioniert.

Slim Shady – die Schattenseite der Box

Schatteneffekte sind eine beliebte Methode, um räumliche Sachverhalte zu simulieren. Ein gedrückter Button, eine obenauf liegende Infobox … die Spielwiese ist da unendlich groß. Doch nicht jeder Photoshop-Schatten kann auch mit Hilfe von CSS im Browser angezeigt werden. Zwar ist hier vom Verlaufs- bis zum Schlagschatten schon viel möglich, sogar abgerundete Ecken können mit so einem Schatten dargestellt werden. Doch sobald es zu komplex wird, ist der Schatten nicht mehr realisierbar. Die Webseite css3.info hat schön verdeutlicht, wie so ein Schatten im Internet funktioniert.

Übrigens: Schatten gibt es auch für Text.

Fehlt was? Her damit

Das waren nur mal ein paar Punkte, die Christoph und mir immer wieder auffallen. Wenn uns weitere begegnen oder aber der ein oder andere Leser noch ein paar Tipps hat, gibt es eine Fortsetzung.

Und sollte sich ein Designer finden, der den Entwicklern da draußen schon lange mal sagen wollte was ihn alles stört, möchte er sich doch bitte melden. Schließlich kommen wir nur dann zum besten Ergebnis, wenn wir miteinander reden. Gern auch bei einem kühlen Bierchen …

Michael Ertel

Kommunikationsplaner und –gestalter, Blogger und mit einer Prise Social Media unterwegs im (mobilen) Netz.

More Posts - Website - Twitter - LinkedIn - Pinterest - Google Plus

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen