Responsive Test für Android und iOS Mobilgeräte

Google empfiehlt Websites und Shops mobilfreundlich zu entwickeln – am Besten als responsives Design. Dadurch wird eine separate mobile Website hinfällig, wodurch man aus SEO-Sicht einige Fallstricke vermeidet. Kürzlich habe ich ein SEO-Projekt in ein responsives Webdesign überführt und dabei Desktop-Emulatoren und Browser Tests zu schätzen gelernt. In dem Beitrag stelle ich Dir Lösungen vor, wie Du die Funktionalität und Darstellung einer responsiven Website auf Android und iOS Mobilgeräten simulieren kannst.

Responsive Test-Empfehlungen - Header

Problemstellung und Lösung

Vor allem Smartphones besitzen eine viel kleinere Darstellungsfläche, als Desktop-System und Laptops. Während ein Inhaltsverzeichnis oder eine Tabelle auf einem Desktop-System gut lesbar dargestellt wird, kann die Darstellung auf einem iPhone oder Android-Smartphone kritisch sein, weil sich Inhaltselemente überlagern oder über definierte Viewports hinaus laufen. Mittels CSS Media Queries kann der Entwickler die Darstellung spezifisch ausrichten. Interessant wird es, die CSS-Anweisungen auf iPhone & Co. zu testen, sprich zu emulieren.

Responsive Test mit Firefox

Ich nutze gern den Responsive Test vom Firefox Browser, weil er sehr einfach funktioniert. Du kannst Deine Website oder eine spezielle CSS-Optimierung für ein Smartphone oder Tablet-PC emulieren:

  1. Öffne die entsprechende Seite im Firefox Browser.
  2. Wähle im Menü: „Extras“ – „Web-Entwickler“ – „Bildschirmgrößen testen“.
  3. Nehme verschiedene Einstellung vor, zum Beispiel ein bestimmtes Endgerät wählen oder die Auflösung manuell vorgeben.

Jetzt kannst Du die Darstellung individuell und Geräteabhängig testen:

Firefox Responsive Test für iPhone 6s
Firefox Responsive Test für iPhone 6s

Responsive Test mit Chrome

Auch der Chrome Browser bietet Möglichkeiten zum responsiven Testen. Einerseits ist das mit der Untersuchen-Funktion möglich. Wenn Du es bequemer magst, kannst Du auch eine der zahlreichen Browser-Erweiterungen installieren (zum Beispiel Mobile Browser Emulator) und damit testen. Ich beschreibe kurz die Herangehensweise mit der Untersuchen-Funktion:

  1. Öffne die entsprechende Seite im Firefox Browser.
  2. Rechtsklick und Auswählen von „Untersuchen“ im Kontext-Menü.
  3. Wähle die Funktion „Toogle device toolbar“ links im Toolbar-Menü
  4. Nehme verschiedene Einstellung vor, zum Beispiel ein bestimmtes Endgerät wählen oder die Auflösung manuell vorgeben.

Jetzt kannst Du die Darstellung individuell und Geräteabhängig testen:

Chrome Responsive Test für iPhone X
Chrome Responsive Test für iPhone X

Alternative: Online Responsive Checker

Wenn Du weder Chrome noch Firefox zum responsiven Testen nutzen möchtest, kannst Du auch eines der zahlreichen Responsive Checker nutzen, wie:

Ich empfehle allerdings den aktuellen Chrome Browser oder Firefox Browser zum emulieren zu nutzen, weil ich die Erfahrung gemacht habe, dass die Online Responsive Checker teiweise befremdliche Ergebnisse liefern.

Kommentare(0)

    Komentar verfassen