Responsive Web Design – Technische Umsetzung

Ein Seminar für Web­‐Designer, Front­‐End­‐Entwickler und Techniker mit Jonas Hellwig

  • Konzept

    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.

  • 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. 

  • 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  o Tabellen im Responsive Design o Formulare
    • Optimierung für hochauflösende Displays
    • SVG und Webfonts
    • Performance‐Optimierung
    • Funktionen an das Betriebssystem abgeben
  • Teilnahmeinformationen

    Für wen ist das Seminar gedacht?

    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.

650,00
zzgl. ges. Mwst.
Web-Code
PW120

Diese Seminare könnten Sie auch interessieren