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

Smint – vernünftiges Menü für Onepage Layout... Onepage-Seiten sind eine sehr feine Sache, vor allem für Portfolios wo es in der Regel eh nicht viel zu sagen gibt außer "kauf mich". Sollte ich jemal...
Organigramme in jQuery Organigramme sind eine feine Sache zur Darstellung von Sitemaps, Unternehmenshierarchien oder von Abläufen. Allerdings sind sie hinsichtlich Erstellun...
Ninja User Interface – Schicke Widgets für jQuery... Alleine schon wegen dem Namen „jQuery Webjutsu“ ist die Ninja UI erwähnenswert. Es sollte sich inzwischen bis in die hintersten Ecken herumgesprochen ...
Bei der Navigation mit der Tastatur arbeiten In letzter Zeit hat sich das Web durch Online-Anwendungen auf die Fahne geschrieben, Desktop-Anwendungen ablösen zu wollen bzw. zu ersetzen. Die Ansät...

Schreibe einen Kommentar