Video-Training „Responsive Webdesign“ – Über 8H Praxiswissen zu Konzeption, Workflow, Technik, Gestaltung & Optimierung

responsive-webdesign-video-training

Responsive Webdesign ist aktuell der heißeste Trend der Webdesign-Szene. Aus diesem Grund freue ich mich besonders, euch mein neues Video-Training zu diesem Thema vorstellen zu dürfen. Die bei Galileo Press erschienene DVD kann bereits bei Amazon bestellt werden. Im Buchhandel ist sie ab Ende des Monats erhältlich.
Euch erwarten über 8 Stunden praxisorientiertes Know-how rund um Responsive Webdesign und moderne Webentwicklung. Die Trailer und ein detailliertes Inhaltsverzeichnis findet ihr hier.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

Trailer

Wenn ihr einen schnellen Überblick über die Inhalte der DVD haben wollt, schaut euch am besten den Trailer an.

Produktbeschreibung:

Das Praxis-Training für den neuen Webdesign-Standard! Der Webexperte Jonas Hellwig zeigt Ihnen, wie Sie Ihre Webseiten mit HTML5 und CSS3 für alle Geräte und Auflösungen aufbereiten. Mit diesem Training sind Sie am Puls der Zeit und lernen, wie Sie Responsive Webdesign richtig einsetzen.

Video-Training zu Responsive Webdesign - Cover und DVD
Video-Training zu Responsive Webdesign - Cover und DVD

Machen Sie mit bei zahlreichen Praxisworkshops und entwickeln Sie flexible Designkonzepte, mit denen Sie die Besucher auf Ihren Seiten halten - egal ob auf dem iPad, einem Android-Smartphone oder am Windows-PC.

Jetzt bei Amazon kaufen

Inhaltsverzeichnis:

Vom statischen zum flexiblen Design

  1. Einleitung
  2. Die mobile Evolution
  3. Lösungsansätze für mobile Seiten
  4. Was ist Responsive Webdesign?
  5. Viewport-Varianten berücksichtigen
  6. Weblayouts im Überblick: Fixed, Fluid, Elastic
  7. Pixelmaße in Prozentwerte wandeln
  8. Breakpoints und Media Queries
  9. Adaptive und Responsive Design im Vergleich
  10. Der Meta-Viewport

Best Practices für Responsive Webdesign

  1. Einleitung
  2. Design für Touch-Screens
  3. Neue Layout-Muster
  4. Mobile Navigationskonzepte
  5. Flexible Bilder aufbereiten
  6. Flexible Videos erzeugen
  7. Slider und Carousel-Präsentation

Der Webdesign-Workflow

  1. Einleitung
  2. Der neue Design-Prozess
  3. Graceful Degradation – Webseiten vereinfachen
  4. Mobile First, Content First
  5. Klassische Gestaltungsraster
  6. Workflow für Adaptive Webdesign
  7. Flüssige Gestaltungsraster entwerfen
  8. Prototypen entwickeln
  9. Foundation und Bootstrap
  10. Mit Style-Tiles arbeiten

Reaktionsfähige Webprojekte anlegen und testen

  1. Einleitung
  2. Browser als Entwicklungsumgebung
  3. Nützliche Werkzeuge im Internet
  4. Simulatoren und Emulatoren
  5. Webdesigns testen mit Adobe Edge Inspect
  6. HTML5 Boilerplate, Modernizr & Co.
  7. Frameworks für Adaptive Design
  8. Frameworks für Responsive Design
  9. Fließende Rasterlayouts anlegen mit Adobe Dreamweaver CS6

Design und Typografie für moderne Webseiten

  1. Einleitung
  2. Relative Schriftgrößen
  3. Flexibel gestalten mit CSS3
  4. Endlosmuster entwerfen
  5. Pixelgrafiken mit CSS3 verzerren
  6. Rauschüberlagerung mit CSS3
  7. Webfonts verwenden
  8. Webfont-Icons einsetzen
  9. Schriften optimieren
  10. Responsive Typography

Fehlersuche und Optimierung

  1. Einleitung
  2. Hintergründe optimieren
  3. Bilder im HTML-Code austauschen
  4. Reaktionsfähige Tabellen umsetzen
  5. Image-Maps verwenden
  6. CSS-Sprites im Responsive Design
  7. Bilder richtig komprimieren
  8. Webclip-Icons verwenden
  9. Die Performance verbessern
  10. Browser-Probleme beheben
  11. Formulare optimieren

Praxisprojekt »Graceful Degradation«

  1. Einleitung
  2. Inhalt und Konzeption
  3. Die HTML-Struktur des Projekts
  4. Den Prototyp entwerfen
  5. Media Queries einsetzen
  6. Das Design umsetzen
  7. Die Navigation optimieren

Praxisprojekt »Mobile First«

  1. Einleitung
  2. Inhalt und Konzeption
  3. Mockup und HTML-Basis entwickeln
  4. Den Prototyp anlegen
  5. Breakpoints hinzufügen
  6. Eine Navigation als Select-Liste
  7. Eine Off-Canvas-Navigation umsetzen
  8. Das Design entwickeln

Responsive Webdesign für Retina-Displays

  1. Einleitung
  2. Probleme mit Retina-Displays
  3. Grafiken optimieren und integrieren
  4. CSS-Sprites verbessern
  5. SVG-Grafiken erstellen und einbinden
  6. Hilfreiche Skripte

Einführung in Adobe Edge Reflow

  1. Einleitung
  2. Die Oberfläche von Edge Reflow
  3. Flüssige Raster entwickeln
  4. Boxen erstellen und gestalten
  5. Typographie mit Adobe Edge Reflow
  6. Das Layout umstrukturieren
  7. Optimierung und Browser-Vorschau

Jetzt bei Amazon kaufen

Probe-Lektion: Breakpoints und Media Queries einsetzen

In diesem Video zeige ich euch wie Ihr mit Hilfe von Media Queries das Layout einer Website in Grenzbereichen umstrukturiert. Dabei setzen wir Media Queries sowohl in der klassischen Variante (max-width) als auch nach dem Mobile-First-Prinzip (min-width) ein und lernen auch die technischen Hintergründe der CSS-Technologie kennen.

Probe-Lektion: Mobile First, Content First

"Mobile First" ist eines der prominenteren Stichworte im Umfeld von Responsive Design. In diesem Video erkläre ich die konzeptionellen Hintergründe und zeige die technische Umsetzung mit CSS3 an einem Beispiel.

Probe-Lektion: Rauschüberlagerung mit CSS3

Mit CSS3 erzeugte Grafiken haben oft eine zu glatte, technische Darstellung ohne eine Körnung. In diesem Video zeige ich euch, wie Ihr die Flexibilität von CSS3-Grafiken mit der detaillierten Gestaltung einer Pixelgrafik kombinieren könnt.

Probe-Lektion: Hintergründe optimieren

Die grafischen Elemente einer Website müssen flexibel gestaltet werden, um den Anforderungen im Responsive Webdesign zu entsprechen. In diesem Video zeige ich euch welche Möglichkeiten es im Bereich der CSS-Hintergründe gibt und wie die CSS-Eigenschaft background-size genutzt werden kann.

Probe-Lektion: Den Prototypen anlegen

Ein Großteil des "responsive Workflows" geschieht direkt im Browser. In diesem Video zeige ich euch wie nach dem "Mobile First"-Prinzip ein Prototyp live im Browser entwickelt wird. Diese Ausgangsbasis wird dann Stück für Stück technisch und optisch erweitert.

Wenn ihr Fragen zur DVD habt, meldet euch gerne per E-Mail oder über die Kommentar-Funktion dieser Seite.

Jetzt bei Amazon kaufen