search

springers54 / reiki

0 stars 0 forks source link

Bildergrößen Grundsatzentscheidung #221

Closed springers54 closed 5 years ago

springers54 commented 5 years ago

Eure Vorstellungen sind leider nicht ganz durchdacht. Hier ein Bsp, was passieren würde, wenn man mobile auf der Detailseite das Bild auf 150px beschränkt: image

Lange Texte würden große Löcher in den Textfluß reißen.

Wenn ich richtig verstehe, wollt ihr auf Übersichtsseiten generell immer die Bilder kleiner haben, als auf Detailseiten.

Lösung wäre (und das ist eine Lösung, die ich in anderen Projekten schon mehrmals umgesetzt habe):

Mobile (= bis 800px bildschirmbreite, Sidebar ist unten):

Desktop (= ab 800px bildschirmbreite, Sidebar ist rechts):

Somit müssen die Bilder "in Wirklichkeit" auch als 300px Grafiken vorliegen und eingebunden werden. Die wirkliche Größe hängt davon ab, wie groß die Bilder max. dargestellt werden sollen. Die Größe könnt ihr gern festlegen.

Dabei behandeln wir hier nur die Bilder für Geräte mit 1-facher Pixeldichte (das sind meist Desktop-Rechner). Smartphones haben dagegen vielfache Pixeldichte, dafür braucht man theoretisch die jeweils x-Fache Größe der Bilder. Das gane wird dann in Form der sogenannten "responsive images" implementiert.

Z.b. HTC One hat eine Pixeldichte von 4, damit ein 300px Bild hier knack scharf dargestellt werden kann, müsste das Bild an sich 1200px große sein. Aber praktisch reicht auch ein 600px Bild.

Dafür muss man das Markup etwas anpassen:

Ist-Zustand: <img src="300px.jpg">

Soll-Zustand: <img srcset="300px.jpg 1x, 600px.jpg 2x" src="300px.jpg">

Wordpress erstellt nicht umsonst diverse Bildgrößen beim Hochladen von Bildern in die Mediathek. Genau diese unterschiedlichen Größen verwendet WP bereits an einigen Stellen automatisch, er fügt also die "responsive images" ein.

Originally posted by @joergsteinhauer in https://github.com/springers54/reiki/issues/201#issuecomment-469851304

springers54 commented 5 years ago

Wir haben eben noch einmal probiert, auf einer Seite das Bild durch ein Beitragsbild auszutauschen. Diese müsste ja dann responsiv reagieren, wenn ich deinen Erklärungen folge. Tut es aber nicht. Die Bilder sind sowohl auf der Übersichtsseite als auch auf der Detailseite in voller Größe zu sehen. Dieses Konzept können wir damit verwerfen.

Setze doch bitte deinen obigen Vorschlag um:

Lösung wäre (und das ist eine Lösung, die ich in anderen Projekten schon mehrmals umgesetzt habe): Mobile (= bis 800px bildschirmbreite, Sidebar ist unten):

Übersichtsseite: Bilder sind ca. 10%-20% der Bildschirmbreite, max. 150px
Detailseite: : Bilder sind ca. 20%-30% der Bildschirmbreite, max. 150px

Desktop (= ab 800px bildschirmbreite, Sidebar ist rechts):

Übersichtsseite und Detailseite: Bilder sind ca. 20%-30% der Bildschirmbreite, min. 150px / max. 300px

Sitebar auf dem Handy weglassen

Ist es möglich, dass du die Sitebar auf dem Handy komplett ausblendest? Denn ich glaube nicht, dass jemand da nach unten scrollen wird, um ein Menü zu suchen und zu klicken

Bildergrößen noch einmal zusammengefasst:

Desktop: Übersichtsseite=150 px, Detailseite je nach Bild 100%, das kann 150 oder 300 px sein

Mobil bis 768 px (Hochformat): Übersichtsseite 80px, Detailseite 120px Handy-Querformat, wie Desktop

joergsteinhauer commented 5 years ago

Wir haben eben noch einmal probiert, auf einer Seite das Bild durch ein Beitragsbild auszutauschen. Diese müsste ja dann responsiv reagieren, wenn ich deinen Erklärungen folge. Tut es aber nicht. Die Bilder sind sowohl auf der Übersichtsseite als auch auf der Detailseite in voller Größe zu sehen. Dieses Konzept können wir damit verwerfen.

Korrekt, das Bild müsste sich responsiv verhalten. tut es (noch) nicht, weil ich dazu auch kein CSS geschrieben hab. Möglich ist es und aus meiner Sicht macht das mehr Sinn, denn dann müsst ihr nicht jedes mal die Vorschaubilder manuell im HTML reinschreiben sondern klickt euch die Sachen zusammen. Obliegt aber euch.

Ich kann erstmal meinen Vorschlag umsetzen, weil das weniger Aufwand ist.

Sidebar auf dem Handy kann ich per CSS ausschalten, kein Problem. Frage mich nur - warum? Das HTML wäre dann trotzdem weiter geladen, es wäre nur versteckt. Es gäbe nur einen minimale Geschwindigkeitsvorteil durch das weniger Rendern. Jedoch mag es google nicht, wenn man (vor allem solche großen Module) versteckt. Den User stört es doch nicht, wenn unten noch mehr Inhalt kommt. Ich empfehle es, sowas nicht zu machen. Was sind also Gründe für das Verstecken der Sidebar? Vlt. macht es ja Sinn, ich kanns gerade nicht nachvollziehen.

