Produktbeschreibung

responsive-webdesign-cover

Das Praxis-Training für den neuen Webdesign-Standard! Der Webexperte Jonas Hellwig zeigt Ihnen, wie Sie Ihre Websites mit HTML, CSS und JavaScript für alle Geräte und Auflösungen optimal aufbereiten. Mit diesem Training sind Sie am Puls der Zeit und erfahren, wie Sie Responsive Webdesign richtig einsetzen. Lernen Sie die neuen Design-Workflows von Grund auf kennen, erstellen Sie ganz früh Prototypen und entwickeln so Ihre Websites von Anfang an richtig. Sie lernen an zahlreichen Praxisbeispielen, worauf Sie bei der Gestaltung für mobile Endgeräte achten sollten und entwickeln flexible Designkonzepte, mit denen Sie die Besucher Ihrer Website begeistern – egal ob auf dem Tablet, Smartphone oder einem PC.

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

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

Diskussion zu diesem Produkt

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

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

  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

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

      Viele Grüße, Jonas

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

    • 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

Die Kommentare sind geschlossen.

Mit diesen Kunden haben wir bereits erfolgreich zusammengearbeitet.

Worauf warten Sie noch?

Sie haben bereits eine Idee für ein gemeinsames Projekt? Dann nutzen Sie unsere Online-Projektplaner!

Wir planen ein Web Design-Projekt
Wir planen ein Inhouse-Seminar

Bei allgemeinen Fragen, Anregungen oder Kritik nutzen Sie bitte das Kontaktformular.