weitere Versuche in Richtung Skallierbarkeit

[RuD]

Seid gegrüßt!
ich habe mal an meiner Seite weitergebaut. Ich wollte vorallen dingen eine Skallierbare, und viewportunabhängige Seite bauen.

http://www.rudweb.de/rudweb/ ... könntet Ihr Euch die Seite mal anschauen? Kritik ist sehr erwünscht.

Ich weis, dass Sie im IE noch nicht ganz so schön ist. Ach, und Inhalte könnt Ihr auch erstmal ignorieren.

Danke schonmal im Voraus.

[Rato Micefarmer]

Ich wollte vorallen dingen eine Skallierbare, und viewportunabhängige Seite bauen.

Wenn ich das Browserfenster weit genug verkleinere, so komme ich relativ schnell an die Stelle, ab der dann doch vertikale Scollbalken entstehen. Wenn ich dann noch weiter verkleinere, schiebt sich ein Teil des 'rudweb.de'-Schriftzugs mit, der andere jedoch nicht. Ich empfehle dir, minwidth auf body anzugeben, nicht auf darin enthaltene Boxen, das bewirkt im schlimmsten Fall, dass ein Teil der Seite beim Verkleinern seine Breite nicht mehr verringert, andere dies jedoch trotzdem noch tun, was ja nicht zusammenpasst

mfg
Rato

[RuD]

Seid gegrüßt!

[...]der andere jedoch nicht.

Welcher andere genau?

Ich empfehle dir, minwidth auf body anzugeben, nicht auf darin enthaltene Boxen, das bewirkt im schlimmsten Fall, dass ein Teil der Seite beim Verkleinern seine Breite nicht mehr verringert, andere dies jedoch trotzdem noch tun, was ja nicht zusammenpasst

Deswegen überlege ich, die Breite überhaupt nicht zu definieren. Aber dann kann es sein, das ein User mit sehr großem Viewport sehr langte Zeilen hat und  dass sehr ermüdend beim Lesen sein soll (hab ich zumindenst mal gelesen)

[kungschu]

Hallo.

Bei mir (FF 2.0.0.4) skaliert die Seite überhaupt nicht. Zudem habe ich gesehen, dass max-width für den wrapper mit 65em angegeben ist. In meinem Browser scheint die Webseite (trotz genügend Platz) schmaler zu sein.
Verkleinere ich den Viewport, erscheint weder ein vertikaler Scrollbalken noch skaliert der wrapper, sondern der Inhalt verschwindet links (ganz als sei für den body overflow:hidden; definiert).

MfG, Kungschu.

[RuD]

Seid gegrüßt!
Ich habe den wrapper nochmal "überarbeitet". Also keine max-width mehr und das float:right ist auch raus.

Bei mir (FF 2.0.0.4) skaliert die Seite überhaupt nicht.

Das kann ich nicht nachvollziehen. Ich meinte skalieren im Sinne von Zoomen.

Zudem habe ich gesehen, dass max-width für den wrapper mit 65em angegeben ist.

Habe ich jetz -wie schon gesagt- geändert. Ich habe nur gelesenen, dass dem Besucher zu lange Zeilen unangenehm sein sollen und dem wollte ich damit entgegenwirken.

In meinem Browser scheint die Webseite (trotz genügend Platz) schmaler zu sein.

Ich denke das lag an der font-size vom body (65%) -zugegeben, das ist ganz schön klein.

Verkleinere ich den Viewport, erscheint weder ein vertikaler Scrollbalken noch skaliert der wrapper, sondern der Inhalt verschwindet links (ganz als sei für den body overflow:hidden; definiert).

Das lag an dem float: right;

[kungschu]

Hallo.

Bei mir (FF 2.0.0.4) skaliert die Seite überhaupt nicht.
Das kann ich nicht nachvollziehen. Ich meinte skalieren im Sinne von Zoomen.

Das Zoomen war auch bei mir möglich. Wird der Viewport zu klein, sind die Inhalt aber ebenfalls unerreichbar.

Zudem habe ich gesehen, dass max-width für den wrapper mit 65em angegeben ist.
Habe ich jetz -wie schon gesagt- geändert. Ich habe nur gelesenen, dass dem Besucher zu lange Zeilen unangenehm sein sollen und dem wollte ich damit entgegenwirken.

Stimmt. Das trifft auch auf mich zu. Wie Gunther schon sagte, wäre dann wohl die Zentrierung am besten.

MfG, Kungschu.

[Gunther]

Sei gegrüßt!

ich habe mal an meiner Seite weitergebaut. Ich wollte vorallen dingen eine Skallierbare, und viewportunabhängige Seite bauen.

http://www.rudweb.de/rudweb/ ... könntet Ihr Euch die Seite mal anschauen? Kritik ist sehr erwünscht.

