Deine Website mobil optimieren – 10 Beispiele für eine mobile Website
Die Gestaltung eines großartigen mobile Surferlebnisses ist ein wichtiger Schritt, wenn du eine eigene Website erstellen möchtest. Das liegt daran, dass der größte Teil des Internetverkehrs heute über mobile Endgeräte abgewickelt wird. Tatsächlich zeigen Statistiken, dass der Anteil der mobilen Internetnutzer:innen in Deutschland von 54 % in 2015 auf über 82 % in 2021 gewachsen ist – Tendenz steigend.
Eine gut gestaltete mobile Website kann aber weitaus mehr als nur die Benutzerfreundlichkeit verbessern. Als Teil von Googles Mobile-First-Indexierung kann sie sich positiv auf die SEO und die Platzierung deiner Website in den Suchergebnissen auswirken.
Für deinen Erfolg im Internet ist eine mobile Website daher ein absolutes Muss bei der Website-Erstellung.
In diesem Artikel erklären wir dir, worauf es ankommt, wenn du deine Website mobile machen willst und erklären dir einige der besten Funktionen und Praktiken für Mobilfreundlichkeit im Web. Darüber hinaus haben wir 10 Beispiele für das Design mobiler Websites zusammengestellt, die alle auf Wix erstellt wurden.
01. Was ist eine mobile Website?
Unter einer mobilfähigen Website versteht man die Anpassung einer Website für kleine Displays wie Smartphones und Tablets. Dabei geht es um viel mehr als nur darum, deine Desktop-Website für mobile Geräte zu verkleinern.
Eine mobile Website ist speziell an die Bedürfnisse tragbarer Endgeräte angepasst und macht die Nutzung der Website auf einem Smartphone oder Tablet viel einfacher, optisch ansprechender und natürlich nutzerfreundlicher. Das gilt übrigens unabhängig davon, für welchen Website Typen du dich bei der Erstellung entscheidest.
Unter anderem erfolgt eine Anpassung an die verkleinerte Bildschirmgröße, doch auch die Ladezeit der Website sollte optimiert werden, indem Elemente entfernt und Bilder optimiert werden.
Der Zugriff auf mobile Websites erfolgt, wie auf eine normale Website, über einen Webbrowser. Es gibt aber auch mobile Apps, die du in App-Stores herunterladen kannst.
Wenn du deine Website mit Wix.com erstellst, kannst du sicher sein, dass alle Website-Vorlagen eine Anpassung für die mobile Nutzung deiner Website enthalten.
Außerdem wird deine Website automatisch in eine mobilfreundliche Ansicht mit optimierten Schriftgrößen, Bildern und mehr umgewandelt.
02. Warum solltest du deine Website für Mobilgeräte optimieren?
1. Google Bots crawlen mobile Version der Websites bei der Indexierung
Damit deine Website im Internet gefunden wird, muss sie von Suchmaschinen wie Google gecrawlt und indexiert werden. Dafür crawlen die sogenannten Google Bots die mobile Version einer Website. Dieses Vorgehen nennt Google “Mobile-First-Indexierung”.
Bei der Mobile-First-Indexierung werden die Inhalte von Google hauptsächlich in der mobilen Version indexiert und bewertet. Früher wurde hauptsächlich die Desktop-Version der Seiteninhalte verwendet, um die Relevanz einer Seite für die Suchanfrage von Nutzer:innen zu beurteilen. Da jedoch die Mehrheit der Nutzer:innen inzwischen über mobile Geräte auf die Google-Suche zugreift, werden in Zukunft hauptsächlich Seiten über den Smartphone-Agenten indexiert.
2. Nutzer:innen surfen on the go
Die Popularität von mobilen Geräten, wie Smartphones und Tablets, nimmt schlagartig zu. Tagtäglich können wir beobachten, dass immer mehr Menschen, auch wenn sie vor einem Notebook oder Desktop-PC sitzen, kleinere Recherchen auf ihrem Smartphone durchführen.
Auch auf dem Weg zur Arbeit, beim Treffen mit Freund:innen oder alleine vor dem Fernseher – mobile Geräte begleiten uns ständig und die Nutzung wird in Zukunft immer mehr zunehmen. In Europa erfolgt heute schon jeder zweite Aufruf einer Website von einem mobilen Gerät aus.
3. Mobile Friendly Test von Google
Seit der Einführung des Mobile-First-Indexes von Google im Jahr 2015 wird die Platzierung einer Website in den Suchergebnissen hauptsächlich anhand ihrer mobilen Version bestimmt. Daher ist die Verbesserung der mobilen Version deiner Website - in Bezug auf Leistung, Design und Ladezeit – zu einer der wichtigsten SEO-Maßnahmen geworden.
Viele meinen sogar, dass Mobile-First-Design wichtiger ist als die Desktop-Version. Laut InVision gilt: „Wenn du deine Website zuerst für mobile Geräte entwirfst und Prototypen erstellst, kannst du sicherstellen, dass deine Nutzer:innen sie auf jedem Gerät nahtlos nutzen können.“
Wenn du testen willst, ob deine Website für Mobilgeräte optimiert ist, bietet dir Google einen kostenlosen Test zur Bewertung deiner Webseite an: https://search.google.com/test/mobile-friendly
03. Eine Website mobile optimieren – Adaptiv vs. Responsiv
Um eine Website für mobile Geräte zu optimieren, nutzen Designer:innen zwei Hauptansätze: responsives und adaptives Webdesign.
Adaptives Webdesign (AWD): Verwendet feste Layouts und wählt die beste Option für die Bildschirmgröße der Nutzer:innen aus. Die Anpassungen beschränken sich dabei auf das, was die Webdesigner:innen (oder dein Homepage-Baukasten) erstellt haben. Adaptive Webdesigns passen in diese Standard-Bereiche: 320 px, 480 px, 760 px, 960 px, 1200 px und 1600 px.
Der Vorteil hierbei ist, dass das Design der mobile Website für jedes Gerät maßgeschneidert werden kann.
Responsive Webdesign (RWD): Eine Website wird automatisch ausgeblendet, verkleinert oder vergrößert, um die Darstellung auf jedem Gerät (Smartphone, Tablet oder Desktop) zu verbessern. Diese Designtechnik verwendet CSS-Medienabfragen (ein maßgeschneidertes Stylesheet), um die Geräteeigenschaften der Endbenutzer:innen zu untersuchen. Responsive Design passt dann das Erscheinungsbild einer Website fließend an die Größe an.
Der Vorteil hierbei ist das einheitliche Surferlebnis auf allen Plattformen sowie auf neuen Geräten, auch solchen mit nicht standardmäßigen Bildschirmabmessungen.
Wenn es darum geht, Webseiten mobil optimieren zu wollen, gibt es keinen wirklichen Sieger in Bezug auf responsive oder adaptive Technik. Wie du deine Website optimierst, hängt letztendlich von deinen Bedürfnissen, Wünschen und Ressourcen ab.
Wenn du deine Website mit wix.com erstellst, kannst du eine adaptive Version deiner mobilen Website für die am häufigsten verwendeten Geräte erstellen.
Entscheidest du dich für Webdesign-Plattformen wie Editor X, ist das mobile Design deiner Website dank CSS responsive.
04. So erstellst du deine mobile Website
Wenn du deine Website mit Wix erstellst, wird automatisch eine mobile Version deiner Website für dich angelegt. Mit dem Mobile-Editor kannst du das adaptive Design deiner Website vollständig anpassen, verändern und so optimieren, wie es dir gefällt.
So kannst du zum Beispiel den Hintergrund ändern, Textgrößen bearbeitet, Animationen hinzufügen sowie Elemente und Inhalte ausblenden, die nur auf dem Desktop benötigt werden und sie durch Elemente ersetzten, die nur für Mobilgeräte geeignet sind.
Um das Surferlebnis noch weiter zu verbessern, kannst du Elemente wie einen „Zurück nach oben“-Button und eine Schnellaktionsleiste hinzufügen. Alle Änderungen, die du für deine mobile Website vornimmst, wirken sich nicht auf die Desktop-Version deiner Website aus.
Hier sind unsere Vorschläge, mit denen du deine Website mobile optimieren kannst.
Desktop-Elemente ausblenden
Aufgrund des begrenzten Platzes auf mobilen Bildschirmen sollten nicht alle Text- und Bildinhalte deines Desktop-Designs ihren Weg in die mobile Version finden. Blende Seitenelemente aus, um alles zu entfernen, was nicht unbedingt notwendig ist.
Es gibt Elemente, auf die du auch auf deiner mobilen Website nicht verzichten willst. Dazu gehören zum Beispiel Online-Formulare wie das Kontaktformular, diese solltest du ebenso wenig ausblenden wie die “Über uns” Seite, auf der du dich und dein Team vorstellst.
Verkleinerung des Menü
Auch wenn deine Desktop-Website ein klassisches, längeres Navigationsmenü hat, solltest du dir überlegen, es für kleinere Geräte verkürzen.
Eine gute Möglichkeit ist die Verwendung eines Hamburger-Menüs. Dabei handelt es sich um ein Symbol, das aus drei horizontalen Linien besteht und sich beim Anklicken zu einem Menü öffnet. Eine weitere Idee ist eine Schnellaktionsleiste, die die wichtigsten Aktionen übersichtlich darstellt.
„Zurück nach oben“-Button
Erlaube den Besuchern deiner Website sofort zum Anfang deiner Seite zurückscrollen, indem du eine „Zurück nach oben“-Button verwendest, die du auch vollständig anpassen kannst.
Der Vorteil dieses Buttons wird insbesondere auf längeren Websites wie zum Beispiel einem Onepager deutlich.
CTAs
Ohne den Luxus einer Maus und einer Tastatur wird die mobile Navigation mit den Fingerspitzen ausgeführt. Deshalb muss die Navigation extrem auffällig und immer in Reichweite sein. Dein Call-to-Action und andere Schaltflächen sollten auffallen, leicht anzuklicken sein und strategisch platziert werden.
Seitenlayout-Optimierung
Auch wenn deine Website normalerweise mit einem atemberaubenden Video beginnt, ist dies ein Designelement, das auf der mobilen Website störend wirken kann. Daher bietet dir die Seitenlayout-Optimierung dir Möglichkeit, das Layout der mobilen Website zu aktualisieren, indem sie Elemente automatisch neu angeordnet, um das beste Layout für mobile Geräte zu erhalten.
Mobile Designfunktionen
Der Einsatz einzigartiger mobiler Designfunktionen kann deine mobile Website aufwerten und deinen Besuchern ein angenehmeres Erlebnis bieten.
Einige Ideen sind:
Ein gebrandeter Willkommensbildschirm, um Besucher:innen professionell zu begrüßen
Mobile Website-Animationen, um deine Seite zu beleben
Ein angepasstes mobiles Menü für ein rundum stimmiges Design
Du kannst auch schöne Galerie-Layouts, Scroll-Effekte und die Branded App by Wix nutzen, um dein mobiles Erlebnis für deine Nutzer:innen zu optimieren.
Mobile-Only-Elemente hinzufügen
Mit dem Mobile-Editor kannst du beliebig viele Elemente zu deiner Mobile-Ansicht hinzufügen. Diese Elemente sind für Mobilgeräte optimiert und lassen sich schnell laden. Dazu gehören zum Beispiel Buttons, Bilder und Texte.
6. 10 Beispiele für mobile Webseiten und was du von ihnen lernen kannst
1. Studio Bloom
Die mobile Website von Studio Bloom überzeugt durch ein frisches Design mit wundervoll aufeinander abgestimmten Farben. Das Menü wurde in der mobilen Version durch ein Hamburger-Menü auf der linken Seite ersetzt, welches ein großes, aber klar strukturiertes Menü öffnet. Der besondere Clou ist, dass das Hamburger-Menü nicht überdeckt wird, da das Auswahlmenü auf der anderen Seite erscheint. Dadurch hast du keine Probleme, auf der Website zu navigieren.
Beim herunter scrollen fallen gleich drei CTAs ins Auge, die wesentliche Informationen wie den Link zu ihrem Online-Shop oder die Versandkosten leicht erreichbar machen. Es schließen sich bildschirmfüllende Bilder von in liebevoller Handarbeit gestalteten Produkten an, bevor die mobile Ansicht mit übersichtlichen und leicht lesbaren CTA-Buttons und Formularen abschließt.
Studio Bloom ist ein hervorragendes Beispiel für die Anpassung einer mobilen Website, in der keine wichtigen Informationen fehlen, bei der aber dennoch Wert auf das Wesentliche gelegt wurde.
2. Charles Shirts
Der Shop für nachhaltige und faire Shirts entwickelt nicht nur minimalistisch gehaltene Designs, sondern setzt dies auch konsequent für seine Website um. Klare CTA’s, überdimensionale Boxen und eine "Zurück zum Anfang“-Schaltfläche beweisen eine hervorragende Umsetzung von mobilen Designfunktionen.
Der CTA im Header weist die Kund:innen gleich darauf hin, ab welchem Betrag eine Bestellung versandkostenfrei wird. Nach den Icons, die einen direkt zu den Konten in den sozialen Medien leiten, folgt ein Slider, der in kurzen Abständen die Produkte von Charles Shirts zeigt und auch auf der mobile Website einwandfrei läuft. Es schließt sich gleich ein übersichtlicher Bereich mit den „Beliebtesten Produkten“ an, der mit einem großen „Shop All“ CTA abschließt und zum Stöbern einlädt.
Im großzügigen Footer wurden übersichtlich alle Links zu Unterseiten platziert. Neben den gesetzlich vorgeschriebenen Angaben findet man hier zusätzlich Links zu Größentabellen und Größenguides.
3. Mon Coeur
Die mobile Website der Seite Mon Coeur schafft es, eine Vielzahl von Informationen klar zu strukturieren. Auf der Hauptseite des eingetragenen Vereins wechseln sich Fotos, CTA’s und informative Texte ab, ohne dass Betrachter:innen das Gefühl haben, den Überblick zu verlieren.
Gut gelöst ist das große Menü, welches nach einem Klick auf das Hamburger-Menü mit einer Vielzahl an Unterseiten in der Mitte des Bildschirms erscheint und so den gesamten Platz optimal nutzt. Durch einen Klick auf das oben in der Mitte platzierte Logo gelangst du immer wieder zurück zur Startseite, auf der du neben dem Menü auch direkt den Warenkorb und eine Option zur Änderung der Sprache findest.
Besonders sticht der CTA-Button „Spenden“ am Ende der Startseite hervor, der sich nicht nur farblich, sondern auch durch eine dickere Schriftart von den anderen Schaltflächen abhebt und dadurch zeigt, dass hier etwas wichtiges passiert. Nämlich „Jetzt spenden und mithelfen“, um einen Beitrag zu einer nachhaltigen Entwicklung in Afrika zu leisten.
4. Life is better with Buttercream
Die mobile Website von Life is better with Buttercream zeigt auf den ersten Blick, wie mobile Designfunktionen direkt im Header untergebracht wurden, um den Nutzer:innen eine besonders positive Benutzererfahrung zu bieten.
Neben dem in der Mitte platzierten Logo lassen sich Links zu Social Media, der Warenkorb und ein Hamburger-Menü finden. Besonders nützlich ist auch ein Mobile-Only-Element, ein Kreis mit drei Punkten, der in der rechten unteren Ecke platziert ist und beim Scrollen auf der gleichen Stelle bleibt. Nach einem Klick findest du hier zusätzlich die Möglichkeit, mit dem Unternehmen per Mail in Kontakt zu treten oder dir die herzlichen Leckereien auf Instagram anzuschauen.
Die kontrastreiche Startseite ist mit großzügigen CTA-Boxen und Karusell-Bannern versehen. Aber Vorsicht! Hier findest du auch eine Vielzahl an Fotos von Cupcakes und Kuchen und dein Finger geht schon fast automatisch auf das Hamburger-Menü, um kurz danach auf Shop zu klicken, um dir ein paar Leckereien in den Warenkorb zu packen.
5. Puffin Packaging
Das umweltfreundliche Verpackungsunternehmen Puffin Packaging hat eine klare Mission: Isolierverpackungen sollen effizient, erschwinglich und vor allem nachhaltig sein. Sowohl die Desktop- als auch die mobile Website von Puffin Packaging sind in Bezug auf Tonalität, Botschaft und visuelle Identität auf den Punkt gebracht. Es ist klar, was sie anbieten und was sie dir mit ihrem Service vermitteln wollen.
Der Haupt-CTA in der ersten Spalte führt die Nutzer:innen dazu, auf „Wie funktioniert es“ zu klicken. Dort wird erklärt, was zu tun ist und wie man es tut, bevor die Besucher:innen weitergehen können. Der zweite CTA ist ein Kontakt-Button, ein bewusster und umsetzbarer Schritt für die Nutzer:innen.
Strategisch gesehen platziert Puffin Packaging seine Kontaktinformationen nicht am unteren Rand der Seite. Stattdessen hat das Unternehmen die Hierarchie seiner Website geändert, um sie zielgerichteter und direkter zu gestalten.
Ihre inhaltsreiche mobile Website ist informativ und erklärt ihre umweltfreundlichen Markenwerte mit aussagekräftigen Bildern, die ihre Botschaft unterstützen. Sie verwenden eine Vielzahl von Beispielen und stellen ihre Produkte und ihre Markenpersönlichkeit bei jedem Klick genau vor.
6. In Print Art Book Fair
Wenn es um die Gestaltung mobiler Websites geht, ist der Platz begrenzt. Da die Nutzer:innen deine Website in einem viel kleineren Maßstab betrachten, musst du strategisch vorgehen, was du im ersten Teil der Seite präsentierst.
Die mobile Website der In Print Art Book Fair zieht die Besucher sofort mit einem Video in ihren Bann, das auf die Kunstveranstaltung hinweist. Das Video gibt nicht nur den Ton an, indem es die Atmosphäre der Messe zeigt, sondern es lässt die Besucher:innen auch schnell wissen, worum es bei der Veranstaltung geht.
Durch die Einbindung des Videos erhalten die Betrachter:innen einen Eindruck von der Kunstbuchmesse in Jerusalem und müssen nicht erst lange scrollen oder recherchieren, um zu verstehen, worum es geht.
Sobald die Nutzer:innen ein Gefühl dafür bekommen haben, gibt es einen klaren CTA - „Submit Your Application” – der einfach und direkt ist. Das Datum der Veranstaltung und der Abgabetermin für die Anmeldungen sind klar und deutlich und außerdem in mehreren Sprachen angegeben, um die Inhalte der mobilen Website zu lokalisieren und für alle Besucher zugänglich zu machen.
Die In Print Art Book Fair nutzt auch sorgfältig die Abstände, um die Social-Media-Leiste, die FAQ und den Kontaktbereich hervorzuheben und sorgt so für ein einfaches und effizientes Nutzererlebnis.
7. Sharon Radisch
Die in New York und Paris lebende Fotografin, Art-Direktorin und Künstlerin Sharon Radisch bricht mit allen Konventionen für das Design mobiler Websites – aber auf eine strategische und stilvolle Weise.
Radisch hat die Navigation ihrer Website in die Mitte verlegt, mit einem zentralen Menü, das den Blick der Besucher:innen direkt auf die Bilder lenkt. Ihre leichte Anpassung der Hierarchie ist klug und stört das Nutzererlebnis nicht, sondern verbessert es sogar.
Radisch verwendet eine elegante, unaufdringliche Komposition, die das Beste aus ihrer Kollektion hervorhebt und die Bilder für sich selbst sprechen lässt. Sie schafft eine gedämpfte Ästhetik, indem sie schwarze und weiße Motive mit neutralen Tönen kombiniert. Mit minimalem Text hat sie einen intelligenten und lustigen Weg gefunden, ihre Arbeit zu präsentieren und ihr den Respekt zu geben, den sie verdient.
8. Yang’s Place
Diese Website für ein chinesisches Restaurant ist mit einem auffälligen Logo im oberen Bereich ausgestattet, das auch zur Startseite zurückführt, wenn es angeklickt wird. Die Verlinkung deines Logos mit der Startseite ist eine wichtige Praxis für die Website-Navigation. Diese Funktion ist auf mobilen Geräten sogar noch wichtiger, da sie die Nutzererfahrung drastisch verbessern kann.
Dieses familiengeführte Restaurant bietet sehr fotogene Gerichte mit handgemachten Knödeln, gepaart mit feiner handgezeichneter Vektorgrafik. Durch die Liebe zum Detail vermittelt Yang's Place eine boutiqueähnliche Qualität. Die Schaltflächen „Menü“ und „Online bestellen“ führen die Besucher direkt zum Herzstück von Yang's Place - dem Essen. Uns läuft schon beim Anblick der Gerichte das Wasser im Mund zusammen.
9. Sophie Brittain
Die Grafikdesignerin Sophie Brittain begrüßt die Besucher:innen ihrer Website mit einem ebenso verspielten wie minimalistischen Top-Fold. Vor einem weißen Hintergrund und mit sehr wenig Bildmaterial nimmt ein prägnanter Einleitungssatz den größten Teil des Platzes ein.
Sophies einzigartiger Einsatz von Mikrotexten zeigt sich auch in der Fußzeile der Website, wo sie clevere Formulierungen anstelle von Symbolen für ihre Social-Media-Links wählt. Ihren Instagram-Account bezeichnet sie als „Ich, die fotografiert“, und ihre E-Mail wird unter „Du, der Fanpost schreibt“ angezeigt.
10. Atelier / Blanc
Das mobile Webdesign des Hochzeitsplaners und Stylisten Romain Deligny von Atelier / Blanc ist voll von erdigen Tönen, exquisiten Schriftarten und makellosen Fotos. Während das Navigationsmenü der Desktop-Version dieser Website eine klassische horizontale Liste am oberen Rand der Seite ist, wird diese Funktion auf dem Handy in einem viel kleineren Hamburger-Menü zusammengefasst. Wenn du es anklickst, öffnet sich ein Vollbildmenü, das auf kleinen Geräten leichter zu lesen und anzuklicken ist.
Ein Karussell-Banner im oberen Bereich der mobilen Website zeigt himmlische Schnappschüsse von Hochzeiten und vermittelt ein luxuriöses Gefühl, das den Stil und die Marke von Deligny unterstreicht.
Mobile Website erstellen – Fazit
Wir hoffen, dass du in diesem Artikel Inspirationen und Tipps erhalten hast, wie du deine Website mobile optimieren kannst.
Vergiss nicht, dass Gestaltung eines großartigen mobile Surferlebnisses ist ein wichtiger Schritt, wenn du eine eigene Website erstellen möchtest. Daher solltest du dir gut überlegen, welche Elemente du für deine mobile Website übernimmst und wie du das Layout aufbaust.
Alexandra Eger
Content-Managerin
