Responsive Design – Grundsatzfrage

    Joomla Version
    5.2.5
    PHP Version
    PHP 8.3.x
    Hoster
    Lokal

    Hallo,

    ich verzweifle aktuell etwas an den Responsive-Einstellungen bei Astroid.
    Grundsätzlich gibt es schon annehmbare Ergebnisse, aber bei manchen Konstellationen kollabiert immer irgendetwas.
    Abhängig vom Grad der Verkleinerung, ob ich Seiten horizontal zusammenschiebe, bei unterschiedlichen Displaygrößen etc.

    Das ist keine Kritik an Astroid, sondern ich frage mich, wo zieht man die Grenze.
    Es ist doch zeitlich nicht machbar für jede Eventualität Einstellungen vorzunehmen, bei zigtausend Device-Optionen.

    Wie macht ihr das ?

    Wir nutzen die Funktionen von Astroid und hatten was responsiv Design angeht noch nie Probleme.

    Du formulierst auch viel zu allgemein. Wenn du Probleme hast solltest du auch detaillierte Angaben machen, was nicht funktioniert.

    Gruß Dirk

    Früher war ich unentschlossen, heute bin ich mir da nicht mehr so sicher. :/

    Es geht mir um die generelle Vorgehensweise.
    Ich bezweifle nicht die Funktionalität von Astroid.

    Das Thema Responsive habe ich immer etwas vernachlässigt, deshalb die Frage.
    Macht es Sinn bspw. auf vier bis sechs Formate zu testen, der Rest passt dann ?
    Etwas salopp formuliert.

    Ich zäume das Pferd mal von der anderen Seite auf: Ich berichte mal von meinen eigenen Erfahrungen.

    Ich habe so ca. 2015 eine alte, mit Joomla 1.0 gestartete Website auf responsiv umgearbeitet und dabei u.a. folgende Erfahrungen gemacht:

    • Größtes Problem waren die eingebundenen Bilder
      Die waren alle mit absoluten Breiten (per Inline Styles) eingebunden. Für Responsive Design brauchst Du relative Breiten. Am besten definierst Du für Deine Bildertypen ein paar eigene Klassen in Deiner user.css (oder custom.css) und arbeitest konsequent mit Klassen. Spätere Änderungen sind dann ein Klacks.
    • Nicht alles muss auf einem Smartphone oder Tablet angezeigt werden
      Manches, was auf einem breiten PC-Bildschirm gut aussieht, ergibt auf einem Smartphone keinen Sinn. Deshalb solltest Du alle Deine Module darauf abklopfen und gegebenenfalls per (Bootstrap-) Display-Klasse ausblenden.
      Beispiel: Ich habe ein kleines Wettermodul oben rechts auf der Seite, aber nur in der Desktop-Ansicht.
    • Besonders die Darstellung auf kleinen Bildschirmen profitiert sehr von einer eingeschalteten Silbentrennung.
      Das machen alle modernen Browser, wenn Du an geeigneter Stelle hyphens: auto; einsetzt, im einfachsten (aber nicht immer besten) Fall beim body-Tag.
    • Du kannst in den Entwicklertools Deines Browsers das Verhalten Deiner Seite mit der dort verfügbaren Mobilgeräte-Ansicht für verschiedene Geräte und Gerätetypen testen.
      Das funktioniert nicht zu 100 Prozent, aber für alle praktischen Fälle gut genug und genügt auf jeden Fall für die Erstkontrolle, um offensichtliche Fehldarstellungen korrigieren zu können.

    Freundliche Grüße aus Wächtersbach, Rolf Dautrich

    Zitat von Rolf Dautrich
    • Nicht alles muss auf einem Smartphone oder Tablet angezeigt werden
      Manches, was auf einem breiten PC-Bildschirm gut aussieht, ergibt auf einem Smartphone keinen Sinn. Deshalb solltest Du alle Deine Module darauf abklopfen und gegebenenfalls per (Bootstrap-) Display-Klasse ausblenden.
      Beispiel: Ich habe ein kleines Wettermodul oben rechts auf der Seite, aber nur in der Desktop-Ansicht.

    Hallo Rolf,

    meinst Du so? https://getbootstrap.com/docs/5.3/utili…hiding-elements

    Liebe Grüße
    Christine

    Vielen Dank, das hilft mir schonmal weiter. :thumbup:

    Ja, Test mit der Mobilgeräte-Ansicht habe ich durchgeführt, da eben einige Unverträglichkeiten festgestellt.

    „Nicht alles muss auf einem Smartphone oder Tablet angezeigt werden“
    Genau das muss ich noch verinnerlichen, mich vom perfektionistischem Anspruch verabschieden.

    Als Präzisionsnerd mit Satzhintergrund nicht so einfach.

    Zitat von cms_5

    Abhängig vom Grad der Verkleinerung, ob ich Seiten horizontal zusammenschiebe, bei unterschiedlichen Displaygrößen etc

    Hast du mal einen Link zu so einer kollabierten Seite?

    Bei welchen Endgeräten tritt das Problem auf?

    Reichen die Voreinstellungen im Framework nicht?


    Zitat von cms_5

    „Nicht alles muss auf einem Smartphone oder Tablet angezeigt werden“
    Genau das muss ich noch verinnerlichen, mich vom perfektionistischem Anspruch verabschieden.

    Das kann man auch bequem in den Settings einstellen: