Intelligentes Cropping von Bildern für Responsive

Die Logik hinter Focal Point

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

HTML-Tables mit jQuery Ich hoffe ihr benutzt Tabellen nur noch zur Datenvisualisierung, und nicht mehr für das Design! ;) Aber zumindest dort sind sie unumgänglich. Dummerwe...
Zeitleisten mit Timeglider für jQuery In meiner letzten Firma habe ich viel für eine Branche gearbeitet, die Wert darauf legte ihren Kunden zu vermitteln, das ihr Produkt mindestens seit d...
TinyMCE in Version 3.2.2 veröffentlicht 4 Monate hat es gedauert, aber nun ist sie da, die neue Version von TinyMCE. Stellt sich nur die Frage, was eigentlich neu ist. Zunächst einmal ist zu...
knockout.js – was ist es, was kann es? Nicht zuletzt durch ein Tutorial bei tutsplus.com bin ich auf knockout.js aufmerksam geworden. Da inzwischen ein regelrechter Hype um das relative kle...

Schreibe einen Kommentar