icon-arrow-lefticon-arrow

Kurzbeschreibung

Das Thema Responsive Web Design beschäftigt Webdesigner bereits seit einigen Jahren.
Neben großen konzeptionellen Herausforderungen müssen sich auch Entwickler mit neuen Techniken vertraut machen um flexible und robuste Layouts entwickeln zu können.

In diesem Seminar erfahren Sie wie moderne Web Layouts technisch umgesetzt werden. Unabhängig von der Größe des Displays, von der Bildschirmauflösung oder dem verwendeten Browser. Anhand einzelner in sich abgeschlossener Übungen entwickeln Sie flexible Gestaltungsraster und lernen die Vor‐ und Nachteile populärer Frameworks wie Bootstrap und Foundation kennen. Sie gestalten lesbare Texte, lernen die neuen CSS‐Layout‐Module kennen und setzen Breakpoints und Media Queries bewusst und zukunftssicher ein.

Auch die Optimierung von Grafiken für hochauflösende Displays und anspruchsvolle Themen wie Responsive Images oder Content Choreography stellen für Sie nach diesem Seminar keine Hindernisse mehr dar.

Inhalte

Technische Grundlagen

  • Klassischer & skalierter Viewport
  • @viewport
  • Die Layout-Typen einer Website
  • Statische Layouts in responsive Layouts überführen
  • Breakpoints & Media Queries
  • Adaptive Layout & Responsive Layout
  • »Progressive Enhancement«
  • »Mobile First« & »Content First«
  • Design im Browser

Flexible Layouts entwickeln

  • Flexible Gestaltungsraster entwickeln
  • Ein verändertes Box-Modell
  • Verschachtelte Gestaltungsraster
  • Content Choreography
  • Das Flexbox-Modell
  • Tipps und Tricks mit display:table
  • Responsive Typography

Den Workflow optimieren

  • Rapid Prototyping – Schnell funktionale Protoypen entwickeln
  • Platzhalter und Code-Vorlagen
  • Frameworks
  • Bootstrap, Foundation & Co.
  • Responsive Design testen
  • Zukunftsichere Websites entwickeln
  • Breakpoints richtig setzen

Technische Einzellösungen

  • Grafiken im Responsive Design – picture, srcset & Co.
  • Videos im Responsive Design
  • Tabellen im Responsive Design
  • Formulare
  • Optimierung für hochauflösende Displays
  • SVG und Webfonts
  • Performance‐Optimierung
  • Funktionen an das Betriebssystem abgeben

Ziele / Nutzen

In diesem Seminar erlangen die Teilnehmer ein fundiertes Wissen über die technischen Grundlagen im Zusammenhang mit Responsive Design. Sie erfahren wie sie Ihren Workflow optimieren können, welche Tools geeignet bzw. ungeeignet sind und kennen auch fortgeschrittene Techniken zur Erstellung flexibler Layouts bzw. komplexer inhaltlicher Komponenten.

 

Teilnahmeinformationen

Das Seminar richtet sich an Web­‐Designer mit soliden HTML und CSS­‐Kenntnissen. Es ist ein Workshop mit Diskussionscharakter geplant. Die Übungen werden gemeinsam am Computer, bzw. an Beamer und Flipchart erarbeitet.

Die Sprache des Seminars ist Deutsch. Die Schulungsunterlagen werden ebenfalls in deutscher Sprache bereitgestellt.

Dozent: Jonas Hellwig

Jonas HellwigJonas Hellwig arbeitet als Web Designer, Video-Trainer, Fachbuchautor und Dozent in Berlin. Neben UX/UI-, Frontend- & Responsive Design hat er sich auf WordPress und Workflow-Optimierungen im Web Design spezialisiert und ist Gründer der Agentur kulturbanause® (kulturbanause.de). Auf blog.kulturbanause.de veröffentlicht er interessante Artikel, Tipps und Tutorials zum Thema Web Design. Jonas Hellwig ist regelmäßig als Sprecher auf Veranstaltungen zum Thema Webdesign anzutreffen und unterstützt Digitalagenturen und Unternehmen bei der Planung und bei der technischen Umsetzung von Web-Projekten.

Kunden-Feedback zu unseren öffentlichen Schulungen

Am 26.11. habe ich dem Tagesseminar Responsive Web Design - Die technische Umsetzung - mit Jonas Hellwig (kulturbanause) teilgenommen. Ich bin mit dem Anliegen angereist, als Lehrender meinen aktuellen Kenntnisstand zu überprüfen und durch die Erfahrungen und Entwicklungen aus der Agenturpraxis zu ergänzen. Das Seminar hat meine Erwartungen vollständig erfüllt. Dem Referenten ist es gelungen, den gepackten Stoff didaktisch augezeichnet aufzuarbeiten und trotz seiner manchmal vorhandenen Komplexität verständlich und nachvollziehbar zu vermitteln. Eine umfangreiche digitale Seminardokumentation hilft, die Inhalte noch einmal zu rekapitulieren.

Dezember 2015, Prof. Andreas Baumgart, Hochschule für Angewandte Wissenschaften Hamburg

Vielen Dank für die sehr kurzweiligen, spannenden Seminartage. Ich werde vielen von dem Gelernten direkt in meinen Projekten berücksichtigen. Auf konkrete Fragestellungen habe ich effiziente Antworten erhalten.

April 2017, Ann-Kathrin Fischer, Projektleitung/Konzeption/Layout, soldan kommunikation

 

Ihr Kommentar zu diesem Termin

Ihr Kommentar zu diesem Termin

Bei Fragen, Anregungen oder Kritik zu diesem Termin, nutzen Sie bitte das Kommentar-Formular.

Ihr Kommentar wird überprüft bevor er auf der Website erscheint. Nicht themenrelevante Beiträge werden gelöscht.

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir sind nicht auf eine Branche festgelegt und haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: