t3n News Entwicklung

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

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

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.

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

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 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. Gefällt mir!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
14 Antworten
  1. von Christian am 15.10.2013 (10:55 Uhr)

    Klingt sehr interessant. Ich stelle mir die Frage, ob eine Website auch am Desktop responsive ist oder nur die Geräte angesprochen werden?

    Antworten Teilen
  2. von Mario Janschitz am 15.10.2013 (11:30 Uhr)

    Hallo Christian!
    Nein, die Website ist natürlich auch im Browser responsive. Siehst du auch auf der Demo von intention.js

    Antworten Teilen
  3. von Florian am 15.10.2013 (12:09 Uhr)

    Wer Responsive Webdesign per Javascript realisieren will, hat RWD und Progressive Enhancement nicht verstanden.

    Sich das Markup mit Nonsense-Tags und -Attributen vollzukloppen, um per Javascript etwas zu erreichen, wofür CSS gedacht ist... nene, da kriegt man ja Angst um das deutsche Internet. ;)

    Antworten Teilen
  4. von Jörg am 15.10.2013 (12:47 Uhr)

    Naja wichtig ist, dass es für das Problem überhaupt erstmal eine Lösung gibt. Auch wenn Javascript dafür jetzt nicht ideal ist.

    Wie sollte denn eine reine CSS Lösung aussehen? Mir fallen da eigentlich nur Background Images ein. Die Image Tags also durch Div Conatiner ersetzen, die dann die entsprechenden background images via media queries zugewiesen bekommen. Zukünftig wird es da wohl eine andere Lösung für geben, wie macht man das jetzt - so ohne Javascript?

    Antworten Teilen
  5. von Florian am 15.10.2013 (13:11 Uhr)

    Alles, was oben im Artikel aufgezählt wird, ist mit aktuellem CSS machbar. Kann mir nicht vorstellen, dass Redakteure von t3n das nicht wissen. Ist doch nicht die Brigitte hier. :)

    Nicht verstanden hab ich leider, welches konkrete Problem du per Hintergrundbildern angehen willst. Flexible Bildgrößen? Haben wir seit Jahren. Geräteabhängige Bilder? Webkit hat srcset bereits, andere Browser werden folgen.

    Das musst du mir nochmal genauer erklären bitte.

    Antworten Teilen
  6. von Stefan Maier am 15.10.2013 (13:53 Uhr)

    schlicht und ergreifend: überlüssig

    Antworten Teilen
  7. von Tobias Kivelip am 15.10.2013 (14:38 Uhr)

    Ich hab es nicht getestet, aber wird da nicht der W3C Validator wieder fündig und mit ihm diverse SEO Tools?

    Antworten Teilen
  8. von Roland am 15.10.2013 (14:46 Uhr)

    Die Website intentionjs.com hat 119 Fehler und 37 Warnungen bei http://validator.w3.org

    Antworten Teilen
  9. von Marko am 15.10.2013 (16:37 Uhr)

    https://www.google.de hat 28 Fehler und 5 Warnungen. Und jetzt? Interessiert doch keinen, wenn man die Fehler kennt und akzeptiert. Der Validator und auch SEO-Tools mögen fündig werden, aber Google selbst ist das offenkundig egal.

    Antworten Teilen
  10. von Sebastian Otto am 15.10.2013 (23:58 Uhr)

    Wo bleibt die Trennung zwischen Inhalt und Aussehen?

    Antworten Teilen
  11. von Andre am 16.10.2013 (08:46 Uhr)

    Nun den Design sollte grundsätzlich nicht mit Javascript gelöst werden.
    Wenn in Zukunft alle Probleme so gelöst werden, dann macht sich keiner mehr Gedanken um die Weiterentwicklung der Entwürfe von CSS ... hier drückt nämlich der Schuh ...

    Antworten Teilen
  12. von Jörg am 16.10.2013 (10:25 Uhr)

    @Florian
    Ja, geräteabhängige Bilder. srcset seh ich da auch als die Lösung an, allerdings wird sich das noch etwas hinziehen, bis wir das in allen Browsern zur Verfügung haben.

    Flexible Bildgrößen - wie habt Ihr das denn gelöst?


    Zum W3C Validator...habe schon oft von Kunden gehört, dass sie auf fehlerfreie Validierung bestehen, obwohl sie keine Ahnung haben, was die Fehler eigentlich bedeuten. Ziemlich ärgerlich, wenn man das erstmal erklären muss und man wahrscheinlich trotzdem nicht verstanden wird. Ich verweise da auch immer auf google.

    Antworten Teilen
  13. von Jörg am 16.10.2013 (10:35 Uhr)

    ...achja...oft jagen potentielle Kunden die Seiten der webdesign Anbieter durch den Validator, noch bevor da irgendein Kontakt zustande kommt. Schmeisst der dann Fehler raus, gehen Sie gleich woanders hin. Soll schon mal vorgekommen. Egal ob sie die Fehler verstehen oder nicht.

    @Roland
    Als ich meinen Blog in ein Verzeichnis eingetragen habe, musste ich zur Bestätigung ein meta tag setzen, welches es laut W3C nicht gibt. Seitdem schmeißt der Validator mir einen Fehler.

    Antworten Teilen
  14. von tkweb am 25.10.2013 (10:06 Uhr)

    Und wenn JS mal deaktiviert ist, zerkloppt es mir das gesamte Layout... Dann brauche ich ja doch einen responsive CSS Fallback ... das macht doch die vorgestellte Lösung überflüssig, oder? Gibt es einen Vorteil gegenüber der CSS Variante?

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite
Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite

Beim Responsive Webdesign können Tools und Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch 18 kostenlose Tools, … » weiterlesen

Responsive Design: Zehn kostenlose Webdesign-Templates
Responsive Design: Zehn kostenlose Webdesign-Templates

Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und … » weiterlesen

Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign
Für Touch, Tap und Fernbedienung: So geht Usability-Optimierung für Responsive Webdesign

Wenn eine Webseite auf allen Geräten – vom Smartphone über den Desktop bis zum Smart TV – optimal dargestellt werden soll, kommt heute Responsive Webdesign zum Einsatz. Doch auch das beste … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?