gefragt! Wie Seiten- (& Schriftgröße) festlegen?

[Gunther]

Guten Morgen allerseits!

Bei der Formulierung und thematischen Zuordnung meines Beitrags habe ich mich schon schwer getan, aber ich hoffe, dass mein Anliegen trotzdem verständlich wird. :-)

Und zwar geht es mir um eure ganz persönliche Meinung (Vorliebe) zu diesem Thema.

Annahme: Eine Seite hat (für das Screenlayout) ein 2-Spalten Layout mit Header und Footer. Die Bereiche werden von einem Wrapper umschlossen.

Wrapper
  |-------------------------------------|
  |               Header                |
  |-------------------------------------|
  |                            |        |
  |                            |        |
  |    linke Spalte            | rechte |
  |                            | Spalte |
  |                            |        |
  |                            |        |
  |-------------------------------------|
  |               Footer                |
  |-------------------------------------|

Jetzt geht es um die Größenfestlegung (genaugenommen die Breitenangaben). Nachfolgend habe ich mal alle Möglichkeiten (die mir eingefallen sind) aufgezählt (welche vergessen?):

1. alle Angaben in Pixeln (oder Points - zumindest theoretisch)
 2. alle Angaben in Prozent
 3. alle Angaben in EMs
 4. Kombination aus verschiedenen Einheiten

Für die Schriftgröße gelten die Analog die Methoden 1-3 und zusätzlich gibt es noch die Variante (5.) der Keywords.

Damit das Ganze jetzt nicht zu einfach wird, sollen bei der Überlegung auch noch die folgenden Punkte Beachtung finden:

A) Die linke Spalte (Hauptinhaltsspalte) soll aus Gründen der Usability eine Zeilenlänge von ca. 32em haben
 B) Der Wrapper sollte im 'Ausgangs-/ Urzustand' (default) eine Breite von 750px haben
 C) Die in den jeweiligen Browsern vorhandenen Möglichkeiten zur Schriftgrad/ -größen Einstellung sollen voll erhalten bleiben
 D) horizontale Scrollbars sollen weitestgehend vermieden werden

Meine bisherigen Schlussfolgerungen:
Um die Vorgaben A) B) und C) zu erfüllen kommt nur Methode 3 in Frage.
Methode 1 ist wahrscheinlich des Designers liebstes Kind, erfüllt aber Vorgabe A) nicht.
Methode 2 erfüllt Vorgabe D)

Bleibt noch Methode 4 (deren Kombinationsmöglichkeiten viel zu zahlreich sind, um sie hier alle aufzuzählen).

Wenn man noch die Verwendung von max-width mit einbezieht (ungeachtet dessen, dass die IEs das nicht verstehen), ergeben sich zusätzliche Möglichkeiten wie: Methode xy erfüllt Vorgabe xyz im Bereich von bis, etc.!

So, ich hoffe, es ist klar geworden, worum es mir geht?
Welche Überlegungen habt ihr angestellt für euer Layout?
Zu welchem Ergebnis seid ihr gekommen?
Welche Variante bevorzugt ihr beim surfen?
Oder andersherum gefragt, was stört euch?
Macht ihr überhaupt Gebrauch von der Möglichkeit, die Schriftgröße zu ändern?

Natürlich könnte man ja auch verschiedene Styles anbieten, zwischen denen der User dann wählen kann.
Welche Varianten würdest du dann deinen Besuchern anbieten?

Es würde mich sehr freuen, wenn hieraus eine 'lebhafte' Diskussion über die sicher zahlreichen Varianten der Layoutgestaltung und Usability Aspekte entstehen würde.

Gruß Gunther

[baumpaul]

Zu den größen,

also ich bevorzuge immer pixel. und der linken spalte würde ich 100 % geben. und der rechten keine breite sonder mit einem spacerbild in pixel geben. so mache ich das immer und es gibt keine probleme.

Guten Morgen allerseits!

Bei der Formulierung und thematischen Zuordnung meines Beitrags habe ich mich schon schwer getan, aber ich hoffe, dass mein Anliegen trotzdem verständlich wird. :-)

Und zwar geht es mir um eure ganz persönliche Meinung (Vorliebe) zu diesem Thema.

Annahme: Eine Seite hat (für das Screenlayout) ein 2-Spalten Layout mit Header und Footer. Die Bereiche werden von einem Wrapper umschlossen.

Wrapper
  |-------------------------------------|
  |               Header                |
  |-------------------------------------|
  |                            |        |
  |                            |        |
  |    linke Spalte            | rechte |
  |                            | Spalte |
  |                            |        |
  |                            |        |
  |-------------------------------------|
  |               Footer                |
  |-------------------------------------|

Jetzt geht es um die Größenfestlegung (genaugenommen die Breitenangaben). Nachfolgend habe ich mal alle Möglichkeiten (die mir eingefallen sind) aufgezählt (welche vergessen?):

1. alle Angaben in Pixeln (oder Points - zumindest theoretisch)
2. alle Angaben in Prozent
3. alle Angaben in EMs
4. Kombination aus verschiedenen Einheiten

[wahsaga]

hi,

also ich bevorzuge immer pixel. und der linken spalte würde ich 100 % geben. und der rechten keine breite sonder mit einem spacerbild in pixel geben.

Das klingt furchtbar.

gruß,
wahsaga

[TomIRL]

hi,

also ich bevorzuge immer pixel. und der linken spalte würde ich 100 % geben. und der rechten keine breite sonder mit einem spacerbild in pixel geben.

Das klingt furchtbar.

Das klingt nicht nur so.
Das ist es....
TomIRL

[Gunnar Bittersmann]

also ich bevorzuge immer pixel.

baumpaul,
Dann bevorzuge ich es, nicht auf deine Seiten zu gehen. Ich hab keine Lust, mir von irgendeinem Webseitenschreiberling vorschreiben zu lassen, wie groß ich gefälligst mein Browserfenster zu machen habe, um in den „Genuss“ des von ihm „erdachten“ Designs zu kommen.

und der linken spalte würde ich 100 % geben.

