Bücher oder Webseiten zu XHTML Layouts

[Michael]

Moin!

Ich muss demnächst eine Menge Layouts (Templates) in XHTML verfassen, die möglichst in allen modernen Browsern laufen. Kennt jemand ein gutes Buch oder eine Webseite, die sich mit dem Layouten befasst?

Vielen Dank und Grüße,
Michael

[Stefan]

Moin!

Eine Website zu XML kennst du ja bereits - SelfHTML. Zum Thema richtiges(!) design kann ich dir nur das Buch "Designing Web Usability" (deutsch) von Usability-Guru Jakob Nielsen empfehlen. Dieser sagt, was man machen darf und was nicht. Usability heißt zu deutsch so viel wie "gebräuchlich".

Tschau

[Thomas Luethi]

Hallo,

Usability heißt zu deutsch so viel wie "gebräuchlich".

Naja, nicht ganz;-) Ich wuerde es eher mit
Benutzerfreundlichkeit, Benutzbarkeit
oder so uebersetzen.

Du meinst vielleicht das Adjektiv "usable", brauchbar oder so.

Die Buecher von Jakob Nielsen kann ich auch sehr empfehlen.

Er geht allerdings nicht sehr in die Tiefe, was
die Technische Umsetzung (Quelltext) angeht.

@Michael: Was meinst Du mit "XHTML Layouts"?
XHTML ist ja nur minimal von HTML verschieden.
Und fuer "Layout" (Gestaltung, z.B. von Schriftgroessen,
Farben, Rahmen) sollte man nicht (X)HTML verwenden,
sondern CSS.

"Layouts", insbesondere die Positionierung
von Seitenelementen, kann man z.B. mit
Layout-Tabellen machen ("boese", entspricht
nicht der "reinen Lehre", kann unter Umstaenden
fuer Behinderte einige Nachteile haben, dafuer
ist es sehr zuverlaessig, was das Aussehen in
den allermeisten Browsern angeht) oder aber
mit CSS ("lieb", "modern", heikel, ...)

Die ganzen Diskussionen, was besser sei,
findest Du hier im </archiv/>. ;-)

Beides ist sowohl mit HTML als auch mit XHTML moeglich.

Suchst Du also "CSS-Layouts"?
Ein paar coole Sites sind hier gelistet:
http://aktuell.de.selfhtml.org/links/css.htm#einzelbeitraege

Gruesse,

Thomas

[molily]

"Layouts", [...] kann man z.B. mit Layout-Tabellen machen [...] kann unter Umstaenden fuer Behinderte einige Nachteile haben

Wie oft müssen wir durchkauen, dass CSS-Layouts genauso unsachgemäß gebraucht werden können und daher - - »unter Umständen« gleichermaßen Barrieren aufbauen können und dass durch den Verzicht auf Tabellenlayout noch längst keine zugängliche Seite entsteht, ja es nicht einmal der Giant Leap in Richtung Barrierefreiheit ist, wie es gern dargestellt wird?

[Thomas Luethi]

Hallo,

"Layouts", [...] kann man z.B. mit Layout-Tabellen machen [...] kann unter Umstaenden fuer Behinderte einige Nachteile haben

Wie oft müssen wir durchkauen, dass CSS-Layouts genauso unsachgemäß gebraucht werden können und daher - - »unter Umständen« gleichermaßen Barrieren aufbauen können und dass durch den Verzicht auf Tabellenlayout noch längst keine zugängliche Seite entsteht, ja es nicht einmal der Giant Leap in Richtung Barrierefreiheit ist, wie es gern dargestellt wird?

Wo, bitte, habe ich das behauptet?

Beachte insbesondere das Woertchen "heikel", welches ich
im Zusammenhang mit CSS-Layouts gebraucht habe ;-)

Tatsache ist, dass die WCAG 1.0 deutlich von Layout-Tabellen abraten
http://www.w3.org/TR/WAI-WEBCONTENT/#gl-table-markup
aber das weisst Du ja laengst...

