Mobilfreundliche Website für Ihr Unternehmen erstellen

Die meisten Menschen, die Ihr Unternehmen finden, halten dabei ein Smartphone in der Hand. Sie stehen in der Einfahrt vor einem lecken Warmwasserboiler, sitzen im Auto vor einem Mitbewerber oder liegen abends um 21 Uhr auf dem Sofa und entscheiden, wen sie morgen früh anrufen. Wenn Ihre Website auf einem kleinen Bildschirm schwer zu lesen, langsam beim Laden oder mühsam zu bedienen ist, gehen sie weg und rufen den nächsten Namen auf der Liste an. Eine mobilfreundliche Website zu erstellen ist keine technische Nettigkeit mehr. Es ist der Unterschied zwischen dem Anruf und dem Verlust davon.

Die gute Nachricht: Sie müssen kein Entwickler sein, und Sie müssen keine separate "Mobile-Website" erstellen. Dieser Leitfaden erklärt, was mobilfreundlich wirklich bedeutet, welche spezifischen Dinge auf Smartphones brechen und wie Sie sie an einem Nachmittag beheben können.

Was "mobilfreundlich" wirklich bedeutet

Eine mobilfreundliche Website ist nicht einfach eine verkleinerte Version Ihrer Desktop-Website. Es ist eine Website, die so gestaltet wurde, dass eine Person mit einem Daumen, auf einem mittleren Smartphone, bei einer schwankenden Mobilverbindung, das Nötige in Sekunden finden und darauf reagieren kann.

Das läuft auf vier Dinge hinaus:

Sie passt auf den Bildschirm. Kein horizontales Scrollen, kein Einzwicken und Zoomen, kein Text, der über den Rand hinausgeht.
Sie ist schnell. Sie lädt nützliche Inhalte in ein paar Sekunden, nicht zehn.
Sie ist leicht antippbar. Schaltflächen und Links sind groß genug für einen Daumen und haben genug Abstand.
Sie ist leicht zu handeln. Die Telefonnummer, die Buchungsschaltfläche und die Adresse sind das Erste, was ein Besucher sieht, nicht das Letzte.

Google verwendet seit Jahren Mobile-First-Indexierung, was bedeutet, dass es sich die mobile Version Ihrer Website ansieht, um zu entscheiden, wie Sie ranken - auch für Personen, die auf einem Computer suchen. Eine schwache mobile Erfahrung senkt still Ihre Sichtbarkeit überall.

Beginnen Sie mit responsivem Design, nicht einer separaten Mobile-Website

Früher bauten Unternehmen eine zweite Website nur für Smartphones, meist auf einer URL wie m.ihrunternehmen.de. Tun Sie das nicht. Es ist doppelte Arbeit, teilt Ihr SEO und veraltet immer.

Der moderne Ansatz ist responsives Design: eine Website, die sich anpasst, um auf jedem Bildschirm zu passen. Die Spalten stapeln sich, die Bilder schrumpfen, das Menü klappt zusammen. Fast jeder moderne Website-Baukasten und jede Vorlage ist standardmäßig responsiv. Wenn Sie ein Design oder eine Vorlage wählen, sollte "responsiv" oder "mobilbereit" das erste Kästchen sein, das Sie prüfen.

Ein technisches Detail zum Bestätigen: Die Seite benötigt eine Viewport-Einstellung, die dem Smartphone mitteilt, mit Gerätebreite zu rendern statt vorzugeben, ein Desktop zu sein. Jede anständige Vorlage enthält das bereits, aber wenn Ihr Text auf einem Smartphone winzig erscheint, ist eine fehlende Viewport-Einstellung der übliche Schuldige.

Für den Daumen entwerfen, nicht für die Maus

Ein Mauszeiger ist ein einzelnes Pixel. Ein Daumen ist näher an einem Zentimeter breit und deutlich weniger präzise. Diese eine Tatsache treibt die meisten mobilen Designentscheidungen an.

