Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Mediengerechte Website-Konzeption

Mediengerechte Website-Konzeption

Nachdem Holger Könemann mit seinem Beitrag Anfang Dezember die »Nutzer-zentrierte Konzeption« beschrieben hat, fokussiert Nils Pooker den Blick auf die konzeptionellen Besonderheiten des Mediums Web.

Immer wieder tauchen in Mailinglisten und Foren Fragen zu Problemen auf, die sich bei einer mediengerechten Konzeption von Webseiten vermeiden ließen. Viele dieser Probleme sind jedoch von Webdesignern hausgemacht.

Da ein Projekt-Workflow nur selten ohne Kundenabsprache möglich ist, können wir nicht von Beginn an mit HTML-Prototypen arbeiten, sondern müssen neben der Strukturierung von Seitenbereichen und -inhalten, Verhaltensweisen und Schnittstellen im Web zusätzlich Kundenwünsche und Designvorgaben berücksichtigen. Mit detaillierten Wireframes und ausgearbeiteten Grafiklayouts sind Annäherungen möglich – diese Lösungen ergeben aber keine Website, bestenfalls können sie Einzelaspekte abbilden. Genau in dieser Phase entstehen die häufigsten Fehler.

Perfide ist das Phänomen »Webdesigner’s Law« bekanntlich bei kleinen und wenig lukrativen Projekten: Eine Winzigkeit nicht bedacht, schon hat man hartnäckige Darstellungs- und Verhaltensfehler bei Mikroaufträgen für gute Bekannte oder dem kleinen Handwerker, die den Stundensatz in den Nanobereich fallen lassen. Medienspezifische Konzeption ist also auch bei kleinen Projekten notwendig.

In Kategorien des Webs denken

Ihr könnt Probleme vermeiden, auch ohne immer wieder auf die gleichen Layoutvorlagen zurückzugreifen. Stellt euch bei der Konzeption von Grafiklayouts folgende medienspezifische Fragen, die teilweise auch im Kundengespräch thematisiert werden sollten:

  • Werden unterschiedliche Breiten von Browserfenstern unterstützt?
  • Bleiben bei Seitenskalierung die Seitenbereiche nutzbar und Hintergrundgrafiken sichtbar?
  • Gilt das auch für unterschiedliche Schriftgrößen?
  • Sind die Kontraste für Menschen mit Sehbehinderungen oder mit alten Röhrenmonitoren ausreichend?
  • Werden sowohl lange als auch kurze Texte mit zusätzlichen Inhalten Platz finden?
  • Bietet die Navigation optisch Raum für Veränderungen und Erweiterungen?
  • Kann ich alle formulierten Kundenwünsche angemessen mediengerecht umsetzen?
  • Entspricht das Layout den zu erwartendem Umfang und der Art gelieferter Kundeninhalte?
  • Welcher Kundenwunsch könnte das Layout in der Umsetzungsphase ernsthaft gefährden?
  • Werden die Ladezeiten für große Grafiken angemessen bleiben?
  • Wo könnten CSS Sprites sinnvoll sein?
  • Eignet sich das Farbschema für Pseudoklassen und Standortbestimmung in der Navigation?

Soll z. B. der Menüpunkt »Kontakt« kurz vor dem Launch in »Ihr Weg zu uns« und »Ihre Nachricht« geändert werden, habt ihr bei einer horizontalen Navigation schnell ein Platzproblem. Ein weiterer Klassiker ist die Darstellung und Positionierung von Logo, Beschriftung und Hintergrundgrafiken in die Kopfzeile eines flexiblen/liquiden Layouts.

Praxistipp für Grafiklayouts

Browserfunktionen oder -erweiterungen stehen euch bei der Ausarbeitung eines Grafiklayouts nicht zur Verfügung. Wie sich flexible/liquide Layouts verhalten, könnt ihr zumindest mit zwei verschiedenen Fensterbreiten simulieren.

