#4 - Responsive Design: Mach deine Unternehmens-Webseite fit

00:00:00: (Musik) Hallo und herzlich willkommen zu

00:00:05: Webseiten-Magie, dem Podcast, der deine Website zur besten Mitarbeiterin macht.

00:00:10: Hier erfährst du, wie du als Solo-Selbstständiger deine Website in

00:00:14: eine echte Kundenmaschine verwandelst.

00:00:16: Du bekommst nicht nur praktische Tipps und Tricks, sondern auch spannende Einblicke

00:00:20: hinter die Kulissen einer Web-und Marketingexpertin.

00:00:23: Bist du bereit, in die magische Welt der Webseiten einzutauchen?

00:00:26: Dann lass uns loslegen.

00:00:27: Hier kommt deine Gastgeberin, Angelika Stempfle.

00:00:38: Auch von meiner Seite ein herzliches Hallo zu einer brandneuen Episode

00:00:42: von Webseiten-Magie.

00:00:44: Heute tauchen wir tief in ein Thema ein, das für deine Webseite absolut

00:00:49: unverzichtbar ist, und zwar Responsive Design.

00:00:52: Hast du gewusst, dass laut einem Bericht von Statisten aus dem Jahr 2023

00:00:59: etwa 55% des gesamten Website-Traffics bereits über mobile Geräte läuft?

00:01:07: Das heißt, 50% geht über Smartphone und circa 3% über das Tablet.

00:01:13: Diese Zahl zeigt, dass mehr als die Hälfte der Internetnutzer ihre mobilen Geräte

00:01:19: verwenden, um auf Websites einzusteigen.

00:01:24: Es gibt auch eine Studie von Broadband Search aus dem Jahr 2022, die zeigt,

00:01:31: dass der Anteil der mobilen Internetnutzung im Vergleich zur

00:01:35: Desktopnutzung stetig weiter steigt.

00:01:38: Im Jahr 2011 war der Anteil bei 6% und 2022 bereits auf über 50%.

00:01:46: Heutzutage kann man sich gar nicht vorstellen, dass irgendjemand einmal nicht

00:01:50: über das Handy ins Internet einsteigen konnte.

00:01:55: Und im Bereich E-Commerce sind die Zahlen noch viel beeindruckender.

00:01:59: Denn da gibt es auch eine Statistik von Statista für das Jahr 2023 und etwa 73%

00:02:06: der E-Commerce-Verkäufe weltweit werden über mobile Geräte getätigt.

00:02:13: Das heißt, wenn du einen Onlineshop hast, kommst du um die mobile Optimierung

00:02:17: hundertprozentig nicht herum.

00:02:20: Aber vielleicht hast du ja den Begriff Responsive Design schon einmal gehört.

00:02:26: Aber was bedeutet er denn genau und warum ist er so wichtig?

00:02:30: Das klären wir jetzt einmal ab.

00:02:33: Also was ist Responsive Design?

00:02:36: Grundsätzlich bedeutet Responsive Design, dass es bedarfsgesteuert ist.

00:02:40: Das heißt, das ist die Übersetzung dafür, und genau das passiert.

00:02:45: Je nach Bedarf passt sich das Layout und der Inhalt deiner Webseite automatisch an

00:02:50: die verschiedenen Bildschirmgrößen und Geräte an.

00:02:54: Egal ob ein Besucher mit einem Smartphone, einem Tablet, einem Laptop

00:02:59: oder über den Desktop auf deine Seite zugreift, sie bekommen immer eine

00:03:04: optimale angepasste Version angezeigt.

00:03:07: Zumindest sollte das so sein.

00:03:10: Warum ist Responsive Design jetzt wichtig?

00:03:12: Jetzt stell dir einmal vor, du bist unterwegs und siehst zum Beispiel eine

00:03:17: Werbung für ein Konzert, das du unbedingt sehen möchtest.

00:03:22: Was machst du?

00:03:23: Du zückst dein Handy, googelst nach einer entsprechenden Webseite,

00:03:27: wirst fündig und öffnest sie.

00:03:29: Und dann beginnt das Drama.

00:03:32: Auf der Buchen-Seite suchst du im Menü, triffst deine Auswahl, aber die Navigation

00:03:38: lässt sich nicht mehr schließen.

00:03:40: Jetzt siehst du die Hälfte des Inhalts nicht.

00:03:42: Irgendwie schaffst du es trotzdem, zu den Infos und besagtem Konzert zu gelangen.

00:03:47: Und Gott sei Dank, es gibt noch Karten, aber das Drama setzt sich fort.

00:03:52: Der Button, die Karten zu kaufen, ist teilweise hinter einem Bild versteckt

00:03:56: und lässt sich nicht anklicken.

00:03:58: Egal was du versuchst, du kannst die Tickets nicht kaufen.

