Seminar/Schulung: Responsive & Intrinsic Design

In diesem Seminar zeigen wir, wie Responsive Design-Projekte heute gestaltet werden. Wir erklären hands-on wie Layouts und Komponenten nach dem Mobile First-Prinzip für verschiedene Displaygrößen, Bedienkonzepte und Betriebssysteme gestaltet werden. Dabei gehen wir über klassisches RWD hinaus. Wir zeigen wie mit modernen Konzepten stufenlos skalierende und intrinsisch gestaltete Layouts entstehen, die in jeder Situation überzeugen.

Kurzbeschreibung

Das Thema »Responsive Web Design« bewegt die Web-Szene nun bereits seit Jahren. Doch unter »responsive« verstehen sowohl beauftragende Unternehmen als auch Agenturen oft lediglich die Optimierung einer Website für Smartphones und Tablets. In Wahrheit ist Responsive Web Design eine neue Philosophie im Web Design und erfordert ein Umdenken in Beratung, Projektleitung, Konzeption, Design und Entwicklung.

Erfolgreiche responsive Projekte werden interdisziplinär umgesetzt. Jede am Projekt beteiligte Person muss daher verstehen, was das Team macht und in welchen Bereichen sich Schwierigkeiten ergeben. Beratung und Projektleitung wiederum müssen dafür sorgen, dass Kundinnen und Kunden die Vorteile des »neuen« Workflows verstehen und in jeder Phase des Projekts von der Agentur geleitet werden.

Angefangen bei den Grundlagen von Responsive Design über Layoutmuster, Touch-Screen-Optimierung und Navigationskonzepte bis hin zu konzeptionellen Ansätzen wie Purpose First, Mobile First und Progressive Enhancement werden Sie in diesem Seminar alle Aspekte von Responsive Design kennenlernen, ohne dabei tiefer als notwendig in die technischen Details einzusteigen. Sie lernen, wo die Herausforderungen im Responsive Web Design liegen, wie Sie Fehler in Gestaltung und Entwicklung vermeiden können und was Sie bei der Planung und Kommunikation von responsiven Websites beachten sollten.

Agenda

Die folgenden Inhalte sind unsere Empfehlung für einen fundierten Einstieg in das Thema bzw. werden häufig angefragt. Gerne passen wir die Agenda auf Ihre individuellen Anforderungen hin an, bzw. beziehen aktuelle Praxisprojekte mit ein. Wir stimmen uns dazu im Vorfeld der Schulung persönlich mit Ihnen ab.

Konzeptionelle Grundlagen

Das »Content First«-Prinzip
Das »Purpose First«-Prinzip
Das Nutzungsverhalten auf mobilen Endgeräten kennen und Konventionen berücksichtigen
Responsive Websites im Vergleich zu PWA, AMP & Co.
Die Unterschiede kennen: Responsive Design, Adaptive Design, responsive Layout und adaptive Layout
Intrinsic Design
Charakteristika des Responsive Web Design bzw. modernen Webdesigns
Klassischer & skalierter Viewport – Websites für unterschiedliche Geräte und für verschiedene Zoomstufen konzipieren
Die Layout-Typen einer Website – Fixed-, Fluid- und Elastic Layout
Statische Layouts in responsive Layouts überführen
Layouts mit Breakpoints & Media Queries umstrukturieren
Die Hintergründe von konzeptionellem, gestalterischem und technischem »Mobile First« verstehen
Informationsarchitektur und Navigationsbereiche planen

Responsive Workflow

Der neue Workflow im Überblick
Design im Browser
Frameworks – Bootstrap & Co.
Gestaltung mit Design Tokens und Style Tiles
Design Systeme und »Atomic Design«
»Graceful Degradation« & »Progressive Enhancement«
Teambuilding – was charakterisiert erfolgreiche Web-Teams?
Praxisbeispiele & Hilfsmittel

Flexible Layouts

Flexible Gestaltungsraster im Responsive Web Design
Konzeptionelle Hintergründe von float-basierten Rastern, Flexbox und CSS Grids kennen
Gestaltung für verschiedene Bedienkonzepte (Touch, Voice etc.)
Layout-Muster: Mostly Fluid, Column Drop, Off-Canvas & Co.
Content Choreography: Inhalte an verschiedenen Positionen anzeigen
Navigationsformen: DropDown, Mega Menu, Priority+ & Co.
Responsive Navigationen planen
Responsive Website-Templates und -Komponenten planen
Moderne Design Tools (Sketch, XD, Figma etc.) im Zusammenhang mit Responsive Design

Grafiken & Inhalte

Grafiken im Responsive Design – Herausforderungen beim Umgang mit Bildformaten, Bildausschnitten, Bildschirmauflösungen, Redakteuren und Technologien
Responsive Typography – Texte flexibel und lesbar gestalten
Tabellen für kleine Displays konzipieren und adaptieren
Videos im Responsive Design
Formulare für die Nutzung auf Smartphones und Tablets optimieren
Layouts und Inhalte für hochauflösende Displays vorbereiten

Optimierung

Tools zum Testen von flexiblen Websites
Die Arbeit mit Hilfe eine Performance-Budgets

Kommunikation

Verkaufsargumente für Responsive Design
Angebote verlässlicher kalkulieren
Kundenführung im responsive Workflow
Verkaufsargument »Workflow«

Diese Schulung bieten wir auch mit technischem Schwerpunkt an.
Detaillierte Informationen finden Sie hier.

Dozent: Jonas Hellwig

Jonas Hellwig ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Feedback zu unseren Schulungen

Wir bedanken uns für die tolle Schulung. Es wurde uns wirklich viel gezeigt, was wir so noch nicht wussten oder nicht richtig angewendet haben. Wir freuen uns schon darauf, unsere nächsten Projekte auf eine neue und ordentlichere Art anzugehen :-).

Juli 2026, Emily Klassen, ahorn. gmbh – agentur für gestaltung und medienproduktion
Wir haben ein klassisches Kreativteam auf Figma geschult bekommen – keine leichte Aufgabe, aber Jonas als Trainer hat das souverän gemacht. Er versteht es, die beiden Welten Kreation und Development mit fundiertem Hintergrundwissen zu verbinden sowie die Vor- und Nachteile verschiedener Workflows aufzuzeigen. Er konnte wirklich jede der Fragen aus dem Team immer gut und plausibel erklären. Das Team ist nun ready for Figma.

Juni 2026, Kai Baumann, Creative Director, Olixir
Ich kann die Online-Schulungen der Kulturbanausen absolut empfehlen. Dieses Team weiß einfach, wovon es spricht, und kann sein Wissen auf Augenhöhe vermitteln. Ich, als Webdesignerin, habe in den 2 Tagen Workshop meine Fähigkeiten im Umgang mit Figma erheblich verbessern können und wirklich wertvolle Impulse für einen besseren Workflow erhalten, von Konzeption über Design bis Web-Development. Vielen Dank und bis zum nächsten Mal!

Juni 2026, Adriani Schmidt, fellowz GmbH