Webkrauts: Für mehr Qualität im Web.

Artikel

Mediengerechte Website-Konzeption

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.

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.

Zum Autor

Nils Pooker arbeitete selbstständig im Kunstbereich und ist seit 2001 freier Webdesigner. Als Fachbuchautor hält er Vorträge und schreibt regelmäßig über Kommunikation, Wahrnehmung, Webstandards und Webdesign.

Info:

Mediengerechte Website-Konzeption ist Beitrag Nr. 740

Autor:

Nils Pooker am 22. Dezember 2009 um 07:00

Kategorie:

Adventskalender 2009

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

   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.

   Kommentar von Andi - 22. Dezember 2009 um 13:16

2. 2.
   

   Wie kommst du auf 960px feste Breite? Was machen Menschen die nicht mit maximierten Browserfenster surfen? Man kann zwar 1920×1080px 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

   Kommentar von Chris - 22. Dezember 2009 um 14:08

3. 3.
   

   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

   Kommentar von Jack - 23. Dezember 2009 um 09:23

4. 4.
   

   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.

   Kommentar von Monika - 23. Dezember 2009 um 20:01

5. 5.
   

   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!

   Kommentar von Ansgar Hein - 23. Dezember 2009 um 20:19

Kommentar-Feed für diesen Beitrag

Die Kommentarfunktion ist zur Zeit leider deaktiviert.