Die Referenz für Responsive Webdesign!

Trailer Einführung ins Video-Training

Responsive Webdesign

Das umfassende Praxis-Training

€ 39,90

Sofort verfügbar

€ 39,90

Sofort lieferbar

Video-Training, , Spielzeit 12 Stunden,
Windows, Mac, iOS (App erhältlich im App Store)
ISBN 978-3-8362-3468-9
Video-Training, , Spielzeit 12 Stunden,
Windows, Mac, iOS (App erhältlich im App Store)
ISBN 978-3-8362-3669-0

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.

  • Responsive Webdesign für alle Anwendungsfälle
  • Design und Code vom Profi erklärt
  • Komplettes Beispielmaterial mit HTML- und CSS-Quellcode enthalten
  • Alle Videos auch lauffähig auf iPad und iPhone

Blicke ins Training

    Jonas Hellwig ist einer der gefragtesten Webdesigner in Deutschland. Er zeigt Ihnen mit zahlreichen sehr anschaulichen Beispielen, wie Sie Ihre Webseiten flexibel machen.

    Der Trainer
    • 01:57
      Trailer
    • 07:39
      2.2 Statische Layouts flexibilisieren
    • 11:48
      4.2 Gestaltungsraster und CSS-Grids
    • 12:52
      6.6 Einen Prototyp erstellen mit Bootstrap
    • 11:10
      8.6 Eine Off-Canvas-Navigation mit JavaScript
    • 09:31
      11.5 Das SVG-Format verwenden

    Was möchten Sie lernen?

    1. Webdesign für alle Geräte

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

    2. Grafik, Schrift und Code optimieren

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

    3. Schnell Prototypen entwickeln

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

    Inhaltsverzeichnis

    • 1. Responsive Webdesign im Überblick
      01:36 Std.
      • 1.1 Einleitung00:27 Min.
      • 1.2 Was ist Responsive Webdesign?02:05 Min.
      • 1.3 Die Grundideen und Konzepte08:55 Min.
      • 1.4 Mobile Website, Responsive Design, Adaptive Design & RESS15:55 Min.
      • 1.5 Die klassischen Layout-Typen07:02 Min.
      • 1.6 Media Types und Media Queries17:51 Min.
      • 1.7 Adaptive Design oder Responsive Design08:13 Min.
      • 1.8 Das Mobile-First-Konzept08:52 Min.
      • 1.9 Viewport und Meta-Viewport04:39 Min.
      • 1.10 Touchscreen-Besonderheiten04:24 Min.
      • 1.11 »Geister-Schaltflächen« im Browser gestalten09:06 Min.
      • 1.12 Systemfunktionen ermitteln08:49 Min.
    • 2. Konzepte für die Website-Architektur
      00:50 Std.
      • 2.1 Einleitung00:25 Min.
      • 2.2 Statische Layouts flexibilisieren07:39 Min.
      • 2.3 Layouts berechnen mit »calc()«03:00 Min.
      • 2.4 Die Reihenfolge von Elementen05:11 Min.
      • 2.5 Das Layout-Konzept »Mostly-Fluid«03:27 Min.
      • 2.6 Das Layout-Konzept »Column-Drop«07:28 Min.
      • 2.7 Der »Layout-Shifter«02:51 Min.
      • 2.8 Proportional skalierende Kachel-Layouts05:14 Min.
      • 2.9 Einen »Sticky Footer« aufbauen09:54 Min.
      • 2.10 Die Viewport-Einheiten »vh« und »vw«04:59 Min.
    • 3. Neue Arbeitsabläufe im Responsive Webdesign
      00:54 Std.
      • 3.1 Einleitung00:25 Min.
      • 3.2 Veränderte Herausforderungen05:27 Min.
      • 3.3 Frameworks, Mustergalerien und Prototypen verwenden07:34 Min.
      • 3.4 Design-Module nutzen06:38 Min.
      • 3.5 Stile entwerfen und festlegen09:42 Min.
      • 3.6 Der neue Look von responsiven Websites03:22 Min.
      • 3.7 Breakpoints intelligent setzen05:53 Min.
      • 3.8 Das Responsive Design testen15:32 Min.
    • 4. Gestaltungsraster verwenden
      01:10 Std.
      • 4.1 Einleitung00:21 Min.
      • 4.2 Gestaltungsraster und CSS-Grids11:48 Min.
      • 4.3 Ein responsives Raster planen05:25 Min.
      • 4.4 Ein responsives Gestaltungsraster ausarbeiten16:24 Min.
      • 4.5 Die Bedeutung von »box-sizing: border-box«07:14 Min.
      • 4.6 Raster verschachteln05:12 Min.
      • 4.7 Inhalte horizontal verschieben03:18 Min.
      • 4.8 Rasterspalten einrücken07:35 Min.
      • 4.9 Die visuelle Hierarchie13:35 Min.
    • 5. Content Choreography
      00:28 Std.
      • 5.1 Einleitung00:21 Min.
      • 5.2 Das Konzept hinter Content Choreography01:31 Min.
      • 5.3 Inhalte austauschen mit »display: table-caption«06:30 Min.
      • 5.4 Die Flexbox-Eigenschaften »display« und »flex«10:03 Min.
      • 5.5 Die Flexbox-Eigenschaften »justify-content« und »align-items«05:06 Min.
      • 5.6 Die Flexbox-Eigenschaft »order«04:44 Min.
    • 6. Rapid Prototyping in der Praxis
      01:42 Std.
      • 6.1 Einleitung00:22 Min.
      • 6.2 Codevorlagen und Standards09:46 Min.
      • 6.3 Fließende Rasterlayouts03:54 Min.
      • 6.4 Das passende Framework wählen04:16 Min.
      • 6.5 Die Frameworks »Bootstrap«, »Foundation« und »Pure«06:44 Min.
      • 6.6 Einen Prototyp erstellen mit Bootstrap12:52 Min.
      • 6.7 Einen Prototyp erstellen mit Foundation14:25 Min.
      • 6.8 Einen Prototyp entwerfen mit Webflow (Teil 1)17:23 Min.
      • 6.9 Einen Prototyp entwerfen mit Webflow (Teil 2)10:31 Min.
      • 6.10 Einen Prototyp entwerfen mit Reflow22:16 Min.
    • 7. Moderne Webtypografie
      00:56 Std.
      • 7.1 Einleitung00:17 Min.
      • 7.2 Typografie im Web07:17 Min.
      • 7.3 Flexible Schrifteinheiten14:21 Min.
      • 7.4 Texte lesbar gestalten07:43 Min.
      • 7.5 Wortumbrüche erzwingen05:29 Min.
      • 7.6 Schriftgröße und Viewport03:03 Min.
      • 7.7 Webfonts verwenden08:00 Min.
      • 7.8 Webfont-Icons verwenden10:11 Min.
    • 8. Die Navigation – Konzepte und Lösungen
      00:54 Std.
      • 8.1 Einleitung00:18 Min.
      • 8.2 Navigation mit Plan B04:19 Min.
      • 8.3 Navigationsmenüs im Fußbereich03:25 Min.
      • 8.4 Ein Navigationsmenü als Auswahlliste09:25 Min.
      • 8.5 Navigationsslider mit JavaScript10:50 Min.
      • 8.6 Eine Off-Canvas-Navigation mit JavaScript11:10 Min.
      • 8.7 Navigation in mehreren Ebenen04:54 Min.
      • 8.8 Horizontale Navigationsslider07:13 Min.
      • 8.9 Karteireiter und Akkordeons02:49 Min.
    • 9. Flexible Grafikelemente
      01:03 Std.
      • 9.1 Einleitung00:28 Min.
      • 9.2 HTML-Grafik oder CSS-Grafik?04:00 Min.
      • 9.3 Flexible Hintergrundgrafiken13:01 Min.
      • 9.4 Hintergrundgrafiken mit Media Queries austauschen06:34 Min.
      • 9.5 Bilder flexibel gestalten07:41 Min.
      • 9.6 Fokuspunkte definieren05:55 Min.
      • 9.7 Die Attribute »srcset« und »sizes«15:38 Min.
      • 9.8 Art Direction und das Element <picture>06:40 Min.
      • 9.9 Skripte und Polyfills03:41 Min.
    • 10. Flexible Inhaltselemente
      00:46 Std.
      • 10.1 Einleitung00:22 Min.
      • 10.2 Videos skalieren06:45 Min.
      • 10.3 Tabellen optimieren12:24 Min.
      • 10.4 Image Maps optimieren03:55 Min.
      • 10.5 Einen Slider integrieren10:13 Min.
      • 10.6 Formulare und Kontaktmöglichkeiten optimieren08:50 Min.
      • 10.7 Funktionen an das Betriebssystem auslagern03:46 Min.
    • 11. Design für hochauflösende Bildschirme
      00:38 Std.
      • 11.1 Einleitung00:24 Min.
      • 11.2 Die technischen Hintergründe08:38 Min.
      • 11.3 Grafiken austauschen per CSS10:53 Min.
      • 11.4 Grafiken austauschen per HTML01:51 Min.
      • 11.5 Das SVG-Format verwenden09:31 Min.
      • 11.6 SVG-Icons einsetzen06:52 Min.
    • 12. Die Ladezeiten optimieren
      00:35 Std.
      • 12.1 Einleitung00:23 Min.
      • 12.2 HTTP-Requests minimieren05:36 Min.
      • 12.3 CSS-Sprites und SVG-Sprites einsetzen08:42 Min.
      • 12.4 SVG-Sprite-Code im Dokument einbetten11:19 Min.
      • 12.5 Grafiken optimieren09:01 Min.
    • 13. JavaScript für Responsive Webdesign
      00:17 Std.
      • 13.1 Einleitung00:24 Min.
      • 13.2 Bedingtes Laden03:44 Min.
      • 13.3 Media Queries mit JavaScript umsetzen05:27 Min.
      • 13.4 Auf Größenänderungen des Fensters reagieren05:32 Min.
      • 13.5 Hilfreiche Skripte02:05 Min.

    Pressestimmen

    »Bietet eine State-of-the-Art Einführung ins Thema Responsive Webdesign.«
    mediavalley.de, 06.05.2015
    »Empfehlung der Redaktion!«
    Freies Radio Kassel, 12.02.2015
    ZIP-Datei zum Download (2,8 GB). Mit 104 Videos gegliedert in 13 Kapitel, Spielzeit 12 Stunden. HD-Auflösung (1280 x 720 Pixel). Vollbild- und Fenstermodus, komfortable Navigation, Unterteilung in übersichtliche Lernschritte, mit Lesezeichen, Suchfunktion und Index zum Nachschlagen. Das komplette Beispielmaterial wird mitgeliefert. Für Windows (10, 8, 7, Vista) und Mac (OS X, macOS). Alle Videos lauffähig auf Android und in der Rheinwerk Video-App für iPad und iPhone.
    DVD-ROM mit 104 Videos, gegliedert in 13 Kapitel, Spielzeit 12 Stunden. HD-Auflösung (1280 x 720 Pixel). Vollbild- und Fenstermodus, komfortable Navigation, Unterteilung in übersichtliche Lernschritte, mit Lesezeichen, Suchfunktion und Index zum Nachschlagen. Für Windows (10, 8, 7, Vista) und Mac (OS X, macOS). Alle Videos lauffähig auf Android und in der Rheinwerk Video-App für iPad und iPhone.

    Diese Produkte könnten Sie auch interessieren

    Download

    € 39,90 inkl. MwSt.

    Sofort verfügbar

    DSAG Mitglieder
    Der Rabatt wird im Warenkorb sichtbar

    DVD

    € 39,90 inkl. MwSt.

    Sofort lieferbar

    Kostenloser Versand für Deutschland, Österreich und die Schweiz

    DSAG Mitglieder
    Der Rabatt wird im Warenkorb sichtbar

    Kostenloser Versand
    Deutschland, Österreich
    und die Schweiz
    Bequem zahlen
    per Kreditkarte oder PayPal
    Schnelle Lieferung
    Auch per Express
    Wir sind gerne für Sie da
    Hilfe zur Bestellung

    Montag bis Freitag,
    09:00 bis 17:30 Uhr
    +49 228 42150-0

    service@rheinwerk-verlag.de