Lade dir unser kostenloses Handbuch herunter und setze deinen Aktionsplan um, ein eigenes Unternehmen aufzubauen
Die eingegebene E-Mail-Adresse ist ungültig.
Vielen Dank für deine Anmeldung.
Mit der Angabe deiner E-Mail bestätigst du, dass du unsere Datenschutzerklärung gelesen und verstanden hast und einverstanden bist, Marketing-E-Mails von Squarespace zu erhalten.
Nach der Eröffnung eines Onlineshops gibt es einige Punkte zu beachten, um deine Website für den mobilen E-Commerce (M-Commerce) zu optimieren. Ein längerer Bestellvorgang beispielsweise, der auf einer Desktop-Website kein großes Problem darstellt, kann bei Shop-Besucher:innen mit kleineren Mobilgeräten schnell Frustrationen hervorrufen und dazu führen, dass sie den Kauf abbrechen.
Erfahre hier, was eine Website mobilfreundlich macht, wie du die Funktionen zur mobilen Optimierung testen kannst und warum es für deine Kundenbeziehungen und dein Umsatzwachstum so wichtig ist, deine Website für den mobilen E-Commerce bereit zu machen.
Was macht eine mobilfreundliche Website aus?
Die Optimierung deines Onlineshops für den E-Commerce ist nur einer von vielen Aspekten, die deine Website mobilfreundlicher machen. Wie gut eine Website auf Mobilgeräten läuft, hängt von wesentlichen Faktoren ab.
Mobilfreundliches Design
Das Design deiner Website spielt eine maßgebliche Rolle. Die meisten Tools für die Website-Erstellung – so auch Squarespace – sorgen bereits auf vielerlei Weise für eine mobile Optimierung, sodass du dir um einen Großteil der technischen Aspekte keine Gedanken machen musst. Trotzdem kann es hilfreich sein, die Optionen zu kennen, insbesondere wenn du eine rein mobile Version deiner Website planst.
Dies sind einige der gängigsten Design-Optionen:
Responsive Design: Websites mit Responsive Design passen sich flexibel an die Größe des verwendeten Bildschirms an. Wird beispielsweise das Browserfenster verkleinert oder vergrößert, werden die Bilder und der Text auf das Fenster abgestimmt, ohne dass das Design der Website dadurch beeinträchtigt wird. Jede Squarespace-Website verfügt über ein Responsive Design.
Adaptive Design: Das Adaptive Design funktioniert ähnlich wie das Responsive Design. Ein Unterschied besteht darin, dass eine Website mit Adaptive Design sich auf eine begrenzte Anzahl von Displaygrößen – meist handelt es sich dabei um die gängigsten Screen-Größen – anpassen lässt. Websites mit Adaptive Design werden automatisch in der Größe angezeigt, die der Größe des verwendeten Bildschirms am nächsten kommt.
Reine Mobil-Website: Eine sogenannte Mobile-only-Website ist eine separate, vereinfachte Version einer Desktop-Seite, die nur für Mobilgeräte verfügbar ist. Eine „Link-in-Bio“-Seite wie z. B. eine Bio Site von Unfold ist eine kostengünstige Möglichkeit, eine rein mobile Website zu erstellen, von der du auf Produkte und wichtige Teile deiner Website, z. B. deine Kontakt-Seite, verlinken kannst.
Separate App: Eine eigenständige App kann eine vereinfachte, nur für Mobilgeräte verfügbare Version deiner Desktop-Site sein. Für kleine Unternehmen lohnt es sich in der Regel nicht, eine eigene App zu erstellen, da der Zeit- und Kostenaufwand einfach zu hoch ist.
Wenn du deine Website für mobile Besucher:innen attraktiver gestalten willst, um dein Suchmaschinenranking zu verbessern, kommt es vor allem darauf an, dass du sie für Mobilgeräte optimierst. Welche spezifische Methode du dabei anwendest, hat auf das Ranking deiner Website keinen großen Einfluss.
Visuelle Elemente mit geräteübergreifender Wirkung
Auch wenn dein Website-Builder sich automatisch darum kümmert, dass Bilder und Texte in der passenden Bildschirmgröße angezeigt werden, liegt das visuelle Erlebnis weiterhin in deiner Hand. Wähle bei der Gestaltung deiner Website Schriftarten und Farbkombinationen aus, die deutlich und gut lesbar sind, damit wichtige Informationen oder Links auf einem Smartphone- oder Tablet-Bildschirm nicht untergehen.
Bedenke auch, dass ein Bild oder eine Beschreibung, die auf einem Laptop oder Desktop-Bildschirm klar erscheint und nicht zu viel Platz einnimmt, auf einem kleineren Bildschirm ganz anders aussehen kann. Wenn du Produkte verkaufst, empfiehlt es sich, mehrere Fotos hochzuladen, auf denen die Details oder Merkmale gut zur Geltung kommen und die Einzigartigkeit deines Angebot unterstreichen. Formuliere deine Produktbeschreibungen entsprechend deiner Markenstimme und nenne relevante Details wie Abmessungen, aber beschränke dich besser auf kurze, prägnante Texte.
Schnelle Ladezeiten
Die Ladezeit deiner Website ist für das Besuchererlebnis besonders wichtig. Kund:innen erwarten, dass Websites schnell laden, und eine träge Seite wird mit hoher Wahrscheinlichkeit schnell wieder verlassen. Langsame Ladezeiten können sich also negativ auf dein Markenimage auswirken und deine Fähigkeit, im Suchmaschinenranking mit der Konkurrenz mitzuhalten, stark beeinträchtigen.
Squarespace-Websites sind so konzipiert, dass sie schnell laden, aber die Geschwindigkeit deiner eigenen Website hängt auch davon ab, was du darauf platzierst. Große Dateien oder Seiten mit übermäßig viel Content können deine Website-Größe erhöhen und sie dadurch verlangsamen. Du kannst deine Website beschleunigen, indem du die Größe jeder Seite überprüfst. So kannst du herausfinden, was genau für die lange Ladezeit verantwortlich ist. Entferne dann entweder Inhalte oder teile deinen Content auf mehrere kleinere Seiten auf.
Wenn Blog-Seiten deine Website verlangsamen, kannst du auch Accelerated Mobile Pages (AMP) aktivieren und so eine simplere Version der jeweiligen Seite erstellen, die für ein schnelleres Laden auf Mobilgeräten optimiert ist. Der Nachteil von AMP besteht darin, dass die schneller ladende Version deiner Seite nicht alle Funktionen und Grafiken enthält, die die Seite auf einem Desktop-Browser bietet.
Einfache Navigation
Nicht nur die Navigation deiner Website sollte schnell zu finden und gut lesbar sein. Auch das Menü selbst sollte die Suche nach den gewünschten Inhalten so einfach wie möglich machen. Wenn deine Website mehrere Abschnitte oder dein Shop unterschiedliche Kategorien hat, solltest du diese klar voneinander abgrenzen und den Wechsel zwischen ihnen möglichst einfach gestalten. Handlungsaufforderungen (CTA) sollten eindeutig formuliert (z. B. „In den Warenkorb“ oder „Jetzt registrieren“) und leicht zu bedienen sein.
Das Navigieren auf deiner Website sollte auch physisch einfach sein. Das heißt: Wenn Besucher:innen ihr Handy mit einer Hand halten, sollten sie im Idealfall allein mit dem Daumen in der Lage sein, auf dein Menü zu tippen und das zu finden, wonach sie suchen.
Mobilfreundliche Storefront
Die oben erwähnten Optimierungen für Mobilgeräte können das mobile Erlebnis deines Onlineshops deutlich verbessern. Vergiss allerdings nicht, speziell auf mobilen E-Commerce ausgelegte Optimierungen vorzunehmen, wie etwa beim Bestellvorgang und bei den Zahlungsoptionen.
Deine Kund:innen sollten ihre Artikel schnell in den Warenkorb legen und zur Kasse gehen können. Von dort aus sollte sich der Checkout-Prozess auch auf einem kleinen Bildschirm intuitiv und einfach abschließen lassen. Teile beispielsweise Rechnungs- und Versandinformationen auf kurze, aufeinanderfolgende Schritte auf, anstatt sie in einem langen Text zusammenzufassen. Biete mehrere Zahlungsmöglichkeiten an, einschließlich Express-Optionen, bei denen deine Kund:innen nicht mühsam ihre Kreditkarteninformationen eingeben müssen, um den Kauf abzuschließen.
So testest du die mobile Optimierung deiner Website
Während du deine Website aufbaust und aktualisierst, solltest du regelmäßig testen, ob sie mobilen Besucher:innen weiterhin ein gutes Erlebnis bietet.
Hier haben wir ein paar einfache und schnelle Möglichkeiten zusammengestellt, wie du deine Website testen kannst:
Nutze ein Tool zum Testen der Mobilfreundlichkeit: Es gibt verschiedene Tools, mit denen du die Mobiltauglichkeit einer Website analysieren kannst, indem du den Link eingibst. Eine schnelle Suche wird dir einige beliebte Optionen anzeigen – und es schadet nicht, deine Website mit mehr als einem Tool zu testen.
Teste die Website in deinem Browser oder Website-Builder: Viele Website-Building-Tools verfügen über eine mobile Vorschau, die dir einen guten Eindruck davon vermittelt, wie deine Website auf einem Handy oder Tablet aussieht. Wenn deine Website über ein Responsive oder Adaptive Design verfügt, kannst du das Browserfenster auch vergrößern und verkleinern, um zu sehen, wie das Design bei verschiedenen Anzeigegrößen aussieht.
Teste deine Website auf einem mobilen Gerät: Versetze dich in die Lage deiner Kund:innen, indem du deine eigene Website auf einem Telefon oder Tablet aufrufst, und bitte Freund:innen oder befreundete Unternehmer:innen, dasselbe zu tun. Achte dabei besonders auf potenzielle Schwachstellen, die ein Testtool möglicherweise nicht erkennt, z. B. ein sperriger Anmeldeprozess oder eine schwer lesbare Handlungsaufforderung.
Warum eine mobilfreundliche E-Commerce-Website wichtig ist
Weil das Surfen im Internet sich immer mehr auf dem Handy oder Tablet abspielt und Suchmaschinen mobilfreundliche Websites tendenziell höher einstufen, ist die Optimierung der eigenen Website für Mobilgeräte für jede:n ein wichtiges Thema, nicht nur für E-Commerce-Unternehmer:innen. Der Bereich des Mobile Commerce als Unterkategorie des E-Commerce ist mit der technologischen Entwicklung beträchtlich gewachsen. Kund:innen geben jedes Jahr Billionen von Dollar bei mobilen Einkäufen aus.
Eine Website, die nicht für den M-Commerce optimiert ist, kann einen erheblichen Verlust am Marktanteil dieser Umsätze bedeuten. Mit einem Onlineshop, der langsam lädt, schwer zu navigieren oder unübersichtlich ist und auf Mobilgeräten einen langen Bestellvorgang aufweist, schreckt man potenzielle Kund:innen ab und büßt dadurch auch an Umsätzen und Kundenvertrauen ein.
Es ist relativ einfach, einen Online-Shop für den mobilen E-Commerce attraktiv zu gestalten. Sobald du deine E-Commerce-Plattform ausgewählt und deine Produkte hochgeladen hast, solltest du überlegen, welche Teile deiner Website du für mobile Benutzer:innen optimieren musst und wie du diese verbessern kannst.