Das macht dann 0% für die rechte. Sinnvoll?

und der rechten keine breite sonder mit einem spacerbild in pixel geben. so mache ich das immer […]

Diese Pixelschubserei kam vor zehn Jahren auf, als HTML den Gestaltungswünschen der Seitenautoren weit hinterherhing. Es ist ein Jammer, dass einige Schreiberlinge auf diesem Stand stehengeblieben sind.

[…] und es gibt keine probleme.

Du könntest kaum mehr irren.

Würdest du dich mit den Grundlagen von CSS beschäftigen? Das <http://de.selfhtml.org/css/@title@Kapitel CSS> von SELFHTML hift dir dabei.

Live long and prosper,
Gunnar

PS. Und bitte kein TOFU mehr.

[O'Brien]

Hi,

Würdest du dich mit den Grundlagen von CSS beschäftigen? Das <http://de.selfhtml.org/css/@title@Kapitel CSS> von SELFHTML hift dir dabei.

<http://de.selfhtml.org/css/@title=Kapitel CSS> hilft noch besser ;)

Schönen Sonntag noch!
O'Brien

[Gunnar Bittersmann]

1. alle Angaben in Pixeln (oder Points - zumindest theoretisch)
2. alle Angaben in Prozent
3. alle Angaben in EMs
4. Kombination aus verschiedenen Einheiten

A) Die linke Spalte (Hauptinhaltsspalte) soll aus Gründen der Usability eine Zeilenlänge von ca. 32em haben
B) Der Wrapper sollte im 'Ausgangs-/ Urzustand' (default) eine Breite von 750px haben
C) Die in den jeweiligen Browsern vorhandenen Möglichkeiten zur Schriftgrad/ -größen Einstellung sollen voll erhalten bleiben
D) horizontale Scrollbars sollen weitestgehend vermieden werden

Gunther,
D steht im Widerspruch zu B. Die vernünftige Entscheidung ist pro D.

Um die Vorgaben A) B) und C) zu erfüllen kommt nur Methode 3 in Frage.

3 steht im Widerspruch zu B. Aber B war ja schon aus dem Rennen.

Gib doch der „rechten“ Spalte (die durchaus auch ÜBER oder UNTER der linken sein kann, da du ja sicher mit float arbeitst) eine Breite
von etwa 10em. Der „linken“ gibst du gar keine, sie macht sich also so breit wie es geht, was du mit max-width auf 32em begrenzen kannst.

Methode 1 ist wahrscheinlich des Designers liebstes Kind,

Des Printdesigners, der keine Ahnung von Webdesign hat und deshalb besser die Finger davon lassen sollte.

Methode 2 erfüllt Vorgabe D)
Bleibt noch Methode 4 […]

Ein durchaus gangbarer Weg: width in %, min-width UND max-width in em (und natürlich float).

Dreispaltiges Beispiel: http://gundi.de/verein/satzung

Live long and prosper,
Gunnar

[Gunther]

Hi Gunnar!

1. alle Angaben in Pixeln (oder Points - zumindest theoretisch)
2. alle Angaben in Prozent
3. alle Angaben in EMs
4. Kombination aus verschiedenen Einheiten

A) Die linke Spalte (Hauptinhaltsspalte) soll aus Gründen der Usability eine Zeilenlänge von ca. 32em haben
B) Der Wrapper sollte im 'Ausgangs-/ Urzustand' (default) eine Breite von 750px haben
C) Die in den jeweiligen Browsern vorhandenen Möglichkeiten zur Schriftgrad/ -größen Einstellung sollen voll erhalten bleiben
D) horizontale Scrollbars sollen weitestgehend vermieden werden

Gunther,
D steht im Widerspruch zu B. Die vernünftige Entscheidung ist pro D.

Nicht unbedingt. Das hängt ja im wesentlichen von der Viweportbreite und der Schriftgröße ab.
Du würdest also mehr Gewicht auf die Vermeidung von horiz. Scrollbars legen?

Um die Vorgaben A) B) und C) zu erfüllen kommt nur Methode 3 in Frage.

3 steht im Widerspruch zu B. Aber B war ja schon aus dem Rennen.

Beispiel:
Schriftgröße 16px=1em
linke Spalte:   32em   = 512px
rechte Spalte:  14.9em = 238.4px
Gesamtbreite:   46.9em ~ 751px

Gib doch der „rechten“ Spalte (die durchaus auch ÜBER oder UNTER der linken sein kann, da du ja sicher mit float arbeitst) eine Breite
von etwa 10em. Der „linken“ gibst du gar keine, sie macht sich also so breit wie es geht, was du mit max-width auf 32em begrenzen kannst.

Wäre eine Möglichkeit, die aber ja nicht verhindert, dass ab einer gewissen Schriftgröße doch eine horiz. Scrollleiste auftaucht. Dies ließe sich imho ja nur durch eine max-width Angabe in Prozent (für den Wrapper) verhindern. Also alles in EMs (auch die max-width für die Spalten) nur max-width (für den Wrapper) in %.

Methode 1 ist wahrscheinlich des Designers liebstes Kind,

Des Printdesigners, der keine Ahnung von Webdesign hat und deshalb besser die Finger davon lassen sollte.

Gibt aber erstaunlicherweise viele Beispiele für fixed-layout Seiten von Leuten, die in der "CSS-Szene" Rang & Namen haben.
Beispiel gefällig? Stopdesign von D. Bowman

Methode 2 erfüllt Vorgabe D)
Bleibt noch Methode 4 […]

Ein durchaus gangbarer Weg: width in %, min-width UND max-width in em (und natürlich float).

Dreispaltiges Beispiel: http://gundi.de/verein/satzung

Der Nachteil an diesem Ansatz besteht halt darin, dass sich die Zeilenlänge verändert.

Mein Problem besteht in der Hauptsache darin, dass ich mich nicht entscheiden kann, da jede Variante ihre Vor- & Nachteile hat (wie fast alles im Leben). Jetzt war meine Idee halt die, getreu dem BBC-Motto "think about the 80%", also denk' an die Mehrheit, als Default-Style den einzustellen, den (vermeintlich) die meisten User bevorzugen und den/die anderen Style(s) als Alternative anzubieten.

