Intention.js im Überblick

21. Oktober 2013 | Von | Kategorie: Abschlußprüfung Winter 2013, CSS, HTML/XHTML/XML, Internet, Webdesign

Das nächste Level im Responsive Design? Intention.js im Überblick

Autor: Mario Janschitz

Datum: 15.10.2013, 08:30 Uhr

Responsive Design ist in aller Munde. Zurecht. Neben Media Queries, spannenden HTML-Konstrukten und diversen Scripts gibt es jetzt intention.js: HTML-Transformation für verschiedene Ausgabegeräte.

In einfachen Worten und aus technischer Sicht kann gesagt werden, dass im Responsive Design Media-Queries genutzt werden, um herauszufinden, in welcher Auflösung die Website dargestellt wird. In weiterer Folge werden etwaige Grids verschoben, verkleinert oder ausgeblendet. Inhalte innnerhalb dieser Grids passen sich an die veränderte Breite der Elemente an.

intention intention.js transformiert HTML Code für spezifische Geräte (Quelle: www.intentionjs.com)

 

 

Mit anderen Worten: Wenn sich zum Beispiel ein Browserfenster verkleinert, schrumpfen auch die flexiblen Bilder und überflüssig gewordenen Elemente – zum Beispiel wird eine Sidebar ausgeblendet, während ein dreispaltiges Layout zu einem zwei- oder einspaltigen wird. Aus technischer Sicht muss also angegeben werden, bei welchen Breakpoints welche Designentscheidungen getroffen werden müssen.

  • Fällt die Sidebar weg oder verkleinern wir den .content-Container?
  • Was passiert bei Landscape? Zeigen wir die Sidebar wieder an oder lassen wir sie ausgeblendet?
  • Wie lassen wir uns Bilder für Retina-Displays ausgeben?

Intention.js in der Webentwicklung

Intention.js ist ein Toolkit für Responsive Design und bietet euch einen einfachen Weg, um HTML für verschiedene Geräte neu strukturieren zu lassen. Beeindruckend dabei ist, dass ihr im HTML angeben könnt, wie sich die DOM auf verschiedenen Geräten verändert.

Vereinfacht gesagt: Ihr schreibt in HTML ein „Template“ und intention.js gibt euch spezifisches HTML pro Auflösung zurück. Gerade bei der Umstrukturierung von DOM-Objekten ist intention.js einfach klasse. Somit ist Responsive Design nicht mehr abstrakt, sondern klar und leicht verständlich.

Auch verschiedene Darstellungsvariaten bei unterschiedlichen Geräten können leicht umgesetzt werden. Am Desktop wollt ihr eure Galerie als Kacheln darstellen lassen, am Tablet wollt ihr eine Full-Screen- und touch-enabled Slideshow und am Smartphone wollt ihr alle Bilder untereinander auf 100 Prozent der Device-Breite? Das alles ist kein Problem für intention.js.

 

Wie funktioniert intention.js?

Dieses System kann man sich einfach so vorstellen, als hätte man zwei Säulen. Die erste Säule, bestehend aus sogenannten Thresholds, definiert den Kontext, in dem eine Website dargestellt wird. Beispiele hierfür sind: Wie breit ist der Viewport? Wird Touch-Funktionalität benötigt? Portrait oder Landscape?

Die zweite Säule ist die Manipulation von HTML-Attributen. Dabei werden drei verschiedenen Methoden unterschieden.

 

Manipulation der CSS-Klasse

Die einfachste Methode ist eine Manipulation der CSS-Klasse,

<img intent in-orientation: src=“a.jpg“ />

wird zu:

<!–In portrait orientation–>

<img class=“portrait“ src=“a.jpg“ />

<!–In landscape orientation–>

<img class=“landscape“ src=“a.jpg“ />

 

Manipulation von HTML-Attributen

Diese Methode bietet eine spezifischere Manipulation als die vorherige Methode. Es wird ein Basiswert definiert, der dann für einen speziellen Fall angepasst wird. Aus dem folgenden Snippet

<img intent

in-base-src=“reg_img.png“

in-highres-src=“big_img.png“ />

wird, spezifisch für Geräte mit Retina-Auflösung:

<img src=“big_img.png“ />

Dabei gilt für alle anderen Auflösungen:

<img src=“reg_img.png“ />

Die Methode „Attribute Manipulation“ kann auch in Verbindung mit der Manipulation von CSS-Klassen verwendet werden. Ein Beispiel hierfür wäre:

<section intent

in-mobile-class=“narrow“

in-tablet-class=“medium“

in-standard-class=“wide“ />

Dieses Snippet gibt für mobile Geräte, Tablets und Desktop-Auflösungen eine entsprechenden CSS-Klasse aus.

 

Manipulation der Dokumentstruktur

Die „Placement Manipulation“ erlaubt euch das DOM grundlegend, für verschiedene Geräte, neu strukturieren zu lassen.

<header>

<nav intent

in-mobile-prepend=“footer“

in-tablet-append=“section“

in-standard-append=“header“>

</nav>

<section>…</section>

<footer>…</footer>

</header>

Dieses Beispiel lässt die Navigation pro Gerät an einer anderen Stelle ausgeben:

Smartphone: Die Navigation befindet sich über dem Footer.

Tablet: Die Navigation befindet sich unter der Section.

Alles andere: Die Navigation befindet sich unter dem Header.

