Responsive Websites - Kleine Männchen bearbeiten Webseitenansicht auf dem Laptop

Responsive Websites – So funktionierts!

Verschobene Buttons, wirre Textfelder, abgeschnittene Bilder – Wer so eine Website aufruft, macht sich schnell wieder aus dem Staub. Sie haben sich akribisch um einen strukturierten und ansprechenden Aufbau gekümmert und denken daher, dass Ihnen das nicht passieren kann? Glaube Sie uns, das geht schneller, als Sie denken und bleibt oft unbemerkt. Der Grund dafür ist, dass sich Ihre Website nicht an das jeweilige Endgerät des Nutzers anpasst. Setzen Sie dem ein Ende durch responsive Websites.

Was sind responsive Websites?

Unter responsive Websites versteht man die Gestaltung Ihrer Website, die darauf ausgerichtet ist, sich an das entsprechende Ausgabemedium Ihres Nutzers anzupassen. Dies sorgt dafür, dass Ihr Nutzer, egal ob auf dem iPad, iPhone oder Computer, sogar bei unterschiedlicher Bildschirmgröße, immer eine angepasste Version der Website erhält. Was genau angepasst werden muss, ist von dem jeweiligen Endgerät abhängig. Im Normalfall betrifft das die Struktur und Darstellung einzelner Teile, wie beispielsweise Navigationen, Seitenspalten und Texte. Auch Eingabemethoden mit Maus oder Touchscreen werden üblicherweise angepasst.

Responsive Websites: Die gleich Website auf verschiedenen Endgeräten

Warum ist responsive Design so wichtig?

Die Speisekarte eines Restaurants, die Nachrichten , oder auch einfach nur die Bedeutung einer Redewendung. Das spontane Googeln auf dem Smartphone hat rapide zugenommen. Niemand würde heutzutage mehr auf die Idee kommen, extra den Computer hochzufahren, um ein Wort in die Suchleiste bei Google einzugeben. Das ist doch super für Ihre Rankings, denken Sie jetzt bestimmt. Ja – das kann es zumindest sein. Wahrscheinlich betreiben Sie schon fleißig Google SEO, verbringen viel Zeit mit Keywordrecherche und versuchen, die optimale Content Marketing Strategie zu finden, um auch auf Instagram und Co zu überzeugen. Ist das der Fall haben Sie Online Marketing verstanden und sind auf der Zielgeraden zum Erfolg. Nun aber der Schock: Wenn Sie Ihre Website erstellen, überprüfen Sie sie auf dem Smartphone und stellen fest, dass alles plötzlich ganz anders aussieht. Was also, wenn Sie dem ganzen einen Riegel vorschieben, indem der Nutzer, sobald er ein iPad oder iPhone benutzt, komplett die Orientierung auf Ihrer Seite verliert?

Denken Sie dran: Ihre Website ist ein wichtiger Kontaktpunkt mit Ihrem Kunden und bildet die Basis, für Social Media Marketing, Content Marketing und alles andere, was Sie im Rahmen Ihres Marketings planen. Es wäre doch schade, wenn alles schon an der Ansicht Ihrer Inhalte scheitern würde, oder?

Alternativen zu responsive Websites

Als Alternative zum responsive Webdesign können Sie eigenständige Versionen für die verschiedenen Endgeräte erstellen. Konzentrieren Sie sich dabei auf jeden Fall zunächst auf eine Mobilversion. Behalten Sie bei der Entscheidung gegen responsive Websites im Auge, dass es immer Geräte geben wird, die von der manuellen Anpassung Ihrer Website abweichen – Damit werden Sie langfristig Kunden verlieren. Die Abwandlung Ihrer Website erhält eine Subdomain, die Sie eigenständig pflegen müssen. Das heißt für Sie: Mehr Pflege → Mehr Zeitaufwand → Weniger Zeit für Ihr Kerngeschäft → Verlust möglicher neuer Kunden und Umsatz.

Auch für Ihr SEO sind eigenständige mobile Websites eher hinderlich als förderlich. Denn damit einher gehen technische Herausforderungen: Das korrekte Implementieren von Meta-Tags erfordert Zeit und Know How.

Und falls Sie trotzdem noch skeptisch sind: Google selbst empfiehlt und unterstützt responsive Web Design für die mobile Optimierung. Denken Sie also an die Effizienz und nutzen Sie die Möglichkeiten des responsiven Webdesigns.

Wie funktionieren responsive Websites?

Was ist die Voraussetzung, um Ihre Website an die verschiedenen Mobilgeräte anzupassen? Richtig, Sie brauchen erst einmal Informationen über die Endgeräte. Um Ihr responsive Design umzusetzen, verwenden Sie HTML5 und CSS3. Dabei stehen Ihnen Media Queries zur Verfügung, die dann die jeweiligen Informationen der Endgeräte erfragen. Relevante Informationen sind Displaygröße, Auflösung, Format und Eingabemöglichkeiten. Wichtig: Das Erstellen Ihrer responsive Website funktioniert nur, wenn Inhalt und Layout der Seite strikt getrennt sind.

