tomtom
2008-10-22, 14:45:51
Grüß euch,
Wie der Titel schon sagt, hab ich eine wichtige Frage zu elastischen Layouts.
Im Moment arbeite ich mich gerade ein wenig in barrierefreies Webdesign ein. Und dieses Thema umschließt natürlich auch das Erstellen von elastischen Layouts, sodass es dem Benutzer möglich ist, die Seite per Schriftgrad zu vergrößern, ohne dass das eigentliche Design/Layout der Seite dabei zerschossen wird. Wie den meisten bekannt sein dürfte, ist das Maß aller Dinge hierbei wortwörtlich die Angabe von relativen "em"-Werten.
Ich bin gerade am Layouten eines neuen Wordpress-Templates für meinen kommenden Blog. Und diesen würd ich eben gerne elastisch designen. Mir ist klar, dass durch die relative Vergrößerung der Seite über den Schriftgrad seitens des Benutzers die Grafiken verlustbehaftet (durchs Vergrößern) angezeigt werden. Dies ist aber verschmerzbar, in Anbetracht der Tatsache, dass das grundlegende Layout dabei vollständig erhalten bleibt.
Der eigentliche Punkt an der Sache ist jetzt aber folgender: Im Template verwende ich sehr viele Designelemente, die mittels background-image in absoluten und relativen DIVs positioniert sind. Beim Vergrößern des Schriftgrades im Browser "wachsen" alle Container brav und vor allem korrekt mit, die Hintergrundgrafiken in den DIVs bleiben davon aber unangetastet in der Originalgröße. Somit wird das Design wieder "zerschossen".
Also hab ich mich via Google ein wenig schlau gemacht, ob und wie man Hintergrundgrafiken in elastischen Layouts mit der Schriftgröße mitskalieren lassen kann - die gefundenen "Antworten" fielen zu 100% negativ aus: nicht möglich;
Nun meine Frage: Wie geht ihr hier vor? Gibt's vielleicht doch eine Möglichkeit, die Hintergrundgrafiken mitskalieren zu lassen?
Oder in dem Fall eher bei einem fixen Layout bleiben und die Barrierefreiheit außen vor lassen (was aber eigentlich nicht in meinem Sinne ist)?
Schade wär's, weil ich meine neue Seite auf die aktuellsten Standards und eben auch auf Barrierefreiheit anpassen will/wollte.
Bin gespannt auf eure Antworten :D
Danke und beste Grüße
PS: Ich hab die Frage auch im PSD-Tutorials-Forum gepostet; Sollte es dort eine passende und wissenswerte Antwort geben, werde ich diese zum Wohl der Allgemeinheit auch hier verlinken/posten...denn vllt gibt's ja auch noch andere außer mir, die an diesem Thema interessiert sind ;)
Edit: Eine Lösung wär schon mal folgende CSS-Eigenschaft:
http://www.w3.org/TR/css3-background/#the-background-size
Allerdings ist das CSS3, dann wissen wir ja, was das für aktuelle Browser bedeutet =/
Wie der Titel schon sagt, hab ich eine wichtige Frage zu elastischen Layouts.
Im Moment arbeite ich mich gerade ein wenig in barrierefreies Webdesign ein. Und dieses Thema umschließt natürlich auch das Erstellen von elastischen Layouts, sodass es dem Benutzer möglich ist, die Seite per Schriftgrad zu vergrößern, ohne dass das eigentliche Design/Layout der Seite dabei zerschossen wird. Wie den meisten bekannt sein dürfte, ist das Maß aller Dinge hierbei wortwörtlich die Angabe von relativen "em"-Werten.
Ich bin gerade am Layouten eines neuen Wordpress-Templates für meinen kommenden Blog. Und diesen würd ich eben gerne elastisch designen. Mir ist klar, dass durch die relative Vergrößerung der Seite über den Schriftgrad seitens des Benutzers die Grafiken verlustbehaftet (durchs Vergrößern) angezeigt werden. Dies ist aber verschmerzbar, in Anbetracht der Tatsache, dass das grundlegende Layout dabei vollständig erhalten bleibt.
Der eigentliche Punkt an der Sache ist jetzt aber folgender: Im Template verwende ich sehr viele Designelemente, die mittels background-image in absoluten und relativen DIVs positioniert sind. Beim Vergrößern des Schriftgrades im Browser "wachsen" alle Container brav und vor allem korrekt mit, die Hintergrundgrafiken in den DIVs bleiben davon aber unangetastet in der Originalgröße. Somit wird das Design wieder "zerschossen".
Also hab ich mich via Google ein wenig schlau gemacht, ob und wie man Hintergrundgrafiken in elastischen Layouts mit der Schriftgröße mitskalieren lassen kann - die gefundenen "Antworten" fielen zu 100% negativ aus: nicht möglich;
Nun meine Frage: Wie geht ihr hier vor? Gibt's vielleicht doch eine Möglichkeit, die Hintergrundgrafiken mitskalieren zu lassen?
Oder in dem Fall eher bei einem fixen Layout bleiben und die Barrierefreiheit außen vor lassen (was aber eigentlich nicht in meinem Sinne ist)?
Schade wär's, weil ich meine neue Seite auf die aktuellsten Standards und eben auch auf Barrierefreiheit anpassen will/wollte.
Bin gespannt auf eure Antworten :D
Danke und beste Grüße
PS: Ich hab die Frage auch im PSD-Tutorials-Forum gepostet; Sollte es dort eine passende und wissenswerte Antwort geben, werde ich diese zum Wohl der Allgemeinheit auch hier verlinken/posten...denn vllt gibt's ja auch noch andere außer mir, die an diesem Thema interessiert sind ;)
Edit: Eine Lösung wär schon mal folgende CSS-Eigenschaft:
http://www.w3.org/TR/css3-background/#the-background-size
Allerdings ist das CSS3, dann wissen wir ja, was das für aktuelle Browser bedeutet =/