Deine bevorzugte Alternative ist mir jedenfalls anhand deines Beispiellinks klar geworden - Danke!

Wie sieht es denn bei dir mit der Schriftgradänderung im Browser aus? Benutzt du die? Und welche Schriftgröße empfindest du als "angenehme (gut lesbare) Standardgröße"? Mir persönlich sind die 16px Defaultgröße in vielen Browsern schon zu groß. Meine favorisierte Größe liegt irgendwo zwischen 12-14px.

Gruß Gunther

[Gunnar Bittersmann]

D) horizontale Scrollbars sollen weitestgehend vermieden werden

Die vernünftige Entscheidung ist pro D.

Nicht unbedingt. Das hängt ja im wesentlichen von der Viweportbreite und der Schriftgröße ab.

Gunther,
Horizontales Scrollen sollte bei keiner Viewport-/Schriftgröße-Kombination erforderlich sein (solange nicht ein Wort mehr Breite einnimmt als der Viewport).

Schriftgröße 16px=1em
linke Spalte:   32em   = 512px
rechte Spalte:  14.9em = 238.4px
Gesamtbreite:   46.9em ~ 751px

Keines der Gleichheitszeichen ist berechtigt. Du kannst em nicht einfach in px umrechnen. Bei DIR mag der Faktor 16px/em sein, bei anderen Nutzern/Browsern/Betriebssystemen ist er anders.

Dreispaltiges Beispiel: http://gundi.de/verein/satzung

Der Nachteil an diesem Ansatz besteht halt darin, dass sich die Zeilenlänge verändert.

Flexibles Layout halt: Die Zeile hat eine bestimmte Maximalbreite; wenn weniger Platz zur Verfügung steht, ist sie halt schaler. Was ist daran nachteilig?

Jetzt war meine Idee halt die, getreu dem BBC-Motto "think about the 80%", also denk' an die Mehrheit,

Think about the 100%, I’d say. Warum nicht das Layout so angeben, dass alle was davon haben?

Wie sieht es denn bei dir mit der Schriftgradänderung im Browser aus? Benutzt du die?

Ja, immer, wenn ein Webseitenschreiberling die Schrift viel zu klein einstellt.

Und welche Schriftgröße empfindest du als "angenehme (gut lesbare) Standardgröße"?

Je nach Monitorgröße und -auflösung bei verschiedenen Systemen unterschiedlich.

Mir persönlich sind die 16px Defaultgröße in vielen Browsern schon zu groß. Meine favorisierte Größe liegt irgendwo zwischen 12-14px.

Dann stell doch das in DEINEM Browser so ein.

Live long and prosper,
Gunnar

[Detlef G.]

Hallo Gunnar

Horizontales Scrollen sollte bei keiner Viewport-/Schriftgröße-Kombination erforderlich sein (solange nicht ein Wort mehr Breite einnimmt als der Viewport).

Zumindest darf es im Fließtext nicht nötig sein.
Wenn mehrere Spalten nebeneinander angeordnet sind, ist es meiner Meinung
nach durchaus akzeptabel, wenn eine Spalte nur durch seitliches Scrollen
erreichbar ist, und dadurch vermieden wird, dass die Spalten jeweils nur
ein Wort pro Zeile enthalten.
(Nicht immer ist es möglich oder sinnvoll, wirklich alles untereinander
floaten zu lassen.)

Auf Wiederlesen
Detlef

[Gunther]

Hi Gunnar!

Schriftgröße 16px=1em
linke Spalte:   32em   = 512px
rechte Spalte:  14.9em = 238.4px
Gesamtbreite:   46.9em ~ 751px

Keines der Gleichheitszeichen ist berechtigt. Du kannst em nicht einfach in px umrechnen. Bei DIR mag der Faktor 16px/em sein, bei anderen Nutzern/Browsern/Betriebssystemen ist er anders.

Verflixt - da hab' ich doch schon wieder vergessen, dass es außer Windows auf PC/IBM comp. auch noch andere Sachen gibt... ;-)

Jetzt war meine Idee halt die, getreu dem BBC-Motto "think about the 80%", also denk' an die Mehrheit,

Think about the 100%, I’d say. Warum nicht das Layout so angeben, dass alle was davon haben?

Es geht ja um das Default-Layout, welches imho nie den 100% gerecht werden kann (weil dazu u.a. auch User mit Sehschwächen etc. gehören).

Mir persönlich sind die 16px Defaultgröße in vielen Browsern schon zu groß. Meine favorisierte Größe liegt irgendwo zwischen 12-14px.

Dann stell doch das in DEINEM Browser so ein.

mach' ich ja... ;-)

Gruß Gunther

[Ingo Turski]

Hi,

1. alle Angaben in Pixeln (oder Points - zumindest theoretisch)

Nachteile: Mindestfensterbreite erforderlich, in die schmale (Navigations?)-Box paßt der Text bei Schriftvergrößerung möglicherweise nicht mehr rein, ein großes Fenster wird nur ungenügend genutzt (besonders übel bei hoher Auflösung und sehr großer Schrift), Schriftvergrößerung ist im IE nicht ohne weiteres möglich.

2. alle Angaben in Prozent

Vorteil: Skalierung auch im IE möglich.
Nachteile: unpassend. Die Fenstergröße sagt wenig über die Darstellung der Inhalte aus. In kleinen Fenstern wid die schmale Spalte viel zu eng, als daß die Inhalte sinnvoll hinein passen würden.

3. alle Angaben in EMs

Vorteile: Skalierung auch im IE möglich, die Boxen passen sich den Inhalten an bzw. können hierzu passend angegeben werden.
Nachteile: Je nach Fensterbreite und Schriftgrad kommt es zu horizontalem Scrollbalken.

4. Kombination aus verschiedenen Einheiten

Möglich wäre hier eine Seitenbreite in px und Breite der schmalen Box in em. Natürlich mit den o.g. Nachteilen.

