Mobile-First Webentwicklung für Unternehmen in Thüringen

Mehr als 60 Prozent der Besuche kommen heute vom Smartphone oder Tablet. Wer eine neue Website plant, kommt an Responsive Webdesign nicht vorbei, und Google macht es zur Bedingung: Bewertet wird seit 2019 die mobile Version einer Website. Was dort nicht funktioniert, rankt nicht.

Wir entwickeln in Erfurt seit über 20 Jahren Websites und bauen sie nach dem Mobile-First-Prinzip: erst das kleine Display, dann die großen. Am Ende funktioniert eine Website auf jedem Gerät, vom alten Android-Handy bis zum 4K-Monitor.

Was ist Responsive Webdesign?

Responsive Webdesign bedeutet, dass sich das Layout einer Website an die Größe des Bildschirms anpasst. Texte brechen um, Bilder schrumpfen, das Menü wird per Finger bedienbar. Ein einziger Code bedient alle Geräte.

Das Grundprinzip

Eine responsive Website hat genau ein HTML-Dokument je Adresse. Flexibles Raster, Media Queries und responsive Bilder sorgen dafür, dass es überall passt: eine Spalte auf dem Smartphone, zwei auf dem Tablet, drei oder vier am Desktop.

Für Sie heißt das: eine Website pflegen und damit alle Geräte abdecken. Keine zweite Mobilversion, keine doppelten Inhalte, keine doppelte Arbeit.

Warum keine separate mobile Website?

Früher gab es oft eine zweite Website unter m.domain.de. Das ist vorbei, aus vier Gründen:

• SEO: Google empfiehlt Responsive Design ausdrücklich. Eine Adresse je Inhalt, kein Risiko doppelter Inhalte.
• Wartung: ein Code statt zwei. Jede Änderung wirkt sofort überall.
• Wiedererkennung: Besucher sehen auf jedem Gerät dieselben Inhalte im selben Design.
• Zukunft: Eine responsive Website funktioniert auch auf Bildschirmgrößen, die es heute noch nicht gibt.

Mobile-First vs. Desktop-First Ansatz

Eine responsive Website lässt sich von zwei Seiten aufbauen. Wir machen es nur noch von der kleinen Seite her, und das hat Gründe.

Mobile-First ist Standard

Mobile-First heißt: Layout und Funktionen entstehen zuerst für das kleinste Display. Für größere Bildschirme kommt dann Schritt für Schritt dazu, was Platz hat.

Was das bringt:

• Auf dem Smartphone läuft weniger Code, weil kein Desktop-Überschuss mitgeladen wird.
• Es zwingt zur Auswahl. Was auf dem Smartphone keinen Platz hat, ist vielleicht auch am Desktop nicht wichtig.
• Erweitern ist einfacher als Wegnehmen.

Desktop-First ist nicht mehr zeitgemäß

Desktop-First beginnt mit der großen Version. Für kleine Bildschirme wird dann ausgeblendet und umgestapelt. Der ausgeblendete Code wird trotzdem geladen, auch auf dem Smartphone, wo er nichts zu suchen hat.

Bei uns ist Mobile-First kein Etikett. Vom ersten Wireframe bis zur letzten CSS-Regel beginnt jede Entscheidung mit der mobilen Ansicht.

Flexible Grids: Das Layout-Fundament

Früher hatten Websites feste Pixelbreiten. Auf einem 1280 Pixel breiten Monitor sah das gut aus, auf einem 375 Pixel breiten Smartphone gar nicht. Deshalb rechnen moderne Layouts in flexiblen Einheiten.

Prozent statt Pixel

Statt „die Spalte ist 400 Pixel breit“ heißt es „die Spalte ist 33,33 Prozent breit“. Sie passt sich dem Container an, egal ob Smartphone, Tablet oder großer Monitor.

CSS Grid und Flexbox

CSS Grid und Flexbox haben die alten Float-Layouts abgelöst. Wir nutzen beides, aber mit klarer Aufgabenteilung:

• CSS Grid: für Layouts in zwei Richtungen, Zeilen und Spalten zugleich.
• Flexbox: für eine Richtung, waagerecht oder senkrecht.
• Zusammen: Grid für das Gesamtlayout, Flexbox für die einzelnen Bausteine.

Grid-Frameworks: Bootstrap, Foundation oder Custom?

• Bootstrap: das meistgenutzte CSS-Framework. 12-Spalten-Raster, viele fertige Bausteine. Passt bei knappem Budget oder wenig Zeit.
• Foundation: flexibler als Bootstrap, dafür komplizierter.
• Eigenes Raster: für individuelle Projekte bauen wir das Raster selbst. Kein Framework-Ballast, so wenig CSS wie möglich.