00:04:02: Was machst du?

00:04:04: Schlussendlich knallst du frustriert dein Handy in die Handtasche und verfluchst den

00:04:07: Anbieter, der es nicht einmal schafft, seine Webseite für

00:04:09: Smartphones zu optimieren.

00:04:13: Du siehst, in der heutigen Zeit surfen die Menschen mit einer Vielzahl

00:04:16: von Geräten im Internet.

00:04:18: Deshalb muss auch deine Webseite auf all diesen Geräten gut aussehen und

00:04:23: funktionieren, sonst gibt es kein positives Nutzererlebnis.

00:04:28: Wenn jetzt deine Webseite auf einem Smartphone unübersichtlich ist oder auf

00:04:32: einem Tablet nicht richtig geladen wird, dann verlierst du definitiv

00:04:36: potenzielle Kunden.

00:04:38: Wie funktioniert Responsive Design jetzt?

00:04:41: Jetzt wird es etwas technisch.

00:04:45: Technisch gesehen wird Responsive Design durch flexible Layouts, Bilder

00:04:49: und CSS Media Queries erreicht.

00:04:53: Das bedeutet, dass die Elemente deiner Webseite in ihrer Größe und in ihrer

00:04:59: Position dynamisch angepasst werden, und zwar jeweils abhängig von der Größe des

00:05:04: Bildschirms, auf dem sie angezeigt werden.

00:05:07: Ich habe ja jetzt vorhin gleich einmal erwähnt, CSS Media

00:05:10: Queries, was ist denn das?

00:05:14: Stell dir vor, du hast ein Outfit, das du je nach Wetter anpasst.

00:05:19: Wenn es heiß ist, ziehst du halt leichtere Kleidung an und wenn es kalt ist,

00:05:23: ziehst du dir was Wärmeres drüber.

00:05:25: Diese CSS Media Queries funktionieren ähnlich.

00:05:29: Sie ändern das Aussehen deiner Webseite, je nachdem, welche Bedingungen, also

00:05:34: welche Bildschirmgröße, gerade vorherrscht.

00:05:38: Dazu gibt es von mir meinen magischen Feen-Tipp: Vermeide zu viele

00:05:43: Inhalte auf kleinen Bildschirmen.

00:05:46: Auf mobilen Ansichten musst du den Inhalt auf das Wesentliche reduzieren.

00:05:51: Entferne oder verstecke unnötige Elemente.

00:05:56: Das macht die Seite übersichtlicher und verbessert die Ladezeit.

00:06:00: Und denk daran: Jeder von uns hasst es, ewig auf einem Handy nach unten zu

00:06:05: scrollen, bis man endlich irgendwo anlangt, wo man hin möchte.

00:06:11: Steigen wir noch etwas tiefer in das Thema ein.

00:06:14: Was sind denn die Vorteile von Responsive Design?

00:06:19: Ja, da gibt es einmal bessere Nutzererlebnisse.

00:06:22: Klar, ein reibungsloses und gleichbleibendes Nutzererlebnis auf allen

00:06:27: Geräten führt definitiv zu zufriedenen Besuchern.

00:06:31: Sie bleiben länger auf deiner Seite und werden eher zu Kunden.

00:06:36: Dann kommen wir zum zweiten, SEO-Vorteile.

00:06:39: Google bevorzugt mobilfreundliche Webseiten.

00:06:43: Eine Responsive Webseite verbessert dein Ranking in den

00:06:48: Suchmaschinen und es sorgt dafür, dass mehr Menschen eine Seite finden können.

00:06:52: Dabei sei aber vorsichtig: Ladezeiten für mobile Geräte sind wichtig.

00:06:59: Und kosteneffizient und Zeitersparnis.

00:07:03: (lacht) Da denkst du, was meint sie damit?

00:07:06: Ganz einfach.

00:07:07: Wenn deine Seite responsive ist, dann musst du dich nur um eine Webseite kümmern

00:07:11: und nur eine Webseite aktualisieren, anstatt separate Versionen für

00:07:17: unterschiedliche Geräte zu erstellen.

00:07:20: Das spart klarerweise Zeit und Kosten.

00:07:22: Früher war das anders, da ging es nicht anders.

00:07:25: Aber in den modernen Zeitaltern mit den modernen CMS-Systemen

00:07:30: funktioniert das ganz einfach.

00:07:33: Höhere Conversion Rate, klar, wenn deine Webseite auf allen Geräten gut aussieht

00:07:37: und leicht zu bedienen ist, dann bleiben auch die Besucher länger auf der Seite

00:07:41: und führen eine gewünschte Aktion aus.

00:07:44: Zum Beispiel kaufen sie was, sie melden sich an oder nehmen mit dir Kontakt auf.

