Responsive Preview
Teste wie deine Website auf verschiedenen Geräten aussieht.
Teste deine Website auf allen Geräten
Responsive Design ist Pflicht – aber funktioniert deine Website auf allen Geräten? Das Tool zeigt dir deine Website in verschiedenen Viewports: Vom iPhone SE bis zum Desktop.
Warum Responsive Design testen?
Über 60% des Web-Traffics kommt von Mobilgeräten. Google nutzt Mobile-First-Indexing. Eine nicht-responsive Website verliert Besucher und Rankings.
Typische Breakpoints
Mobile: 320-480px. Tablet: 768-1024px. Laptop: 1024-1440px. Desktop: 1440px+. Diese Punkte sind typische Breakpoints für Media Queries.
Browser DevTools Alternative
Die Browser-Entwicklertools (F12) bieten auch Geräte-Simulation. Das Tool ist eine schnelle Alternative ohne Installation.
Die häufigsten Responsive-Probleme
Horizontaler Scroll auf Mobilgeräten (meist durch zu breite Bilder oder fixe Breiten), zu kleine Touch-Targets (Buttons unter 44×44px), unlesbar kleiner Text (unter 16px auf Mobile), versteckte Navigation die nicht erreichbar ist, und Tabellen die auf schmalen Screens nicht funktionieren.
Mobile-First-Indexing: Warum Google deine Mobile-Version zuerst sieht
Google crawlt und indexiert seit 2021 primär die mobile Version deiner Website. Das bedeutet: Inhalte die nur auf Desktop sichtbar sind, werden von Google möglicherweise ignoriert. Wenn deine Website auf dem Smartphone schlecht aussieht, leidet dein Google-Ranking – auch für Desktop-Suchen.
Häufig gestellte Fragen
Ist das ein echter Test auf dem Gerät?
Nein, es ist eine Viewport-Simulation. Die Website wird im gleichen Browser gerendert, nur in der Größe angepasst. Echte Gerätetests zeigen zusätzlich Touch-Verhalten und Performance.
Warum wird meine Website nicht angezeigt?
Manche Websites blockieren das Einbetten in iFrames (X-Frame-Options). Nutze in dem Fall die Browser-DevTools (F12 → Geräte-Modus).
Welche Viewport-Größen sind am wichtigsten?
iPhone (390×844), iPad (768×1024) und Desktop (1920×1080) decken die meisten Nutzer ab. Teste auch kleine Phones (375px) und große Screens.
Wie teste ich Touch-Interaktionen?
Für echte Touch-Tests brauchst du ein physisches Gerät oder Browser-DevTools mit Touch-Simulation. Viewport-Größe allein testet keine Touch-Events.
Was bedeutet Mobile-First-Indexing?
Google crawlt und indexiert seit 2021 primär die mobile Version deiner Website. Wenn Inhalte auf Mobile fehlen oder schlecht dargestellt werden, kann das dein Ranking negativ beeinflussen – auch bei Desktop-Suchen.
Wie groß sollten Touch-Targets auf Mobile sein?
Mindestens 44×44 Pixel empfiehlt Apple, Google empfiehlt 48×48 Pixel. Zu kleine Buttons führen zu Fehlklicks und Frustration – besonders bei Formularen und der Navigation.
Deine Website sieht auf dem Handy nicht gut aus? Ich mache sie responsive – für alle Geräte optimiert.
Webdesign ansehen →