Was Designer beim Gestalten für's Web beachten sollten

Jemand macht das Design, jemand anderes die Umsetzung im Web - heute werden viele Webseiten nach diesem Schema erstellt. Damit das aber auch funktioniert und dabei hinterher eine gute Internetseite herauskommt, müssen sich Gestalter und Entwickler abstimmen. Ich habe hier den Versuch gewagt, eine Liste mit den wichtigsten Punkten zu erstellen, die Designer vom Web bezüglich der Umsetzung ihrer Layouts "auf dem Zettel" haben sollten. Kommentare und Verbesserungsvorschläge sind willkommen!

1. Feste oder flexible Breite?

Viele Webseiten beschränken den eigentlichen Inhalt auf eine Breite von ca. 1000 px (rot markiert).

Ist der Bereich einer Seite in dem Inhalte dargestellt werden in der Breite beschränkt? Wenn ja, sind derzeit etwa 1000px Breite üblich, so dass die Seite auch auf kleineren Monitoren mit 1024x768 Pixel ohne horizontales Scrollen komplett dargestellt werden kann.

Moderner und barrierefreier ist meiner Meinung nach aber ein flexibles Layout, bei dem sich die Breite einer Webseite an die Breite des Monitors anpasst. Bestes Beispiel ist hier die Artikelansicht bei wikipedia.de. Auch auf größeren Monitoren wird die volle Breite ausgenutzt. Es sollten aber für Texte auch Beschränkungswerte in der Breite gesetzt werden, da es sonst zu endlos langen Textzeilen kommen kann. Und auch eine Minmalgröße anzugeben ist nicht verkehrt, da es sonst ebenfalls zu unschönen Ergebnissen kommen kann.

Man lese zum Medium "Bildschirm" auch den Artikel auf Marc Hinses Blog.

Wikipedia nutzt die volle BildschirmbreiteGrundsätzlich ist es auf jeden Fall sinnvoll, das Design dem Web-Menschen, der die Umsetzung macht, als Photoshop-Datei vorzulegen, damit er sich Grafiken und gegebenenfalls Bilder hieraus fürs Web abspeichern kann. Oder zumindest sollten JPGs oder andere Pixel-Bilddaten im Verhältnis 1:1 vorliegen, damit bei Größen und Größenverhältnissen von Elementen keine Missverständnisse enstehen.

2. Funktionen

Welche Funktionen soll die Seite beinhalten? Was soll der Nutzer damit anstellen können? Welche Informationen soll er zur Verfügung gestellt bekommen?

Beispiele für besondere Inhalte: Suchfunktion, Login-Bereich, Downloadfunktionen, Animationen, Videos, Lightboxen, Formular, Galerie, Shop, Newsfunktionen, Twitter-Feed, Schriftvergrößerungs-Funktion, Google Maps Einbindung, Mp3-Player, Emailadressen, Bild-Überblendungen im Header, Facebookbutton, etc.

Entscheidungen über die Seiteninhalte sollten im Idealfall immer schon vor Beginn der technischen Umsetzung getroffen werden, da nachträgliche "Umbauarbeiten" oft einen entsprechend größeren Aufwand bedeuten können.

3. Unterschiedliche Unterseiten-Layouts

Die Joeys-Seite (überlebenswichtig für jeden Webdesigner) besitzt auf ihren Unterseiten mehrere verschiedene Element-Anordnungen.

Natürlich sollte eine Webseite ein einheitliches Coroporate Design besitzen und die wichtigsten Elemente (Logo, Menü, etc.) immer an der selben Stelle stehen, aber je nach gebotenem Inhalt ist es oft nötig, mehrere verschiedene "Unterlayouts" zu gestalten, die den darauf dargestellten Inahlten gerecht werden.

4. Wo sind welche Elemente ausgerichtet?

Das 'Abbinder-Logo' ist hier z.B. immer am unteren Browserrand ausgerichtet.

Einzelne Elemente, Abschnitte, etc. einer Webseite können grundsätzlich relativ zu anderen Elementen (z.B. dem Browserfenster) ausgerichtet werden. So ist es z.B. möglich die Fußleiste immer am unteren Bildschirmrand anzuzeigen (im Gegensatz zu: nach dem Ende des Contents). Das ist an einem in Photoshop gestalteten statischen Layout oft nicht zu erkennen und sollte deshalb genau abgesprochen werden.

5. Was tun bei großem Inhalt?

Was, wenn mehr Inhalt auf die Seite soll, als auf einen Bildschirm passt? Meine klare Empfehlung: normaler Scrollbalken am Browserrand.

Viele Layouts sind mit einer idealen Länge an Blindtext gefüllt. Was aber passiert in der Realität, wenn der Inhalt länger ist, als im Layout vorgesehen? Soll ein Scrollbalken innerhalb einer Box auf einer Seite erscheinen? Soll per nummerierter Seiten "geblättert" werden? Beides sind in der Regel nicht allzu barrierefreie Lösungen, deswegen gilt in der Regel: Es sollte ein Scrollbalken am Fensterrand des Browsers erscheinen. Was natürlich erfordert, dass das Design der Seite jederzeit eine vertikale "Verlängerung" erlaubt. 
Ein weiterer lustiger Beitrag (jedoch mit ernstem Hintergedanken) von Marc Hinse zum Gerücht: Niemand scrollt auf Webseiten

