Intention.js – Responsive direkt im HTML definieren

Screenshot von Intention.js

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


Der ultimative CSS gradient Generator
CSS Gradients sind nicht nur ein neuer Hype, sondern eine äußerst sinnvolle Sache, da sie helfen, statische Grafiken loszuwerden und schnell austausch...


Das Wunder des Live Reloads
Ich zeige mich ja selten begeistert von Neuerungen muss ich sagen, ich könnte durchaus noch mit dem Notepad entwickeln wenn ich es wollte. Nach wochen...


Nivo – ultimativer Image Slider für jQuery
Image Slider gibt es inzwischen wie Sand am Meer und irgendwie werden sie langsam langweilig! Letztendlich machen sie alle den gleichen Fade-Effekt un...


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

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