Nichts mehr verpassen?
Nichts mehr verpassen?
Was sind die Webdesign Trends 2024
Webdesign Trends 2024
Endlich: Blogartikel schreiben, die verkaufen
Nachschlagewerk: Webseiten erstellen, die verkaufen
Ich habe Urlaub vom: 31.07. bis 25.08. in der Zeit biete ich keine Strategie Sessions an.
Suche
Close this search box.
Suche
Close this search box.

Was ist eigentlich Responsive Webdesign?

Inhaltsverzeichnis

Definition: Responsive bedeutet „reagierend“. Responsive Webseiten können sich auf die Bildschirmeigenschaften unterschiedlicher Endgeräte anpassen.

Das bedeutet, dass Webseiten auf mobilen Endgeräten anders dargestellt werden, als auf dem Desktop Rechner. So wird vor allem die Navigation eingeklappt und als Burger dargestellt, die Seitenleiste rutscht hinter die Inhalte, die Spalten werden untereinander dargestellt. Außerdem werden alle Elemente an die Eingabe auf dem Touchscreen optimiert.

Responsive Webdesign ist aus dem Alltag nicht mehr weg zu denken. Aus meinem als Webdesignerin ja schon mal überhaupt nicht.


Responsive ist nicht mehr optional

Responsive Webseiten sind ein Luxus, an den wir uns schon lange gewöhnt haben und den wir auch einfordern. Mal eben was auf dem Handy nachschauen ist schon irgendwie Zeitgeist. Diese 100%ige Erreichbarkeit (auch deiner Webseite) wird vorausgesetzt.

Für dich zur Info: Die Abbruchquoten auf nicht responsiven Webseiten sind gigantisch.

Kein Mensch will mehr eine Seite vergrößern und dann umständlich hin- oder her- scrollen. Das ist schlicht und ergreifend Schrott.

Durch responsive Webseiten machst du es für deine Besucher bequem und angenehm möglich von jedem Endgerät (und in jeder Lebenssituation) auf deine Inhalte zuzugreifen. So kommen sie gerne wieder.

Und sie kaufen auch mobil. Das verbessert deine Conversion immens. Also das Verhältnis der Sensationstouristen, die sich deine Webseite nur anschauen zu den Menschen, die auch kaufen.

Mit den Flexbox Containern hat der Elementor noch mal ein Feature erstellt, dass die mobile Optimierung auf ein neues Level hebt!

Falls du da tiefer einsteigen willst, kannst du dir in dem Video ein paar Profi-Tipps zur mobilen Optimierung abholen.


SEO: Responsive rankt bei Google

Google platziert mobil optimierte Webseiten in den Suchergebnissen höher. Und das schon seit 2015. Die Suchanfragen von Mobilgeräten haben die Anfragen über Desktops längst überholt.

Wenn du also in den Google Suchergebnissen berücksichtigt werden willst mit deiner Webseite, solltest du sie mobil optimieren.

Das gilt nicht nur für dein Webdesign, sondern auch für deine Seiteninhalte. Schreib deine Texte gleich mobil optimiert.

An Responsive Design geht kein Weg vorbei. Wer keine mobile Version der eigenen Webseite hat, wird von Google abgestraft. Und von den Kunden ohnehin. Denn die kaufen dann unterwegs einfach woanders ein. Das Web ist groß genug.

Bei aller Liebe zum Design: es reicht nicht, deine Seite so zu gestalten, dass sie auf dem Handy gut dargestellt wird. Wenn du mobil überragende Conversions einfahren willst, dann musst du die Texte  so schreiben, dass sie mobil überzeugen.


Bilder für responsive Webdesign nutzen

Bilder transportieren Emotionen. Emotionen beeinflussen Kaufprozesse. Studien zeigen, dass Bilder länger angeschaut werden als Text.

Daraus können wir zwei Schlüsse ziehen:

1.) Setze Bilder gezielt ein

Schau dir die Bildumgebung genau an: Kann das Bild vom Text ablenken? Oder unterstützt es den Text? Gib den Bildern nicht die Gelegenheit, die Alleinherrschaft über deine Webseite an sich zu reißen. Was ist deine Kern-Aussage? Platziere sie so, dass deine Leser sie auch aufnehmen können.

2.) Nutze weniger Bilder in der mobilen Ansicht

Nutze Bilder nur dann für die mobile Version, wenn sie wirklich erheblich sind. ACHTUNG: man kann Bilder auch nur am Desktop anzeigen lassen.


