Intelligentes Cropping von Bildern für Responsive

Wenn man sich mal so umschaut im Bereich Responsive Websites könnte man durchaus die folgenden Eindrücke gewinnen: a) Wir machen das weil wir müssen, erkennen aber keinen Sinn darin, b) Hauptsache es passt und c) bloss nicht noch einmal drüber nachdenken. Entsprechend liebevoll sind die Umsetzungen, weil kosten darf es auch nichts. An der Stelle muss noch viel Arbeit geleistet werden, weil die Einsicht beim Kunden das eine Responsive Site kein Abfallprodukt einer bereits bestehenden Seite ist, ist nicht gegeben.

Die Logik hinter Focal Point

Gerade bei den Bildern wird einfach gestaucht und gestreckt auf Teufel komm raus. Macht das Sinn? Nein! Jedes Bild besitzt wichtige Informationen (z.B. den Geschäftsführer eines Unternehmens) und unwichtige Informationen (den neuen Porsche den er grad als Geschäftswagen bekommen hat). Was will ich also auf Mobile sehen? Richtig – den Geschäftsführer in groß. An dieser Stelle hilft einem Focal Point weiter. Was macht der kleine Helfer?

Von Prinzip her erlaubt das Skript das Setzen eines Fokus innerhalb eines Bildes. Dieser Focal Point wird dann herangezogen, wenn das Bild für andere Bildschirmauflösungen angepasst werden muss. Für diesen Fall wird das Bild nämlich weder gestraucht oder gestreckt oder ohne Sinn und Verstand gecropped, sondern es wird so intelligent zugeschnitten, dass der Focal Point immer im Vordergrund stehen bleibt. Steht der Geschäftsführer zum Beispiel rechts, der Porsche links, wird links mehr abgeschnitten als rechts.

Natürlich muss man an der Stelle der Fairness halber sagen, das es natürlich aufwendig ist diese Bibliothek zu verwenden, da ich ja vom Prinzip her für jedes Bild den Focal Point setzen muss. Es ist allerdings eine sehr sinnvolle Sache und insbesondere eine, die wiederum verdeutlicht, dass eine Responsive Webseite kein Abfallprodukt ist, die mal eben nebenher erstellt wird.

Ähnliche Beiträge

Inline Labels für Formularfelder „Normalerweise sollte man“ die Beschriftung für ein Input-Field immer mit dem Tag
Mit Pow.js Sonnenstrahlen generieren Einen Hintergrund aus Sonnenstrahlen ist eine feine Sache, aber faktisch nicht implementierbar. Die Grafik die dafür notwendig wäre, wäre eindeutig zu...
Chosen – Select-Boxen in Benutzerfreundlich Select-Boxen sind relativ benutzerfreundlich, so lange man nicht so viel Auswahl hat, und insbesondere nicht mehrere Werte der Box auswählen soll. Let...
Star Rating mit jQuery jRating Ich glaube die ersten die es hatten war Amazon, jene verteufelt einfache Möglichkeit einen Artikel ganz schnell mit einem bis fünf Sternen zu bewerten...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.