CSS (Cascading Style Sheets) bestimmt, wie eine Website aussieht: Farben, Schriften, Abstände, Raster und Bewegung. In der CSS-Entwicklung geht es darum, einen Entwurf so umzusetzen, dass er auf einem kleinen Smartphone ebenso funktioniert wie auf einem breiten Monitor, in verschiedenen Browsern und bei vergrößerter Schrift.
Modernes CSS kann heute vieles, wofür früher JavaScript oder Bildtricks nötig waren. Wir nutzen diese Möglichkeiten gezielt und halten Stylesheets so geordnet, dass Ihre Website auch nach Jahren noch gut zu pflegen ist.
Flexbox und CSS Grid haben die Art, wie Layouts entstehen, grundlegend verändert. Flexbox eignet sich für Anordnungen in einer Richtung, etwa Navigationsleisten, Kartenreihen oder Formularzeilen. Grid ordnet Inhalte zweidimensional in Zeilen und Spalten an und macht aufwendige Seitenraster ohne Hilfskonstruktionen möglich. Beide zusammen ersetzen alte Techniken mit Floats und festen Pixelbreiten.
Für Bausteine, die an verschiedenen Stellen unterschiedlich viel Platz haben, setzen wir Container Queries ein: Ein Element passt sich dann der Breite seines umgebenden Bereichs an, nicht nur der des Bildschirms.
Responsive Design ist mehr als ein paar Umbruchpunkte. Wir entwickeln mobil zuerst und erweitern das Layout schrittweise für größere Bildschirme. Mit relativen Einheiten und Funktionen wie clamp() wachsen Schriften und Abstände fließend mit, statt an festen Stufen zu springen. Bilder und Videos behalten ihr Seitenverhältnis und verschieben beim Laden keine anderen Inhalte.
Bei Careiwo, einer Marktplatz-Plattform für Reisemobile, Wohnwagen und Caravans, war ein durchgängig responsives Interface Teil des Konzepts. Mehr über den gestalterischen Teil erfahren Sie auf unserer Seite zum responsiven Webdesign.
Dezente Bewegung lenkt den Blick und macht Zustände verständlich – etwa wenn sich ein Menü öffnet oder ein Button auf einen Klick reagiert. Wir setzen Übergänge und Keyframe-Animationen mit CSS um und animieren bevorzugt Eigenschaften wie transform und opacity, weil der Browser dafür kein neues Layout berechnen muss. So bleiben Animationen auch auf schwächeren Geräten flüssig.
Wer in den Systemeinstellungen Bewegung reduziert hat, bekommt über die Media Query prefers-reduced-motion eine ruhigere Darstellung. Das ist eine Frage der Rücksicht und gehört zu einer barrierefreien Website dazu.
Viele Websites laden Hunderte Kilobyte CSS, von denen nur ein Bruchteil genutzt wird – oft Reste alter Themes oder kompletter Frameworks. Das kostet Ladezeit, besonders im Mobilfunknetz. Wir entfernen ungenutzte Regeln, fassen Dateien zusammen, minimieren sie und liefern das CSS für den sichtbaren Bereich zuerst aus. Eigene CSS-Variablen (Custom Properties) halten Farben, Abstände und Schriften zentral fest, sodass ein neuer Farbton oder ein dunkles Farbschema keine Suche durch das ganze Stylesheet erfordert.
Für größere Projekte organisieren wir Stylesheets mit SASS und einer klaren Benennung der Klassen.
Sie haben einen neuen Entwurf oder ein Layout, das in die Jahre gekommen ist? Schreiben Sie uns – Sie erhalten eine ehrliche Einschätzung und ein kostenloses Angebot.
Unser Studio liegt in Königstein im Taunus. Wir kommen zu Ihnen oder sprechen per Video-Call – hier finden Sie unsere Seiten für Ihren Ort:
Oft ja. Ist das HTML einigermaßen sauber, lässt sich ein Layout mit modernem CSS gründlich überarbeiten: responsiv, schneller und klar strukturiert. Ist das Markup dagegen stark veraltet, empfehlen wir, beides gemeinsam zu modernisieren.
Wenn es zum Projekt passt, ja. Frameworks beschleunigen den Start, bringen aber oft mehr CSS mit, als gebraucht wird. Für individuelle Designs schreiben wir häufig eigenes CSS oder SASS und übernehmen aus Frameworks nur die Teile, die wirklich genutzt werden.
Flexbox, Grid, Custom Properties und die meisten neueren Funktionen unterstützen alle aktuellen Browser. Für Funktionen, die noch nicht überall verfügbar sind, planen wir eine einfachere Darstellung als Rückfallebene, damit die Seite überall nutzbar bleibt.
