Responsive Webdesign: Das umfassende Praxis-Training

Die Referenz für Responsive Webdesign!
5.0 (1 rating) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
24 students enrolled
Instructed by Rheinwerk Verlag Design / Web Design
$120
Take This Course
  • Lectures 105
  • Contents Video: 12 hours
    Other: 0 mins
  • Skill Level All Levels
  • Languages German
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2015 German

Course Description

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

Jonas Hellwig ist einer der gefragtesten Webdesigner in Deutschland und Gründer der erfolgreichen Design-Agentur »kulturbanause«. Unter der Adresse blog.kulturbanause.de bietet er mit zahlreichen Artikeln, Tutorials und Tipps eine wichtige Informationsquelle für moderne Web-Themen. Hellwig ist Experte für Webdesign, Photoshop und WordPress und gibt sein Wissen regelmäßig in Video-Trainings, Schulungen und Vorträgen weiter.

What are the requirements?

  • Dieser umfangreiche Kurs richtet sich an alle Designer, die entweder Basiswissen aufbauen möchten oder sich für die neuesten Designtrends interessieren.
  • Interesse am Responsive Design, welches die Darstellung auf allen Geräten erlaubt

What am I going to get from this course?

  • 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.
  • 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.
  • 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.

What is the target audience?

  • Jeder, der mehr über Webdesign für alle Geräte lernen möchte
  • Designer, die Grafik, Schrift und Code optimieren wollen

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Responsive Webdesign im Überblick
00:27

Dieses Video gibt Ihnen einen Überblick über die Themen des Kapitels. Sie lernen die Grundlagen des Responsive Webdesign kennen und machen sich mit unterschiedlichen Layout-Typen vertraut.

02:05

Der Begriff »Responsive Webdesign« hat sich in den vergangenen Jahren deutlich weiterentwickelt. Jonas Hellwig führt Sie mit diesem Video in das Thema ein. Er zeigt, welche Anforderungen moderne Websites erfüllen sollten und welche Fragestellungen sich daraus für das Design ergeben.

08:55

Responsive Design ist mehr als eine Sammlung von Techniken. Jonas Hellwig zeigt in diesem Video die Unterschiede zwischen statischem und flexiblem Design, erläutert die Philosophie des Responsive Webdesign und stellt hilfreiche Design-Richtlinien von Google vor.

15:55

In diesem Video lernen Sie eine Möglichkeit kennen, wie Sie Besucher Ihrer Website bei Bedarf automatisch auf eine mobile Ansicht weiterleiten. Außerdem erklärt Ihnen Jonas Hellwig die Unterschiede zwischen Responsive und Adaptive Design.

07:02

In diesem Video bespricht Jonas Hellwig die drei grundlegenden Layout-Arten »Fixed«, »Fluid« und »Elastic«. Sie erfahren alles über deren Vor- und Nachteile und sehen anhand eines Beispiels, wie sich die unterschiedlichen Typen ideal verbinden lassen.

17:51

Responsive Design setzt auf Umschaltpunkte zwischen verschiedenen Layouts, sogenannte Breakpoints. In diesem Video lernen Sie, wie Sie die Geräte-Eigenschaften per CSS abfragen und das dazu passende Layout ausliefern.

08:13

In diesem Video erklärt Jonas Hellwig die Unterschiede zwischen Adaptive Design und Responsive Design. Sie erfahren, wie Sie zukunftssichere Webseiten gestalten indem Sie client- und serverseitige Techniken verbinden.

08:52

Die Grundidee von »Mobile First« besteht darin, Webseiten zuerst für mobile Endgeräte zu entwickeln. Jonas Hellwig zeigt Ihnen, wie Sie auf diese Weise Quelltext einsparen und welche weiteren Vorteile dieser Ansatz im Vergleich zur vorrangigen Gestaltung für den PC bietet.

04:39

In diesem Video macht Jonas Hellwig Sie mit dem Layout-Viewport vertraut und zeigt, wie Sie Darstellungsfehler auf Mobilgeräten vermeiden. Außerdem lernen Sie, wie Sie die Browser-Ansicht skalieren.

