Responsive Webdesign – Grundlagen

Off-Canvas

Testen Sie unsere 1982 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Nicht benötigte Komponenten können auch außerhalb des Bildschirme platziert werden und erst bei Bedarf erscheinen. Diese schicke Technik nennt sich Off-Canvas.

Transkript

Nicht benötigte Komponenten können auch außerhalb des Bildschirms platziert werden und erst bei Bedarf erscheinen. Diese schicke Technik nennt sich Off Canvas. Sie sehen hier die Beispielseite von Jason Weaver, der das public gemacht hat. Was ist genau Off Canvas? Das heißt wirklich, dass Inhalte außerhalb des Bildschirmes sind? Kann man natürlich in verschiedenen Varianten machen. Und bei größeren Bildschirmen kann man auch mehr anzeigen lassen. Sehen Sie hier auch Varianten, oder bei noch mehr verfügbarem Platz dann alles. Ein Beispiel dafür ist die Webseite hier selber. Wenn ich das einmal hier kleiner mache, dann sehen Sie erst verschwindet das Eine, dann das Andere. Und wenn ich hier draufklicke, dann erscheint das von außerhalb des Bildschirmes. Dieses Off Canvas Pattern ist praktisch für verschiedene Dinge, natürlich auch beispielsweise für die Navigation. Sehen wir uns einmal an wie man so etwas realisiert. Wir verwenden dabei nicht ein Plugin, sondern wir schreiben den benötigten Code selber, setzen aber dabei auf jQuery. Beginnen wir hier einmal, dass wir das Beispiel uns ansehen, worum es geht. Sie sehen hier, schauen wir uns vielleicht erstmal das auf großem Bildschirm an: da sind beide Elemente da. Bei kleineren Bildschirmen ist nur eins da. Und wenn ich hier draufklicke, dann wird das Andere eingeblendet. Ich kann es wieder ausblenden. Und dieses Ein-, Ausblenden erfolgt animiert. Was brauchen wir dafür? Gehen wir erstmal zum HTML-Code. Da sehen Sie, gibt es zwei Elemente, die irgendwelche Überschriften haben. Und in jedem Element gibt es ein Link, um das Element "eins" aus- beziehungsweise einzublenden. Was muss jetzt geschehen, damit das Ganze dann funktioniert? Die entscheidenden Formatierungen und Aktionen finden hier per CSS statt. JavaScript wird nur verwendet, um Klassen hinzuzufügen. Und zwar folgende. Sie sehen, hier unten habe ich einen JavaScript path ergänzt. Dort binde ich zuerst jQuery ein und dann habe ich einen JavaScript path mit weiterem Code. Was geschieht hier? Ich lasse dem HTML-Element zuerst einmal die Klasse js hinzufügen, um für mich zu kennzeichnen: JavaScript ist aktiviert. Wichtig ist nämlich, dass an sich alle Inhalte auch erreichbar sind, wenn JavaScript deaktiviert ist. Dann fange ich mit jQuery ab, ob auf die Buttons geklickt wird und ergänze dann dem HTML-Element die Klasse "aktiv-eins" beziehungsweise ich entferne sie wieder, je nach Situation auf welchen Button geklickt wurde. Schauen wir uns das einmal an. Wenn ich hier in den Browser gehe, und wir gehen jetzt mal, lassen uns den Firebug anzeigen, über F12 geht das sehr komfortabel. Und sehen Sie: erstmal ist die Klasse js da. Und dann klicke ich hier mal auf den Link, sodass "eins" eingeblendet wird, und dann sehen Sie: wird hier die Klasse "aktiv-eins" ergänzt. Wenn ich dann wieder auf den Link zum Ausblenden klicke, entferne ich die Klasse wieder. Das ist also das Einzige, was hier per JavaScript geschieht. Kommen wir zum CSS-Teil. Dieses Beispiel folgt dem Prinzip von Mobile First. Das heißt, die Formatierungen für kleine Bildschirme werden zuerst durchgeführt und danach folgen die Anpassungen für große Bildschirme. Erstmal definiere ich hier eine Transition sowohl für "eins", als auch für "zwei", für beide Elemente. Transition ist eine CSS 3-Eigenschaft, wodurch Sie Übergänge spürbar machen können. Also, wenn es irgendwelche Änderungen gibt, dann laufen die normalerweise sofort ab. Denken Sie an einen klassischen Hawa-Zustand. Wenn Sie da die Farbe ändern, dann erfolgt das sofort, wenn man drüber Hawa hat. Mit Transitions können Sie das aber langsam ablaufen lassen, sodass es wirklich merkbar wird. Und diese Transitions können Sie verwenden für Hawa-Zustände oder aber Sie können sie auch verwenden, wenn Änderungen stattfinden, dadurch dass Klassen hinzugefügt werden. Und das ist in unserem Fall da. Ich definiere die Transition, indem ich sage wie lang sie dauern soll. Ich sage, es sollen alle Eigenschaften einbezogen werden und da bestimme ich wie sie ablaufen soll. Diese Transition-Angabe brauchen Sie zusätzlich noch mit dem Webkit-Präfix für Webkit-Browser. Moz-Präfix für Firefox brauchen Sie hingegen nicht, da der Firefox seit Version 16 keinen Präfix mehr benötigt und es nicht sinnvoll ist beim Firefox viele Vorversionen zu berücksichtigen. Ok, damit habe ich vorbereitet, dass dann die Änderung animiert abläuft. Was geschieht jetzt? Ich möchte, dass bei kleinem Viewport nur ein Element angezeigt wird. Und dafür blende ich das Andere aus. Dafür gibt es natürlich verschiedene Möglichkeiten. Ich mache das hier, indem ich margin-left -100% angebe beim Element "eins" und damit schiebe ich das aus dem sichtbaren Bereich heraus. Das mache ich aber nur, wenn JavaScript aktiviert ist. Deswegen diese Klasse hier davor. Hingegen soll das zweite Element ganz normal angezeigt werden, hat den margin-left 0. Und beide Elemente sind auf 90% derzeit gesetzt. Wenn jetzt auf den einen Button geklickt wird, dann hat das HTML-Element zusätzlich die Klasse "aktiv-eins". Und dann möchte ich das Element "eins" anzeigen lassen. Und dafür muss ich margin-left auf 0 setzen. Normalerweise ist margin-left auf -100%, das Element ist außerhalb des sichtbaren Bereiches. Wenn auf den Link geklickt wird, wird margin-left auf 0 gesetzt und damit kommt es in den sichtbaren Bereich hinein. Und hingegen das andere Element wird mit margin-right -100% aus dem sichtbaren Bereich geschoben. Damit steht die grundlegende Funktionalität. Jetzt muss ich nur noch die Anpassungen machen für große Bildschirme. Ich habe das mal für ab 800 Pixeln gemacht. Diese Buttons zum Ein- und Ausblenden, die brauche ich nicht, weil einfach dann bei großen Bildschirmen ja beide Elemente da sein sollen. Das heißt, ich kann diese durch display: none ausblenden. Und dann wähle ich noch einfach die passenden Formatierungen, die sollen nebeneinander dargestellt werden. Das heißt, ich wähle eine passende Breite, die werden links gefloatet. Und ich wähle noch ein bisschen Padding. Vielleicht wundern Sie sich, dass ich das hier gedoppelt habe, dass ich hier geschrieben habe zum Beispiel js .zwei und .zwei, weil das wählt ja dasselbe Element aus. Das muss ich aber machen, um die vorherigen Angaben zu überschreiben. Weil ich habe ja definiert, dass bei aktivem Java-Script beispielsweise das zweite Element margin-left 0 haben soll und float: left, wie hier auch das erste margin-left -100% Wenn ich das jetzt ändern will, muss ich einen Selektor bauen, der dieselbe Spezifität hat und deswegen brauche ich genau das hier. Weil an sich würde sonst natürlich der hintere Teil auch genügen. Damit steht das Beispiel. Wir können uns auch einmal anschauen wie das Ganze aussieht, wenn JavaScript deaktiviert ist. Ich mache das hier einmal über die Web Developer Tool bar, aktualisiere dann. Dann sehen Sie: alle Inhalte sind erreichbar, sie sind einfach untereinander dargestellt. Man könnte natürlich auch noch hingehen und bei deaktiviertem JavaScript diese Buttons hier ausblenden oder anders benennen. Da könnte man also noch ein bisschen Fein-Tuning machen. Wir haben im Beispiel diese Animation, diese Bewegung über Transitions erledigt und nicht über JavaScript. Das hat den Vorteil der besseren Performance, weil Animationen, die in CSS definiert sind, die kann der Browser optimieren. Wenn Sie hingegen Animationen in JavaScript definieren, dann muss der Browser das einfach abarbeiten. Das ist wesentlich weniger performant. In diesem Fall funktioniert das Ganze natürlich auch, wenn die Transitions nicht gehen, also, wenn wir einen älteren Browser haben, aber dann ist halt die Animation nicht da. Wann funktionieren Transitions? Das finden wir bei Can I Use. Und da sehen Sie, dass es eigentlich sehr gut ausschaut. Wir haben natürlich den Internet Explorer in älteren Versionen, der das noch nicht kann. Aber es wird ja natürlich sonst auch prinzipiell funktionieren, nur eben der Effekt ist nicht zu sehen. Dieses Beispiel hat eine wichtige Aufteilung zwischen JavaScript und CSS gezeigt. JavaScript sorgt für die Klassen, CSS für die eigentliche Formatierung. Und außerdem macht man Animationen auch besser über CSS, als über JavaScript. Abgesehen vom Technischen, das Off Canvas Pattern sollten Sie im Hinterkopf behalten, wenn Sie sich überlegen wie Sie Inhalte auf kleinen Bildschirmen anordnen. Damit ersparen Sie dem Nutzer das er endlos nach unten scrollen muss. Da ist das Off Canvas Pattern eine attraktive Alternative.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!