6. Barrierefreiheit

Große Schriften und klare Aufteilungen erleichtern jedem Netz-Surfer das Nutzen einer Seite - hier schön gelöst auf http://mite.yo.lk

Kleine Schriften sehen oft schick aus. Sind aber für den Nutzer in der Regel nur eine Barriere. Das ist nur eines von vielen Elementen, die den Bedienkomfort einer Seite bestimmen. Je nach Zielgruppe muss man besonders darauf achten, dass die Webseite auch für Menschen, die nicht jeden Tag mit dem Medium Internet zu tun haben, einfach zu verstehen ist. Und im Idealfall alle Funktionen und Informationsschemata selbsterklärend sind.

7. Mobil funktionsfähig?

Immer größere Monitore - und im Gegensatz dazu vermehrte Internet-Nutzung über mobile Endgeräte...

Immer wichtiger wird auch die Tatsache, dass viele Menschen Webseiten über mobile Endgeräte wie Smartphones oder Tablet-PCs besuchen. Da die Bildschirme dieser Geräte in der Regel viel kleiner sind als jene herkömmlicher Rechner, gilt es auch hier besonderes Augenmerk auf die Darstellung von Webseiten zu legen.
Man kann dabei entweder darauf achten, möglichst keine Flashelemente zu verwenden, da diese auf Apple-Produkten nicht funktionieren, und die Seite in verkleinerter Form nutzbar zu machen (z.B. Buttons eher größer als kleiner, damit man mit seinen Wurstfingern nicht versehentlich auf einen anderen Button tippt).


Amazon auf dem MobiltelefonOder aber man gestaltet für die Seite eine zweite, "mobile" Version. Große Seiten (z.B. Facebook oder Amazon) zeigen beim Ansteuern mit dem Mobilgerät solch eine Seite, die in der Regel im Funktionsumfang beschränkt ist, aber für mobile Geräte deutlich mehr Bedienkomfort bietet.

8. Schriften

Google und Fontsquirrel bieten eine interessante Auswahl an Webfonts.

Die Schriftauswahl im Web ist (noch) relativ beschränkt. Zumindest wenn man nicht extra Lizenzgebühren für eine Schrift zahlen möchte.
Bis vor kurzem kamen eigentlich nur Standard-Systemschriften für Webseiten in Frage, da vom Browser nur die Schriften genutzt werden konnten, die auf dem Rechner des Webseiten-Besuchers installiert waren. Bei den vielen unterschiedlichen Systemkonfigurationen, die existieren, waren dies nur einige wenige, die man als relativ sicher vorhandene Schriften voraussetzen konnte. Die Klassiker sind bei den serifenlosen z.B. Arial und Verdana, bei den Serifschriften z.B. Times New Roman oder Georgia. Für eine ungefähre Vorstellung davon, was für Schriften noch in Frage kommen, ist diese Seite auf codestyle.org interessant, auf der Systemschriften und deren durchschnittliche Verfügbarkeit auf Rechnern aufgeführt werden.
Seit einiger Zeit ist es aber möglich, eine Vielzahl weiterer Schriften über die das sog. "@font-face" zu verwenden. Hierbei wird auf Schriften zugegriffen, die auf einem Webserver liegen. Besonders einfach und zuverlässig sind solche Schriften zu integrieren, wenn sie im Google Font Directory vorhanden sind. Eine weitere reichhaltige Ressource für solche Schriften ist die @font-face-Sektion bei Fontsquirrel.

Achtung: manchmal (je nach Tempo des verarbeitenden Servers) kann es sein, dass beim Laden einer Seite Texte zunächst kurz in einer Systemschrift bzw. in der im Quellcode angegebenen Alternativschrift angezeigt werden, bevor die font-face-Schrift geladen ist und dann erst "umspringen".
Von der Einbindung von Schriften als Grafiken ist aus zweierlei Gründen abzuraten: Erstens wird damit die Barrierefreiheit negativ beeinflusst, zweitens wird die Flexibilität der Seitenverwaltung dadurch ungemein eingeschränkt. Was z.B., wenn ein neuer Menüpunkt hinzukommt, die Schrift "doch noch ein bisschen größer" werden soll, oder der Zeilenbastand verändert werden soll? Dann darf jemand alle entsprechenden Schriftzüge noch einmal neu in Photoshop setzen und sie einzeln für Web abspeichern. In CSS sind solche "Operationen" oft durch das Ändern eines einzigen Wertes global für die ganze Seite durchführbar.

9. Farben

