Responsive Website mit media queries oder auto-fit?

[Martinus33]

Hallo,
ich habe ein paar kleine Wordpress-Websites, die alle das gleiche Layout haben und die zur Zeit über Wordpress + prof. Theme automatisch responsive sind (vermutlich ein ins Theme integriertes CSS-Framework).

Ich will nun weg von WP/Theme die Sites neu erstellen als "statische" Sites nur mit HTML und CSS, vor allem auch mit CSS Grid. Nachdem ich mich in HTML und CSS etwas eingearbeitet habe (bin kein Webdesigner) stellt sich die Frage, wie ich die Sites responsive machen soll, basierend auf CSS grid.

Zum einen gibt es die guten alten media queries, die angesichts der immer vielfältigeren Größen bei Mobilgeräten und Tablets offenbar nicht mehr ganz so beliebt sind wie früher. Zum anderen gibt es in CSS seit ein paar Jahren auto-fit plus minmax, also z.B.

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Mit letzterem scheint die Anpassung noch einfacher und perfekter an all die versch. Viewports zu funktionieren als wie mit MQ. Es klingt fast zu schön, um wahr zu sein. Ich frage mich daher, ob es nicht doch - allgemein oder zumindest für mein Layout - Haken gibt. Die Beispiele für auto-fit plus minmax sind fast immer solche mit Bildergalerien oder anderen gleich großen Elementen, z.B. "cards".

Meine Sites haben umfangreiche Artikel (viel Text, Bilder, Überschriften ect.), sind 960px auf desktop breit und sind so aufgebaut:

grid-template-areas:
"header header header"
"nav-hor nav-hor nav-hor"
"nav-vert article sidebar"
"footer footer footer";

grid-template-columns: 1fr 2fr 1fr;

Ist für so eine typische Artikel-Site mit header, horiz. Navi, vertikaler Navi links, Sidebar rechts (etwas Text und Bilder) und Footer auto-fit plus minmax ebenso geeignet wie für die meist gezeigten Bildergalerien oder ähnlichen Content?
Ein Live-Beispiel wäre http://www.der-weg-nach-hause.de/was-ist-esoterik

 

[Madman1209]

Hi,

Ich will nun weg von WP/Theme die Sites neu erstellen als "statische" Sites nur mit HTML und CSS, vor allem auch mit CSS Grid

darf man fragen warum du das möchtest?

Zum einen gibt es die guten alten media queries, die angesichts der immer vielfältigeren Größen bei Mobilgeräten und Tablets offenbar nicht mehr ganz so beliebt sind wie früher

nö, das ist nach wie vor sinnvoll damit - wo genau sagt jemand etwas Gegenteiliges?

VG,
Mad

 

[dermoritz]

Aus meiner Sicht kommst du im Allgemeinen nicht ohne Media Queries aus. Je nach Art der Webseite hast du eben für verschiedene Größen z.B. ein ganz anderes Navigationsmenü oder komplett anderen Aufbau.

Für bestimmte Elemente - z.B. den content Bereich kann aber Auto Fit die bessere Wahl sein.

• Also erstmal überlegen wie deine Seite so auf Desktop, Tablet, Handy aussehen soll
• zweitens Umsetzen und die einfach beide Möglichkeiten offen halten und eben einsetzen

Es gibt keine gute und schlechte Lösung - nur die mit der du am schnellsten zum Ziel kommst und dafür musst du die Werkzeuge kennen - beschäftige dich mit beidem.

 

[Martinus33]

Aus meiner Sicht kommst du im Allgemeinen nicht ohne Media Queries aus. Je nach Art der Webseite hast du eben für verschiedene Größen z.B. ein ganz anderes Navigationsmenü oder komplett anderen Aufbau.

Was den anderen Aufbau angeht, du meinst z.B. die Tatsache, dass mit auto-fit die Reihenfolge der Elemente immer gleich bleibt (wie im HTML-Code) und daher für alle Viewports/Geräte immer die gleiche bleiben müsste, auch wenn man es für best. Viewports gerne anders hätte?

Daran habe ich auch schon gedacht, in meinem Fall müsste das aber immer passen mit der gegebenen Reihenfolge. Header und die zwei Navis immer als Erstes, dann der Artikel, dann Sidebar und Footer.
Falls es nicht so wäre, gäbe es aber andere Möglichkeiten wegen der Reihenfolge, irgendwas mit z-index, glaube ich.

