Erste Schritte mit Responsive Webdesign

Programmierte Websites testen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wenn Sie einmal eine Website programmiert haben, wollen Sie sicher überprüfen, ob sie auch auf unterschiedlichen Endgeräten funktioniert. Das geht am schnellsten mit drei praktischen Websites, die dieses Video präsentiert.

Transkript

Ein großer Vorteil von Responsive Webdesign ist, dass die Inhalte einer Website verschiedensten Endgeräten zugänglich gemacht werden können. Wir sehen hier ein Beispiel, wo das Attribut "media" durch die Werteangabe "screen" und "print" eine Unterscheidung treffen kann, was auf dem Bildschirm, also im Browser angezeigt und was bei einem Ausdruck ausgedruckt werden soll. Bevor wir zur Umsetzung eines konkreten, größeren Beispiels kommen, was die Devices Tablet PC und Smartphone aufgreifen, möchte ich Ihnen ein paar interessante Tools und Werkzeuge vorstellen, die Sie benutzen können, wenn Sie für Responsive Webdesign entwickeln möchten. Das wichtigste Werkzeug ist sicherlich der gewählte Editor. Ich arbeite sehr gerne mit dem Dreamweaver, aus einem einzigen Grund, weil der Dreamweaver solche Wertelisten anbietet. Das heißt also, wenn ich hier zum Beispiel das Anführungsstrichelchen schreibe bei dem Attribut "media", dann bekomme ich eine Liste, welche Werte ich diesem "media"-Attribut zuweisen kann. Das ist sehr bequem, weil man so aus diesem Grund nicht sich alles merken muss oder irgendwo anders nachschlagen muss. Aber es ist natürlich nicht zwingend. Es gibt eine Vielzahl weiterer Editoren. Unter dem Mac möchte ich nur noch nennen Coda, ein sehr schöner Editor, der auch Syntax-Highlighting bietet, ein Preview-Bereich, der speziell für CSS auch noch eine Oberfläche anbietet. Also, sehr gut nutzbar. Für Windows-Systeme gibt es vergleichbar HTML-Editor oder auch Proton, ein sehr einfacher Editor mit dem großen Vorteil, dass man den direkt von einem USB-Stick oder auch einer CD starten kann. Des Weiteren brauchen Sie speziell für Responsive Webdesign die Möglichkeit, sich die Programmierung für einen Device sich auf eben diesem speziellen Device auch betrachten zu können. Ich verwende stellvertretend für das folgende Beispiel in diesem Tutorial das iPhone und das iPad, möchte aber ausdrücklich darauf hinweisen, dass es genauso für ein Blackberry gilt und das es genauso für Android-Geräte funktioniert. Der Grund ist der, dass ich das iPhone besitze und das iPad ebenso und ich damit eben arbeiten kann. Als erstes Beispiel habe ich eine Webseite für das Device iPhone. Ich rufe dazu eine leere Seite auf und es erscheint schon hier testiphone.com. Und wenn ich hier an dieser Stelle einen beliebigen Eintrag mache, also eine Webseite aufrufe, bspw. w3.org, dann erscheint die Webseite hier in der Auflösung des iPhones. Also ein nettes Feature, was Sie nutzen können, wenn Sie das Gerät selber nicht besitzen. Ein weiteres Beispiel für das iPad gibt es ebenso. Ich öffne dazu eine weitere leere Seite und die Domäne lautet www.alexw.me/ipad2. Und hier kann man weiter unten in das iPad hineingehen und entsprechend durch Klick auf die jeweiligen Applikationen auch den Simulator starten. Ebenso wie im iPhone-Simulator kann ich hier oben eine URL eingeben, also bspw. w3.org und mir dann die Webseite in diesem Simulator betrachten. Bitte bedenken Sie aber, dass solch ein Device nur eine Notlösung, eine gewisse Art von Notlösung, ist. Nichts geht darüber, das Device direkt selbst zu verwenden, für das Sie auch entwickeln oder es zumindestens auf unterschiedlichen Ausgabe- und Endgeräten testen zu können. Ich möchte noch eine weitere Seite vorstellen, die sehr interessant ist, weil wir speziell, wenn wir für verschiedene Endgeräte programmieren, auch wissen müssen, welche Auflösungen und welche unterschiedlichen Einstellungen, also ich erwähnte schon mal Portrait und Landscape, diese Endgeräte bieten. Die Rede ist von CSSmediaqueries.com. Was Sie hier sehen, ist eine sehr schöne Übersicht über die einzelnen Auflösungsbereiche. Ich komme später noch genauer da drauf, was dieser Media Query hier bedeutet. Aber wir sehen, wir haben eine Minimaleinstellung, zum Beispiel von 1224 Pixeln und dann sieht man hier, beim iPhone 4 zum Beispiel, verschiedene Pixel- und Ratio-Angaben oder hier beim iPad Portrait 768, beim iPad landscape 1024. Also eine sehr schöne Übersicht über die einzelnen Media Queries und deswegen möchte ich Ihnen gerne diese Webseite auch empfehlen. Sie kennen nun die wichtigsten Voraussetzungen, welche Werkzeuge und Tools Sie für die Responsive Design Programmierungen benötigen und sind in der Lage, online diverse Simulatoren einzusetzen, um Ihre Layouts auf unterschiedlichen Devices testen zu können.

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!