Frontend

Gebaut, wie gestaltet.

Wir setzen Entwürfe aus Figma und Adobe genau in Code um: mit HTML, SCSS und JavaScript, schnell, barrierefrei und gut zu pflegen. In TYPO3, Shopware und Shopify, auf Wunsch auch headless.

Frontend besprechen

Leistungen

Was wir im Frontend bauen

Vom ersten Entwurf bis zur Komponente, die Ihre Redaktion jeden Tag benutzt.

  1. Komponenten & Designsysteme

    Aus Figma- und Adobe-Entwürfen werden wiederverwendbare Komponenten in HTML, SCSS und JavaScript, dokumentiert, getestet und als TYPO3-Inhaltselemente für Ihre Redaktion.

  2. Shop-Frontends

    Themes für Shopware und Shopify nach Ihrem Design: Produktseiten, Filter, Warenkorb und Checkout.

  3. Performance

    Ladezeit nach den Core Web Vitals: Bilder in modernen Formaten, Schriften vom eigenen Server, kein JavaScript, das niemand braucht.

  4. Barrierefreiheit im Code

    Tastatur, Fokus, Kontraste und Screenreader nach WCAG 2.2, von Hand und automatisch geprüft. Mehr unter Barrierefreiheit.

  5. Interaktion & Animation

    Übergänge, Scroll-Effekte und WebGL, die das Design tragen und «Bewegung reduzieren» respektieren.

  6. Headless als Option

    Wenn es passt, holt das Frontend seine Inhalte über APIs aus TYPO3, Shopware oder Shopify. Meist ist das klassische Frontend die einfachere Lösung.

  7. Übernahme & Modernisierung

    Bestehende Frontends aufräumen: alte Bibliotheken ersetzen, Build modernisieren, Ladezeit senken.

Messbar schnell

Drei Werte, die zählen

Stand Oktober 2026. Google misst diese Werte bei echten Besuchen; wir messen sie vor und nach dem Livegang.

Lighthouse

Vier Mal 100

So bewertet Googles Lighthouse diese Seite: Leistung, Barrierefreiheit, Best Practices und SEO. Prüfen Sie es selbst, der Test läuft live in PageSpeed Insights.

  • Leistung
  • Barrierefreiheit
  • Best Practices
  • SEO

Messwerte

First Contentful Paint
1,0 s
Largest Contentful Paint
1,4 s Core Web Vital
Total Blocking Time
0 ms
Cumulative Layout Shift
0 Core Web Vital

Gemessen mit Lighthouse 13 auf dem Smartphone, Oktober 2026. Je nach Netz und Server schwanken die Werte leicht.

Live testen

Im Vergleich

Baukasten oder nach Mass

Was ein Theme von der Stange oft mitbringt und was wir stattdessen bauen.

  • Ein Theme lädt Skripte und Schriften für Funktionen, die keine Seite nutzt.

    Nur der Code, den die Seite braucht.

    Kürzere Ladezeit und bessere Core Web Vitals.

  • Tastatur und Fokus werden erst am Ende geprüft oder gar nicht.

    Barrierefrei von der ersten Komponente an.

    Alle können die Seite bedienen, ohne Nachbessern.

  • Jede Anpassung kämpft gegen das Theme.

    Komponenten nach Ihrem Entwurf, mit Feldern für die Redaktion.

    Inhalte pflegen, ohne das Layout zu brechen.

Auf dieser Website

Was Sie hier sehen

flixx.ch ist selbst unser bestes Frontend-Beispiel. Vier Details, die Sie hier ausprobieren können.

  • WebGL-SlashDie Linie der Startseite ist ein Shader, der beim Scrollen mitläuft.
  • SeitenwechselÜbergänge mit der Web Animations API, ohne Framework.
  • Schriften ohne SprungEigene Schriften und angepasste Ersatzschriften: Beim Laden verrutscht nichts.
  • Ruhig auf WunschWer «Bewegung reduzieren» eingestellt hat, sieht alles ohne Animation.

Ablauf

Vom Entwurf zum Code

  1. Übergabe

    Wir gehen den Entwurf mit Design und Redaktion durch und klären Zustände, Inhalte und Plattform.

  2. Komponenten

    Jede Komponente einzeln gebaut, barrierefrei und mit echten Inhalten getestet.

  3. Integration

    Einbau in TYPO3, Shopware oder Shopify, auf Wunsch headless, mit Vorschau für Ihre Redaktion.

  4. Messen

    Lighthouse, Core Web Vitals und Screenreader vor dem Livegang und danach.

Gut zu wissen

Fragen zum Frontend

Setzt ihr auch Entwürfe unserer Agentur um?

Ja. Wir arbeiten mit Entwürfen aus Figma oder Adobe, von Ihnen oder Ihrer Agentur, und klären vorab Zustände wie Hover, Fokus, Fehler und leere Inhalte.

Welche Technik setzt ihr ein?

Klassisch HTML, SCSS und JavaScript, ohne schweres Framework. Headless bauen wir, wenn es für Ihr Projekt wirklich passt.

Baut ihr auch Shopify-Themes?

Ja. Wir bauen und erweitern Themes für Shopify und Shopware nach Ihrem Design, von der Produktseite bis zum Checkout.

Wird unsere Website mit einem neuen Frontend schneller?

In der Regel ja. Wir laden nur den Code, den eine Seite braucht, liefern Bilder in modernen Formaten und Schriften vom eigenen Server und messen nach den Core Web Vitals. Wie viel schneller, zeigt eine Messung Ihrer heutigen Website.

Was heisst barrierefreies Frontend konkret?

Alles lässt sich mit der Tastatur bedienen, der Fokus ist sichtbar, Kontraste und Klickflächen erfüllen WCAG 2.2, und Screenreader lesen Struktur, Bilder und Formulare richtig vor. Mehr unter Barrierefreiheit.

Könnt ihr ein bestehendes Frontend übernehmen?

Ja. Wir prüfen Code, Abhängigkeiten und Build, ersetzen veraltete Bibliotheken und bringen Ladezeit und Barrierefreiheit Schritt für Schritt auf Stand.

Kontakt

Was soll laufen?

Frontend besprechen

ChristophProjektplanung, Realisierung