Kurze und knackige Überschriften

Überarbeite deine fertigen Texte mit Wortliga. Ein Textanalyse Tool, dass dir dabei hilft, Füllwörter, überflüssige Phrasen zu streichen.

Kürze deine Texte radikal. In den meisten Fällen wird die Kernaussage dann noch deutlicher.

Darfst du jetzt keine langen Blogartikel mehr schreiben? Doch darfst du. Allerdings solltest du die Artikel und Texte noch besser strukturieren. Bau die Argumentation sauber aufeinander auf und bedenke bei jedem Satz und Absatz, den du formulierst die Bildschirmgröße, die für die Anzeige zur Verfügung steht.

Mobile Bildschirme werden zwar momentan wieder deutlich größer, insgesamt ist der Platz den du hast, um deine Inhalte anzuzeigen allerdings begrenzt. Die Königsdisziplin ist es, so viel wie möglich von deiner Aussage auf eine kleinen mobilen Bildschirm anzuzeigen, ohne dass dein Leser scrollen muss.

Wenn du unsicher bist, was genau ich meine, dann lies dich doch bitte einen Tag durch die Inhalte der aktuellen BILD Ausgabe. Richtig gute Überschriften hat auch die Cosmopolitan.

Am besten schaust dir du dir direkt die mobile Version dieser Seiten an.

Dann kannst du anfangen, deine Überschriften anzupassen. Ich zeig dir mal, was ich meine.

Responsive Design: Achte auf deine Überschriften
Responsive Design: Achte auf deine Überschriften

Heb nichts für später auf

Dein wichtigster Satz steht direkt im ersten Absatz. Dieser Satz hat nur eine Aufgabe: Deine Leser in deinen Text zu ziehen. Wie ein Magnet.

Schau in deinem Google Analytics nach, wie hoch deine Abbruchquote ist. Dann siehst du genau, wie viele deiner Leser nicht bis zum Schluss lesen. Das heißt konkret: alles, was nicht direkt im ersten Absatz steht, haben diese Menschen nie gesehen. Schreibe deine Schlussfolgerung im ersten Absatz und erkläre sie später. Das gilt noch stärker für Video. Da entscheidet sich in den ersten 8 Sekunden, ob deine Zuschauer bleiben, oder nicht.


Kurze Absätze

Kurz ist das neue lang (ich schwöre!).

Wenn ein Absatz zu lang wird, tendieren mobile Leser dazu, weiter zu scrollen, statt den Absatz geduldig bis zum Ende zu lesen.

Mach mehr Absätze. Kürzere Absätze. Das gibt deinem Text Struktur und deinen Lesern eine gute Orientierung. Nutze dazu viele Zwischenüberschriften. Daran kann sich das Auge gut festhalten. Auch wenn der Leser mal kurz vom Handy aufschaut.

Mobile Inhalte werden oft in Transitsituationen konsumiert. Im Supermarkt an der Kasse, wenn die Kinder kurz spielen, in der Werbepause am Fernseher. Die Konzentration für das Lesen am Handy ist entsprechend gering.

Das Geheimrezept für grandiose mobile Texte ist nicht, weniger zu schreiben, sondern noch besser zu schreiben.

Artikel und Texte werden immer noch gelesen. Aber anders. Und wenn du die Spielregeln kennst, kannst du sie nutzen oder gezielt brechen.


Umstellen auf Responsive Webdesign ist Pflicht

Was, wenn deine Webseite noch nicht responsive ist? Also deine Inhalte noch nicht mobil optimiert dargestellt werden?

Gerade die „Traditionsbetriebe“ unter den Webseiten hatten die Anforderungen bei der Erstellung noch gar nicht. Schäm dich bitte nicht dafür, dass du so clever warst, für deinen Betrieb schon 1996 eine Webseite erstellen zu lassen. Das War schon damals eine gute Entscheidung!

Jetzt schauen wir einfach, wie wir deine Webseite mobil optimiert bekommen. Ich zeige dir ein paar Lösungsmöglichkeiten:

Umstieg auf WordPress

Gerade Homepage Baukästen kommen irgendwann immer an ihre Grenzen. Aber auch liebevoll programmierte HTML Webseiten  haben ihre Nachteile: du kannst sie nur schwer selbst pflegen und brauchst immer die Unterstützung deines Designers.

Oft macht es Sinn, in so einem Fall auf WordPress umzustellen. Viele gute Gründe für WordPress findest du hier.

Wechsel dein Theme

