Responsive Design testen – Tools & Tipps

Von: Jonas, Raimund

Professionelles Responsive Design setzt intensives Testing voraus. Es gibt zahlreiche Tools, die diesen Arbeitsschritt vereinfachen.

Aktualisiert von 2018 – 2024

Responsive Design ist Standard und Websites müssen auf allen Geräten und Bildschirmgrößen einwandfrei funktionieren. Wir stellen verschiedenen Tools vor, die es Webentwicklern und Entwicklerinnen ermöglichen, die Responsivität ihrer Designs effizient zu testen.

Google Tools

Google bietet eine Reihe von Tools an, mit denen Websites hinsichtlich der mobilen Tauglichkeit getestet werden können. Die zwei wichtigsten Tools sind:

• PageSpeed Insights
• Lighthouse

Testen am Computer

Alle modernen Browser bieten mit den Entwickler-Tools Möglichkeiten, um responsive Layouts zu testen. Die Entwickler-Tools von Google Chrome sind besonders umfangreich.

Gefahren bei Tests am Computer

• Falsche Auflösung
• Falscher Betrachtungsabstand
• Falscher meta-viewport
• Falsche Schriften
• Falsches Schrift-Rendering
• False-Positives bei Feature-Detection
• Kein Touch-Screen

Spezialisierte Browser für Responsive Design

• Polypane
• Sizzy
• Responsively

IDEs (Integrierte Entwicklungsumgebungen) der Gerätehersteller

• Xcode von Apple
• Android Studio von Google

Tests auf echten Geräten / VMs

Verschiedene Anbieter synchronisieren Bildschirminhalte zwischen mobilen Endgeräten. Diese Lösung ist Simulatoren und Online-Tools gegenüber zu bevorzugen. Allerdings sind die Dienste meiste kostenpflichtig und häufig langsamer als das lokale Testen am eigenen Computer. Die populärsten Dienste sind:

• Browser Stack
• Sauce Labs
• Cross Browser Testing

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer von kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Mastodon, LinkedIn, Xing und YouTube.

Raimund Büchner

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.