Tippen-Ziele groß machen. Schaltflächen und Links sollten mindestens etwa 44 mal 44 Pixel sein - ungefähr der Daumenballen. Apple und Google empfehlen beide diesen Bereich in ihren Design-Richtlinien.
Dinge auseinanderhalten. Zwei Links, die einen Pixel auseinander gestapelt sind, garantieren falsche Taps. Geben Sie klickbaren Elementen Luft zum Atmen.
Das Wichtige in die Daumenzone legen. Ihre primäre Aktion - meist "anrufen" oder "buchen" - gehört dorthin, wo ein Daumen natürlich ruht, nicht in eine obere Ecke gesteckt.
Ein Hamburger-Menü verwenden. Das Drei-Linien-Symbol, das Ihre Navigation öffnet, ist aus gutem Grund Standard: Es versteckt ein langes Menü hinter einem Tap und hält den Bildschirm sauber.

Text lesbar machen ohne Zoomen

Wenn ein Besucher einzwicken muss, um Ihre Öffnungszeiten zu lesen, haben Sie ihn verloren. Auf Smartphones:

Halten Sie Fließtext bei mindestens 16 Pixeln. Kleiner sieht auf Ihrem Laptop in Ordnung aus und ist auf einem Smartphone im Sonnenlicht unlesbar.
Verwenden Sie hohen Kontrast. Dunkler Text auf hellem Hintergrund schlägt hellgrau auf weiß jedes Mal, besonders im Freien.
Halten Sie Absätze kurz. Zwei oder drei Zeilen. Eine Textwand, die auf dem Desktop in Ordnung ist, wird auf einem Smartphone zu einem einschüchternden Scroll.
Verwenden Sie klare Überschriften, damit ein scrollender Besucher direkt zu "Leistungen" oder "Kontakt" springen kann.

Vermeiden Sie dekorative Skriptschriften für alles, was eine Person schnell lesen muss.

Ladegeschwindigkeit ist die Funktion, die Kunden zuerst fühlen

Hier scheitern die meisten lokalen Unternehmenswebsites still. Laut branchenübergreifend zitierten Zahlen verlassen mehr als die Hälfte der mobilen Besucher eine Seite, die länger als 3 Sekunden braucht. Auf einem Smartphone, mit mobilen Daten, gehen drei Sekunden schnell vorbei.

Der größte Übeltäter sind fast immer Bilder. Ein Foto direkt von einer Smartphone-Kamera kann 5 Megabyte sein. Beim Beheben:

Bilder auf die tatsächlich angezeigte Größe anpassen. Ein Foto, das 800 Pixel breit angezeigt wird, muss nicht 4000 Pixel breit sein.
Komprimieren und moderne Formate verwenden. WebP-Dateien sind dramatisch kleiner als alte JPEGs ohne sichtbaren Qualitätsverlust. Viele Baukästen konvertieren automatisch. Wenn Ihres das nicht tut, erledigt ein kostenloses Tool wie TinyPNG es in Sekunden.
Lazy Loading aktivieren, damit Bilder unterhalb des Sichtbereichs nur laden, wenn jemand zu ihnen scrollt.
Den Ballast kürzen. Auto-abspielende Videos, schwere Slider, Chat-Widgets und Tracking-Skripte fügen alle Gewicht hinzu.

Eine langsame Website nervt nicht nur. Sie kostet Ihnen gleichzeitig Rankings und Anrufe - das ist die schlimmste Art von Problem: unsichtbar und teuer.

Die mobilen Funktionen, die lokale Unternehmen wirklich brauchen

Allgemeiner Mobile-Ratschlag hört bei "Machen Sie Schaltflächen größer" auf. Für einen Handwerksbetrieb oder ein lokales Unternehmen ist der ganze Punkt des mobilen Besuchs, einen Kunden dazu zu bringen, Sie sofort zu kontaktieren.