Nutzt du bereits WordPress und dein Theme ist nicht mobil optimiert? Das ist zwar ungewöhnlich, denn die meisten Themes sind inzwischen mobil optimiert, aber auch WordPress hat Altlasten.

Die Lösung ist hier recht einfach: ein neues Theme kann dich hier sehr weit bringen, ohne dass du deine komplette Seite auf links krempeln musst.

Bei der riesigen Auswahl an guten WordPress Themes findest du sicher das beste WordPress Theme für dich.

Auch wenn die Möglichkeit besteht, durch ein Plugin dein Theme mobil zu optimieren: ganz sauber läuft das nie. Deshalb lass einfach die Finger weg 😉


Ist deine Webseite responsive?

Wenn du nicht sicher bist, dann kannst du es ganz einfach herausfinden.

Smartphone Test

Schau dir deine Webseite einfach mal auf dem Smartphone an. Damit kannst du dir einen guten ersten Eindruck verschaffen.

Als Webdesigner würde ich da auch noch mal andere Betriebssysteme gegen testen, aber um grundsätzlich zu sehen, ob deine Webseite mobil optimiert ist, reicht das.

Browser Test

Zieh einfach das Browser Fenster kleiner und schau dir an, wie deine Webseite reagiert. Eine sehr pragmatische Varainte, aber zielführend.

Frag Google

Die Google Developer haben ein paar Tools entwickelt, die wirklich brauchbar sind. Zum Beispiel den Mobile Friendly Test.


Neue Homepage: Mobile Optimierung und responsive Design einplanen

Wenn du gerade erst dein Unternehmen gründest und daran denkst, eine Webseite zu erstellen, dann ist mobile Optimierung ein Pflichtelement.

Plane es einfach von Anfang an in deine Webentwicklung mit ein, dann gibt es hinterher keine bösen Überraschungen.

Ich erstelle keine Kundenwebseite mehr, die nicht mobil optimiert ist. Das gibt es in meinen Webdesign Workshops einfach nicht. Alle Themes, die ich nutze, sind mobil optimiert. Da geht für mich kein Weg dran vorbei.

Denn solange die mobilen Ansichten weiter steigen, kann ich das als Webdesigner nicht ignorieren. Responsive Webdesign ist kein Trend, sondern ein Pflichtelement.

Wenn du Unterstützung bei deiner Webseite brauchst oder jemanden, der dir bei der Auswahl eines neuen Themes hilft: melde dich einfach bei mir. Ich freue mich schon auf deine E-Mail.

Ich bin Mareike Schamberger: Die Frau hinter #TeamStreber.
Ich bin Webdesignerin, Autorin und Expertin für das strategische Verkaufen im Internet mit über 15 Jahren Berufserfahrung.
Wenn es darum geht, die DSGVO auf deiner Webseite alltagstauglich umzusetzen, bist du hier richtig! Statt aufzuzählen, was alles nicht geht, teste ich Tools und suche Lösungen, die in der Praxis funktionieren.
Ich liebe es, Webseiten zu erstellen, die verkaufen. Deshalb habe ich dazu auch ein Buch geschrieben.

Werbehinweis (Links mit Sternchen*)

Achtung: Affiliate-Link. Wenn du das verlinkte Produkt kaufst, bekomme ich eine Provision.  Für dich ändert sich nichts am Preis. Nur für’s Protokoll: Ich stelle hier nur Produkte vor, die sich für mich in der Praxis bewährt haben. 

Willst du eine Webseite, die verkauft?

Dazu brauchst du Kunden!

Abonniere meinen kostenlosen Newsletter mit exklusiven Tipps und Angeboten rund um „Webseiten, die verkaufen“, Kundengewinnung, Verkaufsprozesse und Online-Marketing.
Als Willkommens-Geschenk erhältst du mein E-Book „10 Gesetze für Webseiten die verkaufen“. 

*Du kannst dich jederzeit mit einem Klick wieder abmelden.
Ich versende etwa 2-4 Mails im Monat. Ich analysiere meine Newsletter Kampagnen, um dir nur relevante Informationen zu senden, detaillierte Information in der Datenschutzerklärung.

Willst du eine Webseite, die verkauft?

Dazu brauchst du Kunden!

Abonniere meinen kostenlosen Newsletter mit exklusiven Tipps und Angeboten rund um „Webseiten, die verkaufen“.

Als Willkommens-Geschenk erhältst du mein E-Book „10 Regeln für Webseiten die verkaufen“. 

Cookie Consent mit Real Cookie Banner