Seite für mobile Geräte optimieren

springers54 commented 5 years ago

Ich würde dir gern Zugriffsrechte geben, aber dazu brauche ich eine Google-Adresse von dir, sonst geht das nicht.

joergsteinhauer commented 5 years ago

qubicspace@gmail.com

joergsteinhauer commented 5 years ago

Anscheinend gibt oder gab es Probleme mit Forum-Seiten, explizit mit https://zen-reiki.de/forum/topic/vorstellung-3/

Ich habe in der Google Search Console etwas rumgespielt, getestet und die neu crawlen lassen. Ein manueller Test gab grünes Licht, also ich nehme an, dass das Problem bald erledigt ist. Google muss die Seite neu crawlen, das könnte dauern.

Mir scheint, als würde der Google Bot eine teils ungestylte Seite sehen. Evtl. werden die CSS Dateien nicht schnell genug geladen, sodass Google meckert. Wenn ich die Seite aber manuell aufrufe, sehe ich alles gestylt.

Google meckert ja zwei Sachen an:

Wenn ich die Seite manuell teste, is alles ok.

Wir warten erstmal etwas ab, evtl. gibt es nach dem neuen crawlen Entwarnung.

springers54 commented 5 years ago

grafik

[x] Kannst du es bitte einstellen, dass die Bilder auf dem Handy bei class=alignleft_lehrer nicht in 300 Breite gezeigt werden? Hier reichen die 150 px als Breite aus. Oder sag, wie wir die Bilder anders einbinden können, dass der Text umfließt und die Bildgröße responsiv ist.

joergsteinhauer commented 5 years ago

Das initiale Problem ist gelöst: https://search.google.com/search-console/mobile-usability?resource_id=https%3A%2F%2Fzen-reiki.de%2F&hl=de

springers54 commented 5 years ago

Ja, wir haben im Forum die Brotkrumen weggenommen. Das sollte eines der Probleme gewesen sein. Die Breite der Bilder geht jetzt über die Hälfte des Handybildschirmes, schon besser. Könnte vielleicht etwas kleiner werden?

joergsteinhauer commented 5 years ago

Ist hier noch was zu tun? Die Vorschaubilder sind ja nun max. 150px breit.

springers54 commented 5 years ago

Siehe #201. die Bildgrößen gehen immer noch nicht.

Handy Hochformat Bildgrößenfestlegung:

[ ] Bilderbreite 1/3 auf den Übersichtsseiten, ist im Moment 1/2
[ ] Bilderbreite auf den Detailseiten 1/2

Hier ein Beispiel, wo es nicht funktioniert: https://zen-reiki.de/bereich/meinung/warum-ich-reiki-lehrer-bin/

grafik

Hier hatte ich einen spacer eingefügt, um einen Abstand zu erzwingen, was auf dem Handy offensichtlich gar nicht funktioniert.

Die Probleme aus #198 ziehen sich also überall durch grafik

joergsteinhauer commented 5 years ago

Dei eBsp-Seite https://zen-reiki.de/bereich/meinung/warum-ich-reiki-lehrer-bin/ ist keine Übersichtsseite. Auch kein Archiv. Sondern ein "post". Im #198 haben wir festgelegt, das die Vorschaubilder eben nur Übersichtsseiten 150px breit werden. Erinnerst du dich? Lese bitte dort die Kommentare durch.

Im #198 hatte ich übrigens den Versuch gemacht, die Vorschau-Bilder überall auf 150px zu reduzieren - Ergebnis war eine Aufregung deinerseits, dass es so nicht geht.

Was also tun? Ich kann durchaus eine neue Klasse anlegen, die das Bild auf 150px begrenzt. Ihr müsst die Klassen dann immer manuell einfügen. Was aber ziemlich blöd ist. Viel mehr sollte man auf die unterschiedlichen Seitentypen angehen (Übersichtsseite, Detailseite etc) und somit die Bildgrößen steuern. Entscheidung liegt bei euch.

Die Probleme aus #198 ziehen sich also überall durch

Na ist doch logisch. Das Problem besteht ja weiterhin! Wie in #198 tausend mal erklärt, hängt das mit dem gefloateten Bild zusammen. Dein spaces bringt gar nichts, zumindest nicht im responsiven Verhalten. Bei Desktop UND dieser spezifischen Textlänge mag es gehen, aber nicht wenn die Seite dann andere Dimensionen hat. Ich hoffe du kannst es nachvollziehen?

joergsteinhauer commented 5 years ago

Fehlt heir noch was? Das Problem haben wir m.m.n. schon gelöst.

springers54 commented 5 years ago

grafik

Die Dinge sind leider nicht bearbeitet und auch oben nicht abgehakt.

Im Moment ist es genau falsch rum umgesetzt. Die Bilder auf der Detailseite sind klein, die auf der Übersichtsseite groß.

Bild der Übersichtseite ist aktuell 50% der Breite

grafik

Bild der Detailseite ist aktuell 30% der Seite

grafik

Tabelle mit Bilder mobil zerschossen

grafik

joergsteinhauer commented 5 years ago

Und immer wieder fehlen die URLs....

https://zen-reiki.de/bereich/symbole/shamballa-reiki-palm-meister-symbol/

joergsteinhauer commented 5 years ago

Mist, das Problem kam durch das JS aus dem #222... habe es dort erstmal deaktiviert, muss noch mal überdenken.

Im Schlimmsten Fall müsst ihr händisch bei jedem Buch-Bild eine CSS-Klasse setzen, wäre das ok?

springers54 commented 5 years ago

Ja, was soll es. wenn es nicht anders geht, die Klasse heißt dann bitte wieder rand und nicht image preview

joergsteinhauer commented 5 years ago

Gut, damit durch mein JS es nicht woanders knallt, machen wir das über eine extra Klasse. Die muss aber anders heißen - rand ist für andere Sachen reserviert. Habe es erstmal forceDefaultWidth genannt. Die Funktion erschließt sich aus dem Namen, wir können es auch anders nennen - ihr müsst ja damit klar kommen.

Zu sehen hier beim ersten Bild zu "Chakras Tore zur Seele" https://zen-reiki.de/themen/bereich/heilen/

springers54 commented 5 years ago

Also uns erschließt sich da nichts. Nenne es dann bitte randb. Bedeutet Rand für Buch.

springers54 commented 5 years ago

Leider hat es wieder neue Fehler produziert, die Bilder auf der Übersichtsseite stimmen nicht von der Größe her. https://zen-reiki.de/themen/bereich/heilen/

grafik

joergsteinhauer commented 5 years ago

Dann eben randb.

springers54 commented 5 years ago

Das randb geht leider auch nur in der Kombination mit left, sonst haut der Umbruch nicht hin.

Kann man die Stylingregel nicht so schreiben, dass randb die Funktionalität von left automatisch hat?

joergsteinhauer commented 5 years ago

Ja, klar. Habs angepasst

springers54 / reiki