Produktbeschreibung

responsive-webdesign-jonas-hellwig-galileo-press

Das Praxis-Training für den neuen Webdesign-Standard! Der Webexperte Jonas Hellwig zeigt Ihnen, wie Sie Ihre Webseiten mit HTML, CSS und PHP für alle Geräte und Auflösungen aufbereiten. Mit diesem Training sind Sie am Puls der Zeit und erfahren, wie Sie Responsive Webdesign richtig einsetzen. Lernen Sie den neuen Design-Workflow von Grund auf kennen und entwickeln Sie Ihre Webseiten 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 Ihre Besucher begeistern – egal ob auf dem iPad, Android-Smartphone oder einem Windows-PC.

Trailer & Beispiel-Lektionen

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

Diskussion zu diesem Produkt

  1. Jan
    schrieb am 13.03.2013 um 20:54 Uhr:

    Wow, super. DVD wird sofort gekauft. Ich bin zwar mehr Fan von Büchern, aber egal – deine Previews haben mir sehr gut gefallen.

    Und dein damaliges WordPress Buch war auch extrem nützlich. Seitdem bin ich sowieso Fan! … Ich habe nicht nur WP dadurch gelernt, sondern auch mein HTML 3.2 und CSS1 Wissen quasi über Nacht auffrischen können :) …. Daher hast du sozusagen mein Grundstein für meine zweite Berufung gelegt :-)

  2. Daniel L
    schrieb am 14.03.2013 um 10:06 Uhr:

    Hallihallo,

    erstmal: Super Lehrgang, soweit ich das anhand der Teaser beurteilen kann.

    Ich habe allerdings ein Problem:
    Da die Herren von Apple ins neue MacBook Pro kein optisches Laufwerk mehr eingebaut haben, und ich das eigentlich auch so selten nutze, dass ich mir kein externes kaufen möchte, habe ich keine Möglichkeit die DVD am Rechner anzugucken.

    Lange rede, …

    Wird man die DVD auch irgendwie/irgendwo als Download erstehen können?

    Danke schonmal

    Daniel

    • Jonas Hellwig
      schrieb am 14.03.2013 um 10:16 Uhr:

      Hallo Daniel,

      ich habe deine Anfrage an Galileo weitergeleitet.

      • Daniel L
        schrieb am 14.03.2013 um 10:22 Uhr:

        Das ist super, vielen Dank!

    • Hendrik Wevers
      schrieb am 14.03.2013 um 11:21 Uhr:

      Hallo Daniel!

      Vielen Dank für Dein Interesse an dem Video-Training. Momentan verkaufen wir durchweg DVD-Produkte, aber natürlich sollen auch Kunden ohne DVD-Laufwerk in den Genuss des Trainings kommen. Daher können wir Dir das Training auch als Download anbieten. Du musst dazu nur das DVD-Produkt auf unserer Webseite erwerben und uns die Bestätigung als E-Mail weiterleiten. Dann kann ich Dir den Download-Link einrichten.

      Gerne kannst Du Dich dann direkt bei mir melden.

      Freundliche Grüße
      Hendrik Wevers
      Senior-Produktmanager (Video-Trainings)
      hendrik.wevers@galileo-press.de

  3. Hans-Jürgen
    schrieb am 14.03.2013 um 11:37 Uhr:

    Super interessant und anschaulich. Wie Daniel, würde ich mich über eine Download-Version freuen.

    • Hendrik Wevers
      schrieb am 14.03.2013 um 12:01 Uhr:

      Hallo Hans-Jürgen!

      Schreib mir einfach am besten eine E-Mail, nachdem Du das Produkt erworben hast inkl. dem Kaufbeleg.

      Freundliche Grüße
      Hendrik Wevers
      Senior-Produktmanager (Video-Trainings)
      hendrik.wevers@galileo-press.de

  4. Erik Seitz
    schrieb am 25.03.2013 um 10:15 Uhr:

    Vorbestellt :)

    • Mario
      schrieb am 26.03.2013 um 13:44 Uhr:

      Habs schon – und es ist ziemlich cool!
      :-)

  5. Bogdan Gewald
    schrieb am 08.04.2013 um 14:21 Uhr:

    ein super Lehrgang.
    Ich kann es kaum erwarten das wordpress training.

    • Jonas Hellwig
      schrieb am 08.04.2013 um 16:29 Uhr:

      Vielen Dank! Es freut mich, dass dir das Training gefällt.

  6. Hans-Jürgen
    schrieb am 08.04.2013 um 16:40 Uhr:

    Noch vor Ostern hat mir der Verlag eine Download-Version zur Verfügung gestellt. Dafür sei das Team von Galileo Press gelobt! Ich bin gerade dabei das gelernte umzusetzen. Für mich ist das Videotraining eine große Hilfe. Sonst hätte ich den Schritt auf Responsive Design umzustellen nicht gewagt. Großes Lob an Jonas für ein gelungenes Videotraining und viel Inspiration! Danke!

  7. HA
    schrieb am 09.04.2013 um 10:11 Uhr:

    Hallo Jonas, ich bin ein großer Fan Deiner Beiträge und der Videos! Zum Thema Resposnive würde ich mir sehr wünschen, wenn Du mal das Thema „Suche“ beleuchten könntest. Ich meine z.B. Produktsuchen mit diversen Filtermöglichkeiten. Als Beispiel, welches mich persönlich betrifft, Immobilienwebseiten die umfangreiche Suchmöglichkeiten bieten. Wie gestaltet man dies am besten wenn man responisve Designs nutzen möchte? Wo ist die Grenze zwischen Usability und umfangreiche Möglichkeiten bieten? Ich suche schon lange nach guten und umsetzbaren Ideen, werde aber nicht wirklich fündig. Es wäre klasse, wenn Du dieses Thema vielleicht einmal aufgreifen könntest?

  8. Stephan
    schrieb am 11.04.2013 um 13:00 Uhr:

    Super DVD, habe schon eine Seite mit HTML und CSS erstellt. habe dann eine Seite mit Joomla erstellt und möchte jetzt eine Seite mit WordPress erstellen. Da es für das Projekt die bessere Wahl ist. Dabei wollte ich mich gleich mit dem RWD beschäftigen. Da ich dein Blog schon lange lese habe ich auf diese DVD vertraut und du hast mich bis jetzt nicht Enttäuscht. Bin gerade bei den Kapitel „Media query“ dazu aber eine frage:

    Wenn ich jetzt Displays mit weniger als 500px (als Beispiel) ansprechen möchte, sagen wir Smartphones, reagieren darauf auch Handys mit einer Auflösung von 1920x1080px? Oder wie wäre die bessere Lösung Smartphones anzusprechen?! Ich hoffe du verstehst was ich meine.:)

    • Jonas Hellwig
      schrieb am 11.04.2013 um 13:27 Uhr:

      Hallo Stephan,

      die Media Queries sprechen die physikalische Breite des Displays an, auch wenn die Auflösung bei einem bestimmten Gerät höher ist. Am Beispiel des iPhones ist das ganz gut zu verstehen. Sowohl das Display von iPhone 3 als auch das Display von iPhone 4+ sind physikalisch gleich breit (320px). Das iPhone 4+ hat zwar ein höher aufgelöstes Display, reagiert aber trotzdem auf den selben Media Query wie das iPhone 3. max-width: 320px Das Gerät rechnet intern um.

      Detaillierte Infos zu diesem Themenkomplex findest du auch in meinem Artikel: Websites und Bilder für High-Resolution-Displays (Retina, HiDPI) optimieren

      Oder am Ende der DVD ;)

      lg, Jonas

  9. Peter Müller
    schrieb am 16.04.2013 um 12:25 Uhr:

    Hallo Jonas,

    Film 8.2 ist bei mir identisch mit Film 7.2, dass heißt im Praxisprojekt „Mobile First“ kommt „Inhalt und Konzeption“ vom Praxisprojekt „Graceful Degradation“. Da ist man buchstäblich „im falschen Film“…

    Der eigentlich Film 8.2 sollte 2:56 Min. lang sein, fehlt aber wohl auf der DVD. Könntet ihr den bei Galileo oder hier oder sonst irgendwo zur Verfügung stellen?

    Gruß
    Peter

    • Jonas Hellwig
      schrieb am 16.04.2013 um 13:42 Uhr:

      Hallo Peter,
      du findest die Lektion hier zum Download. Das ist leider ein Produktionsfehler. https://media.kulturbanause.de/downloads/rwd_lektion_8.2.zip

      • Peter Müller
        schrieb am 16.04.2013 um 14:40 Uhr:

        Thank you, sir. Das war ja fix ;-)

      • Stefan Gläßer
        schrieb am 08.09.2013 um 13:52 Uhr:

        Danke für die Bereitsstellung des richtigen Videos. Ich habe auch schon an mir gezweifelt, ob ich das nicht gerade schonmal gesehen habe :-)

  10. Johannes Poth
    schrieb am 17.04.2013 um 16:23 Uhr:

    Respekt Jonas – gelungenes Lehrvideo.
    Bin zufällig auf deine Seite gestoßen und habe mir das Video nach Betrachtung der Demos hier gekauft. Ich konnte einiges lernen.
    Eine Frage habe ich noch dazu: wenn Du das Broserfenster angreifst um die Größe zu verändern, werden auch die Inhalte fliessend angepasst.Bei mir funktioniert das nicht – wenn ich beispielsweise das Fenster verkleinere behalten die Inhalte ihre Größe, bis ich das Fenster los lasse. erst dann passen sich die Inhalte wieder dem Fenster an.
    Vielleicht kannst Du mir sagen, wo/wie man das einstellt?
    Besten Dank und LG
    Johannes

    • Jonas Hellwig
      schrieb am 17.04.2013 um 16:34 Uhr:

      Hallo Johannes,

      vielen Dank für dein Feedback. Ich bin ehrlich gesagt etwas verwundert warum bei dir nicht automatisch alles umstrukturiert wird, wenn du das Browserfenster verkleinerst. Ich habe dazu keinerlei Einstellungen vorgenommen und kann das von dir beschriebene Verhalten weder auf dem Mac noch unter Windows nachvollziehen. Welchen Browser und welches Betriebssystem setzt du denn ein?

  11. Johannes Poth
    schrieb am 17.04.2013 um 16:47 Uhr:

    Servus Jonas
    Danke für die rasche Rückmeldung.
    Es ist Browserunabhängig – aber danke für die Frage nach dem Betriebssystem. Hatte ich vor lauter Suche nach Einstellungsmöglichkeiten im Browser völlig aus dem Blickfeld verloren. Werde mich jetzt mal in Win7 reingraben.

    • Johannes Poth
      schrieb am 17.04.2013 um 17:17 Uhr:

      Lösung:(Win7)
      Hatte meinen Rechner vor einiger Zeit auf optimale Leistung eingestellt – damit wurde ‚Fensterinhalt beim ziehen anzeigen‘ unter „Systemsteuerung/System/Erweiterte Systemeinstellungen/Reiter Erweitert/Leistung/Einstellungen“ deaktiviert. Häkchen gesetzt und geht wieder!

      • Jonas Hellwig
        schrieb am 17.04.2013 um 18:15 Uhr:

        Besten Dank für die Info Johannes.
        Das hilft anderen Besuchern sicher auch einmal weiter. Und ich weiß jetzt auch wo ich den „Fehler“ suchen muss wenn er einmal auftritt.

  12. Stephan
    schrieb am 02.05.2013 um 16:43 Uhr:

    Lässt sich das „Off-Canvas“ Tutorial auch bei WordPress anwenden? Habe es versucht aber 1 zu 1 lässt sich das nicht umsetzten und im Internet habe ich nichts gefunden. Erfordert das viel oder ist es nur eine kleine Änderung die du mir mal eben mitteilen kannst?:)

  13. Marcel
    schrieb am 14.05.2013 um 20:05 Uhr:

    Hallo Jonas,
    eine super DVD ist das! Allerdings habe ich ein Problem mit meinem Iphone 5.
    Wenn ich meinen Viewport am MBPr auf IPhone-Größe zusammenziehe funktionieren die Breakpoints wunderbar und es sieht so aus wie ich will.
    Wenn ich meine Seite allerdings auf dem Iphone aufrufe, wird die „normale“ HTML-Seite in voller Größe geladen. Ebenso bei Safari auf dem IPhone.
    Ich habe sämtliche Media-Queries aus deinen genannten Links ausprobiert aber es will nicht klappen und im Web findet man leider (noch) herzlich wenig dazu.
    Ich hoffe, ich habe auf deiner DVD dazu nichts übersehen bzw. überhört aber ich habe sie schon mehrmals angesehen und konnte keinen weiteren Ratschläge finden. Es wäre toll, wenn du eine Idee hättest die mich diesbezüglich weiterbringt.

    Viele Grüße,
    Marcel

    • Jonas Hellwig
      schrieb am 15.05.2013 um 09:45 Uhr:

      Hallo Marcel,

      vielen Dank für dein Feedback zur DVD. Es freut mich natürlich sehr, dass dir das Training gefällt.
      Zu deinem Problem: Hast du den Meta-Viewport eingebaut? Also wie in Kapitel 1.10 beschrieben?

      • Marcel
        schrieb am 15.05.2013 um 18:29 Uhr:

        der ist es gewesen. Hatte bisher nur das css Dokument bearbeitet.
        Fast schon peinlich nachzufragen aber jeder macht ja mal Fehler.

        Gruß und Dank,
        Marcel

  14. Irene
    schrieb am 11.06.2013 um 18:19 Uhr:

    Hallo Jonas,
    zunächst einmal ganz herzlichen Dank für dein sehr gelungenes RWD-Video-Tutorial. Ich bin bisher erst bis Kapitel 2.5 („Flexible Bilder aufbereiten“) gekommen, und habe dazu noch eine Frage: Per overflow:hidden bzw. auto kann ich Bilder bei kleinen Viewports abschneiden lassen, aber offensichtlich immer nur auf der rechten Seite. Wie schaffe ich es, dass das Bild gleichmäßig von beiden Seiten, also quasi zentriert, gecroppt wird?

    Bitte entschuldige, wenn es da eine komplett simple Lösung gibt und ich einfach nur einen Knoten im Kopf habe, aber ich bekomme es schlicht nicht hin…

    Danke & viele Grüße
    Irene

    • Jonas Hellwig
      schrieb am 12.06.2013 um 21:38 Uhr:

      Hallo Irene,

      zunächst einmal vielen Dank für deine Nachricht. Es gibt leider keine Lösung um dieses „Problem“ schnell in den Griff zu bekommen. Das hat damit zu tun, dass Elemente im Web immer links oben ausgerichtet werden. Wenn du das Browserfenster verkleinerst, wird beispielsweise eine Website auch immer von rechts unten her abgeschnitten.

      • Johannes Poth
        schrieb am 12.06.2013 um 21:59 Uhr:

        Im Umkehrschluss würde das bedeuten: das Bild rechts ausrichten und es wird links abgeschnitten bzw. zentriert ausgerichtet würde es links und rechts beschnitten werden!?

      • Irene
        schrieb am 24.06.2013 um 19:59 Uhr:

        Hallo Jonas,

        bitte entschuldige, dass sich erst jetzt reagiere: Vielen Dank für deine Antwort. Ich hatte das schon befürchtet. Na immerhin lag’s nicht an meinem Unvermögen :)

        Irene

  15. Florian
    schrieb am 01.09.2013 um 13:44 Uhr:

    Hallo Jonas,
    ich möchte mich einmal für dieses tolle Video Training bedanken!
    Ich habe gerade eben die letzte Lektion durchgearbeitet und finde es durchweg sehr gelungen :)

    Eine kleine Anmerkung/Frage habe ich aber doch:
    Der Part 8.2, „Inhalt und Konzeption“ bei mobile-first, ist bei mir die Konzeption des Ansatzes Graceful Degredation. Also 7.2 und 8.2 sind bei mir identisch …
    Ich weiß nicht, ob das nur bei mir so ist, aber gibt es eine Möglichkeit, dass ich mir die Konzeption des mobile-first Ansatzes anschauen kann (vielleicht als einzelnes Video)?

    Vielen Dank schonmal!
    Florian

    • Jonas Hellwig
      schrieb am 01.09.2013 um 16:36 Uhr:

      Hallo Florian,

      es freut mich sehr, dass dir das Training gefällt. Die doppelte Lektion ist leider ein Produktionsfehler in Auflage 1. Du kannst das fehlende Video hier herunterladen: https://media.kulturbanause.de/downloads/rwd_lektion_8.2.zip

      • Florian
        schrieb am 02.09.2013 um 10:27 Uhr:

        Perfekt, Vielen Dank!

  16. Alex
    schrieb am 28.09.2013 um 10:11 Uhr:

    Hallo Jonas,

    super Video-DVD. Du erklärst ja auch die Nutzung eines Rastersystems. Auf dem Desktop 12 Spalten und Smartphone dann nur 3 Spalten. Wie kann man sowas mit einem Gridsystem umsetzen? Bei Bootstrap(2) z.B. gibt es die festen 12 Spalten bis zum Smartphone. So ein feines Raster benötigt man ja auf dem kleinen Display nicht.

    Viele Grüße
    Alex

  17. Gerald
    schrieb am 03.10.2013 um 17:41 Uhr:

    Lieber Jonas, das mit Abstand beste Video-Training das ich je gesehen habe. Respekt! Obwohl ich ein Jahres-Abo bei video2brain habe und es auch dort ein Responsive-Video gibt habe ich zusätzlich auch dein Video gekauft – aufgrund des überzeugenden Trailers. Und das war auch gerechtfertigt! Selten dass es bei mir ein Trainer geschafft hat, die Neugierde und Aufmerksamkeit auf einem so hohen Level zu halten. Ich hab mir das komplette Video an einem Tag reingezogen. Zugegeben, man hat danach leichtes Ohrenrauschen. Aber für den Informationsgehalt und die Freude am Zuschauen nimmt man das gerne in Kauf.
    Vielen Dank!

    • Jonas Hellwig
      schrieb am 03.10.2013 um 20:26 Uhr:

      Hallo Gerald, vielen herzlichen Dank! Das freut mich sehr zu hören! :)

  18. Petra
    schrieb am 14.06.2015 um 10:41 Uhr:

    Hallo Jonas,
    ich habe das Training „Responsive Webdesign“ von 2015 und hätte zu den Responsive Image Maps eine Frage. Gibt es eine Möglichkeit, eine direkte Lightbox draufzusetzen?
    Gruß. Petra

    • Petra
      schrieb am 14.06.2015 um 11:35 Uhr:

      …wie´s denn immer so ist! Habe anschließend die Lösung gefunden: die Lightbox von Lokesh Dhakar richtig (!!!) einbinden.

Ihr Kommentar zu diesem Produkt

Bei Fragen oder Kritik zu diesem Produkt, nutzen Sie bitte das Kommentar-Formular.

Ihr Kommentar wird überprüft bevor er auf der Website erscheint. Nicht themenrelevante Beiträge werden gelöscht.

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.