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!😎🚀

Share on facebook
Share on twitter
Share on linkedin
Share on xing

Folge uns!

Schreibe uns!

Beitrag teilen!

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on pinterest
Share on whatsapp

Neueste Posts

Neueste BeitrÀge

Arrow-up