Bei individuellen Webdesign-Projekten bauen wir meist ein eigenes Raster. Bei WordPress-Projekten mit kleinem Budget nehmen wir Bootstrap und passen es an Ihr Corporate Design an.

Media Queries und Breakpoints

Media Queries sind das technische Herz von Responsive Design. Mit ihnen bekommen verschiedene Bildschirmbreiten verschiedene Regeln. Die Grafik zeigt das am Raster dieser Website.

Standard-Breakpoints in der Branche

Feste Regeln gibt es nicht, aber eingespielte Werte:

• Smartphone hochkant: 320 bis 480 Pixel
• Smartphone quer: 481 bis 767 Pixel
• Tablet: 768 bis 1024 Pixel
• Desktop: 1025 bis 1200 Pixel
• Großer Desktop: ab 1201 Pixel

Content-basierte Breakpoints sind besser

Wir setzen Breakpoints nicht nach Geräteklassen, sondern dort, wo der Inhalt sie braucht: Wo wird das Layout zu eng? Wo wird eine Textzeile zu lang zum Lesen? Solche Breakpoints halten länger als jede Geräteliste.

Flexible Einheiten in der Praxis

• %: für Containerbreiten und Spalten
• em / rem: für Schriftgrößen und Abstände
• vw / vh: für Maße relativ zum Bildschirm, etwa ein Bild über die ganze Höhe
• fr (CSS Grid): für flexible Rasterspalten
• clamp(): für Werte zwischen einem Minimum und einem Maximum, etwa fließende Schriftgrößen

Responsive Bilder mit srcset und picture

Bilder sind die größte Bremse auf mobilen Websites. Ein 2000 Pixel breites Titelbild auf ein 375 Pixel breites Smartphone zu laden verschwendet Datenvolumen und Zeit. HTML hat dafür längst saubere Werkzeuge.

srcset für verschiedene Bildgrößen

Mit dem Attribut srcset hinterlegen wir je Bild mehrere Größen. Der Browser sucht sich die passende aus, abhängig von Bildschirmbreite und Pixeldichte. Das Smartphone lädt die kleine Datei, der Retina-Monitor die große.

Das spart Datenvolumen und verkürzt die Ladezeit spürbar, vor allem im Mobilfunk.

picture-Element für Art Direction

Das picture-Element kann mehr als srcset: nicht nur andere Größen, sondern andere Bildausschnitte und Formate je Gerät.

Ein Beispiel: Am Desktop zeigen wir ein breites Panorama. Auf dem Smartphone wäre davon nichts zu erkennen. Dort liefert picture einen hochkanten Ausschnitt mit dem Hauptmotiv.

Moderne Bildformate

• WebP: 25 bis 35 Prozent kleiner als JPEG bei gleicher Qualität, in allen aktuellen Browsern unterstützt
• AVIF: noch kleiner, seit 2024 in fast allen Browsern nutzbar
• Fallback: JPEG oder PNG für alte Browser

Lazy Loading

Bilder außerhalb des sichtbaren Bereichs werden erst geladen, wenn der Besucher dorthin scrollt. Das verkürzt den ersten Seitenaufbau deutlich. Das Attribut loading="lazy" reicht dafür in allen aktuellen Browsern. Mehr zur Geschwindigkeit auf unseren Seiten zu Ladezeiten und Core Web Vitals.

Responsive Typografie

Schrift muss auf jedem Gerät bequem lesbar sein. Zu klein auf dem Smartphone heißt zoomen, zu groß am Desktop verschenkt Platz. CSS kann heute dazwischen fließend anpassen.

Fluide Typografie mit clamp()

Mit clamp() legen wir Minimum, Wunschwert und Maximum fest. Dazwischen wächst die Schrift mit der Bildschirmbreite, ohne Sprünge an den Breakpoints.

Übliche Schriftgrößen:

• Smartphone: 16 Pixel Grundschrift, gut lesbar und ohne iOS-Zoom
• Tablet: 17 bis 18 Pixel
• Desktop: 18 bis 20 Pixel

Lesbarkeit auf allen Geräten

Auf dem Smartphone wird überflogen, nicht gelesen. Kurze Absätze, klare Zwischenüberschriften und genug Zeilenabstand entscheiden, ob jemand dranbleibt. Darauf richten wir die Typografie aus, ohne den Desktop zu vernachlässigen.

Touch-freundliche Navigation

