Sie haben beschlossen, eine Website erstellen zu lassen. Ein paar Tage später schickt der Designer einen Entwurf: eine große, elegante Computerseite. Er gefällt Ihnen, Sie geben Ihre Freigabe. Die Seite geht online, Sie öffnen sie auf dem Handy, und von der Eleganz ist nichts mehr übrig. Der Text ist gequetscht, wichtige Schaltflächen stehen weit unten, und die Telefonnummer ist nirgends zu finden.
Das ist einer der Fehler, die mir am häufigsten begegnen. Die Gestaltung wurde für den Computer gedacht, die Handyversion nachträglich „hineingequetscht“. Ihre Kunden schauen aber sehr wahrscheinlich mit dem Handy auf Ihre Seite. Die Reihenfolge sollte umgekehrt sein.
Was bedeutet Mobile-First-Design?
Mobile-First-Design heißt, dass der Designer mit dem kleinsten Bildschirm beginnt. Die erste Frage lautet: „Was ist für jemanden am Handy, mit einer Hand und in Eile, das Wichtigste?“ Die Seite wird um diese Antwort herum aufgebaut. Erst danach wird dieselbe Seite auf den breiten Computerbildschirm erweitert.
Stellen Sie sich ein Schaufenster vor. Ist es klein, müssen Sie entscheiden, welches Produkt Sie zeigen, und wählen das wichtigste. Wird das Fenster größer, können Sie mehr ergänzen. Beginnen Sie aber mit einem riesigen Fenster und wollen dann alles in ein kleines pressen, geht verloren, was wichtig ist.
Was ändert sich, wenn die meisten Besucher per Handy kommen?
Wer per Handy auf eine Seite kommt, hat es meist eilig. Er hat einen Finger, einen kleinen Bildschirm und eine zerstreute Aufmerksamkeit. Was er sucht, ist meist einfach: eine Telefonnummer, eine Adresse, Öffnungszeiten, einen Preis oder einen Termin.
Ein Design, das am Handy beginnt, bringt Ihnen:
- Wichtige Informationen zuerst. Was Sie tun, wo Sie sind und wie man Sie erreicht, steht auf dem ersten Bildschirm.
- Weniger Schmuck. Auf dem Handy ist wenig Platz, also muss sich jedes Element seinen Platz verdienen. Das vereinfacht auch die Computeransicht.
- Eine Hauptaktion tritt hervor. Zum Beispiel „Anrufen“, „Termin buchen“ oder „Route planen“. Der Besucher muss nicht überlegen, was er tun soll.
- Eine leichtere Seite. Weil zu große Bilder und schwere Elemente gar nicht erst eingebaut werden, öffnet sich die Seite auf dem Handy schneller.
Nichts davon bedeutet, dass Ihre Seite am Computer schlecht aussieht. Im Gegenteil: Eine gut aufgebaute Struktur funktioniert auf beiden Bildschirmen.
Was sollten Sie Ihren Designer fragen?
Klären Sie im ersten Gespräch mit der Person, die Ihre Seite baut, Folgendes:
- „Zeigen Sie mir den Entwurf auch in der Handyansicht?“ Geben Sie keinen reinen Computerentwurf frei.
- „Was steht auf dem ersten Bildschirm am Handy?“ Die Antwort sollte Ihren Betrieb widerspiegeln: wer Sie sind, was Sie tun und wie man Sie erreicht.
- „Sind meine Telefonnummer und mein Buchungsbutton immer in Reichweite?“
- „Testen Sie das Design auf einem echten Handy?“ Ein verkleinertes Browserfenster am Computer ist nicht dasselbe wie ein echtes Handy.
- „Kann ich die Testseite vor dem Livegang auf meinem eigenen Handy öffnen?“
Diese Fragen stören keinen Designer. Ein guter Designer erklärt sie ohnehin von selbst.
Worauf sollten Sie bei der Abnahme achten?
Wenn Sie den Entwurf oder die Testseite sehen, hilft Ihnen diese Tabelle:
| Worauf achten | So sollte es aussehen |
|---|---|
| Erster Bildschirm | Sofort klar, was Sie tun und wie man Sie erreicht |
| Hauptaktion | Anrufen-, Buchen- oder Nachricht-Button ist auffällig |
| Text | Kurze Absätze, große, gut lesbare Schrift |
| Bilder | An der richtigen Stelle, ohne die Seite zu beschweren |
| Menü | Wenige, verständliche Überschriften |
| Echte Inhalte | Ihre echten Texte und Fotos statt Mustertext |
Die letzte Zeile ist am wichtigsten. Mit Mustertext sieht ein Design gut aus; kommt aber Ihr echter, langer Leistungsname oder Ihre Adresse, kann das Layout brechen. Bitten Sie darum, vor der Freigabe die echten Inhalte zu sehen.
Die häufigsten Gestaltungsfehler am Handy
Diese Fehler habe ich über die Jahre gesehen. Bei der Abnahme reicht es, darauf zu achten:
- Alles auf den ersten Bildschirm packen. Der Platz am Handy ist begrenzt; erscheinen fünf Botschaften gleichzeitig, wird keine gelesen.
- Eine sehr lange Seite in falscher Reihenfolge. Wenn ein Besucher zuerst durch Ihre Firmengeschichte scrollt und Ihre Telefonnummer erst ganz am Ende findet, gibt er womöglich auf.
- Elemente nur für den Computer. Menüs, die sich beim Darüberfahren mit der Maus öffnen, oder winzige Links funktionieren am Handy nicht, denn ein Handy hat keine Maus.
- Nur am Computer testen. Ein verkleinertes Fenster am Computer ersetzt kein echtes Handy.
Nehmen Sie als Beispiel die Website einer Kanzlei. Ein Mandant schaut am Handy und sieht auf dem ersten Bildschirm die Kanzlei, ihr Fachgebiet und einen „Anrufen“-Button. Das genügt. Firmengeschichte, Teamfotos und Beiträge stehen weiter unten für die, die sich dafür interessieren. Beginnt die Gestaltung am Handy, ergibt sich diese Rangfolge von selbst.
Was Sie prüfen können und was die Fachperson erledigt
Was Sie prüfen können:
- Öffnen Sie den Entwurf zuerst auf Ihrem Handy, dann am Computer.
- Versetzen Sie sich in den Besucher: „Versteht jemand, der zum ersten Mal auf diese Seite kommt, was er tun soll?“
- Zeigen Sie es einem Freund oder Mitarbeiter am Handy und fragen Sie, was er sucht.
Was die Fachperson erledigt:
- Die Seiten zuerst für den kleinen Bildschirm aufbauen und dann auf den großen erweitern.
- Bilder und Schriftgrößen handygerecht vorbereiten.
- Sicherstellen, dass die Seite am Handy schnell lädt.
- Auf verschiedenen Handys und in verschiedenen Browsern testen.
Wie lange dauert es, und geht das nicht vorab?
Für einen guten Designer ist der Mobile-First-Ansatz keine Mehrarbeit, sondern die Reihenfolge der Arbeit. Er verlängert den Zeitplan deshalb meist nicht. Verzögerungen entstehen häufig dadurch, dass die Inhalte nicht bereit sind: Texte, Fotos, die Leistungsliste. Bereiten Sie diese vorab vor, geht es schneller. Für einen verbindlichen Zeitplan müsste ich Ihr Projekt kennen; auf Preise gehe ich hier nicht ein, sie hängen vom Bedarf ab.
Häufig gestellte Fragen
Heißt Mobile-First, dass die Computeransicht schlecht wird?
Nein. Auch die Computeransicht wird gestaltet und funktioniert gut. Der Unterschied ist, dass die Gestaltung am Handy beginnt, nicht dass der Computer vernachlässigt wird.
Ist das noch nötig, wenn meine Kunden meist den Computer nutzen?
Bei den meisten Betrieben kommt ein bedeutender Teil der Besucher per Handy. Das sehen Sie in den Statistiken Ihrer eigenen Seite. Selbst wenn die Computernutzer überwiegen, macht der Mobile-First-Ansatz Ihre Seite einfacher und schneller.
Mein Designer hat nur einen Computerentwurf gezeigt. Ist das ein Problem?
Das heißt nicht zwingend, dass das Handy vergessen wurde, aber Nachfragen lohnt sich. Sagen Sie, dass Sie auch die Handyansicht sehen möchten. Nicht freizugeben, ohne sie gesehen zu haben, ist der sicherste Weg.
Kann ich meine bestehende Seite nachträglich handyfreundlich machen?
Manchmal ja, aber ist die Seite sehr alt, wird es Flicken auf Flicken. Dann kann ein Neuaufbau das solidere Ergebnis liefern. Eine Fachperson muss sich Ihre Seite ansehen.
Der erste Eindruck Ihrer Website entsteht meist auf dem Handybildschirm. Wenn Sie über eine neue Seite nachdenken, schauen Sie sich meine Seite zum Website erstellen an, damit der Gestaltungsprozess sicher am Handy beginnt.