Größe beweisen oder Bildschirmgröße anpassen? Machen Sie Ihre Website fit für mobile Endgeräte!

Wir schreiben das Jahr 2015. Die Suchmaschinenoptimierung ist längst zu einer der Grundsäulen einer erfolgreichen Online-Marketingstrategie herangewachsen. Es gilt: Mehr Klicks, mehr Besucher, mehr Umsatz. Doch selbst die hartgesottensten Unternehmer müssen erneut um Ihre Besucherzahlen bangen. Am 21.04.2015 steht das nächste Google-Update bevor. Ihre Rankings sind in Gefahr. Es herrscht Weltuntergangsstimmung. In SEO-Kreisen flüstert man bereits vom „MOBILEGEDDON“.

Im nächsten Algorithmus-Update fokussiert der Suchmaschinengigant mobile Endgeräte. Ob in der Bahn, zuhause auf dem Sofa oder einfach zwischendurch – Smartphones und Tablets dringen immer mehr in den Alltag vor. Es ist an der Zeit, Ihre Internetseite endlich fit für alle Geräte zu machen.

Das Schlagwort in diesem Zusammenhang heißt „Responsive Design“. Ihre Website passt sich so automatisch an die entsprechende Bildschirmgröße an und schafft somit ein optimales Erlebnis auf Dektop-PC, Smartphone und Tablet. Es kommt eben doch auf die Größe an.

 

Ist Ihre Website responsive? Jetzt testen!

 

Noch weiß niemand genau, wie stark die Websites und die Rankings betroffen sein werden. Google selbst beschrieb das bevorstehende Update wie folgt:

Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.“ – Google Webmaster Central

Bereiten Sie sich rechtzeitig auf den Tag X vor, damit die Endgeräte nicht zu Ihren Endgegnern werden.

„Apocalypse SEO“: So überlebt Ihre Website das „Mobilegeddon“

Die neuen Anforderungen des Responsive Designs müssen Ihre Website nicht gleich in einen Zombie verwandeln. Lassen Sie lieber Ihre Konkurrenz wie Untote auf den hinteren Rängen herumschlurfen. Wer rechtzeitig reagiert und die Tipps aus unserem Survival Guide beachtet, kann das Update für sich nutzen und seine Position in den SERPs verbessern.

Wie gut eine responsive Website aussehen kann, möchten wir Ihnen anhand einiger Referenzen zeigen: 

Dahmen responsive design referenz
responsive design referenz
responsive design referenz

Responsive-Design-Tipp 1: Mobile oder Desktop?

Am Anfang steht die Entscheidung: Welcher Leitlinie des Responsive Design folgen Sie? „Mobile First“ oder „Desktop First“? Hiermit legen Sie den Startpunkt für das Design Ihrer Website fest. Beginnen Sie auf dem kleinen Screen, müssen Sie das Design für größere Auflösungen anpassen. Wenn der Desktop Ihr Ausgangspunkt ist, tritt der umgekehrte Fall ein.

Wer Ihnen bei dieser Entscheidung hilft? Ihre Zielgruppe natürlich. Besucher eines Online-Magazins stöbern schon auf der Bahnfahrt zur Arbeit durch Ihre Artikel, während andere Zielgruppen Ihre Website am Desktop-PC besuchen. Über Tools, wie z.B. Google-Analytics können Sie herausfinden, über welches Endgerät Ihre Besucher auf der Seite surfen. Auch wenn es SuchMASCHINENoptimierung genannt wird, ist es der Mensch, den Sie überzeugen müssen – wenn Sie Google dabei schmeicheln umso besser.

Responsive-Design-Tipp 2: Beim Smartphone kommt es auf den Flow an

Ein wesentliches Merkmal, welches das Smartphone vom Desktop-Computer unterscheidet, ist die Größe des Displays. Diese übt unmittelbaren Einfluss darauf aus, wie die Elemente dargestellt werden. Es gilt die Faustregel: Je schmaler der Bildschirm des Endgerätes, desto mehr Elemente müssen untereinander statt nebeneinander angeordnet werden. Alle später hinzugefügten Inhalte rutschen also im „Flow“ weiter nach unten. Dies sollten Sie bereits bei der Konzeption beachten!

Responsive-Design-Tipp 3: Die Größe der Pixel ist relativ

Wenn die Größe der Endgeräte und somit auch des Bildschirms variiert, muss sich der Inhalt Ihrer Website anpassen. Auch die Pixeldichte der angezeigten Fläche ist keine absolute Größe mehr. Feste Pixelvorgaben machen daher wenig Sinn. Stattdessen empfehlen wir, relative Größeneinheiten zu definieren. Legen Sie fest, wie viel Prozent des Screens von den jeweiligen Modulen abgedeckt werden sollen und passen Sie so das Layout an das genutzte Ausgabeformat an.

Responsive-Design-Tipp 4: Breakingpoints – Bitte hier brechen

