Mobile Homepage erstellen (mit Wix)

Das Smartphone verändert die Welt und auch die Gewohnheit, eine Seite zu betrachten. Eine der Prioritäten, die Sie im Voraus bedenken müssen, besteht darin, Ihre Website mobilfreundlich zu gestalten, um eine schnellere Ladezeit zu gewährleisten und Ihren Nutzern ein optimales mobiles Erlebnis zu bieten, indem Sie die Größe der Schrift und der Bilder für eine optimale Darstellung automatisch anpassen.

Ist Wix responsiv?

Die kurze Antwort lautet: Nein ….. Aber die gute Nachricht ist, dass Sie Ihre Wix-Website vollständig responsive machen können. Außerdem können Sie die Funktionalität Ihrer mobilen Website in Wix auf eine viel bessere Weise verbessern als bei vollständig responsiven Website-Design-Plattformen.

Responsive Webdesign, auch mobilfreundliches Design oder Mobile First Design genannt, ist für Ihre Website von entscheidender Bedeutung!

• Damit Ihre Website in der mobilen Ansicht gut aussieht, müssen Sie oft:
• Klicken und ziehen Sie Ihre Elemente, um sie neu anzuordnen.
• Ändern Sie Schriftgrößen, Schriftfarben und Textausrichtungen.
• Seitenhintergründe ändern.

Ändern Sie, welche Seiten im mobilen Menü ein- oder ausgeblendet werden sollen.

Überprüfen Sie Ihre ausgeblendeten Elemente. Wenn Ihre mobile Ansicht erstellt wird, werden einige Elemente automatisch ausgeblendet, um sie mobilfreundlicher zu machen.

Blenden Sie Elemente aus, die für die mobile Ansicht nicht erforderlich sind, z. B. Schaltflächen, soziale Symbole usw.

Entfernen Sie Lücken, indem Sie auf Leerzeichen löschen klicken.

Verwenden Sie die Mobile Tools.

Wix Mobiler Editor

Wix bietet einen leistungsstarken Mobile Editor, mit dem Sie eine individuelle mobile Version Ihrer Website erstellen können. Er erstellt automatisch eine mobilfreundliche Version Ihrer Website für Sie. Von Ihrem Desktop aus können Sie Ihre mobile Website mit dem mobilen Editor bearbeiten.

Mit einem einfachen Klick verwandelt sich der Editor in Sekundenschnelle in einen mobilen Emulator. Sie können die meisten Elemente per Drag & Drop verschieben und die Größe für eine bessere Ansicht anpassen.

Bitte beachten Sie, dass es sich bei der Desktop- und der mobilen Version Ihrer Website um unterschiedliche Darstellungsformen derselben Website handelt; es handelt sich nicht um getrennte Websites. Änderungen an Ihrer Desktop-Site wirken sich auf Ihre mobilfreundliche Ansicht aus, während Änderungen an Ihrer mobilen Site keine Auswirkungen auf Ihre Desktop-Ansicht haben. Im mobilen Editor von WIX können Sie das Element nur ausblenden, nicht aber löschen.

Für eine klarere, frischere und reaktionsfreudigere Ansicht Ihrer mobilen Website müssen Sie Flashs, Gifs oder andere Faktoren, die die Geschwindigkeit verlangsamen, so weit wie möglich entfernen und komprimieren. Und vergessen Sie nicht, die kleineren Schaltflächen in der richtigen Größe einzustellen, so dass jeder sie mit jedem Gerät und jeder Bildschirmgröße leicht erreichen kann.

Menü-Schaltfläche

Sie sollten Ihren Besuchern deutlich machen, wo und wie sie das Menü sehen können. Im Allgemeinen suchen die meisten Besucher das Menü entweder in der oberen rechten oder linken Ecke. Auf manchen Websites befindet sich das Menü in der Mitte der Seite, was akzeptabel ist, solange es intuitiv und leicht zu finden ist.

Ein lehrreicher Moment hier: Diese Art von Menü wird in der Regel als Hamburger-Menü bezeichnet, da die meisten Menüs wie das unten abgebildete aussehen:

Da wir gerade über die allgemeinen Regeln für Menüschaltflächen sprechen, sollten wir auch die besten Praktiken für ein Dropdown-Navigationsmenü besprechen. Wir empfehlen, den Text etwas größer als die Desktopgröße zu machen. Es ist für die Benutzer einfacher, den gewünschten Menüpunkt auszuwählen, als eine Million Mal auf einen zu klicken, den sie nicht wollen.

Hier sehen Sie, was Sie in Wix tun können:

Ändern Sie Farbe, Ausrichtung und Schriftgröße der Menüpunkte.

Wählen Sie, ob das Menü auf der rechten oder linken Seite des Bildschirms erscheinen soll. Sie können es sogar so einstellen, dass es den gesamten Bildschirm eines Telefons ausfüllt.

Erstellen Sie ein individuelles Menü mit verschiedenen Symbolen oder Farben und fügen Sie sogar Animationen hinzu!

Anklickbare Links und Schaltflächen

