Allgemein

Ist meine Webseite responsiv? 3 Tools für den schnellen Test

Ist meine Webseite responsiv? 3 Tools für den schnellen Test

In den letzten Jahren ist die Nutzung mobiler Endgeräte stetig gestiegen. Und auch die Zahl der mobilen Zugriffe zeigt einen kontinuierlichen Aufwärtstrend. Auf allen Geräten wie Smartphones, Tablets oder sogenannte Phablets (Mischung aus Smartphone und Tablet) sollte sich die eigene Webseite daher optimal präsentieren.

Usability einer Webseite ist immer wichtiger

Responsive Webseiten stehen für Webseiten, die sich den verschiedenen Endgeräten automatisch anpassen und damit für den Nutzer immer ein ideales Bild der Webseite wiederspiegeln. So erspart man dem Nutzer lästiges Rein- und Rauszoomen, um Texte vernünftig lesen und Bilder gut erkennen zu können.

Während sich bei den neueren Tablet-Modellen die Ansicht der Webseiten im Querformat kaum von Desktop-Ansichten unterscheiden, stellt man beim Drehen auf das Hochformat schon einen deutlichen Unterschied fest. Angefangen bei der Darstellung des Menüs bis zur Positionierung der Formularfelder – mobil verschieben sich die meisten Elemente untereinander, dabei wird die Webseite zwar länger, aber auch wesentlich einfacher in der Bedienung.
Auch lassen sich mobile Webseiten-Elemente ein- und ausblenden, z.B. macht ein großer Slider im Querformat auf einem Smartphone im Hochformat wenig Sinn. Zum einen werden die Bilder sehr schmal und zum anderen wird durch einen Slider die Ladezeit auf dem Mobilgerät unnötig verlängert.

Welche Rolle spielt responsives Design für das Google Ranking?

Schon in den letzten Jahren hat Google mehrere Updates veröffentlicht, die nicht-responsive Webseiten speziell in der mobilen Suche herabstuften. Vor einem Jahr ergänzte Google seinen Algorithmus durch das Signal „Für Mobilgeräte“. Auch bei Google AdWords werden seit kurzem Hinweise zur Optimierung der Kampagnen bei nicht-responsiven Webseiten ausgespielt. So sollte man hier unbedingt eine Überarbeitung der Webseite anstreben oder aber das Werbebudget für mobile Anzeigen zurückfahren.

Auch wenn man mobil die „klassischen“ Webseiten durchaus noch findet, sollte man beachten, dass es zu Rankingverlusten führen kann. Gerade bestehende Webseiten sollten deshalb schnellstmöglich umgestellt werden, um nicht nur ihr Ranking zu verbessern, sondern vor allem, um Nutzer auch mobil zu halten. Denn auch die Absprungrate bei nicht-optimierten Seiten ist um einiges höher als bei responsiven Seiten.

3 Tools für den Test der Responsivität

Am I responsiv?

Das Tool Am I responsive? bieten einem nicht nur einen schnellen optischen Check der eigenen Seite, auch ist es hier möglich, die einzelnen Geräte interaktiv zu verschieben und neu zu positionieren. Für einen schnellen Test und eventuellen Screenshot eignet sich dieses Tool besonders gut. Leider ist festzustellen, dass die verfügbaren Geräte alle von Apple sind und zudem nicht mehr die Neusten. Wer also das Design auf möglichst vielen aktuellen Geräten testen will, sollte zu einem anderen Tool greifen.

responsive Webdesign Test-Tool

responsive Test-Tool 1: Am I responsive?

Responsive Check Center

Dieses Tool bieten genau das, was das vorhergehende nicht kann. Eine Auswahl an verschiedenen Endgeräten, die immer individuell auswählbar sind. Das Responsive Check Center bietet alle Modelle im Portrait und Landscape Modus mit Nennung der Pixelauflösung an. Auch für Screenshots ist die Darstellung der Geräte gut geeignet.

responsive Webdesign Test-Tool

