Webdesign aus Köln
Ihre Webseite soll sich auf dem Telefon genauso gut bedienen lassen wie am großen Bildschirm.
Bei einem Flyer wird das Layout einmal gesetzt und bleibt dann so. Eine Webseite muss dagegen auf dem Telefon, auf dem Tablet und auf einem großen Bildschirm funktionieren – mit denselben Inhalten. Nicht zwei Webseiten, eine fürs Telefon und eine für den großen Bildschirm, sondern eine einzige, die sich der Breite anpasst.
Die Umbruchpunkte sitzen dort, wo der Inhalt kippt, nicht bei einem Gerätenamen. Ein Umbruch, der auf „iPhone“ eingestellt ist, stimmt nach dem nächsten Modellwechsel nicht mehr. Eine Spalte, die ab einer bestimmten Breite zu eng für ihren Text wird, bleibt es dagegen für immer – und genau dort gehört der Umbruch hin.
Warum das zählt
Drei Gründe, warum sich der Aufwand für kleine Bildschirme rechnet.
Zu kleine Klickflächen, Text, der seitlich aus dem Bild läuft, ein Formular, das sich nicht ausfüllen lässt: Jede dieser Hürden kostet eine Anfrage. Am Telefon gibt es keinen zweiten Versuch, der nächste Treffer ist einen Daumendruck entfernt.
Für die Bewertung zählt, was auf dem Telefon ankommt – Google bezeichnet das als Mobile-First-Indexierung. Eine Seite, die dort schlecht bedienbar ist, wird deshalb auch am großen Bildschirm schlechter gefunden. Mehr dazu unter Suchmaschinenoptimierung.
Ein Layout, das mitwächst, muss nur einmal gepflegt werden. Eine zweite, eigene Seite fürs Telefon verdoppelt dagegen jede Textänderung – und beim übernächsten Mal steht auf einer von beiden etwas Veraltetes.
Wo Text und Bild nur nebeneinander stehen, ist die Lösung einfach: Auf dem Telefon rutschen sie untereinander. Liegt der Text auf dem Bild, geht das nicht – dann entscheide ich zusammen mit Ihnen, welche dieser vier Varianten zu Ihrem Inhalt passt:
Was sich anpassen muss
Jedes Bauteil braucht eine eigene Regel für kleine Bildschirme. Diese sechs brauchen fast immer eine – und in jedem steckt eine typische Stolperstelle.
Auf kleinen Bildschirmen wird aus der Menüzeile meist ein Klappmenü. Entscheidend ist, dass die wichtigsten Ziele trotzdem mit einem Fingertipp erreichbar bleiben.
Einen Knopf unter 40 Pixel trifft man mit dem Daumen nicht zuverlässig. Genug Abstand zwischen zwei Links gehört dazu, sonst erwischt man den falschen.
Die Schrift darf nicht mitschrumpfen, die Zeile nicht zu lang werden. Beides entscheidet darüber, ob ein Text auf dem Telefon gelesen oder weggewischt wird.
Ein Foto mit 4000 Pixel Breite in einer schmalen Spalte kostet nur Ladezeit. Der Browser bekommt deshalb mehrere Größen angeboten und nimmt die passende.
Eine breite Tabelle passt nicht in ein Telefon. Je nach Inhalt wird sie scrollbar, umgebaut oder in einzelne Karten aufgelöst – das ist eine inhaltliche Entscheidung, keine technische.
Große Felder, die richtige Tastatur je Feld, Fehlermeldungen direkt daneben. Und: dieselben Inhalte wie am Desktop – was es nur am großen Bildschirm gibt, fehlt genau dort, wo die meisten Besucher sind.
Eine eigene Adresse nur für Mobilgeräte braucht es dafür nicht – die war vor zehn Jahren üblich und ist heute doppelte Pflege. Ich setze die Umbruchpunkte am Inhalt und teste am echten Telefon, nicht nur am Schieber im Browser. So läuft ein Projekt ab Schreiben Sie mir