Ein Finger ist kein Mauszeiger. Hover-Effekte funktionieren nicht, Ziele müssen groß sein, und das Menü muss dort liegen, wo der Daumen hinkommt.

Hamburger-Menü mit Bedacht einsetzen

Die drei Striche sind auf dem Smartphone Standard. Sichtbare Menüpunkte werden trotzdem häufiger angeklickt. Wir empfehlen deshalb eine Mischung: die wichtigsten Punkte sichtbar, der Rest hinter dem Hamburger.

Sticky Header

Ein Kopfbereich, der beim Scrollen oben bleibt, hält das Menü erreichbar. Auf langen Seiten erspart das viel Hochscrollen.

Touch-Target-Größen

Apple und Google empfehlen mindestens 44 mal 44 Pixel je Ziel. Kleinere Elemente werden verfehlt. Wir setzen 48 mal 48 Pixel als Untergrenze für alles, was angetippt wird.

Daumen-Reichweite berücksichtigen

Mit einer Hand erreicht der Daumen nicht den ganzen Bildschirm. Wichtige Schaltflächen setzen wir ins untere Drittel oder an den rechten Rand.

Cross-Device Testing: Wir testen auf echten Geräten

Die Entwicklertools im Browser sind ein Anfang. Sie ersetzen aber kein echtes Gerät mit echtem Netz. Wir prüfen beides.

Unsere Test-Strategie

Jede Website läuft vor dem Go-Live auf mindestens zehn Konfigurationen:

• Smartphones: aktuelle und vorletzte iPhone-Generation, Samsung Galaxy S und A, Google Pixel
• Tablets: iPad und iPad Mini, Android-Tablets in mehreren Größen
• Desktop: Windows und macOS, von 1280 Pixel bis 4K
• Browser: Chrome, Safari, Firefox, Edge, jeweils aktuelle und vorletzte Version

Tools im Einsatz

• Chrome DevTools Device Mode: für den schnellen Blick während der Entwicklung. Simuliert Bildschirmgrößen, Touch und Netzbedingungen.
• BrowserStack: echte Geräte mit echten Browsern aus der Cloud, hunderte Kombinationen.
• Lighthouse: für Geschwindigkeit, SEO und Barrierefreiheit. Der mobile Lighthouse-Wert ist unser Maßstab.
• Eigene Geräte: ein Regal voll Smartphones und Tablets verschiedener Hersteller und Jahrgänge.

Netzwerk-Tests

Wir messen unter realistischen Verbindungen: 3G, 4G, 5G und WLAN. Eine Website muss auch im Funkloch am Stadtrand benutzbar bleiben.

Progressive Enhancement: Robust und zukunftssicher

Progressive Enhancement heißt: Erst eine Grundversion bauen, die überall läuft. Dann Schicht für Schicht das ergänzen, was moderne Browser können.

Das Schichten-Prinzip

• Ebene 1, HTML: sauber und semantisch. Funktioniert auch ohne CSS und JavaScript.
• Ebene 2, CSS: Gestaltung und Layout.
• Ebene 3, JavaScript: Interaktion und Komfort.

Fällt JavaScript aus, läuft die Website weiter. Fällt CSS aus, bleiben die Inhalte lesbar. Das macht sie robust und ist zugleich die Grundlage für barrierefreie Websites.

Branchen-Beispiele aus unserer Arbeit

Drei anonymisierte Projekte aus Thüringen, drei Branchen, drei verschiedene Schwerpunkte.

Fall 1: Restaurant in Erfurt

Ausgangslage: alte Website ohne mobile Anpassung, Speisekarte als PDF, auf dem Smartphone kaum zu lesen. Absprungrate mobil 78 Prozent.

Maßnahmen: neue responsive Website mit HTML-Speisekarte, Anruf und Reservierung per Fingertipp, kleine Bilder.

Ergebnis: Lighthouse Mobile von 41 auf 96. Absprungrate mobil auf 32 Prozent gesunken. Doppelt so viele Anrufe über die Website.

Fall 2: Handwerksbetrieb in Thüringen

Ausgangslage: statische HTML-Website, nicht responsive. 64 Prozent der Besuche mobil, dort eine Anfragequote von 0,4 Prozent.

Maßnahmen: Neubau als responsive WordPress-Website nach Mobile-First, klare Schaltflächen für Kontakt und Anfrage.

Ergebnis: Anfragequote mobil auf 2,1 Prozent. Anfragen plus 180 Prozent in sechs Monaten. Sichtbarkeit in der Search Console plus 28 Prozent.

Fall 3: Arztpraxis

Ausgangslage: alte WordPress-Website mit schwerem Page Builder, langsam, mobil unbrauchbar. PageSpeed Mobile 22.

