Fiverrs Layoutproblem mit einer Zeile CSS fixen

Veröffentlicht am

Wenn ich mich in der Foto/Video-Szene auf YouTube bewegte fiel mir Fiverr in den letzten Monaten zunehmend ins Auge. Der Online-Marktplatz sponsorte prominenten YouTubern Credits (sowie die Produktionskosten des Videos an sich), die sie auf Fiverr einsetzen können. Das Schema: Die YouTuber kaufen digitale Dienstleistungen („Gigs“) von verschiedenen Anbietern in verschiedenen Preiskategorien ein und bewerten im Anschluss die Qualität der gelieferten Ergebnisse.

Wie zum Beispiel der Kauf mehrerer Angebote in aufsteigenden Preiskategorien mit der gleichen Aufgabe, ein fertiges Produktvideo aus Videorohmaterial zu schneiden:

Es ist Jahre her, dass ich Fiverr.com zum letzte Mal aufrief. Nachdem ich vermehrt über die gesponserten YouTube-Segmente stolperte, interessierte ich mich umso mehr dafür, wie die Website im Moment aussieht und sich anfühlt. Also klickte ich mich ins Interweb.

Ich möchte nicht in die Details von Fiverrs umstrittener Kontroverse einsteigen, sondern mich auf einen einzigen, auf das Frontend bezogenen Layout-Abschnitt konzentrieren.

Der Anblick der Titelseite zeigt ein poliertes Layout sowie Vorschaubilder der Kategorien im Hochglanzlook. Ähnlich generisch und leicht verständlich, wie es z.B. Spotify umsetzt. „Welchen Auftritt könnte ich brauchen?“ fragte ich mich. Viele stilistische Elemente innerhalb der Vorschaubilder sprachen mich nicht an. Also gab ich „illustration“ in die Suchleiste ein und hielt nach einem Stil Ausschau, der meinem visuellen Geschmack entspricht.

Die Dienstleistung "I will daw a great illustration" klang wunderbar und sah ansprechend aus:

Angebotsseite mit Demobildern und Preisen
Die Übersichtsseite des „Gigs“ auf einem Desktopgerät. Original source

Aber warte… Irgendwas stimmt nicht mit den Slider-Miniaturbildern.

Lass mich das Bild vergrößern und die Deckkraft der inaktiven Bilder maximieren, um deine Augen zu schonen und das Problem deutlicher darzustellen:

Na, das sieht gar nicht hübsch aus, oder? Die meisten Bilder sind stark gedehnt. Dasselbe Problem trat auch bei anderen Gigs auf, die ich mir anschaute. Teilweise waren das Problem in den dortigen Miniaturbildern noch auffälliger. Ein Riss im polierten Layout.

Lass uns versuchen, die Seitenverhältnisse zu korrigieren!

Erster Versuch: Object-Fit zur Rettung

Mein erster Gedanke war, object-fit: contain; auf das Bildelement zu setzen, um sein Seitenverhältnis beizubehalten, während es in die Inhaltsbox des Elements passt.

Das kannst du selbst testen, indem du über dem Minitaurbild das Kontextmenü öffnest und „Element untersuchen“ anklickst. Du wirst auf dem das Bild einhüllenden Linkelement landen. Alternativ kannst du den Inspektor in Chrome mit Befehl+Option+C oder in Firefox mit Steuerung+Umschalt+C öffnen und das Miniaturbilder von dort aus auswählen.

Der folgende Code ist das extrahierte CSS sowohl des Linkelements als auch seines untergeordneten Bildes:

.gig-page .gig-gallery-component .gallery-thumbnails .thumbs-container .thumbnail {
  width: 100px;
  height: 100%;
  margin-right: 5px;
}

.gig-page .gig-gallery-component .gallery-thumbnails .thumbs-container .thumbnail img {
  height: 100%;
  width: inherit;
}

Das Hinzufügen von object-fit: contain; zum img-Element repariert das Seitenverhältnis:

Aber jetzt sieht die Kluft zwischen den einzelnen Punkten unausgewogen aus.

Einfacherer Fix: Eine Zeile CSS entfernen

Ist dir die Zeile width: 100px; der Klasse .thumbnail aufgefallen? Ich kann nicht feststellen, warum der Anker in der Breite fixiert ist. Lass uns erstens unseren zusätzlich hinzugefügten Stil object-fit: contain; revidieren und zweitens die Zeile width: 100px; entfernen.

Voilà!

Jetzt haben wir das erreicht, was wir uns vornahmen:

  • korrekte Proportionen
  • gleichmäßige Abstände zwischen den Bildern

Die Miniaturbildreihe sieht deutlich reizender aus. Und das, mit nur einer gelöschten CSS-Eigenschaft. Ich liebe diese kleinen CSS-Tricks, die einfach erscheinen, aber viel Einfluss auf die gesamte Benutzererfahrung haben können.

Abschließende Gedanken

Interessant wäre es zu erfahren, wie ein ausgefallenes Diagramm, engebettet in Firmenjargon, das Problem veranschaulichen kann - wie ein ansprechenderes Fiverr-Layout zu höheren Konvertierungsraten führen kann, weshalb diese Layoutkorrektur von äußerster Wichtigkeit ist.

Ich kann mir vorstellen, dass die Webdesigner von Fiverr sich dieses Problems bewusst sind, aber aus welchen Gründen auch immer, sie können kein Fix einsetzen. Dies ist Spekulation. Um sicherzugehen, habe ich zusätzlich zur Veröffentlichung dieses Artikels eine E-Mail mit einer Beschreibung des Problems und einer Lösung an Fiverr geschickt. Ich werde dich hier über die potenzielle Antwort auf dem Laufenden halten! (Vorausgesetzt, dass meine E-Mail an die zuständige Abteilung weitergeleitet wird.)

Letzten Endes habe ich keinen Auftrag aufgegeben. Mir kam kein Einsatzgebiet in den Sinn, obwohl mir der Stil zusagt. Zudem möchte ich das Modell der Plattform so wenig wie möglich unterstützen.

Mehr Informationen zu Object-Fit

Interessiert, was object-fit noch alles drauf hat? Im Artikel auf CSS-Tricks bekommst du einen tiefen Einblick in das Objekt:

The object-fit property in the CSS-Tricks Almanac


Vorerst kein Kommentarbereich.

War dieser Artikel deine Zeit wert? Schreib mir, was du denkst, indem du mir ein paar Zeilen schreibst. Wenn du einen Tippfehler entdeckst, wäre ich dir verbunden, wenn du es mich wissen lässt. Danke!