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.
Dadurch können Sie erleben, wie Seitenbesucher Ihre Seite sehen, die vielleicht ein schlechtes
mobiles Netz oder einen schlechten Empfang haben.
Man merkt, wenn das Netz langsam ist, dann sieht man die Bilder zum Beispiel gar nicht
oder sie laden sehr lange.
Wenn man dagegen die Seite zum Beispiel mit LTE betrachtet, dann wird man merken, dass
das innerhalb von Sekunden bzw. Millisekunden lädt.
Sie haben also die Möglichkeit, über die Drosselung und die verschiedenen Gerätegrößen
Ihre Seite zu betrachten, wie sie der Seitenbesucher am Ende dann auch sieht.
Und das gibt Ihnen auch die Möglichkeit, nachzusteuern und bestimmte Inhalte nochmal
anzupassen.
Sie können hier auch die Seite natürlich besuchen, wie der ganz normale Nutzer, die
verschiedenen Inhalte durchklicken und einfach mal schauen, wie schaut meine Seite eigentlich
auf einem mobilen Gerät aus.
Muss ich vielleicht hier bei den Portalmenüs auf drei Portalmenüs umschwenken, weil mir
das vierte hier unten nicht gefällt?
Das sind alles Punkte, die man erst erkennt, wenn man die Seite auch auf den entsprechenden
anderen Bildschirmgrößen betrachtet.
An dieser Stelle verabschiede ich mich schon mit diesem Tipp der Woche.
Wie immer, wenn Sie Fragen haben oder falls Sie noch Wünsche, Ideen oder Anregungen für
den Tipp der Woche haben, dann schreiben Sie uns einfach eine Mail an webmaster.fru.de.