Die Navis, vor allem die horizontale Navi, ist meines Wissens immer ein extra Punkt beim reponsive Design, müsste also in jedem Fall extra behandelt werden, egal, ob MQ oder auto-fit.

• Also erstmal überlegen wie deine Seite so auf Desktop, Tablet, Handy aussehen soll
• zweitens Umsetzen und die einfach beide Möglichkeiten offen halten und eben einsetzen

Wie die Seiten responsive aussehen sollen, steht bereits fest, es gibt sie ja bereits responsive, deshalb der Link zu einer typischen Seite. Ich denke, das passt responsive so, habe jedenfalls nie Beschwerden gehört und so soll es dann auch als statische Site responsive aussehen.

Die horizontale Navi wird fürs Smartphone zu einer vertikalen Dropdown-Navi verändert. Ich finde das gut so, ein Icon zum Anklicken fände ich nicht so gut.

 

[dermoritz]

Also wenn du es 1:1 nachbauen willst, würde ich mich nach dem original-css richten wie es da gemacht ist und nicht lange über den besseren Ansatz nachdenken.

Ich habs mir mal angeschaut, finde die Navigation auf Handygröße und auch den Aufbau fast am besten.
Im aktuellen Design sind die die viewports auch etwas falsch: Handy (Galaxy S10) Querformat schaltet auf desktop und das ist dann etwas verschoben. Entweder brauchst einen 3. viewport oder schaltest viel früher auf handy.

 

[Madman1209]

Hi,

darf man trotzdem die Frage nochmal stellen: wenn jetzt alles so ist wie es sein soll und du es 1:1 nachbauen willst... warum das genau?

VG,
Mad

 

[Martinus33]

Danke, dass du es mal direkt angeschaut hast.

Also wenn du es 1:1 nachbauen willst, würde ich mich nach dem original-css richten wie es da gemacht ist und nicht lange über den besseren Ansatz nachdenken.

Das geht leider nicht, denn im Moment macht das ja das Theme automatisch, vermutlich mit einem eingebundenen CSS-Framework. Bei der Umstellung auf "statische" Site ohne WP/Theme fällt das dann weg. Am jetzigen Responsive-Ergebnis kann ich mich orientieren, aber der technische Weg wird ein ganz anderer werden müssen, zumal ich alles möglichst einfach halten will (möglichst kein JavaScript oder CSS-Frameworks).

Ich habs mir mal angeschaut, finde die Navigation auf Handygröße und auch den Aufbau fast am besten.
Im aktuellen Design sind die die viewports auch etwas falsch: Handy (Galaxy S10) Querformat schaltet auf desktop und das ist dann etwas verschoben. Entweder brauchst einen 3. viewport oder schaltest viel früher auf handy.

Ja, die vertikale Dropdown-Navi bei kleinen Viewports finde ich auch gut, wobei ich keine Ahnung habe, wie das Theme das erstellt.
Bei mittelgroßen Viewports wird die horizontale Navi auf zwei Zeilen umgebrochen. "Schön" ist das nicht, na ja.

Das Galaxy S10 als neueres Smartphone ist schlicht bislang vergessen worden, da ich die Theme-Einstellungen über die Jahre immer nur übernommen und nichts weiter angepasst habe.

 

[dermoritz]

möglichst kein JavaScript oder CSS-Frameworks

Ich würde das nicht so kategorisch ablehnen. Einfach halten bedeutet in der Informatik eben genau auf Dinge zurückgreifen die funktionieren. Es ist ein großer Trugschluss zu glauben dass es selbst zu machen die Dinge einfach hält.
Javascript brauchst wahrscheinlich wirklich kaum. Bei CSS würde ich aber auf so etwas wie Bootstrap wechseln denn damit hast schon mal ein gutes "Grid." Also dein Basislayout ist mit Bootstrap sehr einfach gemacht.

Das geht leider nicht, denn im Moment macht das ja das Theme automatisch, vermutlich mit einem eingebundenen CSS-Framework.