Maßnahmen: neues eigenes Theme nach Mobile-First, kleinere Bilder, wenig JavaScript.

Ergebnis: PageSpeed Mobile von 22 auf 94. Online-Terminbuchungen plus 65 Prozent. Mobile Suchanfragen aus der Umgebung plus 41 Prozent.

Responsive Webdesign und SEO: Mobile-First Indexing

Google bewertet Websites seit 2019 anhand der mobilen Version. Eine responsive Website liefert dieselben Inhalte für alle Geräte unter einer Adresse, es gibt also keine Mobilversion, die Google anders bewerten könnte. Die technischen Details zu Crawling, Indexierung und strukturierten Daten stehen auf unserer Seite zu Technical SEO. Was Sie tun können, wenn Ihre bestehende Website mobil schlecht abschneidet, zeigt die Seite zur Mobile Optimierung.

Häufige Fragen zu Responsive Webdesign

Diese Fragen kommen in Erstgesprächen regelmäßig. Alles Weitere besprechen wir persönlich.

Was ist der Unterschied zwischen Responsive Webdesign und Mobile-Optimierung?

Responsive Webdesign ist der Neubau einer Website nach dem Mobile-First-Prinzip. Mobile-Optimierung verbessert eine bestehende Website für Smartphone und Tablet. Beides hängt zusammen, ist aber nicht dasselbe.

Wie lange dauert die Entwicklung einer responsiven Website?

Kleinere Projekte 4 bis 6 Wochen, größere Auftritte 2 bis 4 Monate.

Was kostet eine responsive Website?

Der Einstieg liegt im mittleren vierstelligen Bereich, größere Projekte fünfstellig. Den Preis nennen wir nach einem unverbindlichen Erstgespräch.

Ist meine alte Website responsive oder nicht?

Das prüfen wir kostenlos auf mehreren Geräten und sagen Ihnen, was zu tun wäre.

Welche Bildschirmgrößen müssen berücksichtigt werden?

Wir richten uns nicht nach Gerätelisten, sondern setzen Breakpoints dort, wo der Inhalt sie braucht. Smartphone, Tablet und Desktop sind die drei Hauptgruppen.

Wirkt sich Responsive Design auf SEO aus?

Ja, deutlich. Google bewertet seit 2019 die mobile Version. Eine nicht responsive Website verliert Rankings.

Was bedeutet Mobile-First konkret?

Die Entwicklung beginnt auf dem Smartphone. Was größere Bildschirme zusätzlich bekommen, kommt danach. Das ergibt weniger Code und schnellere mobile Seiten.

Funktioniert Responsive Webdesign auch mit komplexen Tabellen?

Ja. Je nach Tabelle scrollt sie seitlich, stapelt ihre Spalten oder bekommt auf dem Smartphone eine vereinfachte Darstellung.

Brauchen wir zusätzlich eine native App?

Meist nicht. Eine gute responsive Website deckt fast alles ab. Eine App lohnt sich, wenn Push-Nachrichten oder Offline-Funktionen im Mittelpunkt stehen.

Testet ihr auf echten Geräten?

Ja, auf mindestens zehn eigenen Geräten, dazu BrowserStack für weitere Kombinationen.

Responsive Webdesign in Erfurt: Ihre Agentur vor Ort

Als Webdesign-Agentur in Erfurt bauen wir seit über 20 Jahren responsive Websites für Unternehmen in Thüringen: Handwerksbetriebe, Praxen, Restaurants, mittelständische Firmen.

Beratung vor Ort, kurze Wege, Betreuung nach dem Start. Wer anruft, landet nicht in einer Hotline, sondern bei den Leuten, die die Website bauen und pflegen. Ausgewählte Projekte stehen auf der Referenzen-Seite.

Unser Responsive-Design-Prozess

1. Analyse: Welche Geräte nutzt Ihre Zielgruppe, welche Bildschirmgrößen sind wichtig?
2. Mobile-First Design: Wireframes und Entwürfe beginnen mit der Smartphone-Ansicht.
3. Breakpoints: festgelegt nach Inhalt, nicht nach Gerät.
4. Entwicklung: sauberes HTML, modernes CSS mit Grid und Flexbox, wenig JavaScript.
5. Test: echte Geräte, BrowserStack, Chrome DevTools.
6. Geschwindigkeit: kurze Ladezeiten auf allen Geräten und in allen Netzen.

Weitere Webdesign-Leistungen: Webdesign Erfurt, WordPress Webdesign, Mobile-Optimierung, Corporate Design und Landingpage Design.