Responsive Design

Wasser nimmt die Form des Gefäßes an, in das man es gießt — ohne dass jemand vorher weiß, welches Gefäß kommt. Genauso muss eine Website funktionieren: Sie kennt weder die Bildschirmgröße noch die Schriftgröße, die Ihr Besucher eingestellt hat, und muss trotzdem lesbar ankommen.

Erreicht wird das über flexible Breiten statt fester Pixelmaße und über Umbruchpunkte: Ab einer bestimmten Breite rutschen drei Spalten auf zwei, dann auf eine, das Menü wandert hinter ein Symbol, Tabellen bekommen einen eigenen Schiebebereich. Gute Projekte entwerfen dabei zuerst die schmale Fassung — „Mobile First“ —, weil dort die Fläche knapp ist und man sich auf das Wesentliche einigen muss.

Der häufigste Irrtum: Es genüge, wenn alles auf dem Handy „kleiner“ wird. Das Ergebnis kennt jeder — Text in Ameisengröße, mit zwei Fingern zoomen, Knöpfe, die man dreimal trifft und einmal nicht. Anpassen heißt umsortieren und weglassen, nicht schrumpfen. Praktische Größe für Schaltflächen: mindestens etwa ein Daumenbreit, und niemals zwei Verweise direkt übereinander.

Veraltet ist dagegen die zweite Idee von früher: eine eigene Handy-Adresse unter „m.“. Sie verdoppelt die Pflege, halbiert die Sichtbarkeit und wird von Google nicht mehr belohnt. Ebenfalls überholt: das Sperren der Zoom-Funktion, das Menschen mit schwacher Sehkraft aussperrt und den Barrierefreiheitsregeln widerspricht.

Bei den meisten Firmenseiten kommen sechs von zehn Besuchern über das Handy, im Handwerk und in der Gastronomie oft deutlich mehr. Und Google bewertet seit Jahren ausschließlich die mobile Fassung Ihrer Seite — was am Rechner gut aussieht, spielt für die Bewertung keine Rolle mehr.

Die einfachste Eigenkontrolle: Rufen Sie Ihre Seite auf dem eigenen Telefon auf und versuchen Sie, mit einer Hand eine Anfrage zu stellen. Was dabei hakt, hakt bei jedem Interessenten. Mehr dazu im Beitrag Responsive Webdesign und Mobile First.