Website an Auflösungen anpassen

Öhm, mich verwundert eure Frage jetzt schon, sogar ich - nur mit besseren Grundkenntnissen in html + CSS - weiß das ... und ihr macht so was professionell ... ups

Ah ...
Soweit mein Kenntnisstand, man kann Themes so basteln, dass sie responsive sind und in verschiedenen Browser fast ähnlich/gleich aussehen.
Aber die Profis hier, werden dir bestimmt besser und genauere Infos geben.

Zitat von aent

Wir stellen uns jetzt die Frage, ob es nicht möglich ist, dass die Seite für alle Auflösungen funktioniert, ohne dass sie für jede einzelne angepasst wird.

Kurz und knapp: Nein. Zumindest nicht, wenn wir über eine optimierte Darstellung sprechen.

Stelle Dir eine ganz einfache Seite vor, nur ein DIV mit Text als Inhalt, z.B. einem Zeitungsartikel. Stelle die Seite auf einem Smartphone dar und dann auf einem 24" Retina Display. Standardmässig wird das DIV über die volle Breite des Ausgabemediums dargestellt. Die Schriftgröße gibt der Browser vor solange diese nicht explizit per CSS definiert wurde. Im Ergebnis bekommst Du auf dem 24-Zöller extrem Lange Zeilen mit winziger Schrift. Das kann und will niemand lesen. Auf dem Smartphone passen gerade einmal 4-5 Wörter in eine Zeile und Du scrollst, je nach Textmenge, bis zum Sankt-Nimmerleins-Tag.

Also nutzt man CSS um die Breite des DIVs zu beschränken, damit auf dem Retina Display die Zeilenlänge erträglich bleibt. Dann hätte man aber immer noch eine Spalte wie auf dem Smartphone. 1000 Pixel leere Fläche Links und Rechts vom Text sieht aber unmöglich aus. Also möchte man mehrere Spalten, wie in einer Zeitung, denn Platz hat man ja genug. Auf dem Smartphone muss es aber eine Spalte bleiben. Und wieder braucht es CSS und aus einem DIV müssen mehrere werden. Auf dem Retina Display sollen die DIVs dann also nebeneinander stehen, also brauchen sie Abstände (Spaltenabstand). Die zweite und Dritte Spalte (DIVs) müssen also erneut mit CSS formatiert werden. Auf dem Smartphone müssen die DIVS aber untereinander stehen und Nummer 2 und 3 dürfen keinen Abstand nach Links haben. Spätestens jetzt muss das CSS auflösungsabhängig geschrieben werden.

Hierbei orientiert man sich an den gängigen Auflösungen der Ausgabemedien und das bedingt Breakpoints, also bei welcher Bildschirmbreite haben DIV 2 und 3 keinen 'Margin' auf der linken Seite weil die DIVs untereinander stehen, wann hat jedes zweite DIV einen linken Abstand, weil die Darstellung in zwei Spalten erfolgt und wann müssen DIV 2 und 3 mit linkem Abstand definiert werden.

Das ist nur ein ganz einfaches Beispiel und verdeutlicht welcher Aufwand entsteht um eine ganze Seite anzupassen.

Zitat von Monika

Fazit: es gibt keine "festen" Bildschirmgrößen mehr für einen Designer, das ist Geschichte.

Ohne Feststellung der Auflösung scheint es mir unmöglich ein Layout optimiert darzustellen (siehe mein Beispiel oben), egal ob Mobile First oder Graceful Degradation.

Zitat von Monika

laut meiner Google Analytics Statistik haben meine NutzerInnen derzeit an die 25 verschiedene Auflösungen...
wie magst du da auf Auflösung optimieren?

Ich schätze mein Beispiel im Beitrag war nicht verständlich genug. Zweiter Versuch:

Du willst einen Fließtext (Buch, Magazin, Newsartikel) so auf eine Webseite darstellen, dass man ihn immer gut lesen kann. Wie wir aus Buchdurckerzeiten wissen, darf eine Textzeile nicht zu lang werden, also zu viele Wörter enthalten, wenn der Lesefluss nicht beeinträchtigt werden soll.

Auf dem Smartphone ist das mit einer einspaltigen Darstellung im Hochformat regelmäßig kein Problem. Eine einspaltige Darstellung auf einem Monitor mit 1920 oder 2400 und mehr Pixel ist eine einzige Spalte kontraproduktiv, selbst bei einer Skalierung der Schrift (em anstatt px), weil das nicht kontinuierlich geht (Durchschuss und Schriftgröße sind NICHT linear verwendbar). Also will man mehrere Spalten. Damit ich die Spalten nur definieren kann (margin-left, flow, display) muss ich bestimmen ab welcher Auflösung das passieren soll. Gehe ich vom Mobile First Ansatz aus definiere ich z.B. 2 Spalten ab 720px Bildschirmbreite und 3 Spalten ab 1100px.

Wie würdest Du das ohne Feststellung der Bildschirmbreite bewerkstelligen wollen?