Responsive Webdesign – Grundlagen

Inhalte anordnen

Testen Sie unsere 1929 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Um die Inhalte bei unterschiedlichen Viewports anzuordnen, wählen Sie aus einer Reihe von Möglichkeiten.

Transkript

Wie ordnet man die Inhalte bei verschiedenen Geräten am besten an? Dafür gibt es eine Reihe von Möglichkeiten. Sehr schön zusammengefasst sind die von Luke Wroblewski, der sicher auch einen Namen gemacht hat, weil er der Erste war, der den Begriff Mobile First public gemacht hat. Eine Möglichkeit, die nennt er Mostly Fluid, besteht darin, dass Sie hier einen Kopfbereich haben, der immer die gesamte Breite einnimmt. Und hingegen hier unten haben Sie mehrere Elemente, die mehrspaltig angezeigt werden bei größerem Viewport und einspaltig, wenn es ein kleinerer Viewport ist. Hier sehen Sie ein Beispiel dafür. Wir haben hier den großen Bereich und hier die mehreren Spalten. Und bei kleinem Viewport ist das alles untereinander angeordnet. Die nächste Möglichkeit ist ein bisschen einfacher und basiert darauf, dass mehrere Spalten nebeneinander angeordnet werden bei großem Viewport und alle erscheinen untereinander angeordnet bei kleinem Viewport. Dann gibt es auch Möglichkeiten mehr Operationen durchzuführen, wo man das, wenn man jetzt eine Variante sieht, nicht sofort erahnt wie wohl die anderen Varianten aussehen wollen. Luke Wroblewski nennt das Layout Shifter. Und da können wir uns hier auch mal ein Beispiel ansehen. Und da sehen Sie, da passiert mehr. Also, hier ist das natürlich linearisiert und ziemlich gradlinig. Und wenn wir das dann mit dieser Ansicht hier bei großem Viewport vergleichen, dann sehen Sie, betrachten wir mal den Kopfbereich und die Navigation, dann ist dieser Kopfbereich zwischen diese Navigationspunkte gewandert. Aber sowas erfordert natürlich mehr Tricksereien per CSS. Dann gibt es noch eine Variante, wo einfach nur kleinere Anpassungen stattfinden, das Ganze aber im Grunde sich nicht groß verändert. Das ist das Einfachste natürlich an sich von der technischen Realisierung, aber vom Konzeptionellen her das Schwierigste, weil das bedeutet, dass man sich wirklich sehr reduziert. Luke Wroblewski beschreibt hier, dass dieses Pattern sehr selten wäre. Mein Eindruck ist, dass es häufiger wird inzwischen. Ein Beispiel ist die Webseite von Trent Walten, die vorher auch anders gestrickt war und inzwischen diesem Pattern folgt. Und Sie sehen, es verändert sich eigentlich kaum was. Nachher werden wir gleich sehen, dass das Logo hochgeht. Aber das ist alles. Sonst gibt es eigentlich so gut wie keinerlei Änderungen. Wenn ich noch mal hier gehe... Man sieht dann auch auf dem Desktop, das ist eine Seite, die sehr mutig ganz viel Leerraum einsetzt und dadurch natürlich auch eine große Ruhe ausstrahlt. Aber es ist natürlich schwieriger Inhalte so zu organisieren bei einem großen Firmenauftritt. Das ist ja hier der Auftritt einer einzelnen Person und da geht das meistens besser. Das sind jetzt hier die klassischen Methoden, wo wir immer innerhalb des Bildschirms bleiben. Und dann gibt es aber auch noch Off Canvas, wo man den Bildschirm verlässt. Sie sehen hier ein paar Beispiele und live können wir uns das anschauen einmal bei Zurb Foundation. Die haben hier ein Beispiel, so schaut es auf großem Screen aus. Und wenn ich es jetzt kleiner mache, dann ist das Menü erst einmal außerhalb des Bildschirms, dieses Menü hier. Und wenn ich es kleiner mache, kann ich es dann eben so einblenden und wieder ausblenden. Und das ist ein Beispiel für diese Off Canvas-Funktionalität. Verwandt mit Off Canvas ist das Overflow Pattern. So nennt es Brad Frost. Und das basiert darauf, dass Inhalte auf allen Screens nur teilweise angezeigt werden und weitere eingeblendet werden können. Im Unterschied zu Off Canvas ist es so, dass bei diesem Overflow Pattern auch auf großem Bildschirm eventuell nicht alle Inhalte direkt angezeigt werden müssen. Und es findet so eine allmähliche Adaptierung statt. Ein schönes Beispiel können wir uns einmal ansehen. Hier, werden wir gehen Meet the Team. Dann sehen Sie, ich bin jetzt auf einem relativ großen Viewport, dass nicht alle da sind. Und ich kann das kleiner machen. Und es kann auch sein, dass dann hier etwas abgeschnitten wird. Warum auch nicht? Das ist ja eigentlich eher gut, weil es zeigt: da ist noch etwas. Sonst könnte man ja vermuten, dass wäre vollständig und es gäbe nur so wenig Team-Mitglieder. Und das passt sich einfach immer an und je nachdem wie viel Platz zur Verfügung ist, werden weniger angezeigt und die anderen können immer angefordert werden. Bei diesen ganzen Überlegungen gibt es einen schönen Hinweis hier in einem Artikel im Smashing Magazine. Oft geht man davon aus von den großen Bereichen auf der Webseite und überlegt sich wie man die anordnet. Das bewirkt oft eine Linearisierung, wo alles den gleichen Rang hat. Dabei gibt es bei den einzelnen Elementen ja meistens Bereiche, die wichtiger und unwichtiger sind. Das heißt, es kann manchmal sinnvoll sein die großen Bereiche der Webseite noch weiter aufzuteilen, damit man die dann genauer anordnen kann. Sie sehen das hier. Da geht es jetzt nicht darum einfach nur einen großen Bereich und Inhalt und sonst wie zu deklarieren, sondern das in kleinere Komponente aufzuteilen, die dann gesondert je nach verfügbarem Viewport angeordnet werden können. Und das ermöglicht ein Fein-Tunen, bedeutet aber natürlich auch, dass man sich mehr um die einzelnen Komponente kümmern muss und nicht einfach die großen Bereiche nehmen kann und einfach linearisieren. Zwei Punkte sind wichtig bei Überlegungen wie man Elemente anordnet. Zum einen, der Bildschirm ist nicht die Grenze. Wir können auch Off Canvas denken. Und zum anderen, für eine bessere Gewichtung der Inhalte kann es sinnvoll sein die großen Bereiche wie beispielsweise Inhalt, Seitbar und Navigation noch feiner zu unterteilen.

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!