Farben sind zwar ein nicht ganz so kritisches Thema wie Schriften, aber auch hier gilt es zu beachten: Farben sehen auf unterschiedlichen Ausgabegeräten nie gleich aus. Natürlich bleibt grün in der Regel schon noch grün. Aber was feine Nuancen betrifft, sollte man sich nie ausschließlich auf das Zusammenspiel Auge plus eigener Bildschirm verlassen. Da kann aus einem Pastellbraun schon mal ein Pastellgrau werden... Entweder man hat einen festen Farbwert (wie z.B. die festgelegte Corporate-Farbe eines Unternehmens), oder man testet die Ausgabe besser auf unterschiedlichen Monitoren.

10. Menüebenen-Darstellung

Links: Zweite Menüebene als Dropdown / Rechts: Beim Hotel Jacob in Hamburg wird die dritte Navigationsebene durch eine Bildernavigation dargestellt.

Wird in einem statischen Photoshop-Layout manchmal nicht gleich bedacht: falls das Menü mehr als eine Ebene hat - wie werden die Untermenü-Ebenen dargestellt? Und sollen diese erst erscheinen, wenn man sich auf der Seite eines entsprechenden Hauptpunkts befindet oder sollen Untermenüs bereits beim Überfahren des entsprechenden Hauptmenüpunkts erscheinen?

11. Hover-Status

Hover-Status

Womit wir auch schon beim nächsten Punkt wären: der Hoverstatus. Was soll passieren, wenn bestimmte Elemente (in der Regel vor allem Links) mit der Maus überfahren oder per Tab-Taste angewählt werden? Für Text-Links ist es üblich, den Hoverstatus optisch anzuzeigen, beispielsweise durch eine Farbänderung, eine Hintergrundfarbe oder sonstige temporäre Änderungen der Textformatierung.

12. SEO

Eine wichtige Frage, die schon im Vorfeld geklärt werden sollte, eigentlich schon direkt von Seiten des Kunden: Inwieweit ist für die Seite eine Optimierung für Suchmaschinen gewünscht? Denn schon beim Schreiben des Quellcodes und bei der Entscheidung zwischen verschiedenen Techniken kann diese Frage ausschlaggebend sein. Und natürlich auch für die Art, wie die Textinhalte einer Seite geschrieben werden.

13. Sitemap sollte vorher feststehen

Zumindest in ihren groben Zügen sollte die Seitenstruktur einer Webpräsenz schon vor Beginn des Code-Schreibens feststehen. Vor allem im Bezug auf Menüs, die oft nur einen bestimmten Raum auf der Seite einnehmen dürfen, ist eine nachträgliche Erweiterung der Seitenstruktur oft recht aufwändig.

14. Seitentitel, Beschreibungstexte

Der Beschreibungstext wird in manchen Fällen direkt von Google in den Suchergebnissen verwendet, ist in jedem Fall wichtig für SEO.

Was nicht immer auf den ersten Blick bei einer Webseite sichtbar ist (oft nämlich schon früher - bei der Anzeige von Ergebnissen einer Suchmaschine): der Seitentitel und eine kurze Seitenbeschreibung. Und zwar für jede Unterseite - im besten Fall je individuelle Titel und Texte. Bei Google und Co. werden in den Suchergebnissen in der Regel der Seitentitel und darunter oftmals der Seitenbeschreibungstext angezeigt, deswegen ist beides sehr entscheidend dafür, einem potenziellen Besucher schon in den Suchmaschinenergebnissen ein möglichst präzises Bild davon zu geben, was ihn auf der Seite erwartet.

15. Favicon

Das Favicon gehört inzwischen einfach dazu...

Wird oft vom Gestalter vergessen, ist aber ein wichtiges Designelement geworden: das Favicon. Diese 16x16 Pixel große Grafik ist in den Browsern in der Regel entweder in der Adressleiste zu sehen, oder bei mehreren geöffneten Tabs direkt als erstes im Tab, vor dem Seitentitel. Ein Favicon kann auch teilweise transparent sein, allerdings nur zu 100% (oder eben 0%), es sind also keine halbdurchsichtigen Pixel möglich, genau wie bei den Formaten GIF oder PNG-8.

16. Eingabefelder, Buttons

Ein ungestaltetes Formular und ein Beispiel mit schön gestylten Eingabefeldern.

Auch Eingabefelder können mit HTML und CSS gestaltet werden, genau wie die Schriften, welche die Felder beschreiben. Wenn ein Formular auf der Seite vorkommt, sollte dessen Aussehen (wenn es nicht exakt das Browser-Standarddesign sein soll) bereits vom Designer bei der Gestaltung berücksichtigt werden.

Inhalt

  1. Feste oder flexible Breite?
  2. Funktionen
  3. Unterschiedliche Unterseiten-Layouts
  4. Wo sind welche Elemente ausgerichtet?
  5. Was tun bei großem Inhalt?
  6. Barrierefreiheit
  7. Mobil funktionsfähig?
  8. Schriften
  9. Farben
  10. Menüebenen-Darstellung
  11. Hover-Status
  12. SEO
  13. Sitemap sollte vorher feststehen
  14. Seitentitel, Beschreibungstexte
  15. Favicon
  16. Eingabefelder, Buttons