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

In jQuery Existenz prüfen Das praktische an jQuery ist (unter anderem) das es Aktionen auf ein Element nur dann ausführt, wenn das Element existiert. Wenn es nicht existiert: P...
Teaser mit jQuery erstellen Heutzutage besitzt fast jede halbwegs ernst zu nehmende Webapp ein Mini-CMS im Backend. Meistens basierend auf einem WYSIWYG-Editor in JavaScript. Eig...
Notifier für Benutzer-Nachrichten in jQuery Jede halbwegs vernünftige Community-Software oder Internet-Anwendung braucht ein Nachrichten-System, um demjenigen angemeldeten Benutzer, der gerade a...
Opera Mobile Emulator Worin liegt der Sinn, das es eine Software wie Opera gibt? Richtig - keinen - möchte man meinen, dem ist aber nicht so! Zum einen ist der Browser wirk...

Schreibe einen Kommentar

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