Melta
Blog
Responsive Website erstellen: Anleitung für jede Bildschirmbreite
Eine responsive Website erstellen heisst, eine einzige Seite so zu bauen, dass sich ihr Layout an jede Bildschirmbreite anpasst, statt zwei Fassungen zu pflegen. Wo dieser Schritt im ganzen Ablauf steht, zeigt die [Anleitung vom ersten Inhalt bis zum Livegang](/blog/website-erstellen-anleitung).
Responsive Website erstellen: warum der Haken im Inhalt liegt
Der Haken zuerst: Eine Seite wird nicht responsive, weil am Schluss jemand ein Häkchen setzt. Die meisten Probleme auf dem Handy entstehen viel früher, bei Inhalten, die nur breit funktionieren. Eine Preistabelle mit einer Spalte je Variante. Ein Menü mit zwei Ebenen und Ausklappern, die auf Mauszeiger warten. Ein Kontaktformular, das nach Firma, Abteilung und Anrede fragt, bevor es nach der Mailadresse fragt.
Responsive heisst: ein Inhalt, eine Adresse, ein Bau, und das Layout richtet sich nach dem Platz, der gerade da ist. Es heisst nicht, eine zweite Seite fürs Handy zu pflegen. Wer zwei Versionen pflegt, hat die Arbeit doppelt und die Fehler auch, weil jede Änderung zuverlässig nur in einer der beiden landet.
Wer eine responsive Website erstellen will, entscheidet deshalb vor dem ersten Block: was zuerst kommt, wenn nur eine Spalte übrig bleibt, was mit den Dingen passiert, die breiter sind als der Bildschirm, und wo das Layout umbricht. Danach ist der Rest Handwerk und geht schnell.
Was heisst responsive bei einer Website?
Responsive bedeutet, dass sich Layout, Schrift und Bilder nach der Fensterbreite richten und nicht nach einem bestimmten Gerät. Gleiche Adresse, gleiche Inhalte, gleicher Bau. Der Browser entscheidet, wie die Blöcke stehen.
Technisch stecken vier Dinge darin. Die Angabe im Seitenkopf, dass der Browser mit der Gerätebreite rechnen soll; fehlt sie, zeigt ein Handy die Desktopfassung verkleinert an, und die Schrift ist zu klein zum Lesen. Flexible Breiten statt fester Pixelwerte, damit Spalten mitgehen, statt aus dem Bild zu laufen. Bilder, Videos und eingebettete Karten, die nie breiter werden als ihr Kasten. Und Regeln im Stylesheet, die ab einer bestimmten Breite eine andere Anordnung setzen.
Damit ist eine Seite technisch responsive und trotzdem noch nicht gut bedienbar. Das zeigt sich erst am Inhalt: wenn der wichtigste Knopf auf dem Handy hinter drei Bildschirmlängen Fliesstext liegt, hilft das beste Umbruchverhalten nichts. Responsiv ist die Anordnung. Brauchbar wird die Seite durch die Reihenfolge.
Wie viele Bildschirmgrössen musst du bedenken?
Weniger, als die Geräteliste vermuten lässt. Wer nach Geräten plant, plant gegen eine Liste, die sich jedes Jahr ändert. Wer nach Zuständen plant, kommt mit einer Handvoll aus.
Die Punkte dazwischen holst du aus deinem Inhalt, nicht aus einer Tabelle beliebter Auflösungen. Zieh das Browserfenster langsam schmaler und sieh zu, wo es kippt: wo eine Überschrift in vier Zeilen zerfällt, wo zwei Karten nebeneinander zu eng stehen, wo die Navigation nicht mehr in eine Zeile passt. Genau dort gehört der Umbruch hin. Das sind meist zwei oder drei Stellen, und sie liegen bei jedem Projekt woanders.
| Zustand | Was der Besucher sieht | Was du dafür festlegst |
|---|---|---|
| Schmal, Handy hochkant | Eine Spalte, Menü hinter einem Knopf | Reihenfolge der Blöcke, Grösse der Tippziele |
| Mittel, Tablet oder halbes Fenster | Zwei Spalten, kürzere Navigation | Was zusammenbleibt und was umbricht |
| Breit, Laptop und Monitor | Mehrere Spalten, Menü offen | Maximale Zeilenlänge, damit Text nicht quer über den Schirm läuft |
In einer Spalte gibt es kein rechts. Alles, was im breiten Layout in der Seitenspalte steht, landet oben oder unten, und diese Reihenfolge entscheidest du beim Planen. Wie du Aufgabe, Seitenliste und Inhalte vorher festlegst, steht in Struktur, Inhalte und Pflege vor dem ersten Klick.
Navigation, Formulare und Tabellen auf kleinen Bildschirmen
Drei Bauteile machen fast allen Ärger, und für jedes gibt es eine ruhige Antwort.
Die Navigation: Auf dem Handy passt sie hinter einen Knopf, aber der Knopf muss zu erreichen sein, ohne die Hand umzugreifen, und was sich im Menü öffnet, gehört auf Tippen statt auf Überfahren gelegt. Ein Untermenü, das nur beim Mauszeiger aufklappt, existiert auf einem Touchscreen schlicht nicht. Wenn die Seite eine Hauptaufgabe hat, etwa eine Anfrage oder eine Buchung, bleibt der Knopf dafür sichtbar und wandert nicht ins eingeklappte Menü.
Die Formulare: Jedes Feld bekommt den passenden Typ, damit auf dem Handy die richtige Tastatur erscheint, mit Ziffernblock bei der Telefonnummer und dem At-Zeichen bei der Mailadresse. Felder untereinander statt nebeneinander. Fehlermeldungen direkt am Feld, nicht gesammelt oben, weil oben beim Absenden ausserhalb des Bildschirms liegt.
Die Tabellen: Eine breite Tabelle bricht nicht sinnvoll um. Entweder sie bleibt Tabelle und bekommt einen eigenen waagrechten Rollbereich, oder jede Zeile wird auf dem Handy zu einer kleinen Karte mit Beschriftung je Wert. Was nicht geht, ist die Tabelle unverändert schrumpfen zu lassen, bis in jeder Zelle zwei Buchstaben stehen.
Dazu die Kleinigkeiten, die niemand plant und jeder kennt: Tippziele, die gross genug für einen Daumen sind, genug Abstand zwischen zwei Links untereinander, und Banner am unteren Rand, die nicht dauerhaft den halben Bildschirm belegen.
Schrift, Bilder und Abstände, die mitwachsen
Text ist der Teil, der am wenigsten Arbeit macht und am meisten bringt. Die Grundschrift bleibt auf dem Handy so gross wie auf dem Laptop, eher grösser. Zeilen bekommen eine maximale Länge, damit der Blick auf dem Monitor nicht quer über den ganzen Schirm muss. Überschriften dürfen zwischen den Zuständen ihre Grösse ändern, der Fliesstext braucht das selten.
Bilder sind der Teil, der am meisten Datenvolumen kostet. Ein Foto in Monitorbreite auf ein Handy zu schicken, macht die Seite im Mobilfunknetz langsam, und langsam heisst auf dem Handy oft: weg. Deshalb gehören zu jedem Bild mehrere Grössen, aus denen der Browser die passende zieht, und ein fester Platz im Layout, damit der Text beim Nachladen nicht springt. Bei Bildern mit wichtigem Detail, etwa einem Gesicht oder einem Produkt, legst du fest, welcher Ausschnitt beim Zuschneiden erhalten bleibt.
Farben verhalten sich unter freiem Himmel anders als am Schreibtisch. Ein zartes Grau auf Weiss, das am Monitor elegant wirkt, ist auf einem Handydisplay in der Sonne nicht mehr lesbar. Welche Paare wirklich tragen und wie du sie prüfst, steht in Website Farben: eine Palette mit geprüften Kontrasten.
Wie testest du, ob die Website responsive ist?
Auf einem echten Handy, nicht in einem schmalen Browserfenster. Die Anleitung zum Livegang sagt genau das, und der Unterschied ist grösser, als er klingt: Das schmale Fenster zeigt Umbrüche, das echte Gerät zeigt Ladezeit im Mobilfunknetz, Tippgenauigkeit, Tastaturen, die das halbe Bild verdecken, und Schrift, die im Hellen verschwindet.
Der Durchgang ist schnell gemacht. Geh die Hauptaufgabe der Seite einmal mit einer Hand durch, von der Startseite bis zur abgeschickten Anfrage. Dreh das Gerät quer. Öffne eine Seite mit Tabelle und eine mit Formular. Tipp dabei bewusst ungenau, so wie unterwegs auch. Jede Stelle, an der du zoomen, zielen oder waagrecht schieben musst, ist ein Befund, kein Geschmacksurteil.
Wer bauen lässt, prüft das nicht auf der fertigen Seite, sondern vorher in einer Umgebung, die sich wie die echte verhält. Melta legt jedes fertige Produkt zuerst in eine Vorschau, die nur die Betreiberin sieht, mit eigenen Daten, sauber getrennt von der Live-Umgebung; was diese getrennte Vorschau- und Live-Umgebung leistet, steht auf der Funktionsseite. Ein vollständiger Bau dauert dort bis zu etwa einen Tag, danach läuft die Prüfung am Gerät.
Responsive Website erstellen lassen oder selbst bauen?
Drei Wege führen zum Ziel, und sie unterscheiden sich weniger im Ergebnis als in der Frage, wer die Sonderfälle ausbadet.
Mit einem Baukasten bringt die Vorlage das responsive Verhalten mit. Solange du dich an die vorgesehenen Blöcke hältst, trägt das weit. Es bricht in dem Moment, in dem ein Inhalt nicht ins Raster passt, etwa eine lange Preisliste oder ein Formular mit Bedingungen, denn nachbessern kannst du nur, was die Vorlage vorsieht.
Selbst bauen gibt dir jede Freiheit und verlangt dafür, dass du Umbruchpunkte, Bildgrössen und Tastaturtypen selbst pflegst, auch beim nächsten Inhalt, der dazukommt. Das ist machbar und dauert länger als der erste Entwurf vermuten lässt.
Bauen lassen verschiebt genau diese Kleinarbeit zu jemand anderem. Hier lohnt eine klare Frage im Vorfeld: Wer prüft nach dem Start auf dem Handy, und wie läuft eine Korrektur, wenn in einem halben Jahr eine Tabelle dazukommt. Die Antwort darauf entscheidet mehr über die nächsten zwei Jahre als die Wahl des Werkzeugs.
Welcher Weg zu dir passt, hängt am Rest des Projekts, von der Domain bis zu den Rechtsseiten. Die Anleitung in acht Schritten bis zum Livegang geht diese Entscheidungen der Reihe nach durch.
FAQ
Was kostet es, eine responsive Website zu erstellen?
Bei einer neuen Seite ist responsives Verhalten kein eigener Posten, sondern Teil des Baus. Teuer wird nur der umgekehrte Fall: eine alte Seite mit festen Breiten nachträglich umzubauen, weil dabei Layout, Bilder und Navigation zugleich angefasst werden.
Brauchst du eine eigene Version deiner Website für Handys?
Nein. Eine Seite, deren Layout sich nach der Breite richtet, deckt Handy, Tablet und Monitor ab. Eine zweite Fassung unter eigener Adresse bedeutet doppelte Pflege und Inhalte, die auseinanderlaufen.
Woran erkennst du, dass eine Seite auf dem Handy versagt?
Du musst auf dem Handy zoomen, um Text zu lesen, oder waagrecht schieben, um an das Ende einer Zeile zu kommen. Auch ein Menü, das sich nur mit dem Mauszeiger öffnet, ist ein sicheres Zeichen.
Was ist der Unterschied zu mobiloptimiert?
Responsive beschreibt, dass sich das Layout an die Breite anpasst. Mobiloptimiert heisst zusätzlich, dass Ladezeit, Tippziele, Tastaturen und die Reihenfolge der Inhalte auf die Bedienung mit einer Hand ausgelegt sind.
Responsive Website erstellen: womit du diese Woche anfängst
Nimm die Seite, auf der bei dir das Geld oder die Anfrage entsteht, und öffne sie auf deinem eigenen Handy, unterwegs und nicht im WLAN. Geh die Hauptaufgabe einmal mit einer Hand durch und schreib jede Stelle auf, an der du zoomst, zielst oder schiebst. Diese Liste ist deine Arbeitsgrundlage, und sie ist meist kurz.
Danach gilt die Reihenfolge, die beim Erstellen einer responsiven Website am wenigsten Arbeit macht: zuerst die Inhalte in eine Reihenfolge bringen, die in einer Spalte Sinn ergibt, dann die Umbruchpunkte dort setzen, wo dein Layout kippt, dann Bilder in passenden Grössen ausliefern, zum Schluss auf dem Gerät prüfen. Wer in dieser Reihenfolge arbeitet, korrigiert einmal statt dreimal.
Themen: Responsive Design, Website erstellen, Mobile, Webdesign
Quellen
Weiterlesen
Beschreib dein Produkt - den Rest übernimmt Melta.
Ein Konzept kostet nur wenige Credits. Gebaut, online gestellt und betrieben wird es, sobald du es freigibst.
Frühzugang sichern