responsive Test-Tool 2: Responsive Check Center

Google

Auch bei Google Developers kann man seine Seite auf Responsivität testen. Allerdings liegt hier das Hauptaugenmerk auf der Fehleranalyse der entsprechenden Webseite. Wer seine Webseite in einer Art Mock-Up optisch aufbereitet haben möchte, sollte lieber zu den anderen beiden Tools greifen.

responsive Webdesign Test-Tool

responsive Test-Tool 3: Google Developers

 

The following two tabs change content below.

Julia

Hallo, ich bin Julia und unterstütze das Team der Klickkomplizen seit August 2015 im Bereich Web- und Printdesign. Mein Herz schlägt für Photoshop und InDesign und somit auch für Neuheiten und Trends in diesem Bereich.
️Happy Vize-Freitag. Das Wochenende ist schon in Sicht. Die Zeit bis dahin versüßen wir euch mit unseren Homeoffice… https://t.co/kFFul2gy4g
Definitiv ein unausgesprochenes Gesetz. 😃 https://t.co/OMv0kCiqWh
💡Eine Zusammenfassung der heißesten Neuerungen bei #Twitter gefällig? Dann hereinspaziert auf unserem Blog. 👇… https://t.co/IAqV8jlpHJ
Du sprichst fließend #SEA, bist hungrig auf Veränderung & scheust keine Herausforderung?🎯Passt perfekt, denn wir su… https://t.co/F3hIJYfotV
Habt ihr das Feature schon bei #Pinterest entdeckt? 🤔 #socialmedia https://t.co/gFJpjVkI7K
💡Schon lange nicht mehr mit #Snapchat beschäftigt? Welche Neuerungen für User:innen in der letzten Zeit hinzugekomm… https://t.co/DtaM6EvfGB
Einen guten Start in die neue Woche wünschen wir! 💚#coffeeneeded https://t.co/ufLRzjchzU
Die Monetarisierung geht weiter: Mit dem neuen Feature können Content Creator bald direkt bezahlt werden. Das gibt… https://t.co/pOdEaZCSeD
Klingt spannend, was da noch auf uns zukommt. 🤔Nutzt ihr #Trello? #projectmanagement https://t.co/eYn1TC1f01
💡#Instagram und #Facebook lassen sich nicht verknüpfen? Wir haben auf unserem Blog die besten Tipps und Tricks zusa… https://t.co/IPh0WBxzdw
Guten Morgen zum Mittwoch. Wer erkennt sich wieder? 😃 #bergfest https://t.co/A5ArmXX0VN
Grafischer Gruß zum Feierabend. 😎#diecouchruft https://t.co/OTMi6yvMZA
Spannende Insights zu den derzeitigen Kurzvideo-Angeboten auf dem Markt. #OnlineMarketing https://t.co/Zuv8YBLxM1
Gestern gab es Futter für die Augen - mit einem #Newsletter ganz aus der Grafikschmiede der #Klickkomplizen.🖌️💚Ih… https://t.co/Vgr11gMKiX
💡#Instagram und #Facebook lassen sich nicht verknüpfen? Wir haben auf unserem Blog die besten Tipps und Tricks zusa… https://t.co/mNkeXMZxDh
💡 Neu auf unserem Blog: Alles zur effektiven Bildbearbeitung mit #Adobe Lightroom Presets. 👇https://t.co/408Ctgpnjm
💡 Neu auf unserem Blog: Alles zur effektiven Bildbearbeitung mit #Adobe Lightroom Presets. 👇https://t.co/408Ctgpnjm
Ein Raking der beliebtesten 🧡Emojis auf #Twitter. Welches benutzt ihr am meisten? 🤔 #socialmedia https://t.co/rzFuRh8p0L
Unser linker, linker Platz ist leer, wir wünschen uns Verstärkung her. ✨😎Bewirb dich hier bei uns und werde Teil… https://t.co/gIxuye8sTv
#Snapchat schon lange tot? Von wegen! 😎#socialmedia https://t.co/mAKpDokgmO