Ein Umbruch im Design kann aus der Verschmälerung der Seite resultieren. Inhalte müssen untereinander dargestellt werden, sonst passen diese nicht auf den Bildschirm. Damit dies nicht auch zu einem inhaltlichen Bruch führt, kommen die sogenannten Breakpoints ins Spiel. Sie definieren, an welchen Stellen das Layout einer Seite brechen soll. Jedoch sollten die Breakpoints nicht inflationär, sondern mit Köpfchen benutzt werden. Wenn die Zusammenhänge der Inhaltselemente nicht klar sind, ist Chaos vorprogrammiert.

Responsive-Design-Tipp 5: Vermeiden Sie Verzerrungen auf dem Endgerät

Um zu verhindern, dass Inhalte auf dem Smartphone oder dem Tablet zu klein dargestellt werden, empfehlen wir Ihnen, Maximal- und Mindestwerte für die Pixel zu definieren. Sie entgehen dem Verzerrungseffekt, indem Sie einen festen Pixelwert für die maximale Breite festlegen. Das gilt auch im umgekehrten Fall: Inhalte, die auf eine Darstellung auf Smartphone und Tablet ausgerichtet sind, können auf größeren Bildschirmen in die Breite gehen. Beherzigen Sie unseren Tipp und vermeiden Sie diese Stolperfalle.

Responsive-Design-Tipp 6: Hilfreiche Tools beschleunigen Ladezeiten

Nicht optimierte Bilder können Ihre Website verlangsamen. Pagespeed ist ein bedeutender Rankingfaktor. Mit Tools wie Adaptive Images und TinyPNG können Sie große Grafiken verkleinern. Auf Icon Fonts sollten Sie zurückgreifen, wenn Logos und Grafiken trotz kleiner Dateigröße gut skalieren sollen.

Auch die in Ihre Website eingebetteten Schriften können die Ladezeiten beeinflussen. Zwar bieten Webfonts unzählige ansprechende Varianten, jedoch haben die in den Betriebssystemen der Nutzer vorinstallierten Fonts einen klaren Vorteil in Sachen Schnelligkeit. Page Speed Insights ermöglicht die Analyse und Verbesserung der Geschwindigkeit Ihrer Seite.

Responsive-Design-Tipp 7: „Keep it simple“ beim Responsive Design

Beschränken Sie sich auf das Wesentliche, indem Sie für die responsive Ansicht unnötige Elemente von Ihrer Seite entfernen. Dies wirkt sich positiv auf die Nutzererfahrung und die Geschwindigkeit der Website aus. Eine überladene Seite sorgt für ein unangenehmes Erlebnis und wird verhindern, dass ein User sie regelmäßig frequentiert oder weiterempfiehlt.

responsive design

Responsive Design – aus Fluch wird Segen

Das Google-Update bringt (wahrscheinlich) nicht den Untergang der Online-Welt, insofern die Website-Betreiber den Wink mit dem Zaunpfahl richtig deuten. Um Ihre Homepage, und somit auch Ihr Unternehmen, zeitgemäß zu präsentieren, ist es unumgänglich, sich auf die mobilen Endgeräte Ihrer (potentiellen) Kunden einzustellen.

Responsive Design reagiert auf die Entwicklung von Smartphones zu leistungsfähigen Computern mit vollwertigen Internetbrowsern. Dem User können bei Website-Zugriffen sämtliche Inhalte in ungekürzter Fassung angeboten werden. Dies ist besonders mit Blick auf die Zukunft wichtig: Immer mehr Internetzugriffe werden per Smartphone oder Tablet getätigt. Tendenz steigend.

Mit Responsive Design in eine erfolgreiche Zukunft

Responsive Design ist die Bezeichnung für eine technische Revolution, die schon länger im Gang ist. Die Weiterentwicklung von mobilen Endgeräten erfolgt beinahe in Lichtgeschwindigkeit und macht ein Mitdenken der Website-Betreiber nötig. Neue Trends wie die Smartwatch ermöglichen es sogar am Handgelenk im Internet zu surfen. Noch vor wenigen Jahren waren Smartphones oder Tablets für die meisten Unternehmen bedeutungslos. Das hat sich schlagartig geändert. Wer weiterhin innovativ und zielgruppenorientiert Leistung erbringen möchte, muss mit den Trends gehen. Das Google-Update ist nur der nächste logische Entwicklungsschritt.

Wer unsere Tipps beherzigt und responsive Design richtig nutzt, wird einige Vorteile daraus ziehen. Bewahren Sie einen kühlen Kopf und sehen Sie dem 21.04.2015 nicht als Tag der Apokalypse entgegen. Wir bei neue formen betrachten das Update des Google-Algorithmus lieber als Initialzündung für etwas, das ohnehin unausweichlich ist: Die Überwindung der Grenze zwischen „mobil“ und „nicht-mobil“.

Das nächste Google Update gibt die Richtung vor – Nutzerfreundlichkeit auf allen Geräten ist ein steigender Trend im Online Marketing. Auch hier gilt es nicht nur mitzuziehen, sondern strategisch weiterzudenken und mit neuen innovativen Ideen voran zu gehen. Auch Smartwatches und Datenbrillen sind keine Zukunftsvisionen mehr. Gerne beraten wir Sie, wie Sie Ihr Online-Marketing gezielt auf die Zukunft ausrichten und nicht erst von Google gewarnt werden müssen, wenn das nächste Update droht.