Eine völlig neue und unterschiedliche Dokumentstruktur mit drei Zeilen Extra-Code.

 

 

Intention.js im Einsatz

Das System setzt auf jQuery und Underscore.js. Minified benötigt intention.js nur sieben Kilobyte, dabei werden alle modernen Browser unterstützt (bis IE 8). Das nächste Beispiel zeigt euch etwas umfangreicher, wie ihr aus einer HTML Datei drei unterschiedliche Sourcecodes generieren lassen könnt.

<header> <img src="logo.png" intent in-highres-src="retina.png" /> </header> <nav intent in-mobile-prepend="#content" in-tablet-prepend="#content" in-standard-after="header" in-touch-class="swipeDrawer"> <a id="about" intent in-mobile-href="about.html" in-tablet-href="about.html" in-standard-href="#about">About</a> <a id="projects" href="/faq"> intent in-mobile-before="#about">FAQ</a> </nav> <div id="content" intent in-width: in-orientation:> This is all so easy! </div> 

Wie man sieht, lassen sich auch die href-Attribute bei Links ansprechen. Sehen wir uns nun die Ausgabe auf einem iPhone 5 an:

<header> <img src="retina.png" /> </header> <div id="content"> <nav> <a href="/faq">FAQ</a> <a href="about.html">About</a> </nav> This is all so easy! </div>

Besonders gut gefällt mir, dass die Navigation touch-friendly geworden ist – und das mit einer Zeile Code. Genauso wie die Darstellung des Bildes für Retina-Displays. Gefällt mir besser also dieser vorgeschlagene Ansatz einer nativen Unterstützung für „responsive images“:

<source srcset="small.jpg 1x, small-highres.jpg 2x" /> <source media="(min-width: 18em)" srcset="med.jpg 1x, med-highres.jpg 2x" /> <source media="(min-width: 45em)" srcset="large.jpg 1x, large-highres.jpg 2x" /> <img src="small.jpg" alt="Description of image subject." />

Die Ausgabe des selben Codes sieht auf einem Tablet so aus:

<header> <img src="logo.png" /> </header> <div id="content"> <nav> <a href="about.html">About</a> <a href="/faq">FAQ</a> </nav> This is all so easy </div>

Jedoch wird bei Desktop-Rechnern die gleiche Website so dargestellt:

<header> <img src="logo.png" /> </header> <nav> <a href="about.html">About</a> <a href="/faq">FAW</a> </nav> <div id="content"> This is all so easy! </div>

Man kann also mit relativ wenig zusätzlichem HTML-Markup sehr spezifisch für unterschiedliche Auflösungen beziehungsweise Geräte arbeiten. Aber intention.js bietet noch mehr!

Wie schon erwähnt, reagiert intention.js auf verschiedene, von intention.js vorgegebene Kontexte. Diese können aber auch selbst definiert werden. Dadurch kann man das Webprojekt „live“ verändern, basierend auf dem Scrollverhalten, den Pageviews oder auch der Tageszeit.

Beispiel: Im HTML wird folgendes Snippet angegeben.

<div id="timeExample" intent in-time:></div>

Der dazugehörige Kontext sieht so aus:

var time = intent.responsive({ ID: 'time', contexts: [ {name:'night',min:20}, {name:'evening',min:17}, {name:'sunset',min:16}, {name:'day',min:9}, {name:'morning',min:0} ], matcher: function(test, ctx) { return test >= ctx.min; }, measure: function(arg) { var time = new Date(); return time.getHours(); } });

Damit lässt sich jetzt Inhalt abhängig von der Uhrzeit darstellen. Aber wie genau legt man einen eigenen Kontext beziehungsweise „Custom Axis“ an?

Aufbau einer „Custom Axis“ und dem Kontext

Die Struktur besteht aus verschiedenen Eigenschaften und zwei Funktionen. Kurz gesagt ist eine „Axis“ ein messbares Objekt oder eine Ansammlung von Informationen, wobei die Kontext-Gruppe die Einheiten definiert. Hier das gesamte Konstrukt:

var axis = intent.responsive({ ID: 'axisID', contexts: [ {name:'ctx1', val:'3'}, {name:'ctx2', val:'2'}, {name:'ctx3', val:'1'} ], matcher: function(measure, context){ return measure >= context.val; }, measure: function(){ return someMeasurement; });

Fazit

Intention.js ist interessant. Sehr sogar. Kann es Responsive Design revolutionieren? In kleinen Webprojekten wahrscheinlich nicht. Aber für größere Projekte sehe ich einige Vorteile, gerade die einfache Umstrukturierung des DOM und die einfache Handhabung überzeugen mich. Natürlich – mit UI-Systemen wie zum Beispiel Bootstrap kann man ähnliche Funktionalität erzeugen, aber auch so schnell und so komplex? Bei intention.js geht es auch gar nicht um UI, es geht darum, einen anderen Ansatz im Responsive Design zu liefern – und das hat es, meiner Meinung nach, auch geschafft.

Besondere Erwähnung gilt der intention.js Dokumenation . Der Code wird teilweise Zeile für Zeile erklärt, was den Einsteig sehr einfach macht. Werft einen Blick auf die Demos und überzeugt euch selbst. Werdet ihr intention.js für eure Webprojekte verwenden?

 

 

via Das nächste Level im Responsive Design? Intention.js im Überblick » t3n.

Keine Kommentare möglich.