Klick-zum-Anruf-Telefonnummer. Auf einem Smartphone sollte Ihre Nummer ein antippbarer Link sein, der mit einem Touch einen Anruf startet. Das ist das Einzelne mit dem höchsten Wert auf einer Handwerksbetrieb-Website.
Eine fixierte Anruf- oder Buchungsschaltfläche. Eine kleine Leiste am unteren Rand des Bildschirms, die dem Besucher folgt, während er scrollt, mit "Jetzt anrufen" oder "Angebot anfragen".
Adresse zum Antippen für Karte. Ihre Adresse sollte die Karten-App des Smartphones mit Wegbeschreibungen in einem Tap öffnen.
Kurze Formulare mit dem richtigen Keyboard. Verwenden Sie die korrekten Eingabetypen, damit das Smartphone bei Telefonnummernfeldern ein Ziffernpad und bei E-Mail-Feldern eine E-Mail-Tastatur zeigt.
Öffnungszeiten und Servicegebiet oben. "Sind Sie geöffnet" und "kommen Sie in meine Stadt" sind die zwei Fragen, die ein mobiler Besucher stellt.

Auf einem echten Smartphone testen, nicht nur auf dem Desktop

Entwickler testen auf einem großen Monitor mit schnellem Internet und fragen sich dann, warum echte Kunden Schwierigkeiten haben. Testen Sie so, wie Ihre Kunden tatsächlich surfen.

Google-Tools nutzen. Google hat seinen eigenständigen Mobiltauglichkeitstest zurückgezogen, aber PageSpeed Insights gibt Ihnen jetzt sowohl einen mobilen Performance-Score als auch konkrete Verbesserungen.
Ihr eigenes Smartphone nutzen, und ein altes. Öffnen Sie die Website auf Ihrem persönlichen Smartphone. Leihen Sie sich dann ein günstigeres oder älteres Android. Wenn es dort funktioniert, funktioniert es für alle.
Ihre Verbindung drosseln. In den Entwickler-Tools Ihres Browsers können Sie ein langsames mobiles Netz simulieren.
Den Ein-Daumen-Test machen. Halten Sie das Telefon in einer Hand und versuchen Sie, einen Auftrag zu buchen oder Ihre Öffnungszeiten mit nur Ihrem Daumen zu finden. Wenn Sie das nicht können, kann es Ihr Kunde auch nicht.

Testen Sie sowohl iOS als auch Android, da sie leicht unterschiedlich rendern, und testen Sie erneut, wenn Sie etwas Schweres hinzufügen.

Die Abkürzung: mit einer standardmäßig responsiven Website beginnen

Alles oben Genannte ist von Hand machbar. Es ist auch viele Nachmittage, wenn Sie auch ein Unternehmen führen und das Telefon beantworten.

Das ist die Lücke, die Saynovo für Handwerksbetriebe und lokale Inhaber schließen soll. Die Website, die es generiert, ist von dem allerersten Entwurf an responsiv: Sie passt bereits auf den Smartphone-Bildschirm, die Tippen-Ziele sind für Daumen bemessen, die Bilder kommen komprimiert heraus und der Klick-zum-Anruf ist verkabelt - keine mobilen Einstellungen zum Umschalten und keine separate mobile Version zum Synchronhalten. Wenn Sie eine Änderung möchten, sagen Sie, was Sie möchten, und die Website aktualisiert sich und bleibt dabei mobilfreundlich.

Eine kurze Checkliste, um Ihre Website mobilfreundlich zu machen

Ob Sie es selbst erstellen oder ein Tool verwenden - das Erstellen einer mobilfreundlichen Website läuft auf eine Handvoll Prüfungen hinaus, die Sie heute durchführen können:

Eine responsive Website, keine separate Mobile-URL.
Text mindestens 16 Pixel, hoher Kontrast, kurze Absätze.
Schaltflächen mindestens 44 Pixel, gut beabstandet, in der Daumenzone.
Bilder angepasst, komprimiert und lazy-geladen, damit die Seite in unter 3 Sekunden lädt.
Eine antippbare Telefonnummer, eine fixierte Anruf- oder Buchungsschaltfläche und eine antippbare Adresse für die Karte.
Kurze Formulare mit den korrekten mobilen Tastaturen.
Getestet auf einem echten, älteren Smartphone und bewertet in PageSpeed Insights.

Machen Sie das richtig und Ihre Website hört auf, den Smartphone-Traffic zu verlieren, den Sie bereits hart erarbeitet haben. Auf Smartphones gewinnt das Unternehmen, das am einfachsten zu kontaktieren ist - und das sind jetzt Sie.