A) Die linke Spalte (Hauptinhaltsspalte) soll aus Gründen der Usability eine Zeilenlänge von ca. 32em haben

Eine Maximalbreite wäre sicherlich gut, aber 32em bei kleinen Fenstern und großem Schriftgrad vorauszusetzen ist sehr ungünstig.

B) Der Wrapper sollte im 'Ausgangs-/ Urzustand' (default) eine Breite von 750px haben

Paßt dann zwar in ein 800er Fenster und auf eine DIN-a-4-Seite, aber ist auch noch nicht optimal.

Wenn man noch die Verwendung von max-width mit einbezieht (ungeachtet dessen, dass die IEs das nicht verstehen), ergeben sich zusätzliche Möglichkeiten wie: Methode xy erfüllt Vorgabe xyz im Bereich von bis, etc.!

Genau das sollte man tun, denn dann kann man tatsächlich alle Anforderungen erfüllen. Und mit etwas Javascript kann man sogar dem IE dies beibringen - ohne JS wird dann halt nur die Breite nicht automatisch begrenzt, aber der User könnte sein Fenster ja auch anpassen.
Ich habe das einmal hier umgesetzt: http://www.isis.de/members/~iturski/beratungscentrum-monheim.de/ und bin mit der Flexibilität eigentlich sehr zufrieden. Es gibt eine schriftgradabhängige Mindest- und Maximalbreite und selbst bei sehr großer Schrifteinstellung reicht noch ein 800er Fenster aus.
In breiteren Fenstern sind bei unterschiedlichen Schriftgraden trotzdem in etwa gleichviele Zeichen pro Zeile.

Natürlich könnte man ja auch verschiedene Styles anbieten, zwischen denen der User dann wählen kann.

Das Problem ist nur, daß der erste Eindruck zählt und der Styleswitcher erst mal gefunden werden muß...

freundliche Grüße
Ingo

[Detlef G.]

Hallo Ingo

Ich habe das einmal hier umgesetzt: http://www.isis.de/members/~iturski/beratungscentrum-monheim.de/ und bin mit der Flexibilität eigentlich sehr zufrieden.

Ja, das finde ich auch gut.

Mir sind bei einigen Schriftgrad-Fenstergrößenkombinationen noch ein paar
Schönheitsfehler aufgefallen:

Hier beginnen sich zwei Texte zu überlappen, und die Grafik klebt für meinen
Geschmack zu sehr am "Herzlich Willkommen".
Die Schrift ragt hier ins Bild hinein. Ich habe dieses Verhalten schon
öfter bei rechts gefloateten Elementen in Geckos bemerkt, weiß allerdings
auch keine Abhlfe.
Vielleicht wäre es günstig, den Text mit einem längeren Wort zu beginnen
oder einen Zeilenumbruch zwischen den ersten Worten zu verhindern, damit
nicht so ein scheinbarer Absatz im Text entsteht.

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi,

Mir sind bei einigen Schriftgrad-Fenstergrößenkombinationen noch ein paar
Schönheitsfehler aufgefallen:

Hier beginnen sich zwei Texte zu überlappen, und die Grafik klebt für meinen
Geschmack zu sehr am "Herzlich Willkommen".

Naja, das ist schon eine extreme Verkleinerung und die Überlappung finde ich auch noch vertretbar, da der orange Text mehr Logobestandteil als notwendig lesbarer Text ist. Aber in welchem Browser tritt dieser Effekt auf? In meine Browser schiebt der Text die anderen Elemente nach unten.

Die Schrift ragt hier ins Bild hinein. Ich habe dieses Verhalten schon
öfter bei rechts gefloateten Elementen in Geckos bemerkt, weiß allerdings
auch keine Abhlfe.

Diesen Bug sehe ich beim Firefox auch, aber nur hin und wieder, d.h. ich muß schon oft ganz langsam die Fenstergröße verändern, dann kommt ein regelrechtes Flattern durch umpositionierung des Bildes und schließlich überlappt der Text das Bild. Das Bild scheint sich in dieser speziellen Stellung für den Browser rechts zu befinden und er schiebt es tatsächlich nach rechts (und wieder zurück), wenn ich dann über das Menü gehe. Solche Effekte kannte ich bisher eigentlich nur vom IE. Aber ich hoffe, daß dieser Bug beim Rendern noch behoben wird.

Vielleicht wäre es günstig, den Text mit einem längeren Wort zu beginnen
oder einen Zeilenumbruch zwischen den ersten Worten zu verhindern, damit
nicht so ein scheinbarer Absatz im Text entsteht.

Gute Idee. Werde ich mir merken. Nur fängt lorem ipsum nunmal mit lorem an..;-)

freundliche Grüße
Ingo

[Detlef G.]

Hallo Ingo

... Aber in welchem Browser tritt dieser Effekt auf?

Firefox 1.0.6

In meine Browser schiebt der Text die anderen Elemente nach unten.

Ja, das tut er bei weitere Schriftvergrößerung oder Fensterverkleinerung
dann auch.
Diese Überlappung tritt praktisch nur dann auf, wenn margin genau so oder
breiter als das gefloatete Element ist.
Tipp:

#Kopf {  
  list-style:none;  
  margin:0.4em 0 0.4em 0; padding:0 0.5em 0 2em;  
  background:#f9f9f9;  
}  
h2 {  
  margin:-0.8em 8em 0 0;  
  border-bottom:2px solid #fc0;  
}  

Diesen Bug sehe ich beim Firefox auch, aber nur hin und wieder, ...

Bei einem kleinen margin-top für img.rechts konte ich diesen Bug nicht mehr
provozieren.

Aber ich hoffe, daß dieser Bug beim Rendern noch behoben wird.

Bevor ich den Screenshoot gemacht habe, habe ich die Seite mehrmals neu
geladen.

Gute Idee. Werde ich mir merken. Nur fängt lorem ipsum nunmal mit lorem an..;-)

Auch wenn es nicht der "reinen Lehre" entspricht, gibt es bei mir (fast)
immer eine Klasse .nobr, die ich dann Inlineelementen zuweise, deren Inhalt
niemals umbrochen werden soll. Im Notfall füge ich auch <span class="nobr">
ein.

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi Detlef,