Und nein, ich hatte ueberhaupt nicht vor, hier
die Diskussion um CSS- vs. Tabellenlayout und
aehnliches wiederzukaeuen, deshalb auch mein
Hinweis auf's Archiv.

Gruesse,

Thomas

[molily]

"Layouts", [...] kann man z.B. mit Layout-Tabellen machen [...] kann unter Umstaenden fuer Behinderte einige Nachteile haben

Wie oft müssen wir durchkauen, dass CSS-Layouts genauso unsachgemäß gebraucht werden können und daher - - »unter Umständen« gleichermaßen Barrieren aufbauen können und dass durch den Verzicht auf Tabellenlayout noch längst keine zugängliche Seite entsteht, ja es nicht einmal der Giant Leap in Richtung Barrierefreiheit ist, wie es gern dargestellt wird?

Wo, bitte, habe ich das behauptet?

Das mit dem »Giant Leap« hast du nicht behauptet, das war auch verallgemeinert. Allerdings war dein einseitiger Hinweis auf Zugänglichkeitsprobleme bei Tabellenlayouts irreführend und die Darstellung unvollständig, wie gesagt.

Beachte insbesondere das Woertchen "heikel", welches ich im Zusammenhang mit CSS-Layouts gebraucht habe ;-)

Ich sehe darin nicht, dass die unpassende Kritik an Tabellenlayout zurechtgerückt wird und dass dies aussagt, dass CSS-Layout ebenso »unter Umständen« Barrieren aufbaut.

Tatsache ist, dass die WCAG 1.0 deutlich von Layout-Tabellen abraten http://www.w3.org/TR/WAI-WEBCONTENT/#gl-table-markup aber das weisst Du ja laengst...

Was soll dieser Hinweis? Dieses Abraten hängt bis auf einen konkreten Punkt in der Luft. Bitte greife nicht einen Satz heraus, ohne den Gesamtzusammenhang zu würdigen. Der Grund dieses Abratens kann höchstens aus dem Sachverhalt hergeleitet werden, dass einige Clients nebeneinanderstehenden Text Textzeile für Textzeile anstatt Tabellenzelle für Tabellenzelle vorlesen. Dies gilt aber für alle Tabellen (»tables for any use«). Vermeidbare Layouttabellen sollten dementsprechend vermieden werden und nicht vermeidbaren Datentabellen sollte gemäß Richtlinie 10.3 eine zusätzliche linearisierte Version mitgegeben werden. Wie ich in </archiv/2003/6/50186/#m275297> und </archiv/2003/10/60063/#m342121> bereits geschildert hatte, spielen diese Clients heutzutage nahezu keine Rolle mehr und das »until user agents ..« der Richtlinie 10.3 ist m.M.n. erfüllt. Von diesem Punkt abgesehen kann ein Tabellenlayout unter Berücksichtigung der entsprechenden Richtlinien auf höchster Stufe (AAA) konform mit den WCAG sein, worauf willst du also hinaus?

Und nein, ich hatte ueberhaupt nicht vor, hier die Diskussion um CSS- vs. Tabellenlayout und aehnliches wiederzukaeuen, deshalb auch mein Hinweis auf's Archiv.

Offenbar haben dich diese Diskussionen unbeeindruckt gelassen, ansonsten kann ich mir nicht erklären, wieso du in solchen Mustern argumentierst.

Welche Umstände meintest du eigentlich mit »unter Umständen«?

[Cyx23]

Hallo,

Ich sehe darin nicht, dass die unpassende Kritik an Tabellenlayout zurechtgerückt wird und dass dies aussagt, dass CSS-Layout ebenso »unter Umständen« Barrieren aufbaut.

hast du dazu eigentlich noch weiterführende Informationen?

