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

Ein Mobile-First-Beispiel aufbauen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Bei einem Mobile-First-Ansatz beginnen Sie mit dem Layout für kleine Viewports und ergänzen dann innerhalb von Media Queries die Angaben für größere Viewports mit min-width.

Transkript

Es gibt zwei grundlegende Herangehensweisen. Sie können zuerst die Formatierung für die großen Viewports schreiben und dann die Anpassung für kleine Viewports vornehmen. Das ist die erste Möglichkeit, die man auch als Desktop first bezeichnet. Die andere Herangehensweise besteht darin, dass Sie zuerst die Gestaltung für kleine Viewports und Smartphones durchführen und danach die Anpassung für größere Viewports. Das ist ein Ansatz, den man auch als Mobile first bezeichnet. Sehen wir uns einmal an, wie das funktioniert. Das einmal als Vergleich: sehen Sie hier zuerst nochmal, wie man einen Desktop first-Ansatz verfolgt. Das heißt, da stehen die ganzen Formatierungen für große Viewports. Sie sehen beispielsweise hier: Navigation und Inhalt werden beide gefloatet nach Breitenangaben. Und dann kommen hier die Anpassungen für kleinere Geräte. Das ist der klassische Desktop first-Ansatz. Eben erkennbar auch an der Angabe max-width. Schauen wir uns an, wie wir das umgekehrt machen können, nämlich eben ein Mobile first-Ansatz. Ich habe hier als Basis ein flüssiges Layout, wo es aber schon grundlegende Formatierungen gibt für den Desktop. Also, ein ganz klassisches Beispiel. Und jetzt wollen wir das zu einem Mobile first Responsivem Layout umstricken. Da gehen wir erst einmal durch bei allen Formatierungen und überlegen uns, ob die auch schon für kleine Bildschirme gelten sollen oder nicht. Also, hier das Box-sizing wollen wir global festlegen. Das wollen wir, unseren Clearfix brauchen wir auch. Body hat nur ein paar grundlegende Formatierungen. Die lassen wir auch für kleine Bildschirme. Der Container - eine Breite von 95%, das passt eigentlich auch. Kopf hat noch ein bisschen Innenabstände. Hier kommen wir jetzt zu dem ersten Punkt. Bei der Navigation haben wir eine Breitenangabe, die brauchen wir natürlich nicht, auf diese Art für kleine Bildschirme. Ich kann die auch gleich dann rauslöschen. Ich möchte sie mir aber hier unten mal kopieren, weil wir die natürlich für die Anpassung für große Bildschirme noch einmal brauchen werden. Deswegen will ich das mal aufheben. Und hingegen jetzt hier alles rausmachen für die kleinen Bildschirme, was Breitenangaben sind und was auch die zweispaltige oder mehrspaltige Darstellung anbelangt. Das heißt, Float und Width kommen raus. Den Innenabstand mit Padding kann ich lassen. Jetzt haben wir beim Inhaltsbereich auch wieder Float und Width, die wir gleich nicht brauchen. Die ich mir aber hier jetzt schon einmal abspeichere, weil ich sie nachher brauchen werde. Das Padding brauchen wir dann auch nicht doppelt. Genau, das heißt, beide im Inhaltsbereich brauche ich jetzt nicht: Float und Width, weil wir ja die Darstellung hier für kleine Bildschirme zuerst machen. Das heißt, soweit kann ich den Rest lassen. Das alles andere ist auskommentiert. Das heißt, jetzt hätten wir schon einmal eine grundlegende Darstellung für kleine Bildschirme. Sie sehen das hier. Man kann natürlich hier sagen: ich möchte die Navigationspunkte lieber nebeneinander. Das ist natürlich möglich, das kopiere ich mir hier mal aus einem anderen Beispiel. Das heißt, ich kann die Navigationspunkte hier jetzt ja auch nebeneinander anordnen lassen. Dann sieht das Ganze so aus. Ok, das ist jetzt unser, unsere erste Formatierung für kleine Viewports. Jetzt wollen wir Anpassungen durchführen, wie es für größere Bildschirme aussehen soll. Weil dann soll die Navigation links angeordnet werden und dieser Inhaltsbereich rechts. Das heißt, hier beginne ich dann mit meinen Media Queries. Das ist wieder @media. Dann sage ich: es ist für screen und welche Angaben. Jetzt gehe ich aus von einem Viewport mit einer gewissen Mindestbreite und nehme zum Beispiel mal den Wert 500 Pixel. Und mache dann die geschweifte Klammer auf. Und das kann ich schon mal auskommentieren, mache die geschweifte Klammer zu. Was muss ich jetzt hier machen? Wenn jetzt der... mehr Platz zur Verfügung ist, dann soll das Ganze nebeneinander dargestellt werden. Das heißt, das ist dieses floaten mit Breitenangaben. Das ist das Eine hier. Wir werden gleich, wenn wir uns so anschauen, sehen, dass wir noch einen zweiten Schritt machen müssen. Wir müssen uns nämlich auch noch um die Darstellung der Navigation kümmern. Aber wir könnten das soweit schon einmal ansehen. Dann genau sehen wir hier: es ist jetzt zweispaltig. Und hier, bei kleineren Viewports einspaltig. Navigation, sollten wir uns noch darum kümmern, die darf ruhig bei großen Bildschirmen... Da schaut natürlich es so komisch aus. ...darf sie gerne untereinander dargestellt werden. Also, wieder als Liste. Und was man dafür machen muss, ist typischerweise dann immer so. Man muss sich anschauen, was hat man vorher angegeben und wie muss man das in diesem Fall jetzt hier aufheben. Also, wir hatten ja eben über diese Angaben die Listendarstellung gesteuert. Jetzt wollen wir wieder die nur als normale Liste darstellen lassen. Und wir hatten eben bei den List Items - display: inline-block gesagt. Das heißt, hier müssen wir wieder eingreifen und sagen: wir wollen das wieder die Listendarstellung machen. Also, display: list-item. Wir wollen auch uns wieder Bullets anzeigen lassen. Da will ich jetzt hier einmal square. Eben hatten wir den Abstand entfernt nach links. Da brauchen wir jetzt aber ein bisschen Abstand. Da würde ich mal sagen: nehmen wir mal 5%. Das kann man sich natürlich dann immer noch anschauen und anpassen. Und das jetzt, genau. Jetzt ist es hier untereinander, genau. Und hier haben wir wieder diesen anderen Ansatz. Das heißt, wir haben hier wieder zwei Layout-Varianten. Das Eine - alles untereinander. Und bei großen Viewports nebeneinander. Das Entscheidende an diesem Beispiel ist aber, dass wir ein Mobile first-Ansatz gewählt haben. Das heißt, wir sind zuerst hingegangen und haben alle Formatierungen für die kleinen, für die schmalen Viewports gemacht. Und dann mit Angaben, mit min-width die Anpassung für große Viewports.

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...
 
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
ISBN-Nummer:978-3-99032-060-0
Erscheinungsdatum:10.09.2013
Aktualisiert am:26.09.2016
Laufzeit:5 Std. 47 min (59 Videos)

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!