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.
Knackige Tipps zur perfekten #Landingpage gefällig? In unserem neuen Factsheet werdet ihr garantiert fündig.😎… https://t.co/mERkPjH5Is
Knackige Tipps zur perfekten #Landingpage gefällig? In unserem neuen Factsheet werdet ihr garantiert fündig.😎… https://t.co/n2pMu1xnWr
💡Dass #LinkedIn zum großen Microsoft-Kosmos gehört ist allseits bekannt. Dass man aber im Rahmen von Microsoft Ads-… https://t.co/4bMhzcIb4w
💡Dass #LinkedIn zum großen Microsoft-Kosmos gehört ist allseits bekannt. Dass man aber im Rahmen von Microsoft Ads-… https://t.co/IF6v0tuhlj
Knackige Tipps zur perfekten #Landingpage gefällig? In unserem neuen Factsheet werdet ihr garantiert fündig.😎… https://t.co/mwzWyvm9RL
Zum Thema Landingpage gibt's heute übrigens auch was Feines in unserem Newsletter. 😎Hier noch schnell anmelden:… https://t.co/Pnv1bNHdLu
Zum Thema Landingpage gibt's heute übrigens auch was Feines in unserem Newsletter. 😎Hier noch schnell anmelden:… https://t.co/N17QOUOvh7
💡Kennt ihr schon unseren heißgeliebten Michael? Nein, dann wird es höchste Zeit ihn auf unserem Blog kennenzulernen… https://t.co/9Vjc37QbQf
Totgeglaubte leben länger: #Snapchat bläst zum Angriff mit neuen Features. #onlinemarketing https://t.co/bO3E1poJEH
💡Kennt ihr schon unseren heißgeliebten Michael? Nein, dann wird es höchste Zeit ihn auf unserem Blog kennenzulernen… https://t.co/s0dCN85xY0
Heute aus der Kategorie "Was wäre wenn": #Instagram im Jahr 2000. 😃 #socialmedia https://t.co/uJIFh8phjE
Neu bei @googlewatchblog entdeckt: #Google meets Shazam. 🤔 https://t.co/C4HaqCVXp8
💡Kennt ihr schon unseren heißgeliebten Michael? Nein, dann wird es höchste Zeit ihn auf unserem Blog kennenzulernen… https://t.co/vqOaPbh1Io
💡Kennt ihr schon unseren heißgeliebten Michael? Nein, dann wird es höchste Zeit ihn auf unserem Blog kennenzulernen… https://t.co/uWvjwrPLb0
Neu entdeckt: #Facebook testet verschiedene Zeiträume für Storys aus. Mal sehen, was da noch auf uns zukommt. 🤓… https://t.co/c5kRJTKCqa
💡Coole Filter mit #SparkAR erstellen? Für unsere Katharina ein Klacks. 😎 Mehr dazu auf unserem Blog. 👇… https://t.co/IiTmOliyPj
Gesehen bei @xovitool: Umgang mit Keyword-Kannibalisierung leicht gemacht. Definitiv einen genaueren Blick wert.… https://t.co/jP3GIGwnrC
💡Coole Filter mit #SparkAR erstellen? Für unsere Katharina ein Klacks. 😎 Mehr dazu auf unserem Blog. 👇… https://t.co/HxKlvL1xZ8
💡Coole Filter mit #SparkAR erstellen? Für unsere Katharina ein Klacks. 😎 Mehr dazu auf unserem Blog. 👇… https://t.co/2TKjaImown