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

CSS Reset vs. Normalize Die Tage ging ein Aufschrei durch Twitter: die HTML5-Boilerplate hat den CSS-Reset raus geworfen, und durch ein Normalize ersetzt. Ich war relativ ers...
jQuery.payment: Kreditkarten-Validierung Inzwischen dürfte es sich auch bis in die hintersten Ecken herum gesprochen haben, das man Kreditkarten nicht mit Regular Expressions beikommen kann. ...
FireQuery – jQuery für Firebug Zugegebenermaßen ist jQuery ganz nett, auch die Art & Weise, wie es JavaScript anzeigt und bearbeitet ist ganz nett, aber sobald man ein Prototype...
Respsonsive Design Testing Tool Screenqueri.es Das man heutzutage ein neues Design responsive aufbauen sollte lässt sich wohl nicht mehr weg diskutieren, wie es vielleicht vor einem Jahr noch mögli...

Schreibe einen Kommentar

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