Erste Schritte mit Responsive Webdesign

CSS-Styles für unterschiedliche Medien festlegen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit Hilfe von HTML-Code und einer Style-Sheet-Datei können Sie bereits einige Features für viele Endgeräte festlegen. Lernen Sie in diesem Video, wie Sie eine Website mit fließendem Design, Media Queries und dynamischen Angaben vorbereiten.

Transkript

Sie können mit Media Queries nicht nur Auflösungsdaten, also die Resolution abfragen, sondern diverse weitere Features, die Ihnen zur Verfügung stehen. Bevor wir an einem konkreten Beispiel, "Burgeninfo.de", ein Layout entwickeln und ein dazu passendes Stylesheet, inkl.Media Queries, möchte ich Ihnen kurz einen Überblick geben, auf welche Features Sie mit den Queries zugreifen können. Und zwar können Sie mit den Media Queries folgende Informationen abfragen: Ich missbrauche einfach mal das Stylesheet-Dokument und lösche das gleich wieder heraus. Das erste ist sicherlich die Auflösung. Das liegt auch nahe. "Auflösungsungsdaten". Und die verbinden sich natürlich mit Breiten- und Höhenangabe. Das liegt auf der Hand, dass wir über die Media Queries genau auf diese Werte zurückgreifen können. Allerdings gibt es einen kleinen Unterschied bei Breiten- und Höhenangabe zu dem, was wir hier haben, nämlich die "Device width" bzw. die "Device height". Handelt es sich hier um direkte, konkrete Breiten- und Höhenangaben, haben wir hier die Angabe des Gerätes. Also will heißen, wenn ich z.B. auf einem Bildschirm eine Auflösung von "800 x 600" einstelle, dann habe ich durchaus immer noch die Möglichkeit einer anderen Breite, die bei dem Gerät - dem Monitorgerät - möglich ist, auch wenn das ein klein wenig hinkt. Interessant ist es eben bei Endgeräten, wie z.B. Smartphones und Tablet-PCs. Hier können nämlich die Endgerätebreite und die eingestellte Breite, die gerade abgefragt wird, unterschiedlich sein. Dann haben wir als nächsten wichtigen Punkt, als Feature, das abfragbar ist, die sogenannte "Aspect-Ratio" bzw. die "Rise-Aspect-Ratio". Hierbei handelt es sich um ein Seitenverhältnis, wie bspw. 16:9 etc. Weiterhin können wir uns mit den Media Queries an die Farben heranwagen. D.h., auch dort direkt darauf reagieren. Und etwas, was ganz wichtig ist und was ich auch im aktuellen Video aufgreifen werde, das ist die "Orientation". Die ist ganz besonders bei Tablet-PCs und Smartphones interessant, bei denen Sie durch ein Kippen des Gerätes, das Ganze entweder im Querformat, das ist das sogenannte "Landscape", oder im Hochkantformat, das ist das sogenannte "Portrait", betrachten können. Dann gibt es noch zwei weitere Features, das ist einmal "Scan" und einmal "Grid". Aber da möchte ich zum jetzigen Zeitpunkt nicht näher darauf eingehen. Wie man sehen kann, sind das eine ganze Menge Möglichkeiten, auf die ich mit Media Queries zugreifen kann. Media Queries werden von allen modernen Webbrowsern nativ unterstützt. D.h., Sie können bei den Abfragen direkt diese Features verwenden. Es gibt Ausnahmen, z.B. auf den Apple-Geräten wie dem iPhone. Dort muss man zu einem kleinen Trick greifen und mit einem sogenannten "Webkit" arbeiten. Auch das zeige ich aktuell in diesem Video. Aber im Großen und Ganzen stellt auch das kein Problem dar, da es diese Problematik auch nur auf diesen Geräten gibt und man sehr gut damit umgehen kann. Möchten Sie alte Webbrowser unterstützen, dann würde ich Ihnen noch ein Script empfehlen, und zwar ein JavaScript von einem Entwickler mit dem Namen "Graaf Beine". Wenn Sie das in Google suchen "css-freemediaqueries.js" von dem Entwickler van der Graaf Beine, dann finden Sie auf jeden Fall Treffer, und dieses kleine Script ermöglicht Ihnen durch eine simple Einbindung, auch alte Browser in die Programmierung mit Responsive Webdesign hineinzunehmen. Wir können also in erster Linie Auflösungsdaten abfragen, wir können Seitenverhältnisse abfragen, Breiten und Höhen abfragen. Was ich Ihnen in diesem Beispiel zeigen möchte, ist ganz konkret die Abfrage einzelner Endgeräte - d.h. also, CSS3-Styles für unterschiedliche Medien festlegen. Da das hier kein gültiges Stylesheet ist, lösche ich diese begleitende Beschreibung und wir legen los. Bevor wir das machen, schauen wir uns kurz noch einmal die Seite direkt an, d.h., ich rufe sie im Browser auf. Wir sehen eine simple Seite in HTML, untereinander stehend, mit Text und Links und soweit schon vorbereitet. Ich möchte jetzt nicht zu sehr auf die einzelnen Stylesheets eingehen, die eine Rolle spielen, sondern schwerpunktmäßig auf die Programmierung der "Device". Deswegen mache ich jetzt folgendes: Der erste wichtige Schritt ist, dass wir ein Stylesheet entwickeln, das möglichst für alle Devices die Grundlage bilden soll. Und der Befehl dazu lautet "@media all", d.h., wir spezifizieren das nicht und haben somit einen Container geschaffen, in dem nun alle Stylesheet-Befehle aufgenommen werden sollen, die für alle Endgeräte gelten müssen. Da haben wir nicht allzu viele. Wir haben einmal die Angabe für den "body-Bereich", für den "body-Container" - ich kopiere das jetzt immer über die Zwischenablage und kommentiere das nur dort, wo es notwendig ist. Falls Unklarheiten für die restlichen Befehle, hier: Stylesheet-Befehle, bestehen, schlagen Sie bitte nach und schauen Sie, was für Auswirkungen mit diesen Befehlen erreicht werden können. Der erste Hinweis: Beim Responsive Webdesign sind Sie gut beraten, wenn Sie versuchen, Schriftgrößen - oder möglichst Größen- und Abstandsangaben -soweit das eben machbar ist, in Form von Prozentangaben oder zumindest in dynamischen Angaben anzugeben. D.h., hier an der Stelle von "Size" bspw.: 12 Pixel wäre nicht empfehlenswert, weil dann immer die 12 Pixel, ganz gleich, welche Auflösung oder auch welches Endgeräte Sie haben, angezeigt werden. Die 100 Prozent-Angabe bei der Schriftgröße geht immer davon aus, welche Größe auf dem Gerät als Standard eingestellt ist. Es kann natürlich sein, dass Sie dadurch nicht auf jedem Device ein hundertprozentig gleiches Aussehen haben. Sie müssen selber entscheiden, ob Sie das in Kauf nehmen, oder ob Sie sich etwas einengen und feste Größen angeben. Einfacher ist es auf jeden Fall im flexiblen Layout. Was brauchen wir noch? Wir haben einen sogenannten "Wrapper", der alles umschließt. Und diesen Wrapper habe ich so programmiert, dass die Breite dieses Wrappers 80 Prozent - zunächst der Browserbreite - einnimmt. Die restlichen Einträge, die Sie hier sehen, dienen dazu, dass genau dieser Block in der Mitte eines Browsers schwimmt. Wir sehen also: Hier ist in dem HTML-Dokument der Wrapper, das DIFF, das alles andere, bis ganz nach unten, komplett umschließt. D.h., hier schließt sich der Wrapper wieder, und dieser Block wird 80 Prozent der zur Verfügung stehenden Breite einnehmen und immer in der Mitte des Bildschirms schwimmen. Jetzt folgen einige Größenangaben zu Überschriften und Abständen. Und da brauchen wir, glaube ich, nicht mehr viel dazu sagen, d.h., Sie sehen, es geht hier um den Header, es geht um den Banner - also die große Grafik - es geht um H1 und H2. Und überall da, wo es möglich ist, arbeite ich auch mit Prozentwerten. Die Seite dürfte jetzt schon ein anderes Aussehen haben. Ich speichere das einfach mal ab und wir schauen uns den Zwischenstand an. Sie sehen: Jetzt schwimmt bereits alles soweit in der Mitte. Wir haben auch schon "Überschrift" definiert, wie wir hier oben sehen, und jetzt müssen wir das Ganze nur noch präzisieren, insbesondere, was z.B. hier die Menüpunkte angeht. Und das wäre der nächste Prozess, den wir einfügen müssen, die "Menüprogrammierung", und da gehe ich kurz an die Stelle. D.h., hier haben wir von dieser Position an "Menü UL" bis zum letzten Punkt, der noch einen Hover-Effekt implementiert. Die Aufgabe: Die Liste, die Menüliste, die Sie gesehen haben, so zu gestalten, dass es eine horizontale Auflistung gibt, die auf die Maus reagiert und so eine Art Menüleiste darstellt. Das speichere ich nun ab und zeige Ihnen das Ergebnis. Und da sehen wir, aus dieser Liste haben wir ein simples, einfaches Menü gemacht und das sieht der Seite, die wir anstreben, schon sehr, sehr ähnlich. Der nächste Schritt ist ein Schritt, der sehr effizient ist, was Auflösungsprogrammierung angeht. Wenn wir uns die Grafikdateien in dem HTML-Quelltext anschauen, dann werden wir feststellen, dass wir hier keine Größenangaben, also kein "Width" und kein "Height" drin haben. Ich möchte erreichen, dass ich auflösungsspezifisch immer die 100 Prozent der Grafik angezeigt bekomme, in denen ich die Grafik auch abgespeichert habe. Also, möchte ich eine Grafik abspeichern mit 960 Pixeln, dann wird die auf dem Bildschirm mit 960 Pixeln angezeigt, wenn ich die größte Auflösung fahren kann. D.h., wenn die Grafik hinein passt, dann wird sie diese Anzeige haben. Wird die Auflösung kleiner, wandert auch die Grafik mit. Das können wir uns ebenfalls schon anschauen. Nachdem ich jetzt diesen Befehl "img max width 100 Prozent" eingefügt habe, reagiert die Grafik, wie Sie sehen, in dem Moment, in dem sich die Auflösung in dem Webbrowser ändert. Und die Grafik schrumpft und wächst, je nachdem, wo ich den Browser hinziehe. Also auch eine sehr wichtige Funktion, gerade im Responsive Webdesign. Jetzt folgen einige Befehle, die dazu gedacht sind, dass wir im eigentlichen Content-Bereich ein vernünftiges Aussehen bekommen. Das kommentiere ich jetzt auch nicht komplett runter. Sie sehen, das betrifft wieder "Überschrift" und "Absätze". Auch hier ein kurzer Zwischenstand: Im Moment hatten wir es links stehen, und jetzt haben wir hier schon vernünftigen Text, wir haben einen Rahmen um die Grafik, und die Überschriften sind schon so formatiert, wie es sein soll. Wie wir erkennen können, haben wir hier rechts noch die sogenannte "Sidebar". Die müssen wir noch anpassen und dafür gibt es auch einen größeren Block, den ich jetzt hineinkopiere. Der ist etwas größer, weil wir dort auch noch die Aufzählungen und Menüpunkte drin haben, aber nichts Neues. Und wenn Sie sich die Projektdaten genauer anschauen, dann werden Sie feststellen, dass hier nichts drin ist, was nicht nachvollziehbar ist. Schauen wir es uns an: Jetzt haben wir die Seite schon fast soweit fertig. Das sieht schon sehr, sehr gut aus. Hier fehlen uns noch die einzelnen Flaggen. D.h., da brauchen wir noch das kleine Stylesheet für die einzelnen Grafiken und für die CSS-Sprites, und das setze ich da jetzt hin. Die letzte Klasse habe ich zwar geschrieben, sie ist aber nicht notwendig, sondern dient einfach dazu, dass wir später in den einzelnen Endgeräten genauer erkennen können, welches Stylesheet oder welche Media-Query-Einstellungen gerade gelten. Und damit sind wir im Großen und Ganzen schon fertig. Sie sehen, unsere Webseite funktioniert. So sieht sie auf einem normalen Browser aus. Und das Besondere hierbei ist, dass es ein fließendes Design ist, wie man so schön sagt, das in dem Moment, in dem ich den Browser von der Größe her verändere, bzw., wenn ich eine andere Auflösung einstelle, auch die Webseite hier direkt verändert bzw. dadurch der gesamte Inhalt angepasst wird. D.h., wir sind doch sehr flexibel. Und vor allen Dingen, was die Grafiken angeht, ist das eine sehr schöne Sache, ein adäquates Layout für alle möglichen Auflösungen zu schaffen. Wir haben also über diesen Weg - und vor allen Dingen durch den Einsatz des Media Querys "All" - ein Layout geschaffen, das eine Grundlage bietet für alle möglichen Auflösungen und damit auch für alle möglichen 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)
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!