Was soll dieser Hinweis? Dieses Abraten hängt bis auf einen konkreten Punkt in der Luft. Bitte greife nicht einen Satz heraus, ohne den Gesamtzusammenhang zu würdigen. Der Grund dieses Abratens kann höchstens aus dem Sachverhalt hergeleitet werden, dass einige Clients nebeneinanderstehenden Text Textzeile für Textzeile anstatt Tabellenzelle für Tabellenzelle vorlesen. Dies gilt aber für alle Tabellen (»tables for any use«). Vermeidbare Layouttabellen sollten dementsprechend vermieden werden und nicht vermeidbaren Datentabellen sollte gemäß Richtlinie 10.3 eine zusätzliche linearisierte Version mitgegeben werden. Wie ich in </archiv/2003/6/50186/#m275297> und </archiv/2003/10/60063/#m342121> bereits geschildert hatte, spielen diese Clients heutzutage nahezu keine Rolle mehr und das »until user agents ..« der Richtlinie 10.3 ist m.M.n. erfüllt. Von diesem Punkt abgesehen kann ein Tabellenlayout unter Berücksichtigung der entsprechenden Richtlinien auf höchster Stufe (AAA) konform mit den WCAG sein ..

Abgesehen davon wann nun eine Layouttabelle tatsächlich vom Screenreader ungünstig vorgelesen wird -bei einer Layouttabelle mit drei Spalten kann er ja nur eine Spalte nach der anderen abarbeiten, was das gleiche Ergebnis wie drei Divs hätte?- findet sich die Geschichte mit den zu vermeideneden Tabellen z.B. als Empfehlung des W3C und ist dazu natürlich auch als Schlagwort Marketing-geeignet. Als verkürzte Werbeaussage würde ich derzeit die Vermengung von 'tableless' und 'barrierefrei' erstmal trotz möglicher Bedenken noch akzeptieren, zumindest solange nicht der Begriff "Barrierefreiheit" selbst in Frage gestellt würde.

In http://www.w3.org/2002/03/csslayout-howto findet sich:
" Besides the fact that it [bezieht sich wohl auf ' apparition of tables in HTML .. used for layout purpose'] breaks the meaning of HTML, it doesn't help either in various cases that we could summarize by the difficulty to parse or render a table in some context (disabilities, view port restrictions, ...)."

Grüsse

Cyx23

[Orlando]

Hi Cyx23,

Als verkürzte Werbeaussage würde ich derzeit die Vermengung von 'tableless' und 'barrierefrei' erstmal trotz möglicher Bedenken noch akzeptieren, zumindest solange nicht der Begriff "Barrierefreiheit" selbst in Frage gestellt würde.

dass ich das noch einmal erleben darf... ich bin deiner Meinung.

Grüße,
 Roland

[molily]

Ich sehe darin nicht, dass die unpassende Kritik an Tabellenlayout zurechtgerückt wird und dass dies aussagt, dass CSS-Layout ebenso »unter Umständen« Barrieren aufbaut.

hast du dazu eigentlich noch weiterführende Informationen?

Im Bezug auf was? Die Fälle, in denen CSS-Layout ebenfalls Barrieren aufbaut?

Abgesehen davon wann nun eine Layouttabelle tatsächlich vom Screenreader ungünstig vorgelesen wird -bei einer Layouttabelle mit drei Spalten kann er ja nur eine Spalte nach der anderen abarbeiten, was das gleiche Ergebnis wie drei Divs hätte?- findet sich die Geschichte mit den zu vermeideneden Tabellen z.B. als Empfehlung des W3C und ist dazu natürlich auch als Schlagwort Marketing-geeignet. Als verkürzte Werbeaussage würde ich derzeit die Vermengung von 'tableless' und 'barrierefrei' erstmal trotz möglicher Bedenken noch akzeptieren

