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 …

GD Star Rating
loading...
Was sich der Entwickler vom Designer wünscht, 5.0 out of 5 based on 3 ratings

Michael Ertel

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

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

Kommentare (6)

  1. Stefan999

    Google erfährt davon, wie lange ich auf einer Seite bleibe? Nutzen die das echt als Kriterium? Das die das irgendwie ermitteln können, glaube ich ungeprüft.

  2. frankzimper

    @Stefan999 Wenn Du von eienr Google Suchergebnisseite aus auf eine Seite gehst und kurz darauf wieder zur Google-Suche zurückkommst, dann wissen die das schon. Oder wenn Du die Google-Toolbar installiert hast. Oder evtl. auch wenn Google Analytics auf der Seite läuft, oder ….

  3. Simon Zirkunow

    Es gibt noch etwas, was ich nach meinen Erfahrungen aus der Arbeit mit Printdesignern ergänzen würde, wobei ich mich selbst auf beiden Seiten wiederfinde.
     
    Bei Druckprodukten ist das Interface bekannt und relativ einfach zu bedienen: Ich muss mich im Inhaltsverzeichnis zurechtfinden, den gewünschten Artikel aufsuchen und ihn auf der Seite finden können etc.
     
    Im Internet ist das Interface von Internetseite zu Internetseite leicht unterschiedlich und die Interaktionsmöglichkeiten nicht gleich gekennzeichnet. Deswegen ist es als Printgestalter nötig, ab und zu auf seinen Webentwickler zu hören, wenn dieser sagt, eine vom Benutzer bekannte und erwartete Funktion wird über diese Gestaltung nicht ersichtlich – da ist ein Kompromiss zugunsten der einfacheren Benutzung besser.

  4. vanSEO

    @frankzimper  @Stefan999 Wie der Frank schon richtig ausgeführt hat, wissen die das auf alle Fälle, viele interessante Informationen, wie Google das wohl anstellt findest du im Artikel von Eric http://www.seo-book.de/allgemein/ranking-faktor-traffic-so-etwas-wie-ein-seokomm-recap Es handelt sich dabei um eine Zusammenfassung der Keynote von Marcus Tandler auf der diesjährigen SEOkomm in Salzburg. Solltest du dir unbedingt mal reinziehen, das ist wirklich sehr interessant und könnnte noch extrem wichtig werden.Viele GrüßeChristoph

  5. carolawuest

    Ich hoffe, dass diesen Text viele Gestalter lesen …
     
    Hier auch noch eine Anmerkungen aus meinem Agenturalltag und meinen Erfahrungen mit reinen Printdesignern:
     
    Bitte gebt euch keine Mühe, einen Text so zu schreiben, dass er in eurem PS- oder sonstigen Layout gut umbricht. Jeder Browser macht das anders. Und daher auch: bitte keine Absatzzeichen mitten in Sätze oder Trennstriche mitten in Wörter einfügen, weil man meint, man erleichtere der Person, die den Content einpflegen muss, die Arbeit. Ja, alles schon gesehen.
     
    Baut keine Postkartenlayouts! Ja, der Bildschirm hat vier Ränder … trotzdem muss hier die Website nicht zuende sein. Ich mag mein Scrollrad und es ist so einfach zu bedienen! Auf einer Webseite unsinnige Blätter-Pfeile einzubinden, damit ich mich mühsehlig durchklicken muss, um den langen Text, den man schön strukturiert mit Zwischenheadlines setzen könnte, in Häppchen serviert zu bekommen ist nicht nur nervig, sondern auch unübersichtlich. Ganz ehrlich, unter uns: ihr klickt euch da doch auch nicht bis Punkt 15 durch …
     
    Ach ja, und auch noch ein netter Hinweis an die Programmierer:
    Ja, man kann einem Gestalter die html-Ansicht zur Textbearbeitung freischalten – das erleichtert die Contentpflege enorm. Wir machen da schon nichts kaputt …
    Und: wenn ich Icons pixelgenau zeichne und diese mit 30x30px abliefere, diese dann aber auf 28x28px geschrumpft werden, „weil der Programmierer das halt so besser fand“ ist es kein Wunder, wenn diese dann unscharf dargestellt werden …
     
    In diesem Sinne … auf gute Zusammenarbeit!

  6. frank katzer

    @carolawuest trifft es genau!printler-website = quergelegte a4-seite mit miniscrollbereichen, damit der printler ja nicht nicht über das gelernte a4-layout herausgehen muss…

Kommentare sind geschlossen.