springers54 commented 5 years ago

Was sind also Gründe für das Verstecken der Sidebar? Vlt. macht es ja Sinn, ich kanns gerade nicht nachvollziehen.

Es macht einfach keinen Sinn aus unserer Sicht, selbst, wenn es keinen großen Geschwindigkeitsvorteil gibt. Die Seite ist endlos lang und unübersichtlich. Wir würden es darauf ankommen lassen, ob Google das abstraft oder nicht.

Thema Bilder

Setze bitte die Lösung so um, wie besprochen. Ein grundsätzlicher Umbau mit Beitragsbildern überall würde für uns auch mehr Arbeit machen.

joergsteinhauer commented 5 years ago

Ok, sidebar ist per CSS in der mobilen Ansicht deaktiviert.

Bilder sind angepasst. Dabei darf man nicht immer mit festen Werten arbeiten (px), sondern nur mit %.

Übersichtsseiten

Mobil (<768px) UND Desktop (>768px) 150px, jedoch max. 35% des Elternelements (=Seitenbreite)

Detailseiten

Mobil (<768px) 300px, jedoch max. 35% des Elternelements (=Seitenbreite)

Desktop (>768px) 300px, jedoch max. 35% des Elternelements (=Content)

springers54 commented 5 years ago

Wenn wir beim Umfließen bleiben, dann haut es auf den ersten Blick so hin.

Tabellenbilder auf allen Geräten

Aber leider zerschießt es jetzt unsere Tabellen. grafik

Ansicht Desktop, wenn man mal seinen Cache gelöscht hat grafik

Die Bilder kann man nur noch mit der Lupe sehen, dafür ist riesiger Weißraum zwischen den Zellen.

joergsteinhauer commented 5 years ago

Also hier https://zen-reiki.de/bereich/symbole/shamballa-atlantisches-meistersymbol/#more-9926

joergsteinhauer commented 5 years ago

Ja, ist tatsächlich teils meinen Anpassungen geschuldet. Aber eben nur teils. Ich habe das CSS angepasst, es kann aber sein, dass diese Breiten-Anpassung nicht auf allen Bildern greift. Kommt drauf an, wie verschachtelt das HTML ist. Also falls euch noch irgendwo was auffällt, muss ich es ergänzen.

Zusätzlich haben aber die Bilder in den Tabellen fälschlicherweise die Klassen left - daher kam es zu Verkleinerung. Diese Klassen sind hier falsch. left sorgt ja dafür, dass die Bilder gefloatet werden. In diesen Tabellen sollten Bilder aber nicht gefloatet werden, da ist ja nix zum "drumrum fließen". Also: die Klassen sollten hier bestenfalls entfernt werden.

springers54 commented 5 years ago

grafik

Das Bild ist hier scheinbar richtig eingesetzt, ist aber vom Rahmen her zu groß und versetzt

springers54 commented 5 years ago

grafik

joergsteinhauer commented 5 years ago

Der Abstand kommt durch den "break", den ihr eingefügt habt. Ich warne nicht ohne Grund immer wieder davor, irgendwelche "Helper"-Sachen, wie Umbrüche oder beliebige Abstände mittels inline/custom CSS, einzufügen. Überlasse ich euch. image

joergsteinhauer commented 5 years ago

Bezüglich Bildgrößen: scheint hier immer noch nicht zu klappen. Problem diesmal ist, dass die Bilder mal als 150 mal als 300px eingebunden sind.

Ich habe ja die Bilder nun mittels CSS auf eine feste breite getrimmt und mit einer max. Breite versehen. Somit kommt es zu Vergrößerung aller Bilder auf Detailseiten auf 300px. Ist blöd, wenn dann das Bild nativ nicht 300 sondern 150 ist. Ich habe die feste Breite sowohl auf Übersichts- als auch auf Detailseiten raus genommen. Es gibt nur noch die Begrenzung auf max. 35% des Elternelements.

Ihr müsst nun dafür sorgen, dass die Bilder nicht unbedingt größer als 150px eingebunden werden. Sonst würde man viel zu große Bilder laden und dann auf 35% verkleinern.

springers54 commented 5 years ago

Also noch einmal zum Verständnis:

So sollte es auch bleiben. Ich hoffe, ich habe deine Erklärung nur falsch verstanden

joergsteinhauer commented 5 years ago

Ok, alle Beitragsbilder haben per CSS nur eine Beschränkung was die maximale Bildbreite angeht - diese ist nun 38% des Elternelements. Dadurch wird ermöglicht, dass die Bilder (wenn Platz ausreicht) die volle native Bildbreite (300px oder 150px) annehmen.

Bedeutet, dass wenn ihr Bilder mit z.b. 600px Breite einbettet, diese dann trotzdem auf 38% des Elternelements runter skaliert werden. Oder, wenn ihr Bilder mit z.b. 100px Breite einbettet, diese dann NICHT auf 300 bzw. 150px größer skaliert werden sondern bei max. 100px bleiben.

Auf nicht Desktop-Geräten werden diese Bilder entsprechend klein skaliert: https://gyazo.com/a637dec3d00bf8d46713c48a9a45e9dd

springers54 commented 5 years ago

Es passt leider immer noch nicht oder wir haben uns komplett falsch verstanden. Aus diesem Grund denke ich, es ist besser, wir machen 2 Issues dazu auf, eine, die die Übersichtsseiten behandelt und eine die die Detailseiten behandelt.

Denn sonst drehen wir uns im Kreis.