Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Responsive Webdesign

Webdesign für alle Geräte

Die Zutaten für einen überzeugenden Webauftritt auf allen Plattformen finden Sie in diesem Training. Lernen Sie moderne Design-Konzepte kennen und erfahren Sie, wie Sie diese mit CSS3 und HTML5 optimal umsetzen.

Grafik, Schrift und Code optimieren

Flexibilität ist das Zauberwort für ein modernes Webdesign. Lernen Sie, wie Sie Web-Schriften anpassen, Tabellen und CSS-Sprites reaktionsfähig machen und Grafiken für Retina-Displays aufbereiten.

Schnell Prototypen entwickeln

Responsive Webdesign erfordert völlig neue Design-Workflows. Erfahren Sie vom Web-Experten, wie Sie Ihre Webseite von Anfang an richtig konzipieren, entwickeln und testen.

Trailer & Probe-Lektionen

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Inhaltsverzeichnis

Responsive Webdesign im Überblick

  • Einleitung
  • Was ist Responsive Webdesign?
  • Die Grundideen und Konzepte
  • Mobile Website, Responsive Design, Adaptive Design & RESS
  • Die klassischen Layout-Typen
  • Media Types und Media Queries
  • Adaptive Design oder Responsive Design
  • Das Mobile-First-Konzept
  • Viewport und Meta-Viewport
  • Touchscreen-Besonderheiten
  • »Geister-Schaltflächen« im Browser gestalten
  • Systemfunktionen ermitteln

Konzepte für die Website-Architektur

  • Einleitung
  • Statische Layouts flexibilisieren
  • Layouts berechnen mit »calc()«
  • Die Reihenfolge von Elementen
  • Das Layout-Konzept »Mostly-Fluid«
  • Das Layout-Konzept »Column-Drop«
  • Der »Layout-Shifter«
  • Proportional skalierende Kachel-Layouts
  • Einen »Sticky Footer« aufbauen
  • Die Viewport-Einheiten »vh« und »vw«

Neue Arbeitsabläufe im Responsive Webdesign

  • Einleitung
  • Veränderte Herausforderungen
  • Frameworks, Mustergalerien und Prototypen verwenden
  • Design-Module nutzen
  • Stile entwerfen und festlegen
  • Der neue Look von responsiven Websites
  • Breakpoints intelligent setzen
  • Das Responsive Design testen

Gestaltungsraster verwenden

  • Einleitung
  • Gestaltungsraster und CSS-Grids
  • Ein responsives Raster planen
  • Ein responsives Gestaltungsraster ausarbeiten
  • Die Bedeutung von »box-sizing: border-box«
  • Raster verschachteln
  • Inhalte horizontal verschieben
  • Rasterspalten einrücken
  • Die visuelle Hierarchie

Content Choreography

  • Einleitung
  • Das Konzept hinter Content Choreography
  • Inhalte austauschen mit »display: table-caption«
  • Die Flexbox-Eigenschaften »display« und »flex«
  • Die Flexbox-Eigenschaften »justify-content« und »align-items«
  • Die Flexbox-Eigenschaft »order«

Rapid Prototyping in der Praxis

  • Einleitung
  • Codevorlagen und Standards
  • Fließende Rasterlayouts
  • Das passende Framework wählen
  • Die Frameworks »Bootstrap«, »Foundation« und »Pure«
  • Einen Prototyp erstellen mit Bootstrap
  • Einen Prototyp erstellen mit Foundation
  • Einen Prototyp entwerfen mit Webflow (Teil 1)
  • Einen Prototyp entwerfen mit Webflow (Teil 2)
  • Einen Prototyp entwerfen mit Reflow

Moderne Webtypografie

  • Einleitung
  • Typografie im Web
  • Flexible Schrifteinheiten
  • Texte lesbar gestalten
  • Wortumbrüche erzwingen
  • Schriftgröße und Viewport
  • Webfonts verwenden
  • Webfont-Icons verwenden

Die Navigation – Konzepte und Lösungen

  • Einleitung
  • Navigation mit Plan B
  • Navigationsmenüs im Fußbereich
  • Ein Navigationsmenü als Auswahlliste
  • Navigationsslider mit JavaScript
  • Eine Off-Canvas-Navigation mit JavaScript
  • Navigation in mehreren Ebenen
  • Horizontale Navigationsslider
  • Karteireiter und Akkordeons

Flexible Grafikelemente

  • Einleitung
  • HTML-Grafik oder CSS-Grafik?
  • Flexible Hintergrundgrafiken
  • Hintergrundgrafiken mit Media Queries austauschen
  • Bilder flexibel gestalten
  • Fokuspunkte definieren
  • Die Attribute »srcset« und »sizes«
  • Art Direction und das Element <picture>
  • Skripte und Polyfills

Flexible Inhaltselemente

  • Einleitung
  • Videos skalieren
  • Tabellen optimieren
  • Image Maps optimieren
  • Einen Slider integrieren
  • Formulare und Kontaktmöglichkeiten optimieren
  • Funktionen an das Betriebssystem auslagern

Design für hochauflösende Bildschirme

  • Einleitung
  • Die technischen Hintergründe
  • Grafiken austauschen per CSS
  • Grafiken austauschen per HTML
  • Das SVG-Format verwenden
  • SVG-Icons einsetzen

Die Ladezeiten optimieren

  • Einleitung
  • HTTP-Requests minimieren
  • CSS-Sprites und SVG-Sprites einsetzen
  • SVG-Sprite-Code im Dokument einbetten
  • Grafiken optimieren