Firefox 1.0.6

interessant. 1.0.4 hat diesen Bug noch nicht.

Diese Überlappung tritt praktisch nur dann auf, wenn margin genau so oder
breiter als das gefloatete Element ist.

nee sowas.. und das beim Firefox. ;-)

Tipp:

#Kopf {

list-style:none;
  margin:0.4em 0 0.4em 0; padding:0 0.5em 0 2em;
  background:#f9f9f9;
}
[...]

vielen Dank, funktioniert tatsächlich und jetzt flackert der Text nur noch für Sekunenbruchteile über's Bild. Besonders trickreich ist diese letzte Definition, um die Linie zu trimmen.
Nur im IE sieht's damit etwas unschön aus, aber ich habe diese Angaben für den einfach wieder zurückgenommen.

Aber ich hoffe, daß dieser Bug beim Rendern noch behoben wird.

Bevor ich den Screenshoot gemacht habe, habe ich die Seite mehrmals neu
geladen.

Sorry, da hatte ich mich undeutlich ausgedrückt. Ich meinte, daß der Bug beim Rendern der Seite auftritt (und beim erneuten Rendern immer noch).

Auch wenn es nicht der "reinen Lehre" entspricht, gibt es bei mir (fast)
immer eine Klasse [code lang=css].nobr

> niemals umbrochen werden soll. Im Notfall füge ich auch `<span class="nobr">`{:.language-html}  
> ein.  

Dazu nehme ich dann (bei ein/zwei Worten) lieber ein schlichtes &nbsp; - ist kein unnötiges MarkUp und bewirkt hier dasselbe.  
  
freundliche Grüße  
Ingo