Nichts hindert dich daran dir das CSS anzuschauen und es zu nutzen oder gar 1:1 zu kopieren:
F12-Tab "css" in Firefox. Für deine Seite hab ich da 4 CSS Dateien:

Und da sieht man auch schön die Media queries. Du kannst direkt die Zahlen ändern und so vielleicht die Fehler beheben (nach neuladen ist es dann natürlich wieder weg).

Wenn ich richtig verstanden habe, ist es auf Wordpress-Basis. Wordpress ist Open Source. Es hindert dich nicht daran an wirklich alle Quellen zu kommen denke ich. Ich würde wirklich mir das sehr genau anschauen und überlegen was ich ändern würde.

Ich würde mir wirklich anschauen wie es

 

[Martinus33]

Ich würde das nicht so kategorisch ablehnen. Einfach halten bedeutet in der Informatik eben genau auf Dinge zurückgreifen die funktionieren. Es ist ein großer Trugschluss zu glauben dass es selbst zu machen die Dinge einfach hält.
Javascript brauchst wahrscheinlich wirklich kaum. Bei CSS würde ich aber auf so etwas wie Bootstrap wechseln denn damit hast schon mal ein gutes "Grid." Also dein Basislayout ist mit Bootstrap sehr einfach gemacht.

"Selbst machen" heißt für mich in erster Linie, nicht mehr WP und ein extra Theme zu nutzen, zumal ich es für meine kleinen, im Layout einheitlichen Artikel-Sites eigentlich gar nicht brauche. Hauptgrund ist aber, dass ich nicht mehr ständig den (Nicht-) "Aktionen" des Themeherstellers und der WP-Entwickler hinterherlaufen und abhängig sein will. Und mich immer wieder mit neuen Themen befassen muss.

Ein stabiles, technisch möglichst einfaches und für mich gut nachvollziehbares Layout, dessen CSS ich auch dann noch verstehe, wenn ich mich nur hin und wieder damit beschäftige, in zeitlich größeren Abständen.

Ich erstelle mit Hilfe von zwei Büchern und diversen Webseiten über CSS gerade relativ detaillierte Unterlagen zu CSS (Basics, Grid, Responsive), worauf ich immer wieder zurückgreifen und mich schnell einlesen kann.

Wenn ich "mein" Grid mal erstellt habe, kann ich es für alle fünf Sites anwenden. Und da das CSS-Grid eine relativ einfache und für mich ideale Technik ist, hoffte ich, auf Frameworks verzichten zu können. Wenn ich es nicht ohne hinbekomme, kann ich noch immer darauf zurückgreifen. Ich kann zu Bootstrap nichts weiter sagen, aber es ist halt vermutlich auch wieder ein "Ding", mit dem man sich auseinandersetzen muss und so gesehen die Dinge einerseits vereinfacht, aber erstmal "erobert" sein will.

Nichts hindert dich daran dir das CSS anzuschauen und es zu nutzen oder gar 1:1 zu kopieren:
F12-Tab "css" in Firefox. Für deine Seite hab ich da 4 CSS Dateien:

Vier? Seltsam.
Das Theme hat einen Visual Editor, wo man alle möglichen Designs auf einfache Weise erstellen kann (klicken, auswählen, Werte angeben) und damit CSS erstellt wird im Hintergrund.
Und es gibt mein eigenes Stylesheet, das relativ lange geworden ist.
Beides scheint in die erste der im FF angezeigten vier CSS-Dateien einzufließen (die mit 363 Regeln).

Die anderen drei CSS-Dateien entstehen ohne mein bewusstes "CSS-Zutun" (?). Die zweite scheint das im Layout-Editor des Themes erstelle Grob-Layout wiederzuspiegeln.

Wenn ich richtig verstanden habe, ist es auf Wordpress-Basis. Wordpress ist Open Source. Es hindert dich nicht daran an wirklich alle Quellen zu kommen denke ich. Ich würde wirklich mir das sehr genau anschauen und überlegen was ich ändern würde.

Ja, Wordpress, wobei das CSS ausschließlich mit dem Theme gemacht wird.

Im Grunde will ich alles nur nachbauen und am Ergebnis gar nichts ändern, aber ohne WP/Theme muss und will ich das halt mit anderen, mehr oder weniger manuellen Mitteln machen (CSS-grid + responsive-Lösung).