Intention.js – Responsive direkt im HTML definieren

Je nach Einsatz von Responsive ist es normal, das man auch Bilder austauschen muss, oder Design-Elemente anpassen. Die Intention dahinter ist stets klar, das gleiche Bild, mehrere Formate. In der Regel ist dies recht einfach zu handhaben, komplex wird die Sache dann, wenn wir zum Beispiel über eine individuelle Webapp im Intranet sprechen, die einige tausend Seiten mit einigen tausend Bildern ausgibt. Man kommt nämlich hier sehr schnell in einen Bereich, in dem man Inline auf die Seite JavaScript setzt, und das ist weder schön, sondern auch nicht das was man semantisch korrekt nennen würde.

Responsive Änderungen am DOM automatisch

Die jQuery-Bibliothek intention.js erlaubt es hierbei HTML so zu schreiben, das es dem Responsive-Gedanken entspricht, aber trotzdem noch semantisch lesbar ist. Man schreibt hierbei einige Befehle in die entsprechden Tags, und Intention.js schreibt dann das DOM automatisch je nach Client um. Ein Beispiel für den IMG-Tag:

 

In einem IMG-Tag sind hier je nach Auflösung 2 verschiedene Bilder möglich. Was mir insbesondere an Intention.js gefällt ist, das der Quelltext lesbar und verständlich bleibt. Ferner bricht man sich bei einer dynamischen Ausgabe von HTML nicht mehr die Finger, um zum Beispiel Bilder responsive zu machen. Die Bibliothek solltet ihr euch einmal näher anschauen, ich denke ich werde es in einem meiner nächsten Projekte einmal ausprobieren.

Ä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...
Vintage Effekte für Photos mittels jQuery Ich steh ja auf diese Vintage-Effekte für Photos, und insbesondere auf die ganzen Instagram-Filter die es so gibt. Früher war es ja so, dass man diese...
piCSSel-art – Lustige C64 Sprites in CSS Dieser ganze HTML5-Spiele-Hype erinnert mich in seinen Resultaten immer mehr an den C64. Immer mehr Klassiker kommen für iOs auf den Markt, ohne das m...
Inline Labels für Formularfelder „Normalerweise sollte man“ die Beschriftung für ein Input-Field immer mit dem Tag

Schreibe einen Kommentar

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