Responsive Design

    Hallo zusammen,


    ich re-erstelle gerade meine Website mit einem eigenen Template und komm eigentlich gut voran. Allerdings fehlt mir in meiner Ausführung noch das »Responsive Design«. Daher würde ich mich sehr über eure Erfahrungen interessieren. Das Layout ist derzeit für einen Screen > 1170 px ausgelegt und ich arbeite mit CSS Grid. Das schöne ist, dass ich damit ja relativ flexibel bin über die »media queries«. Allerdings habe ich jetzt auch schon gelesen, dass es diverse Layout-Vorschläge gibt. Bspw. man unterteilt seine Seite gleich in 12 Spalten und arbeitet mit »fr« damit das dynamisch angepasst wird. Ist natürlich eine schöne Sache aber ich seh wohl den Wald vor lauter Bäumen nicht, da ich nicht weiß wie ich das dann quasi umsetzen könnte. Ich hätte jetzt mit definierten Breakpoints gearbeitet bspw. für Mobile Geräte und ggf. Tablets.

    Daher meine Frage:


    • Ist CSS Grid hier schon mal ein guter Start (ich denke ja)
    • Wie sollte ich das Responsive Design am Besten durchführen?


    Danke schon im Voraus für Eure Zeit.
    Tobi

    Wenn Du CSS Grid richtig mit allen Klassen verwendest, solltest es automatisch auch responsive sein.
    https://developer.mozilla.org/…s/Web/CSS/CSS_Grid_Layout


    Es ist kontaproduktiv aus einem statischen Layout nachträglich ein responsives zu machen. Auch das Thema "Mobile first" kommt dann zu kurz.

    Hey Tom,

    danke für die Info. Derzeit habe ich mein Grid leider nicht "responsive". Hier ein Ausschnitt:


    Wie du siehst ist die Seite in drei Spalten eingeteilt wobei die mittlere eine Breite von 1170px aufweist. Soll ungefähr so werden: https://Holzmann-cfd.com, nur das ich das eben selber machen möchte (hauptsächlich aus Eigeninteresse).


    Ich dachte mir, dass ich den Container mit einer media-query neu gestalte. Wäre dieses vorgehen falsch?
    Tobi

    Das Erste was Du machen solltest ist, niermals mit festen Breiten zu arbeiten, sonden mit max-width und oder min-width. Auch mit prozentualen Größen kommt man dann besser zurecht.

    In meinem Link wird gezeigt wie Du das mit CSS-Klassen lösen kannst.


    Ich bin jetzt kein Fan von CSS-Grid, daher wäre Flexbox mein favorisiertes Tool.


    Schon mal überlegt ein CSS-Framework einzusetzen? Da Du eh schon Joomla 4 testest, wäre Bootstrap 4 ein Blick wert.

    Hallo Tom,

    nein hab mir noch keine Gedanken bezüglich CSS Framework gemacht. Meine Seite ist nichts spezielles und ich habe keine großen Anforderungen. Daher war auch mein Gedanke alles so schlicht wie möglich zu halten. Ob ich das dann letztlich so umsetze ist wieder auf einem anderen Blatt beschrieben. Aber ich teste eben gerade mit Joomla 4 ein paar Dinge.

    Danke für Deine Info.
    Tobi

    Habe meine Firmensite einst komplett mit der Hand responsive gemacht. War eine Heidenarbeit und werde ich nie wieder machen!

    Recht kurz danach dann auf meiner Tutorialsite mit Bootstrap gearbeitet. Das war so fein, einfach und schnell, dass ich es nur jeden empfehlen kann!


    Zumal es zu Bootstrap eine 1A Dokumentation gibt:

    http://holdirbootstrap.de/


    CSS-Grid kenne ich nicht. Heutige Webseiten müssen aber responsive sein. Alternativ kannst du natürlich für verschiedene Bildschirmgrößen eigene Webseiten erstellen. Da es aber sehr viele Größen gibt, die berücksichtigt werden müssten, lohnt das nicht wirklich. Allenfalls zu einigen speziellen Standard-Geräten vielleicht und dann auch nur, wenn man dabei spezielle Dinge, die eben nur bei bestimmten Größen passen, verarbeitet.

    Ebenfalls alternativ ist die Möglichkeit immer 100% der Breite zu benutzen. Egal was da kommt. Das geht sehr gut mit dem Grid-System, bietet sich aber eher für Shoppingseiten an und ist tatsächlich nicht einfach umzusetzen.


    Hier ein paar Ansätze für verschiedene Designtyps:

    https://blog.kulturbanause.de/…site-fixed-fluid-elastic/



    Axel

    Zitat von Shor-ty

    Daher war auch mein Gedanke alles so schlicht wie möglich zu halten.

    Das hat ja nichts mit der Funktionalität (Responsivität) zu tun. Ist aber auch egal, wenn es ums Lernen geht. Dann versuche den Weg von Statisch auf Fluid und freu Dich wenn Du eins von vielen CSS-Frameworks entdeckst und die Möglichkeiten die sich plötzlich ergeben.