Also auch ich habe mir die Seite mal mit FF 2.0 angeguckt. Folgendes ist mir aufgefallen:

• Die Seite "klebt" am rechten Viewportrand. Schöner & gebräuchlicher wäre eine zentrierte Ausrichtung.
• Wenn man die Schrift vergrößert, dehnt sich die Seite nach links aus und "verschwindet" aus dem Viewport. Inhalte werden damit unerreichbar!
• Die Schrift ist mit 65% arg klein.

Viel mehr gibt's ja noch nicht zu sehen & beurteilen ;).

Gruß Gunther

[Gunther]

Sei nochmals gegrüßt!

Es ist erfreulich zu sehen, wenn Tipps auch beachtet und sogar umgesetzt werden :-).

Deshalb hier gleich noch ein "Nachschlag":
Thema "Schrift"

• Warum definierst du die Schriftgröße für das Body-Element mit 93,75% und nicht mit 100.01%!?
• Für nachfolgende Elemente kannst du dann bspw. font-size: .9em oder .85em angeben.
• Ggf. würde ich neben der Schriftenfamilie (sans-serif) auch noch einige Default-Schriftarten angeben.

Thema "CSS allgemein"

• Bei Nullwerten kannst du die Einheiten weglassen, also bspw. margin: 30px 0 0 0;
• Bei gleichen Werten für top + bottom und left + right kann man auch die Kurzform verwenden.
  margin: 30px; ~ für alle 4 je 30px
  margin: 30px 0; ~ top + bottom je 30px und left + right je 0
  margin: 30px 0 20px; ~ top 30px, right 0, bottom 20px und left 0

Gruß Gunther

[RuD]

Sei gegrüßt!

Es ist erfreulich zu sehen, wenn Tipps auch beachtet und sogar umgesetzt werden :-).

Dafür fragt man ja schließlich nach ;-)

Deshalb hier gleich noch ein "Nachschlag":

Sehr gut, immer her damit!

Thema "Schrift"

• Warum definierst du die Schriftgröße für das Body-Element mit 93,75% und nicht mit 100.01%!?

um 1em genau bei 15 px zu haben, um die Bildgröße nach einem bestimmten Maßstab in em angeben zu können. Und das ist ja fast 100%. Wieso wir eigentlich sooft das "100.01%" empfohlen?

• Für nachfolgende Elemente kannst du dann bspw. font-size: .9em oder .85em angeben.
• Ggf. würde ich neben der Schriftenfamilie (sans-serif) auch noch einige Default-Schriftarten angeben.

Mach ich ev tl. noach aber dann wird ja der Nutzer bevormundet. Und bei dem "Layout" ist das nich unbedingt nötig.

Thema "CSS allgemein"

• Bei Nullwerten kannst du die Einheiten weglassen, also bspw. margin: 30px 0 0 0;

Genau dort mach mir eine Version von Safari (ich weis aber nicht mehr genau welche) in Verbindung mit floats einen Stirch durch die Rechnung - mit 0px funtkinieren floats wir gewünscht und ohne eben nicht. Klingt komisch, ist aber so ;-)

• Bei gleichen Werten für top + bottom und left + right kann man auch die Kurzform verwenden.
  margin: 30px; ~ für alle 4 je 30px
  margin: 30px 0; ~ top + bottom je 30px und left + right je 0
  margin: 30px 0 20px; ~ top 30px, right 0, bottom 20px und left 0

Das werde ich bei Gelegenheit auf jeden Fall umsetzten, spart ja schließlich Code.

Gruß Gunther

Danke für deine Hinweise.

[Jonathan]

Hallo,

um 1em genau bei 15 px zu haben, um die Bildgröße nach einem bestimmten Maßstab in em angeben zu können.

Das ist Quatsch. Der Sinn von em ist ja eben, keiner festen Pixelgröße zu entsprechen. Bildgrößen kannst bzw. solltest du weiterhin in px angeben.

Und das ist ja fast 100%. Wieso wir eigentlich sooft das "100.01%" empfohlen?

Meines Wissens kann man damit einen Fehler des IE umgehen.

Jonathan

[stefan]

Hallo.

Bildgrößen kannst bzw. solltest du weiterhin in px angeben.

Naja, das ist Ansichtssache. Opera z.B. skaliert die komplette Seite mit Bildern, der IE 7 machts auch, Safari "glättet" skalierte Bilder. Man könnte also den Standpunkt vertreten das skalierbare Webbild sei im kommen.

Schöne Grüße
stefan

[Jonathan]

Hallo,

Opera z.B. skaliert die komplette Seite mit Bildern,

Eben. Dann kann ich auch die Bilder in Pixeln angeben, die werden ja auch skaliert. Bei em hab ich das Problem, dass das Bild eben möglicherweise nichtmal bei Standard-Zoomfaktor in der Originalgröße dargestellt wird und so die Qualität vermutlich etwas leidet (vor allem bei Skizzen, Zeichnungen und Logos, bei Fotos dürfte das weniger wichtig sein).