JavaScript für Responsive Webdesign

  • Einleitung
  • Bedingtes Laden
  • Media Queries mit JavaScript umsetzen
  • Auf Größenänderungen des Fensters reagieren
  • Hilfreiche Skripte

Kunden-Feedback zu diesem Video-Training

Ich habe letzte Woche die DVD „Responsive Webdesign – Das umfassende Praxis-Training“ erworben und bin total begeistert davon.

März 2015, Michael Fergon

Feedback & Ergänzungen – 6 Kommentare

  1. Ute
    schrieb am 23.06.2016 um 12:42 Uhr:

    Hallo Jonas.

    Ich kenne bereits die DVD „Modernes Webdesign“ macht es dann Sinn auch die DVD „Responsive Webdesign“ zu kaufen? Ein paar Kapitel scheinen zumindest nach der Headline zu urteilen auf beiden DVDs zu sein…

    Viele Grüße
    Ute

    Antworten
    • Jonas
      schrieb am 23.06.2016 um 18:16 Uhr:

      Hallo Ute,

      vielen Dank für deine Nachricht und dein Interesse an »Responsive Webdesign«. Ich hoffe die folgenden Infos helfen dir weiter:

      Das Training »Modernes Webdesign« ist deutlich stärker auf den allgemeinen Workflow eines Webprojekts und auf Gestaltung und Konzeption ausgerichtet. Hier geht viel um die Kombination von Photoshop und CSS/HTML/Responsive. Aber das Training kennst du ja bereits.

      Das Training »Responsive Webdesign« ist im Gegensatz zu »Modernes Webdesign« weniger Workflow-orientiert und behandelt stärker technische Einzellösungen. Es ist technisch anspruchsvoller. Es wird kein Beispielprojekt wie bei »Modernes Webdesign« beschrieben, dafür viele einzelne Themen. Allerdings kann ich aus didaktischer Sicht keine Dopplungen vermeiden, da die Themen modernes und responsives Design natürlich nah beieinander liegen.
      Und da wir nicht von unseren Kunden erwarten können, mehr als eine DVD zu kaufen, und weil jedes Training in sich abgeschlossen alle zum Thema passenden Inhalte abdecken muss, lassen sich einige Wiederholungen leider nicht vermeiden. Die Dopplungen sind hauptsächlich in den Grundlagen aus Kapitel 1 und beim Thema Gestaltungsraster zu finden.

      Ich hoffe das hilft dir weiter. Beste Grüße, Jonas

      Antworten
  2. Olaf Müller-Hübers
    schrieb am 29.05.2016 um 06:41 Uhr:

    Betr.: Jonas Hellwig, Galileo Responsive Webdesign 2015
    Fehlerhafte Lektion 08_04

    Hallo Jonas!
    Zunächst viel Lob für die didaktisch super gemachte DVD Responsive Webdesign 2015

    Leider hat sich m.E. ein Fehler in der Lektion 08.04 eingeschlichen.
    Werden in der Navigationsliste die zunächst mit Raute versehen Links durch konkrete HTML-Seiten ersetzt, lassen sich diese bei einem Viewport kleiner 655px in der nun aufklappenden Selectliste
    darstellen und auch anspringen.
    Soweit so gut. Bei der nun jeweils aufgerufenen Seite bleibt dann allerdings als oberster Menüpunkt immer der erste Link des Navigationsmenüs bestehen, anstatt jenen der gerade aufgerufenen Seite darzustellen (getestet mit aktuellen Versionen von Firefox, Edge, Chrome).
    Die innerhalb der Selectliste dargestellten Menüpunkte können angesprungen werden – allerdings nicht(??) der erste Link der Navigation.
    Nimmt man die konkreten HTML-Links („xyz.html“) der einzelnen Menüpunkte wieder heraus und ersetzt sie durch die Raute, funktioniert die Selectliste wunderbar: als oberster Menüpunkt erscheint jener der gerade aufgerufenen Seite und alle Menüpunkte lassen sich selektieren. Macht nun leider keinen Sinn mehr, da man mit der Platzhalterraute nicht navigieren kann.
    Diese merkwürdige Verhalten kann unter
    http://www.medconzept.de
    nachvollzogen werden.

    In der Hoffnung auf baldige Erleuchtung verbleibt mit freundlichen Grüßen
    Olaf Müller-Hübers

    ************************************************************
    Dr. Olaf Müller-Hübers
    Verdunstrasse 28
    28211 Bremen
    Tel 0421 43035438
    Mobil 0176 63677879
    E-Mail mellerhuebers@googlemailcom

    Antworten
    • Jonas
      schrieb am 08.06.2016 um 18:26 Uhr:

      vielen Dank für den Feedback zur DVD. Das angesprochene Problem scheint ein Fehler im tinynav-Script zu sein. Ich kann das Problem auf verschiedenen Demo-Seiten nachvollziehen und man findet in Google auch direkt etwas dazu. [Link redaktionell entfernt].

      Viele Grüße, Jonas

      Antworten
  3. Stephan
    schrieb am 09.02.2016 um 18:12 Uhr:

    Hallo Jonas,
    ist für deine Responsive Webdesign DVD ein Nachfolger geplant?
    Oder ist das noch der aktuelle Stand.

    Gruß
    Stephan

    Antworten
    • Jonas
      schrieb am 10.02.2016 um 08:59 Uhr:

      Hallo Stephan, vielen Dank für dein Interesse. Bisher ist kein Nachfolger geplant. Diese Version hier ist bereits das zweite komplett neu aufgenommene Training zu diesem Thema. Seither hat sich responsive Design jedoch noch nicht so stark weiterentwickelt, dass es ein komplett neues Training rechtfertigt.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.