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.

Responsive Webdesign – Grundlagen

RWD im Chrome testen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Entwicklungstools in Chrome erlauben den Test von responsivem Layout: Sie können die Darstellung auf verschiedenen Geräten und sogar mit unterschiedlichen Verbindungsgeschwindigkeiten simulieren. 

Transkript

Die schönen Optionen, um Responsives Design zu testen, bietet der Chrome Emulator. Ich bin gerade im Chrome Browser. Klicke mit der rechten Maustaste irgendwohin und sage Element untersuchen. Damit bin ich den Entwickler-Tools. Und in den Entwickler-Tools gibt es dieses kleine Symbol, wo steht Toggle device mode. Jetzt kann ich ein anderes Device auswählen. Ich sage mal: ich möchte gerne ein iPhone 6 beispielsweise. Dann sehen Sie ganz hervorgehoben einen Balken, dass Sie an dieser Stelle auf jeden Fall die Seite neu laden sollten, damit wirklich alles wie gewünscht funktioniert. Und Sie sehen das Layout jetzt, wie es in dem angegebenen Gerät dargestellt werden würde. Sehen die Breitenangaben. Sie können auch zwischen Portrait und Landscape-Modus wechseln. An der Stelle sehen Sie, ob es sich um ein hochauflösendes Gerät hält. Das Ganze ist natürlich jetzt sehr verkleinert. Wenn man mehr erkennen möchte, dann kann man dieses Fit abwählen und sieht das größer. Das mache ich einmal. Was Sie auch sehen, ist dass Ihr Maus-Cursor kein Maus-Cursor mehr ist, weil damit auch der Touchscreen simuliert wird. Und es funktionieren beispielsweise auch nicht mehr die Java-Zustände. Ebenfalls sehr praktisch ist die Angabe bei Network. Da können Sie simulieren eine schlechte Verbindung. Sie sehen was da alles zur Auswahl steht. Wichtig ist, das funktioniert im Zweifelsfall nur, wenn Sie es bei einer Web-Seite ausprobieren, die auch wirklich im Internet ist, also übers Netzwerk aufgerufen wird. Sehr praktisch ist diese Angabe. So ein kleines Treppensymbol hier oben. Und damit können Sie sich anzeigen lassen, was für Media Queries es gibt, und die dann auch auswählen. Und sehen dann immer wie das in dem jeweiligen Zustand auch aussieht. Wenn Sie das dann wieder deaktivieren wollen, dann geht es über Toggle Device Mode. Und wir sind wieder in dem normalen Modus. Und ich kann das natürlich wieder aktivieren. Wichtig ist immer, dass Sie daran denken die Seite im Zweifelsfall neu zu laden. Sie habe gesehen, dass Chrome sehr nützliche Features bietet, um Responsive Web-Seiten zu testen. Sie können sich ansehen wie es in verschiedenen Geräten aussehen würde. Sie können schlechte Netzwerk-Verbindungen testen. Sie können zwischen Portrait und Landscape-Modus wechseln. Sie können sich auch simulieren lassen hochauflösende Displays. Und sehr nützlich ist, dass man sich direkt auch die Media Queries anzeigen lassen kann.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 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!