We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 32942
    • 141 Posts
    Hallo Leute!

    Langsam aber sicher, kommt die alte, aber immer noch aktuelle Diskussion auf, die da heißt: "Für welche Auflösung soll ich »optimieren« und welche Breite soll mein Layout haben?"

    Hier findet man eine Übersicht über einige vorhandene Techniken: http://coda.co.za/archive/20050616/17:11:16

    Das Problem ist das mich diese sog. Elastische-Layouts noch nicht 100% überzeugt haben. Denn bei so einer Lösung versucht man etwas nachzumachen, was von den Browser erwartet werden sollte. Opera kann es schon, für FF gibt es Plugins und IE 7 kann es auch. Und die Browser-Lösungen sind deswegen besser, da sie die Bilder und Grafiken ordentlich vergrößern bzw. verkleinern können und weil sie in der Regel nicht so das Layout zerschießen wie die selbstgemachten Lösungen.

    Browser-Zoom = Der Browser zoomt regelrecht die gesamt Seite.
    Font-Zoom = Der Schriftgrad wird verändert, aber alles andere bleibt unverändert.


    Das Problem ob "em"(flexible) oder "px"(fixe) programmierung des Webauftrittes verwendet wird hängt absolut vom CONTENT ab.

    Zum Beispiel:
    Wenn ein Klient die Website "zoomt" (Mit der jeweiligen Browser Zoom-Technik), dann ist es sehr von vorteil Bildern(img) oder Objekten(object) keinen "px"(fixen) Wert zu vergeben zugunsten des Layouts. Da zum Beispiel im FireFox der Text grösser wird, aber die Bilder sich nicht der Designaenderung anpassen. Sichtbar wird dies hier: http://greenpeace-berlin.de

    Browser:Content-Zoom(Layout-Zoom) eingesetzt in Opera und IE7.
    Beim Layout-Zoom wird der gesamte Inhalt der Website tatsaechlich gezoomt, dh. es gibt eine einheitliche vergroesserung und damit bessere Kompatibilität bei allen Anzeigen(Displays: Monitor,Beamer,Handy).
    Dafuer muss der User aber manuell die groesse im Browser einstellen.
    Fuer Handy oder andere medien-typen empfehle ich auch seperate Style-Sheets um inhalte zu verbergen etc. Leider sind diese Modernen Browser nicht bei 100% der Klientel in Gebrauch.

    Problem:
    Bei Fixen-Layouts wächst alles proportional zu einander.
    Jedoch bei Elastischen-Layouts wächst der Content unproportional zum layout. Das Layout bleibt erhalten und wirkt daher zu klein für die grosse schrift. Das layout sieht verkorkst aus.

    Um dieses Problem zu loesen erfordert es die Benutzung von Javascript auf der Website, jedoch kann dies zu einer nicht-validierung seitens w3c.org kommen, zudem wird die Barrierefreiheit eingeschraenkt. Also nicht zu empehlen.

    Browser:Content-Font-Zoom(Font-Zoom) eingesetzt in IE4-6,FF, und allen anderen Browsern. Diese art von Browser-Zoom ist leider die meist vebreiteteste. Ich finde die Vergroesserung der Typografie(Font-Zoom) sollte auf der Website selbst erfolgen: landtag.nrw.de
    Meiner Meinung nach ist die Verwendung von "em" für Layer und Layout im Grunde falsch, da diese für Typografie gedacht wurden.
    Ihr messt einen Meter ja auch nicht in Schuhgrössen !
    Also, Flexibles Layout Nein! Aber, Dynamisches Layout Ja!

    Um eine kleine immerwiederkehrende Frage zu klaeren:
    Auch wenn es komisch klingt, das Layout ist des Inhalts könig! Das bedeutet der Inhalt sollte sich dem Layout des entrechenden Medien-Typen anpassen. Nicht umsonst liegen HTML dateien aus servern, sie existieren um zu DIENEN.
    Anders herum: Ein Haus waechst ja auch nicht wenn der Besucher groesser ist, oder ?

    Worauf es ankommt ist am Ende die Optik in Harmonie zu bringen mit dem Inhalt.
    Eine Problemstellung auf die es konkret noch keine passende antwort gibt, jedoch viele lösungsansätze.
      • 14828
      • 7 Posts
      Ich habe mich die letzte Zeit auch mit genau diesem Thema beschäftigt und kann dir nur voll und ganz zustimmen. Auch habe ich durch deinen Artikel wieder etwas dazugelernt.

      Vielen Dank
        • 24495
        • 407 Posts
        Typografisch wäre es sinnvoll, wenn die Zeilenlänge eines Fließtextes immer gleich bliebe und dabei natürlich eine lesbare Länge hat. Dazu muss das Layout mitwachsen, inklusive aller Bilder.
        Nachteil: die Bilder krümeln und man muss in alle Richtungen scrollen.
        Bleibt das Layout in einer fixen Breite und nur der Text zoomt, wird die Zeilenlänge schnell unsinnig kurz.
        Im Sinne der Barrierefreiheit darf man auch nicht nur denken, alles sollte vergrößerbar sein. Bestimmte Sehbehinderungen brauchen die Verkleinerung (frag mich jetzt nicht nach Details).

        Ergo: wie Du’s machst, machst Du’s falsch. Es gibt derzeit keine wirklich sinnvolle Lösung über alle Anforderungen (Bildschirmgrößen/-auflösungen, Viewports, Systemstandardschriftgrößen usw. usf.). Diskutiert wurde auch schon, dass das Layout in bestimmten min/max-Dimensionen zoomen sollte und ab bestimmten Vergrößerungen/Verkleinerungen sich gänzlich ändern sollte (von 3- zu 2- oder 1-Spaltigkeit zum Bleistift). Vielleicht wirklich der sinnigste Weg.
        Ich beschäftige mich lange genug mit Barrierefreiheit, bin aber auch noch nicht beim Stein der Weisen angekommen. Also versuche ich immer mit dem Kunden das vermeintlich Beste gemeinsam rauszuarbeiten und das wird dann eben umgesetzt.
          • 32942
          • 141 Posts
          Die zur Zeit beste lösung ist es intelligente layouts zu programmieren.
          Das heisst eine css datei sorgt für di grundlegen designs, ein anderes beherbergt allgemeine medientyp basierte informationen.
          So kann man im vornherein für eine breite kundschaft ein tor öffnen. Um die Seite aber wirklich an den Nutzer und nicht an den Bildschirm anzupassen muss das layout, lernfähig und adaptiv sein.
          Adaptiv heisst es passt sich den gegebenen umständen mit der logischsten art und weise an.

          Im Praxisbeispiel wäre dies wie folgt:
          (Browser bugs und anderweitige details werden aussen vor gelassen, denn hierbei geht es um das layout und design, nicht um bugs)

          Ein Nutzer ruft eine Seite auf -> Die Seite erkennt den Nutzer und seine Bildschirmeinstellungen
          ->Daraufhin werden Spezielle css anweisungen live erzeugt und abgepeichert -> Die logischste Schlussfolgerung ist es die maximale breite und höhe zu nutzen, der Nutzer hat eine Auflösung ...
          -> Beim nächsten besucht erkennt die Seite wieder die Bildschirmeinstellungen des Benutzers und stellt eine änderung fest
          -> Es wird entsprechend die gespeicherte information aktualisiert. -> Die logischste Schlussfolgerung ist es die vorhandene Fläche anzupassen um möglichst viel information, möglichst elegant rüberzubringen.
          ADAPTIVITÄT wink

          Erfordert natürlich ein sehr viel grösseren merhaufwand, jedoch lohnt es sich nicht immer, doch diese methode is zukunftssicher und wird besser je mehr alte browser aussterben.

          Keine Vision!!
          Es gibt bereits solche layouts!!
            • 24495
            • 407 Posts
            Und Bilder sowie Schriftgrößen werden natürlich auch dynamisch angepasst ... Was nützt die Bildschirmauflösung. Du brauchst außerdem die aktuelle Größe des Browserfensters sowie die aktuelle Standardschriftgröße des Betriebssystems. Und musst Dich in jeden User reindenken können und orakeln, wie er’s gerne sehen würde. Viel Spaß. Wenn Du ein Live-Beispiel fertig hast, würde ich’s gern sehen grin