Herzlich willkommen zu diesem Tipp der Woche.

Diese Woche geht es um responsives Design und wie Sie Ihre eigenen Inhaltsseiten darauf

hin überprüfen können, wie andere Nutzer auf anderen Geräten Ihre Webseite betrachten.

Sie werden also lernen, wie Sie Ihre Webseite in verschiedenen Bildschirmgrößen oder Gerätegrößen

betrachten können, ohne den eigenen Webbrowser zu verlassen.

Das heißt, Sie brauchen keine 20 Geräte, die Ihnen bereitlegen, um die Seite dann nochmal

auf anderen Geräten zu prüfen.

Wie funktioniert das Ganze?

Wenn Sie jetzt einen Beitrag entsprechend prüfen möchten oder eine Inhaltsseite überprüfen

möchten, dann öffnen Sie diese und können dann im Anschluss über die Entwicklerwerkzeuge

nachschauen, wie die Seite auf anderen Geräten ausschaut.

Weshalb ist das überhaupt wichtig, bevor ich jetzt anfange?

Das ist deshalb wichtig, da nicht jeder einen 4K-Monitor besitzt.

Das heißt, wenn Sie zum Beispiel an einem sehr großen Monitor arbeiten oder an einem

vielleicht etwas älteren Monitor, kann es natürlich auch sein, dass andere Benutzer

einen größeren Bildschirm verwenden, während andere Nutzer vielleicht nur ihr Smartphone

oder Tablet verwenden.

Um das Ganze jetzt zu testen, können Sie einfach auf den Beitrag, wie ich das schon

gesagt habe, navigieren.

Loggen Sie sich am besten aus, dann sehen Sie die Nutzeroberfläche genauso, wie sie

dann auch vom Seitenbesucher gesehen wird.

Und im Anschluss klicken Sie rechtsklick, Untersuchen.

Es öffnet sich dann von Firefox die entsprechenden Entwicklerwerkzeuge und in diesen Entwicklerwerkzeugen

brauchen Sie von diesen ganzen Fenstern jetzt erstmal nicht, sondern Sie klicken einfach

auf das Tablet- und Smartphone-Symbol, rechts oben in der Ecke, zumindest bei Firefox.

Bei Google Chrome ist das Ganze links oben in der Ecke und bei Microsoft Edge ähnlich

wie bei Google Chrome.

Wenn Sie hier draufklicken, öffnet sich das Ganze in Ihrem Browser.

Das heißt, Firefox öffnet jetzt die Vorschau, wie sie zum Beispiel auf einem Handy sichtbar

ist.

Hier oben hat man mehrere verschiedene Reiter.

Im ersten Dropdown-Menü kann man auswählen, welches Gerät man simulieren möchte.

Zum Beispiel hat man die Möglichkeit, einen 4K-Bildschirm oder einen 4K-Fernsehbildschirm

zu simulieren.

Man sieht schon, das Ganze wirkt natürlich auch anders als zum Beispiel auf einem kleineren

Monitor.

Man kann aber auch bis zu ganz kleinen Geräten heruntergehen, zum Beispiel bis zum iPhone

SE.

Es gibt aber auch die Möglichkeit, verschiedene Tablets zu wählen, wie das iPad, das iPad

Pro oder zum Beispiel das Kindle Fire Tablet.

Genauso wie man das Ganze im vertikaler Ansicht anschauen kann, kann man auch in den horizontalen

Modus wechseln.

Ein weiteres spannendes Feature ist die Drosselung, die man steuern kann.

Wenn man hier eine Drosselung auswählt, dann kann man zum Beispiel ein sehr schlechtes

Netz simulieren, zum Beispiel den Standard 2G.

Wenn man das dann macht und die Seite neu lädt über den Seite-neuladen-Button oder

die Taste F5 oder Command-R beim Mac, dann sieht man, dass das Ganze länger lädt, bis

das Video zum Beispiel geladen hat.

Genauso bei Bildern, die werden normalerweise auch länger laden, wenn man das Ganze einmal

refresht, ohne den Seitenspeicher zu verwenden, also durch gedrückthalten der linken Shift-Taste.