-- 
[[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Hommingberger Gepardenforelle](http://www.1ngo.de/hommingberger-gepardenforelle/);-)

[Detlef G.]

Hallo Ingo

Firefox 1.0.6
interessant. 1.0.4 hat diesen Bug noch nicht.

Das glaube ich weniger, schon seit den 6er NN ist mir dieser "Bug" bei jedem
Gecko-Browser aufgefallen.

Bei deinen ursprünglichen Definitionen reichte <h2> niemals bis an #kopf
heran. Warum sollten Inhalte, die sowieso die Elementgrenzen überschreiten
beim floaten berücksichtigt werden?

Ist es wirklich ein Bug, dass Gecko Elemente nicht nach unten verschiebt,
wenn dort der Platz auch nicht reicht?
Sollte dabei das Verhalten des IE richtig sein, der dies tut?

Nur im IE sieht's damit etwas unschön aus, aber ich habe diese Angaben für den einfach wieder zurückgenommen.

Natürlich, ich habe ja deine separaten Angaben für diesen auch nicht extra
angepasst, zumal das Problem bei ihm auch nicht auftrat.
Du hast ja auch genug Erfahrung mit CSS, dass dir ein Tipp reicht und nicht
extra auf Anpassungen für andere Browser hingewiesen werden muss.

Dazu nehme ich dann (bei ein/zwei Worten) lieber ein schlichtes &nbsp; - ist kein unnötiges MarkUp und bewirkt hier dasselbe.

Dann schau dir mal einen Text mit &nbsp; im Blocksatz im IE an, oder
versuche das mal, wenn die nicht zu trennenden Worte Bindestriche enthalten.

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi,

interessant. 1.0.4 hat diesen Bug noch nicht.

Das glaube ich weniger, schon seit den 6er NN ist mir dieser "Bug" bei jedem
Gecko-Browser aufgefallen.

Die Überlagerung in Deinem ersten Screenshot tritt im FF 1.0.4 nicht auf.

Ist es wirklich ein Bug, dass Gecko Elemente nicht nach unten verschiebt,
wenn dort der Platz auch nicht reicht?
Sollte dabei das Verhalten des IE richtig sein, der dies tut?

Prinzipiell natürlich nicht, aber in diesem speziellen Fall bin ich mir nicht ganz sicher. Wie auch immer, jetzt passiert's ja auch im 1.0.6 nicht mehr.

Dann schau dir mal einen Text mit &nbsp; im Blocksatz im IE an, oder
versuche das mal, wenn die nicht zu trennenden Worte Bindestriche enthalten.

Schon klar... ich meinte ja auch die eher einfachen Fälle, in denen zwei/drei Worte nicht getrennt werden sollen.

freundliche Grüße
Ingo

[Gunther]

Hi,

Wenn man noch die Verwendung von max-width mit einbezieht (ungeachtet dessen, dass die IEs das nicht verstehen), ergeben sich zusätzliche Möglichkeiten wie: Methode xy erfüllt Vorgabe xyz im Bereich von bis, etc.!
Genau das sollte man tun, denn dann kann man tatsächlich alle Anforderungen erfüllen. Und mit etwas Javascript kann man sogar dem IE dies beibringen - ohne JS wird dann halt nur die Breite nicht automatisch begrenzt, aber der User könnte sein Fenster ja auch anpassen.
Ich habe das einmal hier umgesetzt: http://www.isis.de/members/~iturski/beratungscentrum-monheim.de/ und bin mit der Flexibilität eigentlich sehr zufrieden. Es gibt eine schriftgradabhängige Mindest- und Maximalbreite und selbst bei sehr großer Schrifteinstellung reicht noch ein 800er Fenster aus.

Ja die Seite kenne ich ja noch von dem Beispiel mit dem Menü (und deinem Pfeil). Das einzige was mir persönlich daran nicht so gut gefällt ist, dass die Textspalte bei einer Viewportbreite von ~ 1000px schon zu breit ist und der "riesige" Wortabstand erleichtert den Lesefluss auch nicht gerade. Ferner bevorzuge ich es, wenn der Seiteninhalt bei Überschreiten des max-width Wertes horizontal zentriert wird.

In breiteren Fenstern sind bei unterschiedlichen Schriftgraden trotzdem in etwa gleichviele Zeichen pro Zeile.

Das ist imho ein erstrebenswertes Ziel, da der Satz (die Anordnung der einzelenen Elemente zueinander) durchaus einen Einfluss auf die Usability der Seite haben kann. Aus diesem Grund stimme ich auch Detlef zu, der geschrieben hat:"Nicht immer ist es möglich oder sinnvoll, wirklich alles untereinander floaten zu lassen.". Ein Grund, warum Gunnars Variante nach meinem Dafürhalten nicht für jede Seite geeignet ist.

Natürlich könnte man ja auch verschiedene Styles anbieten, zwischen denen der User dann wählen kann.
Das Problem ist nur, daß der erste Eindruck zählt und der Styleswitcher erst mal gefunden werden muß...

Genau! Und der erste Eindruck wird durch den Default-Style bestimmt. Dieser sollte sich demnach imho an der "breiten Masse" der zu erwartenden Seitenbesucher orientieren.

Bei Usern, die aus welchen Gründen auch immer, Probleme mit der Seite (im Default-Style) haben, kann man auch eher vorraussetzen, dass sie den Styleswitcher finden.

Und um es Mal etwas überspitzt zu formulieren: Wenn einer schlecht gucken kann und dann mit einem 14" Monitor und einer Viewportbreite von 800px im Netz surft, dann muss er sich halt einen größeren Monitor kaufen und das Fenster entsprechend größer machen. (Ich würde wetten, dass derjenige ja auch beim Optiker war und sich eine Brille hat machen lassen.)

Um nochmal auf die Layoutfrage zurückzukommen: Ich habe mich jetzt für die Variante entschieden dem Wrapper eine Breite in EMs und eine max-width von 100% zu geben. Die Spaltenbreiten habe ich mit %-Werten festgelegt. Dies halte ich für den besten Kompromiss.

An dieser Stelle möchte ich dir auch noch Mal für deine wirklich hilfreichen Antworten und Beispiele auf meine Fragen danken.

Gruß Gunther

@Detlef: Ich fände es wirklich sehr nett, wenn du auch mal etwas zum Originalthema des Threads schreiben würdest.  ;-)

[Ingo Turski]

Hi,

Ja die Seite kenne ich ja noch von dem Beispiel mit dem Menü (und deinem Pfeil). Das einzige was mir persönlich daran nicht so gut gefällt ist, dass die Textspalte bei einer Viewportbreite von ~ 1000px schon zu breit ist und der "riesige" Wortabstand erleichtert den Lesefluss auch nicht gerade. Ferner bevorzuge ich es, wenn der Seiteninhalt bei Überschreiten des max-width Wertes horizontal zentriert wird.

Nunja, das ist auch Geschmacksache. Ich bevorzuge breitere (aber natürlich nicht zu breite) Texte, um das Scrollen möglchst zu reduzieren. Wenn mal echter Spaltensatz möglich ist, würde ich hier natürlich auch lieber zwei Spalten draus machen.
Und ich mag Blocksatz, auch wenn der Text dann nicht optimal lesbar ist. Aber ich denke, das wäre ein Punkt für eine anzubietene individuelle Usereinstellung.
Bezüglich des Zentrierens kommt es doch sehr auf das Layout an. Bei manchen wirkt sich das sehr positiv aus, bei anderen wiederum ist Linksbündig einfach besser; so auch mMn auf meiner Seite, vor allem wegen dem Hintergrundbild, daß im Firefox bei kleinem Schriftgrad oder wenig Seiteninhalt zu sehen ist.

Genau! Und der erste Eindruck wird durch den Default-Style bestimmt. Dieser sollte sich demnach imho an der "breiten Masse" der zu erwartenden Seitenbesucher orientieren.

Ich sehe das ein wenig anders und finde ene Seite dann optimal, wenn sie in default-Einstellung möglichst für alle Fälle paßt. Das verhindert eine eingeschränkte Nutzbarkeit für weniger erfahrene Besucher. Allein die Wahl der passenden Einstellung könnte diese doch schon überfordern.

Um nochmal auf die Layoutfrage zurückzukommen: Ich habe mich jetzt für die Variante entschieden dem Wrapper eine Breite in EMs und eine max-width von 100% zu geben. Die Spaltenbreiten habe ich mit %-Werten festgelegt. Dies halte ich für den besten Kompromiss.

Zwar nicht verkehrt, aber in sehr kleinen Fenstern dennoch problematisch:
* Wer max-width interpretiert, bekommt u.U. zu schmale Fenster und wäre mit einer min-width besser dran.
* Wer max-width nicht interpretiert, muß unötig horizontal scrollen.

freundliche Grüße
Ingo

[Gunther]

Hi,

Genau! Und der erste Eindruck wird durch den Default-Style bestimmt. Dieser sollte sich demnach imho an der "breiten Masse" der zu erwartenden Seitenbesucher orientieren.
Ich sehe das ein wenig anders und finde eine Seite dann optimal, wenn sie in default-Einstellung möglichst für alle Fälle paßt.

kannst du das bitte mal etwas näher definieren? Ich denke, dass eben genau das nicht möglich ist. Für das Default-Layout gehe ich deshalb auch vom "Normal-User" aus und der bin (mangels anderen Wissens/ Erfahrungen) Ich (sprich also: normale Sehstärke, "normaler" Browser, Viewportbreite ~ 1000px).

Das verhindert eine eingeschränkte Nutzbarkeit für weniger erfahrene Besucher. Allein die Wahl der passenden Einstellung könnte diese doch schon überfordern.

Auch hier bin ich mir nicht ganz sicher, was du genau meinst. Die User, die "andere" Einstellungen benötigen/ bevorzugen verwenden doch eher entsprechende Browser und wissen auch damit umzugehen. Denn es macht doch keinen Sinn, per default ein extra kontrastreiches Style allen Besuchern zu presentieren, wohl aber denen anzubieten, die eine Sehschwäche haben.

Um nochmal auf die Layoutfrage zurückzukommen: Ich habe mich jetzt für die Variante entschieden dem Wrapper eine Breite in EMs und eine max-width von 100% zu geben. Die Spaltenbreiten habe ich mit %-Werten festgelegt. Dies halte ich für den besten Kompromiss.
Zwar nicht verkehrt, aber in sehr kleinen Fenstern dennoch problematisch:

Ab wann ist denn für dich ein Fenster sehr klein?

* Wer max-width interpretiert, bekommt u.U. zu schmale Fenster und wäre mit einer min-width besser dran.

OK, das überzeugt. Dem Wrapper also noch zusätzlich eine min-width von 500px gegeben.

* Wer max-width nicht interpretiert, muß unnötig horizontal scrollen.

Richtig, aber dem Wörtchen "unnötig" möchte ich widersprechen, denn wenn weder der verwendete Browser, noch die Viewportbreite eine Darstellung ohne horizontale Srollleiste zulassen, dann ist es in meinen Augen nicht unnötig, sondern sehr wohl erforderlich. Aber mal ehrlich - wieviele Leute surfen denn heutzutage noch mit Viewports durchs Netz, die schmaler als 800px sind (wobei ich hier nicht von Handhelds, PDAs o.ä. rede)?

Gruß Gunther

BTW: Verfolgst du noch deine Bemühungen im SEO Wettbewerb HGF?

[Ingo Turski]

Hi,

Für das Default-Layout gehe ich deshalb auch vom "Normal-User" aus und der bin (mangels anderen Wissens/ Erfahrungen) Ich (sprich also: normale Sehstärke, "normaler" Browser, Viewportbreite ~ 1000px).

das ist die durchaus übliche Sichtweise - aber eben nicht barrierefrei. Ich gehe zwar auch von "normalen" Bedingungen aus, versuche aber zu vermeiden, daß unter ungünstigen Bedingungen die Seite nur noch eingeschränkt nutzbar ist. Und zwar ohne hierfür vorauszusetzen, daß Einstellungen (am Browser oder auf der Seite) angepaßt werden müssen.

Das verhindert eine eingeschränkte Nutzbarkeit für weniger erfahrene Besucher. Allein die Wahl der passenden Einstellung könnte diese doch schon überfordern.

Auch hier bin ich mir nicht ganz sicher, was du genau meinst. Die User, die "andere" Einstellungen benötigen/ bevorzugen verwenden doch eher entsprechende Browser und wissen auch damit umzugehen. Denn es macht doch keinen Sinn, per default ein extra kontrastreiches Style allen Besuchern zu presentieren, wohl aber denen anzubieten, die eine Sehschwäche haben.

Um dieses Beispiel zu verwenden: Nein, ein extra kontrastreicher Style kann zusätzlich angeboten weren, aber per default einen kontrastarmen Style würde ich auch nicht anbieten wollen. Hier gilt es, einen Kompromiß zu finden und evtl. fortgeschrittenen Usern die Möglichkeit zu bieten, den Style entsprechend ihren Bedürfnissen oder auch Gefallen zu ändern. Falsch wäre es aber, davon auszugehen, daß z.B. schlecht sehende Besucher mit ihrem Browser so umgehen können, um Mängel einer Seite zu kompensieren. Jeder fängt mal mit Computern und Internet an und weiß zu diesem Zeitpunkt oft noch nicht einmal, daß er ein Programm der Kathegorie "Browser" verwendet. Dies dürfte vor allem für ältere Mitbürger zutreffen, die nunmal auch öfter Sehprobleme haben.

aber dem Wörtchen "unnötig" möchte ich widersprechen, denn wenn weder der verwendete Browser, noch die Viewportbreite eine Darstellung ohne horizontale Srollleiste zulassen

ich meinte unnötig im Sinne von unnötig vertikal - wenn eben horizontaler Anzeigeplatz ungenutz brach liegt.

BTW: Verfolgst du noch deine Bemühungen im SEO Wettbewerb HGF?

Im Moment nur sporadisch. Aber ab Oktober will ich mich da wieder etwas mehr engagieren.

freundliche Grüße
Ingo

[Detlef G.]

Hallo Gunther

Und um es Mal etwas überspitzt zu formulieren: Wenn einer schlecht gucken kann und dann mit einem 14" Monitor und einer Viewportbreite von 800px im Netz surft, dann muss er sich halt einen größeren Monitor kaufen und das Fenster entsprechend größer machen.

Bevor sie sich wegen deiner Seite einen größeren Monitor zulegen, verlassen
sie die Seite wohl eher ganz schnell wieder und wenden sich dem nächsten
Google-Treffer zu.

(Ich würde wetten, dass derjenige ja auch beim Optiker war und sich eine Brille hat machen lassen.)

Meine Mutter z.b. hat eine Brille, außerdem einen Rechner mit
15Zoll-Monitor, die Schrift im Browser standardmäßig auf etwa 140%. Sie wird
sich von ihrer Rente bestimmt keinen größeren Monitor anschaffen, nur damit
eine bestimmte Seite besser aussieht.

Um nochmal auf die Layoutfrage zurückzukommen: Ich habe mich jetzt für die Variante entschieden dem Wrapper eine Breite in EMs und eine max-width von 100% zu geben. Die Spaltenbreiten habe ich mit %-Werten festgelegt. Dies halte ich für den besten Kompromiss.

Ich würde es eher genau andersherum machen, Standardmaße abhängig von der
Fenstergröße, minimale und maximale Breite an den Inhalt angepasst, also
meist em.

@Detlef: Ich fände es wirklich sehr nett, wenn du auch mal etwas zum Originalthema des Threads schreiben würdest.  ;-)