Ich setze mich für zugänglichere Seiten ein und möchte daher die Zusammenhänge, die man sich zu Nutze machen kann, wenn man eine barrierefreie Seite schreiben möchte, klar dargestellt wissen. Der Verzicht auf Tabellenlayout ist ein solcher Zusammenhang, aber nicht in die Weise, wie es oft dargestellt wird. Allerdings hast du recht, dass die Zusammenhänge nicht isoliert betrachtet werden können und dass CSS-Layout im Kontext einer ansonsten im Hinblick auf Zugänglichkeit und Benutzerfreundlichkeit gestaltete Seite besondere Vorzüge entfaltet.

Da es mir darum geht, diese Zusammenhänge durch Erklärung zu vermitteln, und darum geht es auch in Forenpostings, erscheint es mir nicht sinnvoll, CSS-Design und Barrierefreiheit miteinander in der Weise zu verquicken, dass CSS-Design der Schlüssel zu Barrierefreiheit ist. Es ist möglich, diese Schlagworte zu einem Gesamtkonzept zu verbinden, wie etwa »Seiten, die mit CSS gelayoutet sind, die standardkonform sind, die interoperabel/kompatibel, flexibel und skalierbar sind, die Benutzbarkeit und Zugänglichkeit ermöglichen, dessen Code straight, semantisch, transparent, effizient, wartbar und ausbaubar« usw., nur ist das keine Analyse der Zusammenhänge. Letztlich muss ich zum Glück auch kein derartiges Marketing betreiben und sehe das Forum auch nicht als Ort an, an dem dies angebracht ist, und muss Sachverhalte nicht verkürzt und oberflächlich wiedergeben um zu überreden anstatt zu überzeugen.

zumindest solange nicht der Begriff "Barrierefreiheit" selbst in Frage gestellt würde.

In http://www.w3.org/2002/03/csslayout-howto findet sich:
" Besides the fact that it [bezieht sich wohl auf ' apparition of tables in HTML .. used for layout purpose'] breaks the meaning of HTML, it doesn't help either in various cases that we could summarize by the difficulty to parse or render a table in some context (disabilities, view port restrictions, ...)."

Ich verstehe nicht, was das aussagen soll. »Disabilities« ist einmal wieder herrlich unkonkret und »view port restrictions« ist wie schon in der Vergangenheit besprochen ein Punkt, der auf konventionelle Spaltenlayouts mit festen margin-left/margin-right und Freiräumen unter den Spalteninhalten ebenso zutrifft. Auf der W3C-Startseite wusste man sich vor überlagerndem Text bei schmalen Viewports auch nur durch overflow:hidden zu retten, das spricht m.M.n. Bände, wie es wirklich um die Flexibilität solcher Layouts bestellt ist. Beim oben genannten Howto sind andauernd 20em durch die margins unbenutzt und stehen dem Hauptinhalt nicht zur Verfügung. Das ist alles, aber nicht fluide/flexibel/skalierbar.

[emu]

Hallo!

"Layouts", insbesondere die Positionierung
von Seitenelementen»» mit CSS ("lieb", "modern", heikel, ...)

... bigott.

[pref:t=67816&m=388224]

emu

[Armin G.]

Tach auch,

Zum Thema richtiges(!) design kann ich dir nur das Buch "Designing Web Usability" (deutsch) von Usability-Guru Jakob Nielsen empfehlen. Dieser sagt, was man machen darf und was nicht.

Wobei der gute Mann auch nicht unumstritten ist. Und zum technischen Hintergrund sagt er praktisch gar nichts.

Da wuerde ich eher zu Jeffrey Zeldman's "Designing with Web Standards" greifen, ob's den schon in Deutsch gibt weiss ich nicht (ist erst vor 3-4 Monaten im Original erschienen)

Ausserdem noch "Don't make me think" von Steve Krug. Das Buch gibt's schon laenger, kann sein dass es davon eine Deutsche Version gibt.

Usability heißt zu deutsch so viel wie "gebräuchlich".

