Erste Schritte mit Responsive Webdesign

Bildschirmmaße abfragen

Testen Sie unsere 1957 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Media Queries reagieren zwar auf unterschiedliche Endgeräte, erkennen jedoch nicht die Auflösung. Wie Sie das erreichen und wie Sie mit Style-Sheet-Angaben die Größe einer Grafik oder eines Textes dynamisch anpassen können, demonstriert dieses Video.

Transkript

Die unterschiedlichen Implementierungsmöglichkeiten der Media Queries, also bspw. als CSS-Befehl, at media, oder als HTML-Attribut, ebenfalls media, bieten uns die Möglichkeit, auf unterschiedliche Endgeräte adäquat zu reagieren. Aber sie bieten uns nicht die Möglichkeit, auf unterschiedliche Auflösungen adäquat zu reagieren. Diese Auflösungsunterschiede gehen sehr oft mit der Unterscheidung zwischen den Endgeräten einher. In diesem Beispiel möchte ich Ihnen aufzeigen, welche Möglichkeiten Sie haben, auf Auflösungen passend zu reagieren. Ich wechsele dazu zurück in das Stylesheet und beginne zunächst einmal mit einem Media Query in der Stylesheet-Datei, die für alle Bereiche zuständig sein soll. Das ist der Befehl: "At media all." Ich habe zwei große IDs in der HTML-Datei, einmal der Banner und einmal der Content. Für beide möchte ich eine zentrierte Ausrichtung in einem Anzeigefensterchen haben. Gucken wir uns die HTML-Datei kurz an: Ich habe also hier meinen ID-Block Banner und ich habe hier meinen ID-Block Content. Simpel mit einer Überschrift bzw. einer Grafik. Wenn ich das jetzt aufrufe, dann dürfte nach der Implementierung bereits die Grafik in der Mitte, sowie auch die Überschrift in der Mitte stehen, egal, welche Auflösung ich habe. Solange die Auflösungen jetzt größer werden, funktioniert das Prinzip. Das übliche Prinzip Tausender von Webseiten, dass einfach hier diese dynamischen Pufferbereiche größer werden. Sobald ich die Seite aber kleiner mache, oder anders ausgedrückt, ich ein Endgerät aufrufe, welches eine niedrigere Auflösung hat, bekomme ich Probleme. Denn jetzt passt sich nichts mehr an. Das ist nicht schön bzw. darauf kann ich wesentlich besser über die Media Queries und Responsive Web Design reagieren. Bei diesem Beispiel wird eine Sache unmittelbar deutlich, die einen großen Unterschied zur herkömmlichen und vor allen Dingen validen HTML-Programmierung darstellt. Wir haben hier eine Grafik eingebunden, die valide, Breite und Höhenangabe erhalten muss. Das Problem dabei ist aber, dass es sich hier um feste Breitenangaben handelt, die auch nicht unterschritten werden können. Jetzt ist es zwar möglich, dass ich diese Breitenangabe hier in dem HTML-Befehl anpasse, aber die Problematik ist, dass ich über diesen Weg nicht an unterschiedliche Auflösungen herankomme, die mir die Media Queries liefern. Also ist der erste Schritt, dass ich hingehe, und diese Angabe aus dem HTML herauslösche und nur noch den Hinweis auf den Source und den Alternativtext mit anbiete. Damit ich nun aber in meinem Stylesheet auf diese Grafik zugreifen kann, implementiere ich auch hier eine ID, die ich einfach mal "Img Banner" nenne. Um einigermaßen valide agieren zu können, muss ich nun in dem Stylesheet eine Größenangabe angeben. Dazu wechsele ich hier herein. Diese Größenangabe setze ich passend für alle Endgeräte, egal welche ich habe. Ich brauche dafür keine spezielle Auflösung anzupassen. Warum, sehen Sie sofort, wenn ich diesen Block implementiert habe. Also, die ID heißt Img Banner. Img Banner soll sich um die Größenangabe der Grafik kümmern. Ich weise noch einmal darauf hin, dass es sich hier um einen ganz wesentlichen Aspekt der Programmierung mithilfe Responsive Web Design handelt. Denn wir möchten dynamisch auf unterschiedliche Auflösungen reagieren. Das kann man nur bedingt oder nur teilweise mit konkreten festen Angaben. Also muss ich eine Art Breite implementieren, die mir nicht z.B. 300 Pixel angibt, sondern die mir sagt: Die Grafik soll 100 Prozent sein. Das Ganze kann ich zusätzlich noch etwas präziser  durch eine Maximalangabe steuern, das heißt: Egal welche Auflösung ich auf dem Bildschirm oder auf dem jeweiligen Endgerät habe, die Grafik soll immer 100 Prozent groß sein. Wichtig dabei ist: Nicht 100 Prozent der Auflösung vom Bildschirm, sondern 100 Prozent der Grafikbreite. Also habe ich eine Originalgrafik, die bspw. 960 Pixel breit ist, dann würde in diesem Fall bei einer Bildschirmauflösung von mehr als 960 Pixeln die Grafik dennoch in 960 Pixel angezeigt werden. 100 Prozent, das heißt: So, wie Sie die Grafik abspeichern, wird sie auch angezeigt. Sobald aber die Auflösung kleiner als die Grafik wird, das heißt kleiner als die 960 Pixel der Grafik, passt sich diese Grafik an. Ich nehme jetzt nicht die 100 Prozent, sondern ich nehme 95 Prozent, einfach wegen der Bildlaufleiste an der rechten Seite, die gegebenenfalls auftaucht. Das sieht einfach schöner aus, wenn wir uns die Grafik nun anschauen. Das speichere ich ab. Wechseln wir kurz in die Vorschau: Zunächst einmal ist kein Unterschied zu eben sichtbar. Nur, wenn wir jetzt die Auflösung verändern, und zwar die Auflösung des Bildschirms, dann sieht man auf einmal, dass sich die Grafik anpasst. Damit sind wir in einem sehr dynamischen Bereich, der  schon eine Menge an Funktionalität bereitstellt, die wir bislang in dieser Art und Weise nicht nutzen konnten. Damit hätten wir bereits eine große Problematik bei dynamischen Auflösungsabfragen mit den Media Queries gelöst. Allerdings fragen wir nicht wirklich eine Auflösung ab, sondern wir reagieren einfach dynamisch darauf, ganz gleich, welche Größe wir haben. Welche Auflösungsmöglichkeiten, bzw. Abfragen zu Auflösungsmöglichkeiten die Media Queries bieten, zeige ich Ihnen im Folgenden. Dafür implementiere ich wieder einen neuen Media Query. Dieser Media Query soll zunächst einmal auf den Screen angewendet werden. Schreiben wir es kurz fertig: Betrifft die Grafik, also auch wieder unsere ID Img Banner. Damit wir von der optischen Seite besser etwas erkennen können, soll nun Folgendes passieren: Die Grafik soll einen Rahmen bekommen. Dieser Rahmen soll zunächst einmal durchgängig sein. 10 Pixel breit, damit wir ihn auch gut erkennen, und er soll die Farbe Rot besitzen. Das heißt: Wenn ich es jetzt starten würde, würden Sie die Grafik mit einem roten Rahmen sehen, und nicht mehr und nicht weniger. Das kennen wir bereits an der Stelle, nämlich die Abfrage des ganz normalen Media Queries "Screen". Durch den booleschen Operator AND kann ich nun aber eine Abfrage konkret innerhalb der Auflösungsgrenzen stattfinden lassen. Das setze ich in runde Klammern, nach diesem Endbefehl. So kann ich zum Beispiel konkret abfragen die Breite 960 Pixel. Das würde mir allerdings nicht sehr viel bringen, denn nur bei 960 Pixel wird dieses Stylesheet, bzw. diese Stylesheet-Angabe Wirkung zeigen. Das möchte ich nicht. Ich möchte, dass es bspw. einen durchgezogenen roten Rahmen in 10 Pixel Breite gibt, wenn die Bildschirmauflösung mindestens 960 Pixel beträgt. Also sind wir wieder bei einer Min-Angabe, wie wir sie ähnlich vergleichbar schon hier oben bei der ID kennengelernt haben. Hier gilt allerdings, dass die maximale Angabe immer 95 Prozent ist, und hier gilt, dass die minimale Angabe 960 Pixel sein muss, damit die Grafik einen roten Rahmen bekommt. Schauen wir uns das an: Ich gehe wieder in die Vorschau und wir sehen: Das hat funktioniert! Sobald ich kleiner werde, verschwindet dieser Rahmen. Genau an der Stelle unterschreiten wir die 960 Pixel und damit greift dieses auflösungsspezifische Media Query nicht mehr. Damit wir in allen möglichen Varianten noch etwas erkennen können, passen wir das Ganze nun an. Ich möchte also ein Media Query haben, das für alle Auflösungen gilt, die über 960 Pixel groß sind. Ich möchte ein Media Query haben, das für alle Auflösungen gilt, die bis 960 Pixel groß sind. Ich ersetze also einfach den Min-Wert durch den Max-Wert. Jetzt gilt : Bis 960 Pixel greift das hier. Damit wir auch einen Unterschied sehen, gestalten wir das kurz um: Anstatt "Solid" nehmen wir "Dotted", 10 Pixel. Die Farbe soll sich auch noch verändern in Grün. Abgespeichert und ausprobiert bringt uns das schon einen ganzen Schritt weiter. Wir kriegen nämlich einen gepunkteten Rahmen - oder einen "dotted" Rahmen - der grün wird, und ab 960 Pixel wird er rot und ist ausgefüllt. Gehen wir weiter. Wenn wir so wollen, betrifft der Screen - das heißt, die Anzeige auf dem Bildschirm in einem Webbrowser - nun immer noch die klassische Größe einer Webseite, die auf einem Desktop-PC angezeigt werden kann, aber auch z.B. noch auf einem iPhone funktioniert. Man könnte das noch genauer spezifizieren, insbesondere was Landscape- und Portrait-Ausrichtung angeht, das heißt "Hochkant" oder die Ausrichtung "Quer", "Horizontal", aber das spare ich mir an der Stelle mal. Ich füge nur noch eine weitere Auflösungsabfrage hinzu, die im Moment eher auf das iPhone abzielt. Die maximale Breite beim iPhone wären 480 Pixel, wenn wir das iPhone hochkant halten. Wir könnten nun noch eine weitere Abfrage haben, nämlich 320 - also für alle weiteren, üblichen Smartphones mit geringerer Auflösung. Ich denke aber, das Prinzip wird deutlich: Wir müssen einfach nur diese Größenangaben ändern. Damit wir den Unterschied wahrnehmen, implementiere ich auch hier ein anderes Aussehen und eine andere Fabe, speichere  ab, und demonstriere es Ihnen in der Vorschau des Safari. Jetzt haben wir hier alles, was größer als 960 Pixel ist, sieht so aus. Alles, was kleiner wird-- Beachten Sie bitte nochmal die Veränderung, auch der Größe der Grafik, ein sehr dynamischer Effekt. Ab 480 Pixel wird der Rahmen blau. Doppelt umrandet. Genauso habe ich mir das vorgestellt. Wenn wir jetzt in einen Bereich hineinkommen, der noch kleiner wird, dann haben wir allerdings die Problematik, dass jetzt hier die Überschrift umbricht. Nur damit es deutlich wird: Genauso, wie Sie eine Grafik dynamisch verkleinern können, können Sie das auch mit Schriften machen. Das zeige ich Ihnen noch kurz, indem wir in diesen ganz kleinen Bereich, der 480 Pixel, noch unseren Content aufnehmen - also die ID Content, die die Überschrift beinhaltet - und in diesen Block eine Zeichengröße hineinsetzen, "Font Size", bspw. von ca. 80 Prozent. Die 100 Prozent Zeichensatzgröße, Font-Größe geht immer von der jeweiligen Auflösung aus. Das heißt: So wie es auf dem Webbrowser, beim Benutzer, eingestellt ist. Damit es ganz deutlich wird, passen wir die Farbe noch an. Auch hier wollen wir das Blau nehmen, wie es bei dem Rahmen vorkommt, und schauen uns das Ergebnis in der Vorschau an. 960 Pixel - kleiner als 960 Pixel - jetzt kommen wir in die 480. Achten Sie auf den Text: Sie sehen, es gibt einen Sprung, nämlich 80 Prozent genau an der Stelle. Ich denke, es ist offensichtlich, wenn man sich das so vorstellt, dass wir jetzt im iPad wären, bspw. an der Position. Jetzt sind wir auf einem größeren Bildschirm, dass Sie dieses Spiel beliebig fortsetzen können. Nachteil ist sicherlich, dass ich immer, egal welches Endgerät, welches Device ich verwende, die größte Variante einer Grafik laden muss. Ich kann das in Scriptenform, also z.B. mit JavaScript oder jQuery noch etwas anders lösen. Aber zunächst einmal ist das über die Media Queries in den Stylesheets so machbar, dass Sie den größten gemeinsamen Nenner der Grafik nehmen, und diesen dann geschickt über die Prozentangaben in Ihrem Stylesheet mit den Media Queries abfragen. Allein durch die Implementierung der Media Queries in Verbindung mit der auflösungssensitiven Abfrage können Sie eine Vielzahl von Anwendungsmöglichkeiten abdecken. Ob Sie nun, wie in unserem Beispiel, eine Grafik verändern, die Größe der Grafik verändern oder hier die Größe einer Schrift verändern sowie die Farben und Umrandungen, oder ob Sie einfach sagen, dass z.B. ab einer bestimmten Auflösung dieser div-Bereich angezeigt wird, oder gar nicht mehr angezeigt wird, oder dieser div-Bereich entweder rechts neben dem anderen oder, wenn es zu klein wird, unterhalb-- All diese Möglichkeiten bestehen mit diesen einfachen Möglichkeiten, die Sie hier sehen, mit der auflösungsspezifischen Abfrage sowie den einzelnen Media Queries für die unterschiedlichen Endgeräte.

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)
Tolles Training
Petra S.
Wunderbar erklärt, leicht zu verstehen.
 

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!