Warum sollte ich, wenn Gunnar und Ingo sehr schön und ausführlich alles,
was ich geschrieben hätte bereits gepostet haben.

Auf Wiederlesen
Detlef

[Gunther]

Hallo Detlef!

Und um es Mal etwas überspitzt zu formulieren: Wenn einer schlecht gucken kann und dann mit einem 14" Monitor und einer Viewportbreite von 800px im Netz surft, dann muss er sich halt einen größeren Monitor kaufen und das Fenster entsprechend größer machen.

Bevor sie sich wegen deiner Seite einen größeren Monitor zulegen, verlassen
sie die Seite wohl eher ganz schnell wieder und wenden sich dem nächsten
Google-Treffer zu.

Die Betonung sollte auf "etwas überspitzt zu formulieren" liegen.
Ausserdem ist der größere Monitor ja kein Muss um die Seite zu betrachten (wenngleich wohl hilfreich - genauso wie die Brille). Hier geht es einzig und allein um ein bestimmtes Layout!
Als letztes Mittel bleibt es ja auch jedem (mit entsprechendem Browser) überlassen, alle Styles zu deaktivieren.

(Ich würde wetten, dass derjenige ja auch beim Optiker war und sich eine Brille hat machen lassen.)

Meine Mutter z.b. hat eine Brille, außerdem einen Rechner mit
15Zoll-Monitor, die Schrift im Browser standardmäßig auf etwa 140%. Sie wird
sich von ihrer Rente bestimmt keinen größeren Monitor anschaffen, nur