HTML 5

Dabei handelt es sich um eine Auszeichnungssprache, die Webinhalte semantisch markieren kann. Grundsätzlich ist HTML5 also nur eine bessere Version von HTML. Warum das jetzt im Kontext von responsive Websites wichtig ist? Ein großer Vorteil gegenüber der HTML ist, dass HTML5 auf die geräteübergreifende Nutzung ausgelegt ist. Somit entfallen Probleme mit der mobilen Optimierung. Außerdem haben Crawler bessere Möglichkeiten, da HTML5 zusätzliche Auszeichnungselemente und Möglichkeiten der Zuordnung von Webinhalten bietet.

By the way: HTML5 hat durch die verbesserte Usability und Ladegeschwindigkeit einen positiven Nebeneffekt auf die Suchmaschinenoptimierung!

responsive Websites - verschiedene Endgeräte

Media Queries

In CSS3 kommen die Media Queries zum Einsatz, die es ermöglichen, zwischen screen und print zu unterscheiden. Dies ist essenziell für die Anpassung. Darüber hinaus fragt Media Queries aber ebenfalls weitere für Sie relevante Informationen ab. Wie das funktioniert? Mediaqueries (deutsch: Medienabfragen) ordnen ein Stylesheet einem Ausgabemedium zu. Dadurch kann dann eine angepasste HTML-Datei für das jeweilige Medium erstellt werden und die relevanten Merkmale im Stylesheet notiert werden.

Heißt das jetzt, dass Sie anstatt eine Website verschiedene Websites für verschiedene Endgeräte erstellen müssen? Nein. Denn korrekterweise wird nicht der Inhalt Ihrer Seite, sondern nur dessen Darstellung geändert. Die Media Queries fragen dann notwendige Informationen ab: Dazu gehören die Typen von Geräten, Mediafeautures und Breakpoints. Ist das erfolgt, wird dem Endgerät quasi eine Anweisung gegeben, welcher Teil der CSS geladen werden kann – Endergebnis: Das Gerät zeigt Ihre Website so an, wie Sie es sich vorstellen.

Unterschätzen Sie die Bedeutung von Media Queries für Ihre Suchmaschinenoptimierung nicht.

Besonders, wenn es um die Gewinnung von Nutzern geht, ist es wichtig, die gesamte Breite der Nutzerschicht abzudecken. Nutzer verwenden schon längst nicht mehr nur ein einziges Endgerät in ihrem alltäglichen Gebrauch. Aber eines können Sie sich sicher sein: Kein User wird aufgrund der Ansicht vom Smartphone zum Tablet greifen. Sie werden Ihren Nutzer an eine konkurrierende Seite verlieren – Und passiert das, verlieren Sie wertvolle Leads, Conversations, und letztendlich auch Umsatz!

Breakpoints

Bei einem Breakpoint handelt es sich um einen bestimmten Punkt, an dem das Design für die Größe des Viewpoints umspringt. Dieser wird im CSS-Code über den Media Query erreicht. Dabei müssen Sie die Breakpoints nicht zwingend auf das Layout einer Website ausrichten. Denn auch weitere Funktionen, wie das Austauschen von Grafiken, die Unterstützung der Auswahlfunktion über Maus oder Touchscreen usw.

Es gibt zwei Stellschrauben, an denen Sie mit Breakpoints drehen können: Inhalt und Auflösung. Grundsätzlich gilt: Je kleiner der Viewport oder die Auflösung des Monitors, desto eher sollten Sie sich auch auf den Inhalt Ihrer Website konzentrieren und das Design hinten anstellen.

Sie wissen nicht, was mit Viewport gemeint ist? Dabei handelt es sich um das Fenster, welches Ihre Website anzeigt. Kleineres Gerät bedeutet also kleinerer Viewport.

Unser Tipp an Sie: Meist ist es am einfachsten, mit kleinen Monitoren zu beginnen und danach die jeweiligen Layouts auf die größeren Endgeräte auszuweiten. Denn Breakpoints bauen aufeinander auf. Entsprechend sparen Sie sich Aufwand wenn Sie sich von der kleinsten Ansicht hocharbeiten, sodass mit jedem Breakpoint ein Layout-Teil ergänzt wird, ohne etwas zurückzusetzen.

Smartphone Boost – Fluch oder Segen? Entscheiden Sie selbst!

„Immer nur am Handy“ – Nutzen Sie die rasante Entwicklung von Smartphonenutzung, um Ihren Kundenkreis zu vergrößern. Benötigen Sie Unterstützung beim Erstellen von responsive Websites? Wir stehen Ihnen dabei gerne mit Rat und Tat zur Seite! Melden Sie sich bei uns und wir zeigen Ihnen, wie Sie Ihre eigene Website erstellen, die Website Analyse durchführen und zunehmenend Traffic generieren.

Lassen Sie uns gemeinsam starten!????????

Jetzt folgen!

Uns kontaktieren!

Beitrag teilen!

Neueste Posts

Neueste Beiträge

Arrow-up