Jonathan

[RuD]

Seid gegrüßt!

[...](vor allem bei Skizzen, Zeichnungen und Logos, bei Fotos dürfte das weniger wichtig sein).

genau so ist es. Logos, usw würde ich ja auch nicht skalierbar machen. Es geht mir in aller erster Linie um Fotos.

[stefan]

Hallo.

Opera z.B. skaliert die komplette Seite mit Bildern,

Eben. Dann kann ich auch die Bilder in Pixeln angeben, die werden ja auch skaliert.

Naja, das ist aber ein ähnliches Argument wie "Dann kann ich ja die Schriftgröße in Pixeln angeben, die wird ja eh skaliert." :)

Was ist beispielsweise mit Mozilla- oder Safarinutzern?

Bei em hab ich das Problem, dass das Bild eben möglicherweise nichtmal bei Standard-Zoomfaktor in der Originalgröße dargestellt wird und so die Qualität vermutlich etwas leidet (vor allem bei Skizzen, Zeichnungen und Logos, bei Fotos dürfte das weniger wichtig sein).

Da stimme ich Dir zu. Bei Icons, Logos usw. macht Skalierung erst Sinn sobald sie als Vektorgrafik dargestellt werden können.

Generell will ich auch nicht sagen, dass es immer notwendig, richtig oder unproblematisch ist Bilder skalierbar zu halten, aber eine Überlegung ist es durchaus wert.

Schöne Grüße
stefan

[Gunther]

Sei gegrüßt!

• Warum definierst du die Schriftgröße für das Body-Element mit 93,75% und nicht mit 100.01%!?
  um 1em genau bei 15 px zu haben, um die Bildgröße nach einem bestimmten Maßstab in em angeben zu können.

Das ist ein Trugschluss. Die tatsächliche Größe in Pixeln von 1em ist abhängig von der jeweils im Browser eingestellten Schriftgröße. Und die ist im übrigen bei allen "gängigen" Browsern 16px.

Ferner ist die Methode bei Bildgrößen ebenfalls relative Größen anzugeben nicht so ganz "unproblematisch". Einerseits bietet sie zwar den Vorteil, dass das Layout bei einer Schriftgrößenänderung erhalten bleibt, andererseits sind die Fähigkeiten von Browsern Bilder zu skalieren doch recht eingeschränkt und du hast keine Garantie, dass das Bild überhaupt jemals in seiner Originalgröße (und somit "unverpixelt") angezeigt wird. Wer Wert auf solche Features legt, der wird eh zumeist mit Browsern wie Opera surfen, die nicht nur die Schrift vergrößern, sondern die gesamte Seite "zoomen" (also auch inklusive aller Grafiken).

Wieso wir eigentlich sooft das "100.01%" empfohlen?

Weil es sowohl bei 100%, als auch bei 100.1%, jeweils in einigen Browsern gibt. Rechnerisch ergeben die 100.01% aber das selbe wie 100% (aufgrund der Rundung) und lassen eben die vom User gewählte Einstellung unverändert (siehe "Nutzer bevormunden").

• Ggf. würde ich neben der Schriftenfamilie (sans-serif) auch noch einige Default-Schriftarten angeben.
  Mach ich ev tl. noach aber dann wird ja der Nutzer bevormundet.

Erstens wird er das durch die Angabe "font-family: sans-serif" auch schon ;), zweitens muss der User deine angegebene(n) Schriftart(en) auf seinem System installiert haben, und drittens hat der User immer noch die Möglichkeit, seine eigene Schriftart anzugeben.

Thema "CSS allgemein"

• Bei Nullwerten kannst du die Einheiten weglassen, also bspw. margin: 30px 0 0 0;
  Genau dort mach mir eine Version von Safari (ich weis aber nicht mehr genau welche) in Verbindung mit floats einen Stirch durch die Rechnung - mit 0px funtkinieren floats wir gewünscht und ohne eben nicht. Klingt komisch, ist aber so ;-)

Hmmm, das ist mir neu. Ich kenne wohl das Safari-Problem bei Floats und negativen Margin-Werten, aber keine Einheiten bei Nullwerten? Wenn du das noch mal genauer findest, wäre es nett, wenn du mal einen Link posten könntest.

Gruß Gunther

[rfb]

Moin

schon beim Zoom-Faktor 120% überlagert das Bild das Sucheneingabefeld und den Rest der Navi (ab 130% ist die Navi verschwunden).

Gruß
rfb

[RuD]

Seid gegrüßt!

Moin

schon beim Zoom-Faktor 120% überlagert das Bild das Sucheneingabefeld und den Rest der Navi (ab 130% ist die Navi verschwunden).

Habe so einiges geändert, dem sollte nicht mehr so sein.