Aeh, nein. Eher soviel wie Benutzerfreundlichkeit oder (wenn's so ein Wort geben sollte) Gebrauchsfreundlichkeit.

"Gebraeuchlich" bedeutet fuer mich eher soviel dass etwas allgemein benutzt wird. Und das heisst auf Englisch "common".

Gruss,
Armin

[Cyx23]

Hallo Armin,

Usability heißt zu deutsch so viel wie "gebräuchlich".

Aeh, nein. Eher soviel wie Benutzerfreundlichkeit oder (wenn's so ein Wort geben sollte) Gebrauchsfreundlichkeit.

"Ergonomie" ist noch verfügbar.

Grüsse

Cyx23

[Serjosha Brodesser]

Das beste Buch über gutes Webdesign ist meiner Ansicht nach "Missing Links. Über gutes Webdesign" von Thomas Wirth, einem Kommunikationspsychologen. Das Buch befasst sich ebenfalls mit der Benutzerfreundlichkeit von Webseiten, enthält dazu viele (abschreckende) Beispiele, ist wissenschaftlich fundiert und wunderbar ironisch geschrieben.

Es gibt auch eine Website zum Thema: http://www.kommdesign.de

Gerade fällt mir ein, dass der Autor auch hier auf SelfHTML einen Artikel verfasst hat. Kannst ja mal hinsurfen.

Grüße aus Berlin,
Serjosha

[Holger Michels]

Hallo.
Ich schließe mich der Frage an und konkretisiere sie: auch ich suche aktuell gutes Material zu Themen wie: XHTML, CSS 2, Standard-konformes Design. Dabei interessieren mich weniger die bereits genannten (Nielsen, Zeldman & Co), sondern gute Ressourcen für die technische Umsetzung (auf deutsch). Hat da jemand gute Tipps.

Dank und Gruß,
Holger

[erika]

Hallo Holger,

Nach meinem Überblick gibt es auf dem deutschen Büchermarkt zur Zeit folgende aktuelle Bücher speziell zu CSS:
1. Shafer/Yank: Cascading Stylesheets. dpunkt.verlag
Anspruchsvolle Websites mit CSS gestalten.
Grundlagen, Designtechniken, Referenz.
http://www.dpunkt.de/buch/css.html
Ein Art Tutorial mit viel Hintergrundwissen.
Gut für Einsteiger geeignet.
2. Kai Laborenz: CSS-Praxis. 2. Auflage. Galileo Computing
Mit Browserreferenzkarte. Grundlagen und Referenz. Browserübergreifende Lösungen. Techniken und Tricks aus der Praxis.
Gut und leichtverständlich geschrieben. CD mit viel Inhalt.
http://www.css-praxis.de
3. Ulrike Häßler: Cascading Stylesheets. Stil mit <Stil>. Springerverlag.
Das Buch wendet sich vor allem an Designer und Grafiker, die bereits Seiten entworfen haben.
Das Buch ist sehr originell und geistreich geschrieben. Ich lese es zur Zeit mit Vergnügen.
http://www.mediaevent.de/

Jedes dieser Bücher hat seine Vorzüge (und auch seine Mängel). Anregungen erhält man in in jedem der drei Bücher. Ansonsten: Schlag nach bei SELFHTML und in den Dokumenten des W3C (letztere zu lesen ist allerdings kein reines Vergnügen, sondern harte Arbeit).

Grüsse aus Neubrandenburg
erika

[Holger Michels]

Hallo Erika,

herzlichen Dank für die Tipps. Nachdem der Rest des Threads sich wieder mal vom eigentlichen Thema verabschiedet hat, nun doch noch jemand, der, sorry die, auf die eigentliche Frage antwortet.

Alle drei Bücher machen einen guten Eindruck. Zudem ist die Webseite zum Buch von Ulrike Häßler (www.mediaevent.de) wirklich spannend und eine echte Fundgrube.

Dank und Gruß, Holger