Fehler bei Nutzerfreundlichkeit auf Mobilgeräten

    Hallo und guten Abend,

    nach der Umstellung auf Joomla 4 und ein neues Template bekomme ich immer mehr Fehlermeldungen von Google. Es scheint auf vielen Seiten Fehler zu geben. Der eigentliche Fehler wird sicher nur einer oder so sein. Dieser findet sich aber sicherlich auf allen Seiten wieder. Mein Problem liegt darin, dass ich die Fehler nicht wirklich finden kann.

    Betroffen ist nur die mobile Ansicht. Mit Lighthouse habe ich schon versucht das Problem einzugrenzen. Auch auf der Seite selbst habe ich schon gesucht. Weiß aber auch nicht genau wie ich dabei vorgehen muss.

    Bemängelte Seiten wären zum Beispiel:

    https://www.vnv-urbex.de/bunkeranlagen-…d-heiliger-berg

    https://www.vnv-urbex.de/altbergbau/bergbau-mundloecher

    Ich gehe stark davon aus, dass es nicht bei den 113 Seiten bleiben wird. Nach und nach werden sicherlich alle bemängelt.

    Wie kann ich die Elemente, Texte usw. finden?

    LG und Danke

    Versuch mal JCHOptimize. Spart dir ne menge Arbeit und du kannst herausfinden was welche Einstellung im Plugin bewirkt. Wenn du nicht mit einer Drittanbieter-App arbeiten möchtest, kannst du die vom Plugin geänderten Anpassungen danach manuell durchführen und das Plugin wieder deinstallieren.

    Hey,

    wie kann JCH die Größe des Textes anpassen oder zu nah beieinander liegende Elemente anpassen? Ich dachte immer die Erweiterung optimiert nur CSS Dateien, JS etc.

    Ich kann es mal probieren aber mein Template von Joomlaplates unterstützt bereits JS und CSS minimieren nicht, dass das kollidiert.

    LG

    Also dieses JCH funktioniert nicht wirklich. Es fehlen dann Buttons oder der Slider auf der Startseite sieht so aus...

    Hab es mit der Voreinstellung Optimum probiert.

    Ich hatte das auch mal in meiner Joomla 3 Version in Gebrauch. Ich konnte da aber auch keinen wirklichen Mehrwert feststellen.

    Bzgl. "Anklickbare Elemente liegen zu dicht aneinander" und "Text ist zu klein zum Lesen" habe ich auch so meine Erfahrungen gemacht. Diesen Hinweis erhalte ich auch alle 2 bis 3 Wochen für einige wenige URLs. Diese Seiten unterscheiden sich aber hinsichtlich dieser Hinweise nicht von den anderen Seiten, die bisher nie moniert worden sind. Allerdings sind es bei dir 113 Seiten. Mmh...

    Lasse ich die monierten URLs ohne jegliche Änderung erneut überprüfen, dann wird mir gemeldet, dass der Fehler behoben sei.

    Sehr merkwürdig!

    Ich habe auf Testseiten die Abstände auch schon besonders groß gemacht, was Google aber nicht davon abgehalten hat, die Seiten erneut zu monieren.

    Natürlich könnten Elemente auch wirklich mal zu dicht aneinanderliegen. Überprüfe auch Links und Buttons innerhalb des Textes und nicht nur Menüpunkte und Untermenüpunkte!

    Und zu breiter Bildschriminhalt lässt sich ja schnell überprüfen. Manchmal ist einfach nur die Überschrift zu lang.


    Zitat von vnv-urbex

    Also dieses JCH funktioniert nicht wirklich. Es fehlen dann Buttons oder der Slider auf der Startseite sieht so aus...

    Hab es mit der Voreinstellung Optimum probiert.

    JCH muss sehr genau auf die Webseite angepasst werden. Da fängt man mit dem Zusammenfassen von css- und js- Dateien an. Eventuell muss man da bereits Ausnahmen eintragen. Keinesfalls mit Optimum anfangen. Das wäre grundverkehrt.

    Was das jetzt aber mit deinem Problem zu tun haben sollte, keine Ahnung.

    Hilfestellung: https://seo-nw.de/forum/thread/1…-konfigurieren/

    Wie JoomlaWunder schon schrieb: nicht auf Optimum gehen.

    Schau dir mal das erste Ergebnis von deiner Startseite an und dann das 2. von deiner Impressum-Seite.

    Da siehst du, dass deine Bilder sowie Modulinhalte problematisch sind. Ich würde mal nach und nach die Module deaktivieren und immer wieder testen, damit du es weiter einschränken kannst.

    1. Test Startseite:

    https://search.google.com/test/mobile-fr…%26Itemid%3D182

    2. Test Impressum:

    https://search.google.com/test/mobile-fr…R95SajJnw&hl=DE

    Zitat von WM-Loose

    Da siehst du, dass deine Bilder sowie Modulinhalte problematisch sind. Ich würde mal nach und nach die Module deaktivieren und immer wieder testen, damit du es weiter einschränken kannst.

    Ok, das werde ich machen, ich habe da auch gerade das Teilen Modul im Blick. Dort liegen die Icons auch sehr nah zusammen. Ich melde mich wieder wenn ich es einschränken konnte oder nicht.

    Klar auf 100% optimieren geht nicht aber es sind eben viele Seiten betroffen, da muss ich dann doch genauer schauen. Als Nutzer finde ich das Template am Handy schön sauber und klar. Zumindest sehe ich keine Einschränkungen :D

    Hallo,

    Wenn Du schon beim Ausputzen bist:

    Gehe mal zum Menü: Impressum > Kontaktformular > beim hovern ist: /datenschutzerklaerung bzw 404er.

    Datenschutz > Datenschutzerklärung führt zu einem Beitrag. /altbergbau/deutschland/fluss-schwerspatbergbau/schwerspatgrube-grubenfeld-ik

    Liebe Grüße

    Christine

    Zitat von vnv-urbex

    Wäre es sinnvoll alle Schriften auf rem einzustellen?

    Jedenfalls heutzutage. Man setzt 1 Basis-Größe in Pixeln, wenn man das dem Browser nicht überlassen will, die derzeit meist 16 Pixel setzen.

    Code
    :root {
  font-size: 20px;
}

    (Ich mags gerne üppiger ;) )

    Wenn man dann Schriftgrößen variieren will, macht man das ausschließlich in rem (= bezogen auf die Basis-Größe.

    Bootstrap 5 hat dann noch ein cleveres Feature dabei, um z.B. eine H1-Überschrift, die für große Bildschirme mit 2.5rem angegeben wurde, für kleinere Bildschirme via CSS runterzurechnen, da das für ein Smartphone viel zu groß wäre. Niemals geht die Schrift aber unter die 1rem, außer man forciert das explizit per CSS.

    Wie immer bei so was, ist das natürlich per SCSS viel leichter hinzubekommen als im puren CSS.

    Ein Beispiel-CSS

    Code
    h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

    Unterhalb 1200px wird also anhand der Bildschirmbreite (vw = Viewport-Width) dynamisch runtergerechnet.

    Ohne SCSS-Magie muss man sich die calc-Werte leider selbst austüfteln.

    Das geht auch für paddings und margins.

    EDIT: Um das "Überbreiten" etwas zu relativieren. Das stimmt zwar, dass bei dir z.B. bei 360px Breite unten gelegentlich ein Scrollbalken erscheint. Aber das ist nun wirklich nix Relevantes. Es geht dabei um ein paar Pixelchen, die man damit scrollen kann. Keinesfalls aber um Inhalte, die nicht zu sehen sind. Kaum jemandem wird das auffallen, außer einer G-Maschine. Wird halt irgendein Bildchen, Modul oder so einen Ticken zu viel Breite, Matrgin oder ähnlich haben.

    Und in einer Zeit, wo alle Geräte bequem zoomen können, wenns denn wirklich nötig ist, sind auch Angaben zu "Schriftgröße zu klein" deutlich zu hinterfragen. Viel wichtiger wären A11y-Aspekte, bspw. Kontraste und so Dinge zu bemängeln von G, wenn zu bemängeln.

    Hey, das habe ich gerade geändert. Da hatte ich die Menüpunkte im Schattenmenü noch nicht erstellt. Danke dir

    Zitat von Re:Later

    Wenn man dann Schriftgrößen variieren will, macht man das ausschließlich in rem (= bezogen auf die Basis-Größe.

    Hey, die Schriften habe ich gestern alle auf rem angepasst, bzw die wo noch auf PX standen. Waren nicht mehr so viel und das kann ich alles im Template anpassen. Das sollte jetzt eigentlich passen.

    Zitat von WM-Loose

    Ich habe aber auch dein Template in Verdacht.

    Was passiert wenn du auf das Joomla Standard Template Cassiopeia umschaltest und die mobiltauglichkeit testest?

    Zitat von JoomlaWunder

    Und wenn du mal folgendes in der robots.txt ergänzt:


    Allow: /cache/astroid/

    Die zwei Sachen werde ich probieren, wenn ich mit den Modulen abschalten nicht weiter gekommen bin,

    Zitat von Elwood

    Bitte auch Crossposting erwähnen:


    https://www.joomlaplates.de/forum/joomla-4…iele-links.html

    Das ist ein ganz anderes Thema. Es geht dort um das Menü, welches die ganzen Links verursacht im SEO Tool. Hier gehts um die Fehlermeldungen von Google. Die Links sind bereits erledigt.

    Sonst danke für die Antworten aber ich muss die jetzt erst mal Stück für Stück abarbeiten. Melde mich, sobald ich mehr weiß.

    Also ich habe jetzt mal auf einer beanstandeten Seite die Module, verwandte Artikel und Teile deaktiviert. Dann die Prüfung erneut ausgeführt und es gab keine Beanstandung mehr.

    Also war klar, es musste eins der beiden Module sein. Ich habe dann wieder eins nach dem anderen aktiviert und jedes mal getestet. Jetzt sind beide wieder aktiviert aber es kommt keine Beanstandung mehr.

    Ich warte jetzt mal ab, aber Fakt ist nach Deaktivierung der Modul war das Ergebnis positiv. Wenn wieder eine Beanstandung kommt, schalte ich noch mal das Teilen Modul ab.

    Zitat von Re:Later

    EDIT: Um das "Überbreiten" etwas zu relativieren. Das stimmt zwar, dass bei dir z.B. bei 360px Breite unten gelegentlich ein Scrollbalken erscheint. Aber das ist nun wirklich nix Relevantes. Es geht dabei um ein paar Pixelchen, die man damit scrollen kann. Keinesfalls aber um Inhalte, die nicht zu sehen sind. Kaum jemandem wird das auffallen, außer einer G-Maschine. Wird halt irgendein Bildchen, Modul oder so einen Ticken zu viel Breite, Matrgin oder ähnlich haben.

    Ja bis 300px ist mir auch kein großes Ausbrechen von Elementen aufgefallen.

    Ich teste meist so. Am Beispiel Astroid:

    - Öffne den Browser-Inspektor im Firefox.

    - Öffne das "Bildschirmbreiten testen". Spiele mit Breakpoints rum und achte darauf, ob z.B. unten ein Scrollbalken auftaucht. Ich muss dazu sagen, dass ich mir die Geräteliste so erweitert habe, dass das immer alles ins Browserfenster passt, ohne jedesmal blöd rauf runter scrollen zu müssen. Macht's etwas leichter. Oder gleich die "Benutzerdefiniert"-Einstellung und das Testen-Fenster händisch kleiner/größer machen.

    - Zuerst klicke ich im Inspektor mit rechter Maus auf eine der <section>-Tags und wähle "Knoten löschen". Das HTML wird entfernt. Ist danach der Scrollbalken noch da, weiß ich mindestens, dass zusätzlich noch eine ander Section beteiligt sein könnte.

    - Mach die nächste Section, schaue, ob Scrollbalken noch da usw.

    - Ab und zu mal Seite zwischendrin neu laden, wenn ich komplett Überblick verloren habe ;)

    - Na ja und so hangel ich mich dann eben durch mit "Knoten löschen", auch über die Unter-Elemente, wenn ich mal die richtige, zu breite Section gefunden habe. Die Sections selbst und erste innere Bootstrap-Container sind meist eh OK, wenn man am Bootstrap-Core-CSS nicht zu sehr rumgefeilt hat.