Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

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

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

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

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

14 Reaktionen
tkweb
tkweb

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
Jörg

...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
Jörg

@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
Andre
Andre

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
Sebastian Otto
Sebastian Otto

Wo bleibt die Trennung zwischen Inhalt und Aussehen?

Antworten
Marko
Marko

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
Roland

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

Antworten
Tobias Kivelip

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

Antworten
Stefan Maier

schlicht und ergreifend: überlüssig

Antworten
Florian
Florian

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
Jörg

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
Florian
Florian

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
Mario Janschitz

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

Antworten
Christian
Christian

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

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen