Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Erste Schritte mit Responsive Webdesign

Vorstellung der Website

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video bietet einen Einblick in Aufbau und Funktion einer Website, die Sie später dynamisch anpassen werden. Sehen Sie unterschiedliche Ansichten derselben Seite auf verschiedenen Endgeräten: Screen, iPad und iPhone.

Transkript

Ich moechte Ihnen an einer Beispiel-Webseite demonstrieren, wie eine einzige HTML-Seite durch den Einsatz von media queries unterschiedliche Ausgaben produzieren kann auf unterschiedlichen Endgeräten. Das erste Endgerät ist der Screen, also das heißt der Browser, der auf einem ganz normalen Bildschirm aufgerufen wird. Das zweite Endgerät ist das iPad und das dritte das iPhone. Stellvertretend ist das genauso möglich für Androids, für Blackberries und jegliche weiteren Hersteller von Smartphones und Tablet PCs. Betrachten wir die Webseite etwas genauer: Der Inhalt ist so gegliedert, dass wir einen Blog im oberen Bereich haben, einen Menüblog, animiert, und einen Mediablog mit einer Grafik - das könnte auch eine Animation sein oder ein Videobereich. Konzentrieren wir uns auf diese 3 einzelnen Bereiche, sind die in HTML jeweils mit sogenannten "divs" oder auch "layern" umgesetzt. Das sehen wir hier, ein bisschen rauf scrollen: Dort haben wir das erste, größere "div", was alles andere umschließt und dann folgt, genau - das, was ich gerade gesagt habe - der "Header". Es folgt der Menübereich und es folgt der Bannerbereich, der bis hierhin geht. Das heißt, diese drei Blöcke entsprechen genau dem, was wir jetzt hier in diesem Browser zu sehen bekommen. Etwas weiter unten folgt dann der eigentliche Content, der hier zu sehen ist: Überschrift, UnterÜberschrift, Bildmaterial, Fließtext. Und hier auf der rechten Seite eine kleinere Spalte, die auch nochmal Text anreißt, aber nicht vollständig ausschreibt. Dieser Blog ist der eigentliche Hauptcontent; und dieser Blog ist eine Seitenleiste. Das im Quelltext ist so realisiert, dass wir einen Bereich haben, "Content" - der geht ca. bis an diese Stelle - und einen Bereich haben, der heißt "Sidebar" - und die "Sidebar" beinhaltet diese Kurztexte und auch unten die weiteren Sprachmöglichkeiten. Der "div"-Bereich, der sich hier unten schließt, entspricht dem "div" des Wrappers ganz oben, der also alles umschließt, wie ich eben schon angesprochen habe. Betrachten wir uns nun nacheinander das Beispiel auf unterschiedlichen Endgeräten. Einmal das schon gezeigte Beispiel auf dem normalen Screen, das heißt ein Desktopbrowser, und folgend auf einem iPad sowie auf einem iPhone. Ich betone noch einmal, dass sämtliche Unterschiede in der Ausgabe nicht durch eine Veränderung des HTML-Codes stattfindet, sondern dass die Stylesheets angepasst werden und durch die media queries das jeweilige korrekte Endgerät erkannt werden kann. Betrachten wir die Site nun auf einem iPad. Dazu oeffe ich den Browser auf einem iPad und gebe entsprechend die Domain ein. In diesem speziellen Fall fällt auf, dass wir - ich zoome das mal ein bisschen größer - dass wir hier an dieser Stelle eine andere Darstellung haben wie eben auf dem Screen. Zusätzlich sehen wir, dass die Seite ebenso links und rechts Bereiche hat, die frei bleiben, also quasi eine dynamische Pufferzone bilden. Das habe ich nur aus dem Grund gemacht um die Ähnlichkeiten vom Layout her auf das Screen-Design zu übertragen. Das heißt, hier gibt es eine Anpassung automatisch, dass sich die Grafiken in der Größe verändern, wenn es mit einem iPad aufgerufen wird. Und da ansonsten sich die Schriftgröße entsprechend anpassen wird, aber alles andere gleich bleibt, habe ich das nur nochmal verdeutlicht, dass beim iPad hier diese gestrichelte Linie entsteht und auf dem Screen-Design entsprechend diese Linie nicht existiert. Das Ganze nun auf einem iPhone. Ich rufe dort den Browser auf und wir erkennen, dass hier die Menüpunkte untereinander angeordnet sind und nicht mehr, wie bei den anderen Layouts, in der Horizontalen nebeneinander. Das heißt, diese Menüpunkte kann ich wesentlich leichter mit einem Finger erreichen. Die Header-Grafik, die große Banner-Grafik, ist im Wesentlichen genau so breit wie die folgenden; die Schriftgröße hat sich angepasst und es fällt auf, dass die Sidebar, die auf der rechten Seite stand - also hier "Geschichte", "Lager", "Weblinks" -, und die unterschiedlichen Sprachversionen der Datei nun nicht mehr auf der rechten Seite des Layouts angeordnet sind, sondern einfach unter dem Fließtext - ein ganz klein wenig eingerückt - positioniert wurden. Das Ganze ohne Veränderung der HTML-Seite, ausschließlich durch die Nutzung von media queries und die Erkennung der unterschiedlichen devices.

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...
 
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:04.06.2012
Laufzeit:1 Std. 32 min (11 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!