Weihnachten ist ja nicht mehr so fern. Da hättest du doch gleich ein nettes Geschenk. ;-)

damit eine bestimmte Seite besser aussieht.

Um nochmal auf die Layoutfrage zurückzukommen: Ich habe mich jetzt für die Variante entschieden dem Wrapper eine Breite in EMs und eine max-width von 100% zu geben. Die Spaltenbreiten habe ich mit %-Werten festgelegt. Dies halte ich für den besten Kompromiss.

Ich würde es eher genau andersherum machen, Standardmaße abhängig von der
Fenstergröße,

Ich finde eher, dass der Inhalt die Breite bestimmen sollte (u.a. wegen Punkten wie der line-length). Die Fenstergröße ist für mich daher zweitrangig. Und bei meinem Ansatz kann ja jeder die Seite (den Schriftgrad) bis auf seine Fenstergröße (ohne Layoutveränderung) vergrößern.

minimale und maximale Breite an den Inhalt angepasst, also
meist em.

Min- & max-width Werte in EMs verhindern keine horizontale Scrollleiste.
Die Verwendung von min-width Werten (zumindest was das Grundlayout anbelangt) ist imho nicht notwendig.

@Detlef: Ich fände es wirklich sehr nett, wenn du auch mal etwas zum Originalthema des Threads schreiben würdest.  ;-)

Warum sollte ich, wenn Gunnar und Ingo sehr schön und ausführlich alles,
was ich geschrieben hätte bereits gepostet haben.

Na gut - lassen wir die Ausrede mal gelten...

Gruß Gunther

[Detlef G.]

Hallo Gunther

Die Betonung sollte auf "etwas überspitzt zu formulieren" liegen.

Als letztes Mittel bleibt es ja auch jedem (mit entsprechendem Browser) überlassen, alle Styles zu deaktivieren.

Wozu erstellst du denn überhaupt ein Layout, wenn du empfielst, die Styles
zu deaktivieren?

Solange du das Layout so aufbaust, dass es für den Nutzer nicht nötig ist,
dies zu tun, hast du es in der Hand, wie es aussehen soll. Wenn du den
Nutzer zwingst, die Styles zu deaktivieren, bekommt dieser Standard-HTML.

Ich finde eher, dass der Inhalt die Breite bestimmen sollte (u.a. wegen Punkten wie der line-length).

Nicht unbedingt, solange eine Zeile weder zu kurz noch zu lang wird, ist der
Text gut lesbar. Es ist also nicht nötig genau eine Zeilenlänge (in em)
festzuzementieren.

Die Fenstergröße ist für mich daher zweitrangig.

Für mich nicht.
Das Verhältnis zwischen Fensterbereite, der Gesamtbreite des Inhalts und der
Breite und Anordnung der Seitenelemente hat meiner Meinung nach einen
größeren Einfluss auf die Wirkung des Designs, als die genaue Schriftgröße
oder Anzahl der Buchstaben pro Zeile.

Und bei meinem Ansatz kann ja jeder die Seite (den Schriftgrad) bis auf seine Fenstergröße (ohne Layoutveränderung) vergrößern.

Ohne jegliche Layoutveränderung?
Sind denn auch alle Grafikgrößen in em angegeben?
(mit allen Schönheitsfehlern der Skalierung durch die Browser)
Ist der Inhalt als schmales Handtuch wirklich das selbe Layout?
Der IE kennt ohne Javascript-Trickserei kein max-width. IE-Nutzer müssen
also eventuell scrollen, auch wenn es noch nicht wirklich notwendig wäre.

Min- & max-width Werte in EMs verhindern keine horizontale Scrollleiste.

Sie verhindern zwar keine Scrolleiste, lassen sie aber bei sinnvollen
Werten, erst dann erscheinen, wenn es unvermeidbar ist.

Die Verwendung von min-width Werten (zumindest was das Grundlayout anbelangt) ist imho nicht notwendig.

Also, es ist besser, eine Scrolleiste zu erzeugen, als Inhalte darzustellen,
die sich überlappen, die über den Border ihrer Box reichen oder auf einem
anderen Element oder dem Hintergrund angezeigt werden, der farblich
unpassend ist oder keinen ausreichenden Kontrast ergibt.

Na gut - lassen wir die Ausrede mal gelten...

Das war keine Ausrede!
Ich lese hier fast alles, was die Themenbereiche betrifft, die mich
interessieren oder bei denen ich helfen kann.
Antworten schreibe ich aber nur dann, ich der Meinung bin, wirklich helfen
oder auf ein Problem aufmerksam machen zu können und soweit es meine Zeit
erlaubt.
Wenn ich allerdings feststelle, dass die Antworten bereits gepostet sind,
die ich geben würde, lass ich es sein oder schicke das bereits Geschriebene
nicht ab. Es ist nicht sehr sinnvoll, das Forum mit Unmengen gleicher
Antworten zuzuspammen.

OK, manchmal schreibe ich auch, weil es mich in den Fingern juckt. Aber den
größten Teil dieser Schreibereien schicke ich dann doch nicht ab.

Auf Wiederlesen
Detlef