04:24

Modernes Webdesign bedeutet immer auch Design für Touchscreens. Jonas Hellwig zeigt Ihnen in diesem Video, was es bei Schaltflächen und Hover-Effekten zu beachten gibt und weshalb Sie die Gestensteuerung immer im Hinterkopf behalten sollten.

09:06

In der modernen Webentwicklung wandern Arbeitsabläufe zunehmend in den Browser. Am Beispiel einer sogenannten »Geister-Schaltfläche« zeigt Jonas Hellwig in diesem Video, wie Sie Seitenelemente direkt im Browser entwerfen und den Code anschließend für Ihr Projekt übernehmen.

08:49

[Nicht alle Browser beherrschen sämtliche aktuellen Web-Techniken. Erfahren Sie deshalb in diesem Video, wie Sie die technischen Möglichkeiten des Benutzer-Browsers ermitteln und passende Website-Elemente ausliefern.

Section 2: Konzepte für die Website-Architektur
00:25

Jonas Hellwig verrät Ihnen, was Sie in diesem Kapitel erwartet: Sie lernen robuste Layouts für flexible Webseiten kennen und erfahren, welches Modell sich für welchen Einsatzzweck eignet.

07:39

In diesem Video erfahren Sie, wie Sie statische Layouts weiterentwickeln und in flexible Strukturen überführen. Jonas Hellwig zeigt, wie Sie Pixel-Angaben in Prozentwerte umwandeln und die Werte genau berechnen.

03:00

Mehrspaltige Layouts setzen sich oft aus festen und veränderlichen Elementen zusammen. Jonas Hellwig stellt Ihnen in diesem Video eine Möglichkeit vor, wie Sie in Ihrem Layout feste Pixelangaben mit Prozentwerten kombinieren und die Größen von Elementen mit CSS-Formeln berechnen.

05:11

In manchen Fällen empfiehlt es sich, Seiteninhalte für verschiedene Geräten unterschiedlich zu gliedern. Lernen Sie in diesem Video, wie Sie Reihenfolge und Fließrichtung von Seitenelementen festlegen und die Standardreihenfolge von HTML somit überschreiben.

03:27

Ein beliebtes Layout-Muster im Responsive Design ist »Mostly-Fluid«. Jonas Hellwig führt in diesem Video ein Praxisbeispiel vor, das bereits nach dem Schema Mobile First aufgebaut ist.

07:28

Ein bekannter Layout-Typ trägt den Namen »Column-Drop«. Im Gegensatz zum Typ »Mostly-Fluid« rutschen bei diesem Muster die Seitenleisten in der mobilen Ansicht unter den Inhaltsbereich.

02:51

Als drittes Muster stellt Ihnen Jonas Hellwig den »Layout-Shifter« vor. Hier sitzt der Seitenkopf links neben dem Inhaltsbereich und rutscht erst in der mobilen Darstellung nach oben.

05:14

Viele Websites im Unterhaltungs- und Technikbereich setzen auf eine gekachelte Layout-Struktur mit quadratischen Bildern. In diesem Video lernen Sie, wie Sie ein solches »Tile Design« in der Praxis umsetzen.

09:54

In diesem Video lernen Sie, wie Sie für Ihre Seite einen Bereich definieren, der immer am unteren Rand des Browserfensters »klebt«. Jonas Hellwig zeigt, wie Sie die Tabellendarstellung von CSS für diesen Zweck nutzen können.

04:59

Mit den Einheiten »vh« und »vw« können Sie Seitenelemente von der jeweils aktuellen Fenstergröße abhängig machen. Jonas Hellwig zeigt Ihnen, wie Sie die Höhe und Breite des Fensters abfragen und die Werte in einer Medienabfrage einsetzen.

Section 3: Neue Arbeitsabläufe im Responsive Webdesign
00:25

In diesem Video präsentiert Ihnen Jonas Hellwig die Inhalte des folgenden Kapitels. Sie lernen neue Arbeitsabläufe kennen, machen sich mit Design-Modulen vertraut und erfahren, wie Sie Webseiten professionell testen.

05:27

Ein zentraler Bestandteil des Responsive-Design-Prozesses besteht in der ständigen Weiterentwicklung von Prototypen. Jonas Hellwig verrät Ihnen, welche enormen Vorteile dieser Weg gegenüber alten Herangehensweisen bietet.

07:34

Der neue Design-Workflow ermöglicht Ihnen, Ihr Projekt fortwährend zu testen und an veränderte Bedürfnisse anzupassen. In diesem Video lernen Sie hilfreiche Frameworks und Mustergalerien kennen, die Ihnen bei der Erstellung responsiver Websites behilflich sind.

06:38

Moderne Websites bestehen oft aus einer Vielzahl kleiner Module. Jonas Hellwig zeigt Ihnen in diesem Video, wie Sie Webseiten Schritt für Schritt modular aufbauen und was sich hinter dem Begriff »Atomic Design« verbirgt.

09:42

Jonas Hellwig erklärt Ihnen in diesem Video, wie Sie einen individuellen Stil für Ihr Projekt entwickeln. Dabei erfahren Sie, wie Sie mit Style Guides und Style Tiles Design-Elemente definieren und immer wieder überprüfen, ob Sie auf dem richtigen Weg sind.

03:22

Mit der zunehmenden Verbreitung von Frameworks und Vorlagen sehen sich Websites immer ähnlicher. Deshalb verrät Ihnen Jonas Hellwig in diesem Video, wie Sie originelle Seiten entwerfen und ein kreatives Entwicklungsteam zusammenstellen.

05:53

In diesem Video sehen Sie, weshalb Sie Layout-Umbrüche an Seiteninhalten und nicht an Geräten ausrichten sollten. Jonas Hellwig führt Ihnen Beispiele für gelungene Responsive Layouts vor und zeigt auf, wie Sie Breakpoints sinnvoll einsetzen.

15:32

In diesem Video dreht sich alles um die perfekte Testumgebung für Ihre Projekte. Sie erfahren, wie Sie unterschiedliche Bildschirmgrößen in Google Chrome simulieren, mehrere Browserfenster gleichzeitig ansteuern und die Darstellung auf Endgeräten synchronisieren.

Section 4: Gestaltungsraster verwenden
00:21

Jonas Hellwig gibt Ihnen in diesem Video einen Überblick über die Themen des Kapitels. In den folgenden Videos befassen Sie sich mit Gestaltungsrastern und mit der Anordnung von Seitenelementen.

11:48

In diesem Video machen Sie sich mit Gestaltungsrastern vertraut. Sie erfahren, wie sich Elemente in den unsichtbaren Rastern verhalten und wie Sie eigene Raster erstellen. Dabei machen Sie sich auch mit dem Konzept der Push- und Pull-Klassen vertraut.

05:25

Bevor Sie ein eigenes Gestaltungsraster entwickeln, sollten Sie die Anzahl der benötigten Spalten bestimmen und die Reihenfolge der Seitenelemente festlegen. Ihr Trainer führt Ihnen anhand einer Skizze vor, wie Sie Schritt für Schritt ein flexibles Raster planen.

16:24

Nun geht es an die technische Umsetzung des Rasters. Jonas Hellwig zeigt Ihnen, wie Sie ein Beispieldokument aufbauen, Zeilen und Spalten anlegen und passende Medienabfragen einrichten.

07:14

Rasterzellen vertragen sich leider nicht mit der Eigenschaft »padding«. Jonas Hellwig verrät Ihnen deshalb einen Trick, mit dem Sie die notwendigen Innenabstände trotzdem erzwingen können. Dazu erläutert er Ihnen die Feinheiten des Box-Modells von CSS.

05:12

Einzelne Rasterelemente lassen sich problemlos weiter unterteilen. In diesem Video lernen Sie am Beispiel einer Seitenleiste, wie Sie Raster verschachteln, ohne die Innenabstände zu vervielfachen.

03:18

Um Elemente in einer Rasterzeile nach links oder rechts zu schieben, werden sogenannte Push- und Pull-Klassen verwendet. In diesem Video erfahren Sie, wie Sie solche CSS-Klassen anlegen und Elemente nach Ihren Wünschen anordnen.

07:35

Einrückungen werden in Rastern mit sogenannten Offset-Klassen realisiert. Auch hierbei handelt es sich um einzelne CSS-Klassen, die im Stylesheet verzeichnet und individuell vergeben werden.

13:35

Entscheiden Sie sich frühzeitig für eine visuelle Gewichtung Ihrer Inhalte, um die entscheidenden Elemente Ihrer Website richtig zur Geltung zu bringen. Dieses Video zeigt, wie Sie einzelne Sinnabschnitte mit Containern und Farben hervorheben können.

Section 5: Content Choreography
00:21

In diesem Video fasst Jonas Hellwig die Inhalte des Kapitels zusammen. Darin dreht sich alles um die Anordnung von Seiteninhalten und um die Methode »Flexbox«.

01:31

»Content Choreography« bezeichnet die Trennung der Seitendarstellung vom Seitenaufbau. Jonas Hellwig erläutert Ihnen, weshalb es durchaus sinnvoll sein kann, die logische Gliederung unabhängig von der Reihenfolge der Ausgabe anzulegen.

06:30

In diesem Video erfahren Sie, wie Sie einen Seitenkopf für die Ausgabe auf Mobilgeräten optimieren. Dazu verwenden Sie eine spezielle Tabellenansicht für die CSS-Eigenschaft »display«.

10:03

Das Flexbox-Modell gilt als zukunftsweisende Layout-Technologie. In diesem Video lernen Sie, wie Sie mit Flexbox Seitenelemente anordnen, an verschiedenen Achsen ausrichten und individuell skalieren.

05:06

Jonas Hellwig erklärt Ihnen in diesem Video, wie Sie Seitenelemente mit unbekannter Höhe richtig platzieren. Dabei lernen Sie auch, welche Probleme sich bei absoluter Positionierung ergeben und welche Lösungen Flexbox dafür bereitstellt.

04:44

Die Trennung von Aufbau und Darstellung einer Website empfiehlt sich besonders für die Suchmaschinenoptimierung. Jonas Hellwig demonstriert in diesem Video, wie Sie Werbeanzeigen mit der Flexbox-Eigenschaft »order« im Quellcode versetzen.

Section 6: Rapid Prototyping in der Praxis
00:22

Jonas Hellwig gibt Ihnen einen kurzen Überblick über die Inhalte, die Sie in diesem Kapitel erwarten. Sie erfahren, wie Sie mit Rapid Prototyping schnell und flexibel entwickeln und welche Arbeitshilfen Ihnen zur Verfügung stehen.

09:46

In diesem Video lernen Sie hilfreiche Vorlagen und Skripte für das Responsive Design kennen. Jonas Hellwig stellt Ihnen klassische Templates und CSS-Raster vor und demonstriert, wie Sie mit »htmlnow« Ihre eigenen Vorlagen zusammenstellen.

03:54

Wenn Sie Dreamweaver als Code-Editor verwenden, können Sie auf die eingebauten Layout-Raster zurückgreifen. Jonas Hellwig führt Sie in diesem Video Schritt für Schritt durch den Quellcode dieser Layouts.

04:16

Bevor Sie sich auf ein bestimmtes Framework festlegen, sollten Sie einige grundlegende Entscheidungen treffen. Jonas Hellwig erklärt Ihnen, worauf es bei der Wahl des passenden Frameworks für Ihr Projekt ankommt.

06:44

In diesem Video lernen Sie die Frameworks »Bootstrap«, »Foundation« und »Pure« kennen. Jonas Hellwig beschreibt Ihnen detailliert, was die drei Frameworks verbindet und unterscheidet. Dabei erfahren Sie auch, wie Sie das Framework Pure um ausgewählte Bootstrap-Komponenten erweitern.

12:52

Bootstrap ist ein umfangreiches Framework mit ausgefeilter Gestaltung. In diesem Video lernen Sie, wie Sie mit Bootstrap Schritt für Schritt eine Startseite aufbauen und blitzschnell einen ersten Prototyp fertigstellen.

14:25

Foundation nutzt weniger vorgegebene Elemente und Stile als Bootstrap und ermuntert Sie dadurch zur Entwicklung eigener, einzigartiger Designs. Jonas Hellwig zeigt Ihnen, wie Sie mit Foundation einen Prototyp aufbauen.

17:23

Der Online-Dienst Webflow ermöglicht es Ihnen, Prototypen direkt im Browser zu entwickeln. Jonas Hellwig macht Sie mit der Oberfläche der Anwendung vertraut und zeigt, wie Sie eine Seite entwerfen.

10:31

Im zweiten Video zum Webflow-Editor lernen Sie, wie Sie ein flexibles Navigationsmenü aufbauen, Schaltflächen gestalten und den Prototyp schließlich veröffentlichen. Außerdem erfahren Sie, wie Sie Mouseover-Effekte erzeugen.

22:16

Das Desktop-Programm Adobe Edge Reflow wurde eigens für die Arbeit an Prototypen entwickelt. Jonas Hellwig zeigt Ihnen, wie Sie das Programm richtig nutzen und den erzeugten Quellcode in Ihrem Projekt einsetzen.

Section 7: Moderne Webtypografie
00:17

Dieses Kapitel widmet sich der Typografie. Jonas Hellwig verrät Ihnen im Einleitungsvideo, was Sie darin erwartet: Sie lernen neue Schrifteinheiten kennen, setzen sich mit Webfonts auseinander und erhalten Tipps für gut lesbare Texte.

07:17

Dank Webfonts hat die Schriftgestaltung in den vergangenen Jahren stark an Bedeutung gewonnen. Jonas Hellwig erläutert Ihnen, weshalb die Wahl einer geeigneten Schriftart so wichtig ist und wie Sie den Schriftkontrast Ihrer Website ermitteln.

14:21

Für lange Zeit wurden Schriftgrößen im Code meist in Pixeln angegeben. In diesem Video erfahren Sie die Nachteile dieses Ansatzes und lernen neue Schrifteinheiten kennen, mit denen Sie Texte anpassungsfähig anlegen können.

07:44

Nicht zu lang und nicht zu kurz – Texte prägen das Bild einer Website erheblich. Jonas Hellwig verrät Ihnen die optimale Zeilenlänge und zeigt, wie Sie Textumbrüche mit Medienabfragen steuern können.

05:29

Sie können das Schriftbild weiter verbessern, indem Sie die Silbentrennung aktivieren. Jonas Hellwig stellt die verschiedenen Möglichkeiten vor und empfiehlt Ihnen die jeweils passenden Anwendungsbereiche.

03:03

In diesem Video lernen Sie, wie Sie Schriftgrößen an die Bildschirmbreite und -höhe koppeln. Sie verwenden dazu die Viewport-Einheiten »vh« und »vw«. Außerdem erfahren Sie, wie Sie eine Ersatzlösung bereitstellen für den Fall, dass der Browser diese Funktionen nicht unterstützt.

08:00

Es gibt eine große Auswahl an kostenlosen Webfonts, die Sie für die Gestaltung Ihrer Websites nutzen können. Jonas Hellwig stellt Ihnen in diesem Video die Angebote von Google und Adobe vor und zeigt, wie Sie Schriftarten in das richtige Fomat umwandeln.

10:11

Symbole und Icons lassen sich entweder als Grafik oder als Schriftzeichen einbetten. In diesem Video lernen Sie, wie Sie die Zeichensätze von »Font Awesome« verwenden und welche Vor- und Nachteile diese Icons haben.

Section 8: Die Navigation – Konzepte und Lösungen
00:18
In diesem Einleitungsvideo gibt Ihnen Jonas Hellwig einen Überblick über die Inhalte des Kapitels. Sie erfahren, welche Menüstrukturen sich für anpassungsfähige Webseiten eignen und wie Sie verschiedene Lösungen technisch umsetzen.
04:19

Nicht alle Mobilgeräte sind in der Lage, aufwändig gestaltete Menüs darzustellen. Jonas Hellwig stellt Ihnen deshalb zunächst einfache Varianten vor, die später als Ersatzlösung verwendet werden können.

03:26

Eine weitere Lösung für Mobilgeräte ist das Menü im Seitenfuß. Jonas Hellwig erklärt Ihnen in diesem Video, wie sich eine solche Footer-Navigation technisch umsetzen lässt.

09:25

Einen Sonderfall stellt die Darstellung des Navigationsmenüs mithilfe einer Auswahlliste dar. Jonas Hellwig zeigt Ihnen in diesem Video, wie Sie eine solche Lösung mit JavaScript umsetzen.

10:50

In diesem Video lernen Sie einen Weg kennen, um Menüs mit JavaScript elegant ein- und ausfahren zu lassen. Für Browser ohne JavaScript-Unterstützung stellen Sie eine alternative Lösung bereit.

11:10

Menüs nach dem Muster »Off-Canvas« liegen außerhalb des sichtbaren Bereichs und werden per Klick in das Browserfenster geschoben. Jonas Hellwig führt Ihnen vor, wie Sie dieses beliebte Navigationsmodell auf Ihrer Website einsetzen.

04:54

Auch komplexe Navigationsmenüs können Sie auf Mobilwebsites unterbringen, ohne wertvolle Informationen zu verlieren. Jonas Hellwig stellt Ihnen die drei gängigsten Wege vor, um Menüs übersichtlich zu strukturieren.

07:13

Bewegliche Navigationsleisten ermöglichen es Ihren Besuchern, Menüs komfortabel mit Wischgesten zu steuern. In diesem Video lernen Sie, wie Sie den Zeilenumbruch ausschalten, einen Scrollbalken anzeigen und Menüs beweglich machen.

02:49

Oft lohnt es sich, neben der Navigation auch ausgewählte Inhalte zu gruppieren. Eine einfache und beliebte Möglichkeit für die Gliederung von Inhalten sind Karteireiter und Akkordeons.

Section 9: Flexible Grafikelemente
00:28

In diesem Video erhalten Sie einen Überblick über die Inhalte des Kapitels. Sie lernen, wie Sie flexible Hintergründe anlegen, Bildausschnitte festlegen und Grafiken in den passenden Dateiformaten bereitstellen.

04:00

Es gibt zwei Wege, Bilder in Websites einzubinden: HTML-Elemente und CSS-Hintergründe. Jonas Hellwig erläutert die Vor- und Nachteile beider Methoden und gibt Ihnen klare Entscheidungskriterien an die Hand.

13:01

In diesem Video lernen Sie, wie Sie mit den Hintergrund-Eigenschaften von CSS spannende Effekte erzielen und robuste Design-Elemente entwickeln. Als Beispiel dient Ihnen dabei ein Kachel-Layout in Reflow.

06:34

Mit CSS können Sie mehrere Hintergründe kombinieren. In diesem Video greift Jonas Hellwig in die CSS-Trickkiste und zeigt Ihnen, wie Sie mit Medienabfragen und weichen Übergängen eine Animation gestalten.

07:42

Jonas Hellwig zeigt Ihnen in diesem Video, wie Sie Bilder flexibel gestalten und für alle Geräte richtig ausgeben. Sie lernen, wie Sie Bilder einbinden, skalieren, mit einem Scrollbalken versehen und in den Textfluss einpassen.

05:55

Nicht immer werden Bilder im Browser vorteilhaft skaliert. Wichtige Motivbereiche können unabsichtlich beschnitten werden. Mit Fokuspunkten fixieren Sie einzelne Ausschnitte und steuern die Größenänderung – ganz ohne JavaScript.

15:38

In diesem Video gibt Ihnen Jonas Hellwig eine umfassende Einführung in die neuen HTML5-Techniken für anpassungsfähige Bilder. Sie lernen, wie Sie sogenannte Source Sets mit mehreren Bilddateien aufbauen, Bilder am Viewport orientieren und deren Darstellung mit der Eigenschaft »sizes« steuern.

06:40

Für manche Anwendungsfälle bietet es sich an, unterschiedliche Bilder für verschiedene Darstellungsformate bereitzustellen und bei Bedarf auszutauschen. Jonas Hellwig zeigt Ihnen in diesem Video ein ansprechendes Beispiel und stellt Ihnen das HTML5-Element »picture« vor.

03:41

Nicht alle Browser unterstützen die neuen HTML5-Funktionen zur Bildgestaltung. In diesem Video stellt Ihnen Jonas Hellwig deshalb eine Reihe von Skripten vor, die alte Browser um neue Funktionen erweitern.

Section 10: Flexible Inhaltselemente
00:22

Dieses Video informiert Sie über die Themen des Kapitels. Sie setzen sich mit unterschiedlichen Inhaltselementen auseinander und erfahren, wie Sie diese so anlegen, dass sie sich gut an das Layout anpassen.

06:45

HTML5 bietet mit »video« ein eigenes Element zur Einbettung von Videodateien. Jonas Hellwig erklärt Ihnen, wie Sie das Element richtig einsetzen und wie Sie sicherstellen, dass Ihr Video jederzeit richtig dargestellt wird.

12:24

Tabellen sind eine Herausforderung im Responsive Design – besonders auf Mobilgeräten leidet die Lesbarkeit der Daten mitunter erheblich. Jonas Hellwig zeigt Ihnen, wie Sie Tabellen intelligent umgestalten und notfalls mit einem Scrollbalken in den Griff bekommen.

03:55

Wenn Sie Karten im Browser interaktiv gestalten möchten, können Sie auf Image Maps zurückgreifen. Jonas Hellwig stellt Ihnen in diesem Video ein Skript vor, mit dem Sie Image Maps auf responsiven Websites einsetzen können.

10:13

In diesem Video lernen Sie, wie Sie einen sogenannten »Slider« in Ihre Website integrieren, der flexibel auf unterschiedliche Bildschirme und Eingabemethoden reagiert. Sie verwenden dazu ein Skript namens »slick«.

08:50

Kontaktformulare sollten auch auf kleinen Bildschirmen und Mobilgeräten problemlos funktionieren. In diesem Video erfahren Sie, wie Sie Formulare richtig anlegen und sicherstellen, dass diese leicht zu bedienen sind.

03:46

Mobile Betriebssysteme bieten die Möglichkeit, installierte Programme aus dem Browser heraus aufzurufen. Lernen Sie in diesem Video, wie Sie Mail- und Telefondienste per Link ansprechen und die Kontaktaufnahme online noch einfacher gestalten.

Section 11: Design für hochauflösende Bildschirme
00:24

In diesem Video verschaffen Sie sich einen Überblick über die Inhalte des Kapitels. Jonas Hellwig zeigt Ihnen darin, wie Sie Bilder für hochauflösende Bildschirme bereitstellen, und erläutert Ihnen die technischen Hintergründe.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Der Rheinwerk Verlag

Wir sind Deutschlands führender Verlag für Computing, Design und Fotografie. Wir machen Bücher, E-Books und Videokurse für Einsteiger und Experten, für Entwickler, Anwender und Liebhaber, für Kreative, Neugierige und Wissensdurstige, für Ehrgeizige, Pragmatiker und Perfektionisten.

Wir machen Verlagsprodukte – wir publizieren nicht bloß. Wir hören zu, was Kunden wünschen. Wir bringen auf den Weg, wir entwerfen und gestalten, wir schaffen und ermöglichen. Wir machen die Verlagsprodukte, die Sie brauchen.

Ready to start learning?
Take This Course