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
- Einleitung
- Die mobile Evolution
- Lösungsansätze für mobile Seiten
- Was ist Responsive Webdesign?
- Viewport-Varianten berücksichtigen
- Weblayouts im Überblick: Fixed, Fluid, Elastic
- Pixelmaße in Prozentwerte wandeln
- Breakpoints und Media Queries
- Adaptive und Responsive Design im Vergleich
- Der Meta-Viewport
Best Practices für Responsive Webdesign
- Einleitung
- Design für Touch-Screens
- Neue Layout-Muster
- Mobile Navigationskonzepte
- Flexible Bilder aufbereiten
- Flexible Videos erzeugen
- Slider und Carousel-Präsentation
Der Webdesign-Workflow
- Einleitung
- Der neue Design-Prozess
- Graceful Degradation – Webseiten vereinfachen
- Mobile First, Content First
- Klassische Gestaltungsraster
- Workflow für Adaptive Webdesign
- Flüssige Gestaltungsraster entwerfen
- Prototypen entwickeln
- Foundation und Bootstrap
- Mit Style-Tiles arbeiten
Reaktionsfähige Webprojekte anlegen und testen
- Einleitung
- Browser als Entwicklungsumgebung
- Nützliche Werkzeuge im Internet
- Simulatoren und Emulatoren
- Webdesigns testen mit Adobe Edge Inspect
- HTML5 Boilerplate, Modernizr & Co.
- Frameworks für Adaptive Design
- Frameworks für Responsive Design
- Fließende Rasterlayouts anlegen mit Adobe Dreamweaver CS6
Design und Typografie für moderne Webseiten
- Einleitung
- Relative Schriftgrößen
- Flexibel gestalten mit CSS3
- Endlosmuster entwerfen
- Pixelgrafiken mit CSS3 verzerren
- Rauschüberlagerung mit CSS3
- Webfonts verwenden
- Webfont-Icons einsetzen
- Schriften optimieren
- Responsive Typography
Fehlersuche und Optimierung
- Einleitung
- Hintergründe optimieren
- Bilder im HTML-Code austauschen
- Reaktionsfähige Tabellen umsetzen
- Image-Maps verwenden
- CSS-Sprites im Responsive Design
- Bilder richtig komprimieren
- Webclip-Icons verwenden
- Die Performance verbessern
- Browser-Probleme beheben
- Formulare optimieren
Praxisprojekt »Graceful Degradation«
- Einleitung
- Inhalt und Konzeption
- Die HTML-Struktur des Projekts
- Den Prototyp entwerfen
- Media Queries einsetzen
- Das Design umsetzen
- Die Navigation optimieren
Praxisprojekt »Mobile First«
- Einleitung
- Inhalt und Konzeption
- Mockup und HTML-Basis entwickeln
- Den Prototyp anlegen
- Breakpoints hinzufügen
- Eine Navigation als Select-Liste
- Eine Off-Canvas-Navigation umsetzen
- Das Design entwickeln
Responsive Webdesign für Retina-Displays
- Einleitung
- Probleme mit Retina-Displays
- Grafiken optimieren und integrieren
- CSS-Sprites verbessern
- SVG-Grafiken erstellen und einbinden
- Hilfreiche Skripte
Einführung in Adobe Edge Reflow
- Einleitung
- Die Oberfläche von Edge Reflow
- Flüssige Raster entwickeln
- Boxen erstellen und gestalten
- Typographie mit Adobe Edge Reflow
- Das Layout umstrukturieren
- Optimierung und Browser-Vorschau
Diskussion zu diesem Produkt
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.
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!
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.
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?:)
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
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?
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
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
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.
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!?
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
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
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
Perfekt, Vielen Dank!
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
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!
Hallo Gerald, vielen herzlichen Dank! Das freut mich sehr zu hören! :)
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
…wie´s denn immer so ist! Habe anschließend die Lösung gefunden: die Lightbox von Lokesh Dhakar richtig (!!!) einbinden.
Hallo,
wo finde ich denn das Training „Responsive Webdesign“ von 2015 (oder besser noch: von 2016)? Gibt es da unterschiedliche Versionen?
Grüße
Stefanie
Hallo Stefanie, das aktuellste Training zum Thema Responsive Design ist dieses hier.
Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir sind nicht auf eine Branche festgelegt und haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: