Responsive Webdesign
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
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
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
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
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
Hallo Jonas,
ist für deine Responsive Webdesign DVD ein Nachfolger geplant?
Oder ist das noch der aktuelle Stand.
Gruß
Stephan
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.