00:07:49: Wenn es dir nicht so geht, wie der Seite von dem Ticketanbieter,

00:07:53: dass zum Beispiel der Button nicht anklickbar ist, weil er sich hinter

00:07:56: einem anderen Element versteckt.

00:07:59: Und, der Vorteil: Du startest sicher in die Zukunft, denn es

00:08:04: kommen ja laufend neue Gerätetypen auf den Markt.

00:08:06: Man braucht nur anschauen, welche verschiedene großartige

00:08:10: Arten an Handys es gibt.

00:08:12: Es gibt kleine Handys, es gibt Handys zum Zuklappen, es gibt große Bildschirme.

00:08:16: Und der Vorteil deiner Webseite ist, sie passt sich automatisch an die neuen

00:08:20: Bildschirmgrößen an, ohne dass du ständig daran herumbasteln und

00:08:24: Anpassungen vornehmen musst.

00:08:25: Das wäre doch echt mühsam, wenn du das ständig manuell machen müsstest.

00:08:31: Fassen wir jetzt alle Punkte noch einmal zusammen, die wichtig sind.

00:08:36: Worum ist Responsive Design wichtig?

00:08:38: Ganz einfach, damit deine Webseite auf allen Geräten gut aussieht

00:08:43: und damit du nicht in das Problem kommst, wie der Ticketanbieter, dass irgendwelche

00:08:47: Elemente nicht funktionieren.

00:08:50: Welche Vorteile hat denn Responsive Design?

00:08:53: Du bietest ein besseres Nutzererlebnis deinen Besuchern.

00:08:57: Google liebt mobilfreundliche Webseiten.

00:09:01: Das heißt, du verbesserst dein Ranking.

00:09:04: Es ist im Endeffekt kosteneffizient und spart Zeit, denn du musst nicht für jede

00:09:09: Bildschirmgröße eine eigene Version der Webseite erstellen.

00:09:13: Dann, du hast eine höhere Conversion Rate.

00:09:15: Ganz einfach: Die Leute sind glücklich auf deiner Seite, finden, was sie brauchen,

00:09:19: alles funktioniert und nehmen mit dir Kontakt auf oder kaufen etwas.

00:09:24: Und du startest sicher in die Zukunft.

00:09:26: Denn ganz egal, welche Gerätetypen auf den Markt kommen, deine Seite schaut

00:09:31: auf allen einfach genial aus.

00:09:35: Hast du jetzt nun festgestellt, dass bei dir noch Optimierungsbedarf ist

00:09:41: oder du bist dir unsicher, wie du es am besten angehst, damit deine Webseite auch

00:09:46: auf allen Geräten perfekten Eindruck hinterlässt?

00:09:50: Dann buch dir doch gerne einen unverbindlichen Gesprächstermin mit mir

00:09:53: und wir schauen, ob und wie ich dich unterstützen kann.

00:09:56: Den Link dazu findest du in den Shownotes.

00:10:00: Und denke immer daran: Deine Webseite kann mehr als nur gut aussehen.

00:10:05: Mach sie zu deiner besten Mitarbeiterin.

00:10:07: Bis zur nächsten Folge, bleibe zauberhaft und voller Tatendrang, deine Angelika.

00:10:17: (Musik) Das war es auch schon wieder mit dieser Folge von Webseiten-Magie.

00:10:21: Vielen Dank, dass du mit dabei warst.

00:10:23: Weitere Informationen zu Angelika und ihrer Arbeit findest du unter www.

00:10:27: diemarketingfee. at.

00:10:30: Und jetzt stellt sich die Frage: Wie ist es bei dir?

00:10:33: Hast du bereits eine Website, die du vielleicht sogar selbst erstellt hast?

00:10:37: Oder du hast sie vor einiger Zeit erstellen lassen, aber es kommen

00:10:40: keinerlei Anfragen über sie?

00:10:41: Und generell, irgendwie bist du mit deiner Website schon länger nicht

00:10:45: mehr glücklich und zufrieden.

00:10:46: Wenn es dir so geht, dann sichere dir jetzt ein kostenloses

00:10:49: Erstgespräch mit Angelika.

00:10:51: Sie schaut sich mit dir deine aktuelle Situation an, bespricht deine Ziele und

00:10:55: ihr findet gemeinsam heraus, was die nächsten Schritte sind.

00:10:58: Egal ob du dich gerade mit Ladezeiten herumschlägst oder deine Website

00:11:02: optimieren willst, setzt euch zusammen und klärt, wie

00:11:05: sie dir am besten weiterhelfen kann.

00:11:07: Den Link zur Terminbuchung findest du in den Shownotes.

00:11:10: Danke, dass du uns heute dein Ohr geliehen hast und denke immer daran: Mach deine

00:11:14: Website zu deiner besten Mitarbeiterin!