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.

Erste Schritte mit Responsive Webdesign

CSS-Styles für Tablet-PC und Smartphone

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit einfachen Media Queries erreichen Sie viel. Tablet-PCs und Smartphones stellen jedoch mehr Anforderungen ans Layout. Sehen Sie in diesem Video, wie Sie über Media Queries auf solche Geräte zugreifen können - inklusive Online-Demonstration.

Transkript

Mit dem Media-Query "All" und dem folgenden, hier zu sehenden Stylesheet - das ist etwas umfangreicher, um eine komplette Webseite abzubilden - erreichen wir möglichst viele Endgeräte alleine dadurch, dass wir ein sogenanntes "fließendes Design" haben, ein "fließendes Layout" haben. Das heißt, wenn ich die Webseite bewege, dann schrumpfen die Grafiken - wie man hier sieht - und es passt sich auch der Textbereich bzw. auch der Seitenleistenbereich den jeweiligen Auflösungen an. Tablet PCs und Smartphones unterliegen aber noch weiteren Möglichkeiten bzw. Anforderungen, und das möchte ich Ihnen in dem folgenden Video demonstrieren. Nachdem wir einen Block in diesem Stylesheet enthalten haben, der für alle Endgeräte gelten soll, spezifizieren wir jetzt in einem ersten Schritt ein Stylesheet für das iPad. Dafür gehe ich hin und nehme ein Media-Query auf, und zwar "einzigartig", also "only", einzigartig für die Bildschirmausgabe und wieder den Einstellungen, den Größeneinstellungen, um die es geht. Ich konzentriere mich zunächst einmal auf 768 Pixel, das entspricht dem iPad, wenn Sie es hochkant halten, und ich möchte nicht die maximale Auflösungsbreite oder dergleichen ansprechen, sondern ich möchte die "Device"-Breite ansprechen, die das Gerät mitliefert. Das heißt, hier habe ich eine "Device Width" von 768 Pixeln. Damit man aber auch ganz genau weiß, wo diese 768 Pixel entstehen, müssen wir ein weiteres Feature der Media Queries aufgreifen, nämlich die "Orientation". Und das verknüpfen wir erneut mit dem booleschen Operator "And" und setzen hier eine "Orientation" als Befehl hinein und fragen nun, wie das iPhone bzw. das iPad gehalten werden soll. Und "Portrait" entspricht dem Halten im Hochkantformat. Genau in diesen Block hinein müssen wir jetzt sämtliche Einstellungen vornehmen, die wir haben möchten, damit beim iPad eine Veränderung stattfindet, wenn ich es hochkant halte. Da wir ein fließendes Design haben, ist da gar nicht so viel notwendig. Schauen wir uns nämlich an, dass wir eine Schriftgröße haben und eine Header-Grafik benutzen. Ich habe hier schon den Header "Image" als Stylesheet vorgesehen, der in einer normalen Auflösung keinen Rahmen besitzt. Und damit wir erkennen können, dass sich beim iPad ein Unterschied einstellt - also je nachdem, ob Sie es im "Landscape" oder im "Portrait"-Format betrachten - nutzen wir diesen Header "Image" dafür, um das deutlich zu machen. Ich kopiere nun an diese Stelle die notwendigen Befehle und das betrifft die Größe H1, und zwar sowohl im "Content"- Bereich als auch in der "Sidebar". Und die besagte Header "Image". Das hier ist notwendig einfach vom Aussehen her, weil ich das nicht so schön finde, wenn auf dem iPad im Hochkantformat die Überschriften so groß sind. Deswegen bin ich hier hingegangen und habe die ein ganz klein wenig kleiner gemacht, denn - wie Sie sehen - im Original, das steht hier weiter oben, da haben wir den "Content" und da haben wir "Content H1", da sehen wir, dass die Zeichensatzgröße auf 220 Prozent steht und im "Portrait"-Format soll die auf 170 Prozent sein. Noch etwas fällt auf: Dass wir, wenn wir uns hier anschauen, wir haben eine Definiton ID-Content H1 und dort enthalten "Letter Spacing" und "Font Weight Normal" etc. Diese Einstellungen brauchen Sie nicht mehr. Das heißt, Sie können sich nur noch auf diesen einzelnen CSS-Befehl konzentrieren, der auch verändert werden soll. Das ist der eigentliche Sinn des Überschreibens bzw. des Kaskadierens der "Cascading Stylesheets". Ein einziger Befehl oder ein einziges Attribut soll verändert werden, und das ist die Zeichensatzgröße, also nehme ich auch nur diesen Befehl auf. Das Gleiche gilt für die "Sidebar" und für den Header "Image". Der nächste Schritt, der jetzt noch gemacht werden muss, ist die Reaktion darauf, wenn das iPad gekippt wird, d.h. wenn Sie in das "Landscape"-Format gehen. Der nächste Schritt, der jetzt notwendig ist, ist die Implementierung des "Landscape"-Formates, d.h. wenn Sie das iPad so drehen, dass Sie es im Querformat halten. Dazu kopiere ich mir einfach diesen kompletten Block, weil ich möchte nicht viel mehr anderes ändern, wie auch schon hier drin steht. Nur auch hier wieder etwas genauer auf die Schriftgrößen eingehen. Da haben wir nicht die "Device"-Breite von 768 Pixeln, sondern hier müssen wir etwas genauer vorgehen, hier müssen wir auf die "Max-Device"-Breite eingehen, denn es ist ja durchaus möglich, dass einer im Querformat des iPads die Breite des Browsers nicht vollständig eingestellt hat. Das heißt also, das iPad kann breiter sein als der Browser und das möchte ich aufgreifen an dieser Stelle. Und das entspricht dann nicht mehr 768, sondern 1024 Pixeln. Und besagte "Orientation" ist nicht "Portrait", sondern "Landscape". Und das ist das Einzige, was ich im Wesentlichen ändern muss, um auf die unterschiedlichen Auflösungen bzw. Handhabungen zurückzugreifen. Und da wir hier jetzt wieder etwas größer sind, wenn es quer gehalten wird, stelle ich einfach die Schrift auf 200 Prozent und diese hier auf 110 Prozent. Was ich möchte ist, die Farbe ändern, d.h. jetzt soll der Rahmen um die Grafik rot werden, damit man sehr schön erkennen kann, wenn man das Ganze kippt. Wir müssen nichts anderes machen wie nun dieses Stylesheet veröffentlichen und schauen uns das Ganze nun auf dem iPad an. Starten wir das iPad und öffnen den dazugehörigen Browser, geben kurz die URL ein - da sind wir schon - und rufen unser Layout auf. Wie wir erkennen können, haben wir ein passendes Layout für das iPad, und insbesondere unsere rot umrandete Grafik - ich zoome kurz einmal rein - also hier die Striche, die Sie an der Stelle sehen, die signalisieren, dass wir jetzt im Querformat, im "Landscape"-Format sind. Wenn ich das Ganze nun drehe und kurz kippe, damit es umspringt, dürfte auffallen, dass wir nun entsprechend ein etwas anderes Layout haben. Das betrifft nämlich die Überschriften, und es betrifft die Farbe der einzelnen Umrandungen von dieser Header-Grafik. Auch hier nochmal ganz kurz reingezoomt, dass wir sehen, es ist wirklich eine andere Farbe. Und ich darf Sie bitten: Achten Sie nochmal hier auf die Überschriften, auf die Geschichte und auf aktuell Dunnottar Castle. In dem Moment, wenn ich es umdrehe und wieder kippe, haben Sie gesehen, werden die Schriften größer, die Überschriften wieder größer. Das entspricht genau der Einstellung, die wir in unserem Stylesheet für diesen Prozess vorgesehen haben. Nun fehlt uns nur noch das iPhone. Da konzentriere ich mich auf das iPhone 4. Es soll stellvertretend für alle anderen Möglichkeiten stehen, die wir einsetzen können, bzw. für die ganzen sogenannten Smartphones, die auf dem Markt erhältlich sind. Auch hier erzeuge ich wieder einen eigenen Media-Query für. Das ist auch wieder "Only Screen". Diesmal allerdings können wir nicht einfach sagen, welche Breite ein "Device" haben soll, sondern hier müssen wir auf die besagte Pixel-Ratio zurückgreifen. Und das geht über einen speziellen Befehl, eingeleitet mit dem Bindestrich, "-webkit" heißt dieser Befehl, "-min-device-pixel-ratio", und dorthinter folgt eine Angabe, eine Größenangabe, eine Verhältnisangabe, und die kann durchaus unterschiedlich sein. Das iPhone 4 hat eine Pixel-Angabe, eine Pixel-Breite von 960x640. Das entspricht einer Pixel-Ratio von 2.0 oder von 2. Das iPhone 3 beispielsweise, oder auch das Android MDPI hat eine Auflösung von 320x480 Pixeln. Das Android HDPI 480x800 Pixel. Um z.B. 480x800 Pixel, also das von Android - von einem neueren Android - abzudecken, würden Sie anstatt 2, die Verhältniszahl 1,5 dort eintragen. Beim älteren iPhone 3 würden Sie 1 hinschreiben. Das iPad selbst hat auch eine 1, falls Sie das damit machen möchten, wobei man das durchaus oben realisieren kann, wie wir das bereits gemacht haben. Ein älteres Android mit 320x240 Pixeln hätte eine Ratio von 0,75. Man kann aus so etwas eine Formel bilden und mit einem simplen Dreisatz quasi ausrechnen, welches Media-Query für welches Endgerät gerade notwendig ist. Allerdings nützt uns das alleine im Stylesheet herzlich wenig. Ein kleiner Tipp schon einmal an der Stelle: Sie können sich sehr einfach - mit einem Java-Script beispielsweise - erfragen, welche Pixel-Rate oder Pixel-Ratio der jeweilige Browser hat, der gerade aufgerufen wird. Und das leiten Sie einfach weiter an das Stylesheet und haben somit immer den richtigen Eintrag. Nachdem das geklärt ist, haben wir erneut ein paar Dinge, die wir anpassen müssen und das betrifft zunächst mal auch wieder den "Content"-Bereich und die Seitenleiste, d.h. auch hier kopiere ich mir die Überschriften jeweils rein. Ich habe hier allerdings eine kleine Änderung vorgenommen, und zwar bei der "Sidebar", d.h. direkt den jeweiligen IDs zu diesem Container. Hier möchte ich, dass der Container 100 Prozent der Seitenbreite annimmt und die "Sidebar" etwas kleiner ist, wenn sie angezeigt wird. Das nochmal ganz kurz in der Vorschau hier auf dem Bildschirm. Wir haben im Moment hier eine Seitenbreite von circa 70 Prozent. Und entsprechend die restlichen circa 20 Prozent nimmt die Seitenleiste ein. Ich möchte aber bei meinem iPhone, dass dieser "Content"-Bereich breiter ist, also d.h. fast quasi über die Gesamtbreite geht, die das iPhone anzeigen kann. Und ich möchte, dass dieser Block ebenfalls breiter ist, denn der wird nicht mehr - wie wir es hier sehen - rechts daneben angezeigt werden, sondern unten drunter. Und das ist aus diesem Grund mit dieser Größenangabe realisierbar, so, wie wir das hier gemacht haben. Es soll noch etwas geschehen: Ich möchte den Menüpunkt nicht in einer horizontalen Leiste oben aufgelistet haben, sondern ich möchte die Menüpunkte untereinander stehen haben, so dass sie recht leicht und gut mit dem Finger navigierbar sind. Damit überschreibe ich kurz die Einstellungen für das Menü. Das haben wir hier gemacht. Sie sehen, im horizontalen Aufbau haben wir die Menüleiste - wo haben wir es? hier ist es - die einzelnen Aufzählungen in der Menüleiste auf "Display inline" gestellt - das erlaubt mir die horizontale Auflistung. Das habe ich geändert. Ich habe jetzt wieder einen Block. Und die Größe, die Schriftgröße, für die Menüpunkte sind verdoppelt worden und damit etwas größer und besser für den Finger erreichbar. Das ist allerdings alles, was für mein Layout und für das gewählte Layout notwendig ist. Auch hier noch einmal eine Änderung der Farbe, was die Header-Grafik angeht, d.h. sie wird jetzt blau umrandet und damit auch unterscheidbar von den anderen Layouts. Schauen wir uns das kurz im iPhone an. Dazu starte ich den Webbrowser und rufe die Seite auf, wo wir das Stylesheet gerade passend für das iPhone vorbereitet haben. Und wie man sieht, habe ich nun hier meine Menüpunkte untereinander stehen - das war das "Display Block". Die Schrift ist ebenfalls größer. Das fällt auf, weil die Hauptüberschrift nicht angepasst wurde. Das war jetzt Absicht, damit wir sehen, dass es da ein unterschiedliches Verhältnis gegeben hat. Aber die Besonderheit besteht eigentlich darin, dass wir nun den eigentlichen Text untereinander stehen haben und - Sie erinnern sich an die rechte Seitenleiste - diese ebenfalls hier unter dem Fließtext angeordnet wurde, einschließlich der unterschiedlichen Sprachversionen. Wenn ich das Ganze nun drehe und kurz kippe, dann werden Sie ebenfalls feststellen, dass sich das anpasst. Gehen wir jetzt wieder hoch: Also auch hier schön, was die Grafiken angeht. Die volle Breite, die ausgenutzt wird, und wir haben auch hier wieder unterschiedlich die Farbe für den Bildrahmen. Ich kippe es noch einmal ganz kurz, damit man sieht, wie die Überschriften reagieren und man sieht, die Überschriften passen sich auch hier im Layout ganz genau an, und somit erreichen Sie auch im iPhone sowie im iPad sowie auf unterschiedlichsten Browsern auf unterschiedlichsten Auflösungen immer ein perfektes Ergebnis für Ihre Webseite.

Erste Schritte mit Responsive Webdesign

Erarbeiten Sie sich die grundlegenden Techniken zu Responsive Webdesign und stellen Sie damit sicher, dass sich Ihre Webseiten auf unterschiedlichen Endgeräten einsetzen lassen.

1 Std. 32 min (11 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!