Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Responsive Webdesign – Grundlagen

"Und jetzt alle zusammen!" – ein erstes Beispiel

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Film sehen Sie, wie Sie ein erstes kleines RWD-Beispiel erstellen – mit dynamischen Breitenangaben, der richtigen Meta-Viewport-Angabe und angepassten Media Queries.

Transkript

Wenn wir ein flüssiges Layout als Basis haben und die richtige Meta-Angabe ergänzt ist, dann fehlen nur noch die Media Queries, damit aus dem flüssigen Layout ein Responsives Layout wird. Schauen wir uns das einmal an. Ich habe hier ein flüssiges Beispiel. Sie sehen hier, es passt sich an, an die Größe des Browser-Fensters. Und es gibt natürlich auch einen Punkt, wo die Darstellung nicht mehr gut ist, wo einfach hier zu wenig Platz zur Verfügung ist. Und das ist die Stelle, wo wir dann über Media Queries dafür sorgen werden, dass es eine andere Darstellung bekommt. Also, dann werden wir ein anderes Layout realisieren. Schauen wir uns erstmal den Code an, was wir hier haben. HTML-technisch haben wir ein umfassendes Element. Daran ist Kopf, Navigation und Inhalt. Wie ist das Ganze realisiert? Sie sehen zum einen hier ganz wichtig: am Anfang des Dokuments habe ich diese Meta-Angabe ergänzt. Diese Viewport Meta-Angabe, damit Smartphones die automatische Skalierung nicht durchführen. Das ist ganz wichtig, gleich wenn wir eben jetzt hier auch ein Responsives Layout erstellen. Für ein flüssiges Layout alleine wäre das nicht sinnvoll, aber in dem Moment, wo wir da mit Media Queries arbeiten auf jeden Fall. Außerdem ist hier jetzt ergänzt ein Verweis auf eine Datei normalize.css. Das ist eine Datei, die verschiedene Standardformatierungen festsetzt. Es ist ja so, dass wenn Sie eine Web-Seite normalerweise aufrufen im Browser und Sie haben noch keine bei CSS Formatierungen durchgeführt, dann sind trotzdem bestimmte Sachen gestylt. Also, die Überschriften haben eine bestimmte Größe und sind fett, es gibt Abstände etc. Und das machen ja die ganzen Browser durch ihr internes Style Sheet. Und jetzt kann es aber auch sein, dass die Browser das unterschiedlich machen. Und da gibt es dann zwei Möglichkeiten: man kann entweder ein Reset machen. Das heißt, man ersetzt alle Abstände oder Formatierungen, die vom Browser kommen, auf nichts zurück. Dann haben Sie sozusagen eine Stunde Null oder eine Tabula rasa, von der ausgehend Sie Ihre Formatierungen definieren können. Heute setzt sich immer mehr durch, dass man statt dieses Reset ein Normalize macht. Und so eine Normalized Datei habe ich hier eingebunden. Und die macht im Gegensatz zum Reset nicht alle Abstände weg beispielsweise, sondern vereinheitlicht Abstände und solche Sachen. Das gefiel mir eine ganz gute Basis, damit man keine komischen Überraschungen erlebt. So, dann habe ich hier jetzt auf das andere Box-Modell umgeschaltet. Ich habe hier auch noch zwei Klassen drinnen, die dafür sorgen, dass ich eine Möglichkeit habe Floats problemlos zu umschließen, indem ich die entsprechende Klasse gebe. Das ist jetzt so eine Clearfix-Variante. Und Sie sehen hier am Beispiel: hat der Container diese Klasse. Dann habe ich hier ein paar grundlegende Formatierungen. Der Container hat derzeit eine Breite von 95%. Und mit Margin: auto wird der zentriert. Hier gibt es ein bisschen Abstände etc. Interessant ist: jetzt hier wichtig die Navigation hat eine Breite, in Prozent angegeben, die wird links gefloatet. Und auch der Inhaltsbereich hat eine Breite in Prozent und wird links gefloatet. Wir wollen natürlich jetzt dann diese Darstellung der zwei Spalten nebeneinander. Die passt ja nicht mehr, wenn zu wenig Platz zur Verfügung ist. Also, wenn wir dieses Beispiel hier anschauen, gibt es ja irgendwann eine Grenze, wo man sagt: "Also, jetzt passt das nicht mehr, jetzt soll da ein anderes Layout umgeschaltet werden". Und was wird man da im ersten Schritt auf jeden Fall machen, ist dass wir nicht mehr die beiden Spalten nebeneinander darstellen lassen, sondern untereinander. Und dafür müssen wir jetzt unsere Media Queries definieren. Und dafür mache ich jetzt @media. Es soll sich ja auf jeden Fall an Bildschirme richten, das ist screen and. Jetzt kommt eine zusätzliche Bedingung. Und ich möchte jetzt etwas formulieren für die kleinen Bildschirme. Das heißt, Bildschirme, oder genauer genommen Viewports mit einer Größe, sagen wir einmal von nicht mehr als 400 Pixel. Und dann geht die Klammer auf, die geschweifte, und die geschweifte Klammer geht zu. Also, jetzt habe ich definiert für Viewports mit einer Maximalgröße von 400 Pixel. Was soll da geschehen? Ja zuerst einmal möchte ich, dass Navigation und Inhalt nicht mehr gefloatet werden. Außerdem stören natürlich die derzeitigen Breitenangaben. Das heißt, wir machen float: none und setzten die Breite auf auto. Davor hatten wir ja hier Breitenangaben in Prozent. Jetzt setzen wir das auf auto. Dann schauen wir schon mal an, was das jetzt hier bewirkt hat. Und wir sehen hier: bei großem Bildschirm schaut es so aus mit viel Platz. Und hier, wenn es kleiner wird, dann irgendwann switcht das Layout um. Und wir haben jetzt die Spalten nicht mehr nebeneinander, sondern die Inhalte untereinander. Wenn wir uns das derzeit so anschauen, dann ist hier insgesamt durch diesen Kopfbereich mit Navigation doch relativ viel Platz reserviert. Und eigentlich könnte man diese Navigation auf jeden Fall auch Platz sparender anzeigen lassen, wenn wir wirklich nur so eine kurze Navigation haben. Dann wäre bei dieser Darstellung, wie es beispielsweise hier dann auch bei einem Smartphone aussehen würde, besser die Navigationspunkte wären nebeneinander. Das können wir hier auch innerhalb dieser Media Query weiter definieren. Das heißt, wir wollen die Navigationspunkte nebeneinander anzeigen lassen. Dafür brauche ich einen Selector, wo ich jetzt sage: ich spreche die li-Elemente an. Aber nur innerhalb des Elements mit der Klasse Navigation. Gibt natürlich verschiedene Möglichkeiten Elemente nebeneinander anzuordnen. Ich mache jetzt mal hier display: inline-block. Störend ist auf jeden Fall dann auch das Aufzählungszeichen. Das möchte ich jetzt hier auch entfernen. Und ein bisschen Abstand definieren zwischen den Elementen, damit hier ein bisschen auch mehr Platz ist zum Klicken. Schauen wir uns jetzt schon mal das Ergebnis an. Gespeichert ist es. Wenn wir das jetzt hier aktualisieren, dann haben wir die Darstellung nebeneinander. Es ist noch relativ viel Platz nach links. Das liegt daran, dass wir ja ursprünglich hier eine Liste haben. Und das ul-Element der Liste hat einen Padding nach links, was hier stört. Das heißt, hier sollten wir das auch noch auf 0 setzen. Also, bei der ul, wenn sie innerhalb der Navigation ist. Sagt hier dieser Kombinator. Dann möchte ich den Innenabstand nach links auf 0 setzen. Wenn wir das jetzt hier noch einmal aktualisieren, dann ist es auf jeden Fall hier besser. Uns Sie sehen: diese Punkte werden auch schön groß genug, wenn man hier auf dem Touchscreen mit dem Finger draufklickt. Dann ist es eben auch wichtig gerade bei Navigationspunkten, dass die nicht zu nah beieinander sind, sonst passiert es ganz leicht, dass man den falschen erwischt. Und wenn Sie selber mit Smartphone unterwegs sind und Ihnen das mal passiert ist, das ist mal besonders ärgerlich, wenn man wirklich mobil unterwegs ist, die Verbindung schlecht ist, es dauert lang und dann wartet man lange darauf, dass dann am Schluß die falsche Seite lädt Deswegen ist es immer wichtig, dass genügend Abstand zwischen den Punkten ist, damit so etwas nicht leicht passiert. Damit haben wir jetzt hier eine geänderte Darstellung. Das ist unsere Darstellung für große Viewports. Und das ist unsere Darstellung hier für kleine Viewports. An dem ersten kleinen Beispiel haben Sie gesehen, wie man ein Responsives Layout erstellt. Wir haben im Beispiel die Formatierung für große Bildschirme als Basis genommen. Und dann eigene zusätzliche Formatierungen über Media Queries für kleinere Viewports definiert. Das heißt, wir haben hier auf max-width gesetzt.

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!