Featured images with white background and varying proportions reduce the aesthetic of the home page

[lukasniebler]

Currently featured images of posts can come in a variety of sizes / colors. This issue consists of two separate parts.

• [x] featured images with white backgrounds destroy the grid
• [x] featured images with strange proportions might lower the aesthetic of a site - ( In FAU Events I believe this 2nd part of the issue was fixed back in the days)

featured images with white backgrounds

Images without a background (transparent renders or white backgrounds) could destroy the perceived grid. A possible solution might be an optional border which can be activated or deactivated inside the customizer.

Of course you can argue, that this is a rare use case. Yet I can't tell how many end users might use either renders with transparent backgrounds or images with white background as their featured image.

Example:

Layouts which follow a tight grid are usually perceived more aesthetic. Also gestalt principles like the law of similarity are broken with wrong usage of featured images. You can also argue, that users often perceive aesthetically pleasing design as design that's more usable (Aesthetic-Usability Effect).

The same images, this time with visible guidelines showing the thought grid.

featured images with strange proportions might lead to similar effects

A connected issue: Images with strange proportions might ruin the thought grid. Or in other words. If there is a way to uniform featured images inside the blogroll / grid the design might perceived as more aesthetic.

Example:

Featured images aren't uniform.

(You can also argue that the 2nd issue is a feature. After all it would create a more dynamic layout yet I doubt that many end users would use this feature the right way. It would rather lead to unpleasing results).

Deutsch:

Beitragsbilder mit Transparenten und weißen Hintergründen sorgen dafür, dass das Design der Seite als unsauber wahrgenommen wird. Den gleichen Effekt können Beitragsbilder mit unterschiedlichen Proportionen haben. (Ausführliche Erklärung s. oben).

Grund: Das Layout, welches im Web- und Printdesign oft einer Konstellation aus Hilfslinien folgt wird durch falsch verwendete Beitragsbilder unterbrochen. Man kann es zwar als Feature sehen, allerdings kann dieses von den meisten Endnutzern falsch angewandt werden.

Wie immer nur ein Vorschlag und keine direkte Kritik.

[xwolfde]

Hm... eigentlich sind die Feature Images uniform auf 3:2 dort...

Wie ist denn die URL für das Beispiel?

[xwolfde]

Problem ist: Wenn ein User ein falschformatiges Bild hochläd, wird es entweder irgendwo geschnitten oder aber es wird gecovered, so dass am Rand (oben/unten oder links/rechts) weiße Fläche entsteht.

Bei Schneiden ist das Problem der, dass man nicht weiß, ob man Schneiden darf. Z.B. bei von der Rdeaktion gern genutzten Gruppenbildern ist da ein NoGo.

Ich denke, wir finden da keine gute technische Lösung, der Bediener muss wissen was er hochläd.

[lukasniebler]

Das war auf meiner lokalen Testinstanz. Aber ja, zwecks Gruppenbilder und Lizenzen wär das dann sowieso problematisch. Ich nehm es einfach als Hinweis in der Dokumentation mit auf, bzw. als Tipp in der Doku. Dann hätte sich das wahrscheinlich erledigt.

Was denkst du zwecks optionalem Rahmen / Begrenzung bei Beitragsbildern (Betrifft alle Bilder mit transparentem oder weisem Hintergrund)?

Bzw. vielleicht eher: Könnte man das Default-Beitragsbild eventuell ändern? Dann würde sich das Problem auch lösen. Wäre es z.B. Uniblau als Hintergrund mit weisem Schriftzug, dann wär das Problem aus meiner Sicht gefixt.

So ist es ja aktuell auf der beta.wordpress.rrze.fau.de

[xwolfde]

Wir hatten ja nach dem letzten Gespräch mit der Redaktion gerade den Rahmen weggemacht ;) ich dachte daran, dass Grau als Standardhintergrund zu setzen. Aber dachte dann, dass es Fälle geben könnte, wo jemand absichtlich einen transparenten Hintergrund setzt und dann weiß erwartet, statt grau.

Bei dem Fallback-Bild könnte ich es aber alles einbauen. Die Konvertierung wäre aber etwas heikel: Das Uniblau kann ich nicht nehmen, weil das ja eher die jeweilige Basisfarbe ist. Und die ist dann bei den Fakultäten eben dann kein blau mehr sondern eben diese hellen Farben, die teilweise zu weiß nicht genug Kontrast haben. Ergo müsste ich je nach Theme dann die Kontrastfarbe nehmen und nicht weiß. Das ganze würde aber diesen Fallback-Bild dann zu viel Bedeutung geben, in der Form, dass das zu stark wirkt. Den Rahmen hatte ich mit den dem --color-StandardHellgrau auch da schon gehabt, gefiehl mir aber dann nicht so ganz...

[lukasniebler]

Also finde einen ganz dezenten Hintergrundton beim Default-Bild keine schlechte Idee. Wem das dann nicht gefällt, der kann ja immer noch das Default-Bild im Customizer anpassen.

Zwecks Hintergrund. Ich habe eben mal auf https://www.nat.fau.de/category/alle-meldungen/ durchgeschaut, was da so für Beitragsbilder zum Einsatz kommen.

Portraits, 1:1, Transparente Bilder / Logos alles mit dabei. Auch auf der Seite der Tf sieht man da das ein oder andere Beispiel.

Die Süddeutsche löst das Problem ebenfalls mit einem dezenten Grauton bei Bildern, die nicht Ihrem Standardbildformat entsprechen.

(https://www.sueddeutsche.de/wirtschaft)

Bei der Tablet-Ansicht der NewYorkTimes dagegen wurde es anders gelöst mit transparentem Hintergrund und durch den einfachen Trick, dass man das Beitragsbild erst nach den Inhalten auf der rechten Spalte sieht. Quasi Textinhalt vor Bild. Dadurch fällt es nicht direkt auf, wenn mal ein Bild nicht der Norm entspricht, weil die Überschrift trotzdem auf der gleichen Linie mit dem Text ist.

(https://www.nytimes.com/section/books)

Denke die nytimes Lösung mit dem Artikelbild rechts ist zwar extremste schick. Allerdings ist sowas vom Aufwand her eher was für ein komplettes Redesign der Themes in den kommenden Jahren.

Vom Aufwand her ist die SZ Lösung mit klassischem Hintergrund die technisch leichtere/optimalere Lösung.

Meiner Meinung nach wäre ein dezenter Hintergrund in der Blogroll die Lösung fürs Problem. Allen Endnutzern kann man es am Ende sowieso nicht recht machen. Denke den meisten Nutzern ist mit einem dezenten Hintergrund s. SZ eher geholfen als ohne Abgrenzung.

Vielleicht hat da die Redaktion auch noch ein paar Anregungen / Ideen.

[wrcg]

dezentes helles Grau passt aus unserer Sicht, Rahmen und Schatten sind dann ja weg...

[xwolfde]

ok, das Fallback-Bild hat dann den color-StandardHellgrau Hintergrund