Flexibles Layout, demonstriert durch zwei Breiten
Flexibles Layout, demonstriert durch zwei Breiten

Legt in eurem Grafikprogramm bei kleiner Standardgröße alle Seitenbereiche und Textboxen in separate Ebenen an. Prüft anschließend in einer neuen Datei mit größeren Abmessungen, wie sich die Verschiebungen auf das Layout auswirken sollen. Damit erhalten auch Entwickler mit geringer Gestaltungsaffinität eine optische Hilfestellung für das Schreiben der CSS-Datei.

Kommentare

Andi
am 22.12.2009 - 13:16

Ich sehe in letzter Zeit nicht den Sinn von flexiblen Layouts. Sie machen nur mehr Arbeit und haben keinen Mehrwert. Alle modernen Browser unterstützen das Skalieren per "hochrechnen" und nicht nur Text vergrößern. Meiner Meinung nach spart man sich das rumgerechne und rumgebastel mit EM Werten und macht eine Seite auf Maximalgröße 960px Breite und hat damit die meisten Benutzer zufriedengestellt. Auch Behinderte. Das behinderte Benutzer unbedingt relative Größen in den Webseiten haben müssen, ist von gestern.

Viel wichtiger ist semantisch korrekter Code, Tastaturhilfen, keine JS Barrieren, alternative Textversion, guter Kontrast oder Kontrastversion, Titles, Descriptions, etc.

Permanenter Link

Chris
am 22.12.2009 - 14:08

Wie kommst du auf 960px feste Breite? Was machen Menschen die nicht mit maximierten Browserfenster surfen? Man kann zwar 1920x1080px Auflösung vom Bildschirm haben, das heißt aber noch nicht, dass das Browserfenster ebensogroß ist.

Ich denke es sollte kein Problem sein etwas "em" zuzuweißen. Wenn man alles von Grund auf damit aufzieht, dann braucht man auch nichtmehr "umrechnen" in px. Wozu?

Sicherlich sind die von dir aufgezählten Argumente wichtig, aber was nützen Sie, wenn der User nur die halbe Seite sehen kann?

Gruß
Chris

Permanenter Link

Jack
am 23.12.2009 - 09:23

Weil 960px derzeit die (für mich) optimale Breite ist und sich beliebig für Spaltenlayouts teilen lässt.
Wer 960px nicht darstellen kann, ist mit 800 x 600 oder weniger unterwegs und wird im Internet sowieso nur die Hälfte sehen. Laut den Statistiken mehrerer meiner Websites gibt es so gut wie keine 3stelligen Displaybreiten mehr. Also wozu Platz verschenken?

Grüße
Jack

Permanenter Link

Monika
am 23.12.2009 - 20:01

komplett flexible Layouts kann ich nicht mehr lesen, zu 90% sind bei diesen Layouts die Textbreiten viel zu lang. Daher habe auch ich mich entschieden derzeit ist bei 980px Schluß.

Nicht alle Logos kann man einfach so in die Länge ziehen, den Mehraufwand zahlt jedoch kaum ein Kunde, weils ihm unwichtig ist.

Für kleinere Auflösungen biet ich da lieber ein .pda Style an als mich stundenlang im CSS zu verbiegen und auf 90% der grafischen Gestaltungselemente zu verzichten.

Permanenter Link

Ansgar Hein
am 23.12.2009 - 20:19

Ich freue mich über den Artikel und amüsiere mich immer wieder über die Diskussionen, die flexible Layoutbreiten auslösen. Wer kategorisch nein sagt, sollte auch konsequent sein und entweder immer alles mit Rundung machen oder aber nur eckig, keinesfalls aber beides. Nach diesem Artikel wird das nächste Layout bestimmt mal wieder flexibel. Oder fix. Oder elastisch. Schön, wenn man die Wahl hat. Danke Nils für die Punktlandung!

Permanenter Link

Die Kommentare sind geschlossen.