Bevor Sie mit der Erstellung Ihrer mobilen Website beginnen, sollten Sie einen kurzen Check Ihres Desktops durchführen und sicherstellen, dass alle Links funktionieren. Selbst wenn Sie sich sicher sind, dass sie funktionieren, sollten Sie sie noch einmal überprüfen.

Links

Alle externen Desktop-Links oder Links, die Benutzer auf andere Seiten weiterleiten, funktionieren auch auf Ihrer mobilen Website. Es ist nicht nötig, irgendetwas neu zu verlinken.

Wir empfehlen, die Schriftgröße für Links größer zu wählen, damit sie von den Benutzern leichter ausgewählt werden können. Wir werden gleich noch mehr über größere Schriftgrößen sprechen.

Telefonnummern

Mit dem Wix-Editor können Sie Telefonnummern verlinken, so dass sie sowohl von der mobilen als auch von der dekstop-Website aus erreichbar sind. So können Benutzer die Nummer anrufen, indem sie einfach darauf klicken.

Das Einrichten ist wirklich einfach:

1. Markieren Sie die Telefonnummer, die Sie verlinken möchten.
2. Kopieren Sie die Rufnummer.
3. Wählen Sie die Schaltfläche ‚Verkettung‘.
4. Klicken Sie auf die Schaltfläche ‚Rufnummer‘.
5. Fügen Sie den Text ein und wählen Sie „Fertig“.
6. Das war’s schon! Ganz einfach, oder?

Buttons

Schließlich empfehlen wir, die Schaltflächen für Mobilgeräte größer zu machen. Die Größe kann im Wix Mobile Editor leicht angepasst werden. Sie müssen nicht riesig sein, aber Sie möchten, dass sie leicht zu finden und anklickbar sind.

Verwenden Sie eine größere Schriftart

Der Versuch, auf einem kleinen Handybildschirm etwas anzuklicken oder zu lesen, kann schwierig sein, daher wird empfohlen, den Text etwas zu vergrößern.

Für Desktop-Websites beträgt die kleinste empfohlene Textgröße 16 px. Auf Mobiltelefonen sollte der Text jedoch zwischen 17 px und 20 px liegen, je nachdem, welche Schriftart Sie verwenden.

Mit dem Wix Mobile Editor können Sie auch die Ausrichtung des Textes ändern, was Sie beim Ändern der Schriftgröße in Betracht ziehen sollten. Sie sollten bei der Gestaltung mit dem Text herumspielen, denn was auf einer Desktop-Website gut aussieht, sieht auf einer mobilen Website vielleicht nicht so gut aus.

Eine weitere Regel, die Sie befolgen sollten, ist, die Änderungen, die Sie vorgenommen haben, auf Ihrem eigenen Telefon zu testen. Text, der im Mobile Editor groß genug aussah, kann für mobile Websites zu klein sein.

Verzichten Sie auf Pop-Ups oder Lightboxes

Ich empfehle keine Pop-Ups (Wix nennt sie Lightboxes) auf Ihrer mobilen Website. Oft sind sie unglaublich frustrierend für die Benutzer und führen zu erheblichen Navigationsproblemen.

Wenn Sie sich dennoch für Lightboxes entscheiden, sollten Sie ein paar Regeln beachten:

• Passen Sie die Größe des Lightbox-Fensters über den Wix Mobile Editor an. Es sollte nicht größer sein als der Bildschirm eines Telefons.
• Machen Sie es den Nutzern sehr einfach, das Fenster zu schließen. Das ist unglaublich wichtig, denn Benutzer können verärgert oder frustriert sein, wenn sie ein Popup-Fenster nicht schließen können, ohne hineinzuzoomen oder mehrmals auf die Schaltfläche zu klicken. Stellen Sie sicher, dass Sie dies von einem mobilen Gerät aus testen.

Gehen Sie sparsam mit Elementen um

Eine der nützlichsten Funktionen im Wix Mobile Editor ist, dass Sie Dinge ausblenden können.

Es mag zwar zunächst seltsam klingen, Dinge auszublenden, aber bedenken Sie Folgendes. Eine Desktop-Website, die sehr inhaltslastig ist, sollte eine mobile Website haben, die wenig Inhalt hat. Die meisten mobilen Benutzer recherchieren nicht in die Tiefe oder lesen ganze Websites durch. Sie wollen so schnell wie möglich genaue Informationen finden.

Hier sind ein paar Dinge, die Sie ausblenden können:

• Wiederholte Call-to-Action-Schaltflächen oder Streifen
• Logos, die auf Ihrer Website platziert sind, z. B. in der Fußzeile, oder einige Abzeichen oder Zertifikate.
• Schaltflächen oder Menüoptionen in der Fußzeile.
• Elemente oder Elemente, die nicht mobilfreundlich sind, wie Bilder, Linien, Formen usw.

Dies sind nur Beispiele. Es gibt viele weitere Dinge, die Sie ausblenden können, um die Menge der Inhalte auf Ihrer mobilen Website zu verringern.