Der mobile Handel macht bereits fast 40 % der gesamten E-Commerce-Umsätze aus und wird voraussichtlich bis 2021 etwa 54 % dominieren – das bedeutet, dass Sie erhebliche Einnahmen verpassen könnten, wenn Ihre Website nicht für die mobile Nutzung optimiert ist!
Zusätzlich dazu, dass mobile Geräte oft der erste Kontaktpunkt zwischen Ihnen und Ihren Kunden sind, bedenken Sie die Popularität von Smartphones, die wachsende Präsenz jüngerer, zunehmend mobil-affiner Konsumenten und eine schnelllebige, vielbeschäftigte, digital fokussierte Kultur, die von Minute zu Minute mehr Komfort und Effizienz verlangt. Es ist leicht, den Bedarf an mobilem Erlebnis zu erkennen, aber wie wirkt sich das speziell auf digitale Produktshops aus?
In diesem Beitrag gehen wir einige unserer Empfehlungen zur Optimierung Ihres digitalen Produktshops für die mobile Nutzung durch, damit Sie mit der Zeit – *und* den Verkäufen – Schritt halten können!
Den Wandel hin zum Minimalismus verstehen
Spulen wir die Zeit kurz zurück: Wir schreiben die frühen 2000er Jahre, und das Aufkommen von Smartphones setzt Internetanbieter unter erheblichen Druck, sich an den steigenden Bandbreitenverbrauch anzupassen. Verbraucher können das Internet endlich regelmäßig unterwegs nutzen – eine enorme Veränderung des Lebensstils, die eine komplette Überarbeitung der Präsentation von Webinhalten auslöst.
Es ist an der Zeit, das Skript von beeindruckenden Animationen und grafiklastigen Inhalten umzudrehen, hin zu Webseiten, die auf weniger leistungsfähigen Mobilfunknetzen relativ schnell geladen werden können, und Webentwickler optimieren nun auf Geschwindigkeit, um Schritt zu halten. Addieren Sie dazu die Auswirkungen von Social-Media-Plattformen wie Facebook, die für Geschwindigkeiten von nur 2G angepasst werden müssen, um *global* zugänglicher zu werden, und Sie können den wachsenden Bedarf an einem "reduzierten" Ansatz erkennen!
Die mobile Optimierung stand im Mittelpunkt dieser Entwicklung, da die Gesellschaft im Laufe der Zeit noch *mehr* Smartphone-orientiert geworden ist. Jetzt befinden wir uns an einem interessanten Wendepunkt; viele Menschen nutzen Smartphones und Tablets als primäre Geräte für alle Arten von Zwecken, von Arbeit und Bildung bis hin zu Einkaufen und Unterhaltung.
Smartphones sind unsere Lebensadern – zentrale Anlaufstellen für unsere Zeitpläne, Kontakte, Kommunikation und soziale Interaktion, Gesundheit und Wohlbefinden, Einkaufen, Lesen, Musik, Fernsehen, Filme, Spiele, was auch immer. Unnötig zu sagen, dass die Optimierung Ihres digitalen Produktshops für die mobile Nutzung nicht nur zum Spaß dient; sie ist für *jede* Website zunehmend notwendig – und Sie wollen nicht ins Hintertreffen geraten! Wo also fangen Sie an?
Responsives Webdesign
Da es so viele verschiedene Geräte gibt, wie können Sie sicher sein, dass Ihre Website korrekt angezeigt wird? Responsive Webdesign ist eine Methode des Webdesigns, die Inhalte und Layout automatisch an das verwendete Gerät anpasst. Als grundlegender Bestandteil der mobilen Optimierung ermöglicht Responsive Webdesign Benutzern auf mobilen Geräten wie Smartphones und Tablets (sowie Laptops und Desktop-Computern), Ihre Website gemäß verschiedenen Anzeige-Standards korrekt anzuzeigen und effektiv zu nutzen.
Wenn Inhalte optimiert sind, erscheinen sie auf mobilen Geräten möglicherweise minimalistischer, um die Funktionalität zu priorisieren – oder visueller, um Unübersichtlichkeit zu reduzieren, je nach Art des Inhalts.
Beispiel kleines Smartphone (AudioTheme)
Beispiel kleines Tablet (AudioTheme)
Beispiel großer Desktop-Computer (AudioTheme)
Abgesehen von den ästhetischen und umsatzbezogenen Vorteilen hilft responsives Design auch, Ihr SEO zu verbessern. Wie? Nun, Google hat kürzlich angekündigt, dass es mit der Mobile-First-Indexierung beginnen wird. Das bedeutet, dass die Suchmaschine aufgrund der Dominanz mobiler Nutzer weitgehend die mobilen Versionen von Websites für Ranking und Indexierung heranziehen wird.
Was müssen Sie also tun, um Responsive Webdesign in Ihrem eigenen Digital-Product-Store zu implementieren? Je nach Ihrem Fachwissen gibt es einige Optionen:
- Installieren Sie ein responsives Theme. Die meisten modernen Themes sind responsiv gestaltet, daher ist dies wahrscheinlich die einfachste Option, insbesondere wenn Sie Ihre eigene Website verwalten.
- Beauftragen Sie Ihren Webdesigner, Ihr bestehendes Theme oder Ihre benutzerdefinierte Website zu modifizieren, um Responsive Design zu integrieren.
- Modifizieren Sie Ihr bestehendes Theme oder Ihre benutzerdefinierte Website selbst, wenn Sie Ihre eigene Webentwicklung durchführen.
Analyse- und Heatmap-Tools können Ihnen die durchschnittlichen Bildschirmabmessungen und Aktivitätsmuster Ihrer Website-Besucher anzeigen, sodass Sie für Ihre spezifische Zielgruppe anpassen können. Sie können Ihre Benutzer sogar nach Gerätetyp segmentieren. Versuchen Sie, ein Tool wie Responsive Design Checker zu verwenden, um zu sehen, wie Ihre Website derzeit auf verschiedenen Geräten angezeigt wird.
Leistung
Möchten Sie sicher sein, dass Ihre Website bei Zugriff auf verschiedenen Geräten gut funktioniert? Geschwindigkeit ist alles – tatsächlich kann sie die Benutzererfahrung ausmachen oder zerstören!
Wenn eine Website langsam lädt, ist es viel wahrscheinlicher, dass die Leute sie ganz verlassen. Um Absprungraten zu minimieren, möchten Sie, dass Ihre Website so schnell wie möglich lädt. Es ist wichtig zu bedenken, dass Mobilfunknetze tendenziell weniger stabil sind als Breitbandnetze, mit volatiler Konnektivität, die von der physischen Position, der gemeinsamen Nutzung und anderen Variablen abhängt. In diesem Sinne gilt: Je leichter Ihre Website ist, desto besser!
„Die meisten Leute werden einen mobilen Website-Besuch abbrechen, wenn die Seite länger als ein paar Sekunden zum Laden braucht.“ – Google
Hier sind ein paar Tricks für eine schnell ladende mobile Erfahrung:
- Minimieren Sie die Größen von HTML/CSS-Dateien. Verwenden Sie ein Tool wie Gzip, um sie zu komprimieren, und versuchen Sie, so nah wie möglich an 70 KB heranzukommen, wenn Sie blitzschnelle Ladezeiten wünschen.
- Anfragen reduzieren. Jede Komponente Ihrer Website (ob Bild, Schriftart, Stylesheet usw.) generiert eine eigene Anfrage. Kombinieren Sie Elemente, wo immer möglich, um diesen Effekt zu minimieren.
- Nutzen Sie einen guten Hoster. Ein optimierter Server-Stack mit Caching auf Serverebene ist ideal.
- Vermeiden Sie unnötige Plugins. Halten Sie Ihre Ladezeit so gering wie möglich!
- Erwägen Sie die Verwendung eines Content Delivery Networks (CDN) für Bilder. Dies ist besonders relevant, wenn Ihre Website viele Bilder enthält. Stellen Sie außerdem sicher, dass Ihre Bilder für das Web optimiert sind!
- Deaktivieren Sie alle Funktionen, die Sie nicht unbedingt benötigen.
- Verwenden Sie HTML5 anstelle von Flash, wenn Sie spezielle Effekte nutzen möchten.
- Vermeiden Sie Pop-ups. Sie können auf Mobilgeräten umständlich zu handhaben sein.
- Beschränken Sie die Verwendung von Weiterleitungen und Link-Shortenern, es sei denn, sie sind notwendig. Diese verlängern nur Ihre Ladezeit!
Google bietet dieses Tool an, mit dem Sie die mobile Leistung Ihrer Website mit anderen Websites vergleichen können. Sie können es auch verwenden, um abzuschätzen, wie sich Geschwindigkeitsverbesserungen auf Ihren Umsatz auswirken könnten.
Inhalt
Ein weiterer Aspekt der mobilen Optimierung ist die Art und Weise, wie Sie Ihre Inhalte präsentieren. Die seit Beginn der Printmedien geltende Regel besagt, dass Sie die grundlegende Kernaussage Ihrer Inhalte „above the fold“ (im sichtbaren Bereich) vermitteln möchten. Im digitalen Sinne bezieht sich dies auf den sofort sichtbaren Bereich einer Webseite, wenn sie zum ersten Mal geladen wird.
Einige Experten sagen jedoch, dass der „Fold“ (der sichtbare Bereich) keine Rolle mehr spielt; dass er bei modernen Trends der Internetnutzung fast irrelevant ist. Wenn Sie an extrem beliebte Seiten wie Facebook denken, die unendliches Scrollen verwenden, stimmen Sie vielleicht zu! Wo stehen wir also?
Nun, selbst wenn es stimmt, dass er weniger relevant ist als früher, garantiert die Platzierung Ihrer wichtigsten Informationen „above the fold“ (im sichtbaren Bereich), dass sie das Erste sind, was Ihre Website-Besucher sehen. Vergleichen wir ein paar Desktop- und Mobilbeispiele:
Suchleiste und Menüs sind leicht zugänglich, mit den neuesten Angeboten im Vordergrund (Producer Loops)
Es ist sofort ersichtlich, was die Website bietet, ohne scrollen zu müssen (UIdeck)
Ein sauberes und minimalistisches Design mit der Überschrift und den Top-Produkten, mit einfachem Zugang zum Menü und zur Support-Datenbank / FAQs (ThemeBeans)
Navigation und Interaktivität
Die Navigation ist ein entscheidendes Element der mobilen Optimierung, da kleinere Geräte die Benutzerfunktionalität erheblich einschränken *können*, wenn sie allein gelassen werden. Best Practices deuten darauf hin, Menüs auf die einfachsten und relevantesten Optionen zu beschränken, wie z. B. Ihr Shop-Startseite oder die Hauptproduktgalerie (und/oder Produktkategorien), die Support-Seite und die Kontakt-Seite. Die gute Nachricht ist, dass die meisten Themes eine mobile Menüoption direkt im Lieferumfang enthalten!
Wenn es um Interaktivität geht, berücksichtigen Sie die Unterschiede bei der Klickbarkeit bei der Verwendung verschiedener Geräte. Kleinere Schaltflächen sind möglicherweise mit einer Maus leicht zu klicken, aber sie können auf einem Smartphone beispielsweise schwieriger zu tippen sein. Alles, was Sie tun können, um die mobile Interaktivität Ihrer Website zu optimieren, ist ideal!
Viele digitale Shops und Dienste bieten Live-Chat-Support oder schnellen und einfachen Zugang zu FAQs, um es den Kunden so einfach wie möglich zu machen, Fragen zu stellen oder mehr über die Produkte zu erfahren. Sie könnten zum Beispiel ein Chat-Support-Plugin installieren oder einen intuitiv organisierten und durchsuchbaren FAQ-Bereich oder eine Support-Datenbank erstellen.
Der Komfortfaktor
Es ist wichtig zu bedenken, dass viele Mobilnutzer allein aus Bequemlichkeit auf ihren Handys einkaufen. Daher werden einfache Checkout-Prozesse – insbesondere One-Click-Checkouts – immer beliebter. Dies gilt auch für andere Elemente Ihrer Website, wie Menüs, Produktseiten und Support. Überlegen Sie, was Sie tun können, um Informationen so zusammenzufassen, dass sie prägnant sind und nur ein minimales Klicken und Durchsuchen erfordern!
Audio- und Videoinhalte
Wenn möglich, ist es immer vorzuziehen, Ihre Audio- und Videodateien auf Drittplattformen zu hosten, die bereits speziell für die mobile Nutzung optimiert sind. Zum Beispiel können Vimeo- und YouTube-Videos einfach in Ihre Beiträge oder Seiten eingebettet werden, wodurch benutzerdefinierter Code überflüssig wird oder Ihr eigener Server nicht mit großen Datenmengen belastet wird.
Wenn es um Audio geht, ist WordPress in Ordnung, da es einen integrierten responsiven Audioplayer hat. Sie können aber auch Dienste wie SoundCloud zum Hosten Ihrer Audiodateien verwenden. Der Bonus bei den meisten Audio- und Videoplattformen wie diesen ist, dass jeder Wiedergabe von Ihrer Website zu Ihrer Wiedergabezahl auf der Plattform beiträgt.
Vergessen Sie nicht, alles zu testen!
Einige Unternehmen haben ganze Abteilungen, die sich dem Testen mobiler Geräte widmen. Wenn Sie jedoch ein kleinerer Betrieb sind, können Sie Dienste oder Websites zum Testen von Geräten nutzen (wie Responsive Design Checker oder Responsinator), mit denen Sie Ihre Website auf verschiedenen Geräten in der Vorschau anzeigen können.
Sie können auch einfach die Größe Ihres Browserfensters anpassen, um zu sehen, wie Ihr Design auf sich ändernde Abmessungen reagiert. Denken Sie daran, dass Sie nicht unbedingt in jedem Fall ein perfektes Layout erhalten. Responsives Design konzentriert sich typischerweise nur auf 3 oder 4 verschiedene Auflösungen und hält sich an die gängigsten und aktuellsten Auflösungs-Breakpoints (CSS-Elemente, die bestimmen, wie Layouts auf verschiedenen Bildschirmgrößen erscheinen).
Die beliebtesten E-Commerce-Themes/Websites werden mit beliebten Webentwicklungs-Frameworks wie Bootstrap 4 (von Twitter verwendet) erstellt und sind „mobile first“ konzipiert. Sie verwenden ein Grid-Layout-System, das sofort auf jedem Gerät skaliert und funktioniert. Dies ermöglicht es Entwicklern, ansprechende Themes zu erstellen, ohne sich darum kümmern zu müssen, dass jedes einzelne Gerät sofort unterstützt wird. Wenn Sie Probleme mit bestimmten Geräten haben, können Sie das Problem normalerweise dem Theme-Entwickler melden, und er veröffentlicht möglicherweise ein Update.
Die Vorbereitung Ihres digitalen Produkts für die mobile Nutzung ist kein Prozess, der über Nacht abgeschlossen ist. Hoffentlich hat Ihnen dieser Beitrag einige hilfreiche Ideen und Richtlinien gegeben. Die mobile Optimierung wird immer notwendiger. Glücklicherweise bedeutet das auch, dass es immer mehr Tools und Ressourcen gibt, die Ihnen dabei helfen!
Haben Sie Ratschläge zur Optimierung Ihres eigenen Shops für digitale Produkte für die mobile Nutzung? Auf welche Hürden sind Sie gestoßen und wie haben Sie sie überwunden? Was hat sich für Sie als am hilfreichsten erwiesen? Wir würden uns freuen, Ihre Meinung in den Kommentaren unten zu lesen!
Illustration von Jessica Johnston.
