Eine Webseite ist nicht fertig, nur weil sie am PC gut aussieht – worauf es am Smartphone ankommt
Eine Webseite kann auf einem großen Monitor perfekt wirken. Doch was passiert, wenn sie jemand am Smartphone öffnet?
Wenn am Smartphone plötzlich nichts mehr passt
- Plötzlich ist die Schrift zu klein.
- Ein Button lässt sich kaum treffen.
- Bilder werden abgeschnitten.
- Das Menü wird unübersichtlich.
- Oder ein Formular ist auf dem kleinen Bildschirm nur mühsam zu bedienen.
Dann hilft es wenig, dass am PC alles perfekt aussieht.
Und das betrifft viele Besucher: Gerade wer unterwegs einen Handwerksbetrieb oder eine Arztpraxis sucht, öffnet die Webseite meist zuerst am Smartphone.
Die Webseite passt sich dem Gerät an – nicht umgekehrt
Eine moderne Webseite muss sich an das Gerät des Besuchers anpassen – nicht umgekehrt.
Smartphone, Tablet, Notebook oder großer Bildschirm haben völlig unterschiedliche Größen und Bedienmöglichkeiten. Auf dem Smartphone wird mit dem Finger bedient. Auf dem PC mit Maus und Tastatur. Auch der Platz für Texte, Bilder, Menüs, Formulare und andere Inhalte verändert sich erheblich.
Deshalb reicht es nicht, eine fertige PC-Ansicht einfach kleiner zu machen.
Ich plane eine Webseite deshalb von Anfang an auch für den kleinen Bildschirm. Was dort übersichtlich funktioniert, lässt sich auf einem großen Bildschirm leicht großzügiger anordnen – umgekehrt gelingt das selten.
Worauf es auf jedem Bildschirm ankommt
Inhalte müssen auf jeder Bildschirmgröße sinnvoll angeordnet und gut bedienbar bleiben:
- Lesbare Texte: Texte sollen angenehm lesbar sein – ohne Vergrößern und mit genug Abstand zwischen den Zeilen.
- Schaltflächen für den Finger: Schaltflächen sollen groß genug für den Finger sein und genug Abstand zueinander haben, damit man nicht versehentlich das Falsche trifft. Als Richtwert gilt eine Fläche von rund 44 × 44 Pixeln.
- Erreichbares Menü: Menüs sollen schnell erreichbar sein, auch wenn man schon weit nach unten gescrollt hat. Auf dieser Webseite übernimmt das zum Beispiel der Menü-Knopf unten rechts, der beim Scrollen mitkommt.
- Passende Bilder: Bilder sollen passend dargestellt werden – in der richtigen Größe für das jeweilige Gerät und ohne dass Wichtiges abgeschnitten wird.
- Einfache Formulare: Formulare sollen einfach auszufüllen sein, mit großen Eingabefeldern und der passenden Tastatur am Smartphone, etwa Ziffern für die Telefonnummer.
Und natürlich soll der Besucher nicht erst zoomen, seitlich scrollen oder überlegen müssen, wie er überhaupt zum gewünschten Inhalt kommt.
Genau hingesehen, auf jedem Gerät
Genau bei solchen Details kommt bei mir wieder der pingelige Technik-Nerd zum Vorschein.
Denn eine Webseite wird nicht nur für einen bestimmten Bildschirm entwickelt. Ich möchte, dass sie sich auch dann noch richtig anfühlt, wenn sie auf einem völlig anderen Gerät geöffnet wird. Dazu gehört für mich, unterschiedliche Bildschirmgrößen zu berücksichtigen, Inhalte entsprechend anzupassen und genau hinzusehen, ob die Bedienung überall so funktioniert, wie sie soll.
Geprüft wird dabei nicht nur in einem verkleinerten Browserfenster, sondern auch auf echten Geräten wie Smartphone und Tablet.
Der Eindruck fällt auf das Unternehmen zurück
Denn der Besucher interessiert sich nicht dafür, warum etwas auf seinem Smartphone nicht funktioniert. Er merkt nur: Es funktioniert nicht. Und dieser Eindruck fällt am Ende auf das Unternehmen zurück.
Wie Ihre eigene Webseite abschneidet, sehen Sie mit einem kurzen Test: Öffnen Sie sie am Smartphone, tippen Sie Ihre Telefonnummer an und schicken Sie sich eine Nachricht über das Kontaktformular. Klappt beides ohne Zoomen und Suchen? Weitere Proben für den Selbsttest stehen im Beitrag „Eine schöne Webseite allein reicht nicht“.
Genau deshalb entstehen bei mir Webseiten, die nicht nur auf einem großen Bildschirm gut aussehen, sondern sich auf Smartphone, Tablet und PC sinnvoll anpassen und angenehm bedienen lassen.
Webdesign by Geri – mehr zu meiner Arbeit finden Sie bei den Referenzen.
Eine gute Webseite funktioniert dort, wo der Besucher sie gerade öffnet.
