Responsive Webdesign-Video-Training

Smarter mobil sein! Das Responsive Webdesign-Video-Training bringt dich mit seinen 5,5 Stunden Video-Training auf den mobilen Kurs! Ergänze die responsive Anpassung in deinem Workflow rund ums Webdesign und die Webentwicklung, damit deine Seiten auch auf PC/Tablet und Smartphone eine gute Figur machen!

  • Alle wesentlichen Funktionen für Responsive Webdesign erklärt
  • Optimaler Praxisbezug: Die Umsetzung eines modernen Weblayouts in Responsive Webdesign
  • Praxis-Tipps & hilfreiche Tools zur Webentwicklung

Worauf wartest du? Setz die neuen Webstandards um, denn dieses Training macht mächtig mobil!

Möchtest du mehr über dieses Produkt erfahren? Dann geht es hier direkt zu den Infos!

Dieses Produkt gibt es auch im Sparpaket

StarterKit Webdesign - Für den Einstieg mit Durchblick


29.95 4eck Media GmbH & Co. KG
Responsive Webdesign-Video-Training
Bewertungen
(34 Kundenrezensionen)
ISBN: 9783944091037
Software Kategorie Icon Kategorie Icon 

Das Responsive Webdesign-Video-Training ist mit seinen 5,5 Stunden Video-Training dein ultimatives Hilfsmittel, um deine Webprojekte dynamisch sowie unter Berücksichtigung der Anforderungen der jeweiligen Endgeräte optisch ansprechend auf Tablets, Smartphones und Co. zu bringen. Der Fokus der Video-Trainings liegt auf der praxisnahen Vermittlung von effektiven Techniken auf Basis von HTML5 und CSS3, wie sie auch tatsächlich in Kundenprojekten Anwendung finden - zum optimalen Verständnis sind die Arbeitsmaterialien den Inhalten beigelegt.

Responsive Webdesign

Der Inhalt gliedert sich in fünf Hauptkategorien:

  • 1. Einleitung
  • 2. Responsive Webdesign testen
  • 3. Grundlagen - am Beispielprojekt "Kaffee am Meer"
  • Der Grundaufbau (Aufbau, Speichern für Web, ...)
  • Der Grundaufbau in HTML und CSS
  • Erste Schritte in Richtung Responsive Webdesign
  • Media Queries

4. Fließende Rasterlayouts mit Dreamweaver CS6

  • Fließendes Rasterlayout
  • Fließendes Rasterlayout - ein Beispiel aus der Praxis

5. Ein umfangreiches Praxisprojekt

  • Einleitung
  • Kopfbereich/Header
  • Content-Bereich und Footer
  • Responsive Webdesign

Responsive Webdesign

Nutzungshinweise: Mit Kauf dieses Produktes ist die private und kommerzielle Nutzung erlaubt. Weitere Informationen findest du in den detaillierten Nutzungshinweisen.

Fazit:Die alten Tage sind gezählt, jetzt mobil werden! Optimiere deine Seite(n) mit responsiver Anpassung, damit das Ergebnis jederzeit und auf allen Geräten gleichermaßen gut aussieht.

Dein Trainer Pascal Bajorat

Pascal Bajorat

Pascal Bajorat ist ausgebildeter Mediengestalter und arbeitet von Berlin aus als Webentwickler. Er betreut diverse Online-Plattformen und Open-Source-Projekte, darunter sind auch einige WordPress-Plug-Ins.

Webseite: www.pascal-bajorat.com

Auszug: Responsive Webdesign-Video-Training - Einleitung in ein Praxis-Projekt: Teil 01

In dieser Video-Trainingsreihe baue ich ein Praxis-Projekt nach. Als Grundlage für die HTML-/CSS-Programmierung dient das HTML5Boilerplate und nachprogrammiert wird die Webseite Webdesign-Podcast.de. In diesem Teil wird vor allem der konzeptionelle Bereich abgedeckt und ein Einstieg in die Thematik vermittelt. Hinweis: Allen Teilen dieser Reihe liegen dieselben Arbeitsdateien bei!

Bewertet mit 5 von 5 Sternen, basierend auf 34 Bewertungen.

28.07.2017

Alles Super, hat mir sehr geholfen.
5 von 5 Sternen.
19.04.2017

tolles werk, hat mich sehr weiter gebracht
5 von 5 Sternen.
10.08.2016

Nicht zu leicht und nicht zu schwer, kann ich als "Profi", der ein paar Sachen aufzuholen hat, gut folgen und erkenne, was ich im Vergleich zu meiner "Monitorbreiten-Umschaltung" gegenüber richtigem Responsive Design ändern und mir aneignen muss.

Absoluter Pluspunkt auch die verschiedenen Herangehensweisen, je nach Arbeitsumgebung.

Mit PSD-Tutorials.de komme ich bestimmt ohne teure Seminare ans Ziel und das ist keineswegs selbstverständlich.

Vielen Dank :o)

5 von 5 Sternen.
06.03.2016

Damit wird man zum Wordpress-Profi :)
5 von 5 Sternen.
03.11.2015

Dieses Videotraining hat mir doch an der einen oder anderen Ecke auf die Sprünge geholfen. :-)
5 von 5 Sternen.
16.09.2015

Mit dieser erworbenen DVD hatte ich schnell Anschluß zu dem Thema Responsive Webdesign gefunden. Pascal Bajorat erklärt hier alles was man braucht um Mobile Webseiten zu erstellen. Besten Dank Pascal, dass Du Dir so viel Mühe gemacht hast um anderen zu helfen. Mach weiter so. Ich kann die DVD jedem bestens empfehlen. Volle Punktzahl.
5 von 5 Sternen.
01.07.2015

sehr gut gemacht. mach so weiter.
werde euch sehr gerne weiter empfehlen.

5 von 5 Sternen.
01.06.2015

Geniale und Hilfsreiche Tipps.
Sehr zu Empfehlen ;) :)

5 von 5 Sternen.
24.04.2015

Hier wird alles perfekt von Pascal dargestellt..absolut einsteigerfreundlich und wunderbar nachvollziehbar. Vielen Dank ans gesamte Team
5 von 5 Sternen.
14.02.2015

Bietet eine tolle Übersicht über die Möglichkeiten, seien Website auf Mobilgeräten verfügbar zu machen.
5 von 5 Sternen.
02.02.2015

Super Erklärt
5 von 5 Sternen.
01.01.2015

Sehr guter Workshop zum Responsive Webdesign.
Habe viel gelernt.

5 von 5 Sternen.
19.11.2014

Das Training hat wie immer meine Erwartungen voll erfüllt.
5 von 5 Sternen.
16.11.2014

Mit Begeisterung gekauft und gelernt!
Wie immer halt.

5 von 5 Sternen.
12.10.2014

Mit diesem Training habe ich meine erste Website erstellt und konnte diese gleich mit responsiivem Design ausstatten. Dank der wirklich gut erklärten Videos auf dieser DVD habe ich mich dabei schnell zurechtgefunden. Vielen Dank!
5 von 5 Sternen.
29.07.2014

Alles in allem ist es schon ein gutes Tutorial. Man kann dem Sprecher gut zuhören und er erklärt den Inhalt verständlich. Leider kann ich einigen Bewertungen nicht zustimmen. Für Anfänger wird alles zu schnell und nur in der Code-Version dargestellt. Was ich schade finde, dass er die Hilfen, die Dreamweaver CS6 hat, ab und zu nutzt oder mindestens darauf hinweist. Was ich auch nicht verstehe, dass das Thema Reponsive in zwei Beispielen erläutert wird. Es wäre sicher sinnvoll gewesen das Thema Reponsive Webdesign in einem Beispiel, das aber intensiver, zu erklären.
4 von 5 Sternen.
29.05.2014

Erste Klasse. Es wird alles so super erklärt. Besser hätte es nicht werden können. Vielen Dank & weiter so!
5 von 5 Sternen.
19.04.2014

Sehr hilfreiches Tutorial, sehr gut erklärt wie immer.
5 von 5 Sternen.
08.03.2014

Sehr interessant und informativ.
5 von 5 Sternen.
01.12.2013

ich habe sehr viel gelernt und es wurden fast alle meine offenen Fragen beantwortet.
5 von 5 Sternen.
21.10.2013

ich hab noch nicht alles ansehen können, aber das was ich gesehen und gehört habe ist sehr informativ und lehrreich sowie auch sehr gut, leicht und verständlich erklärt.
5 von 5 Sternen.
23.07.2013

Sehr gute Workshopsammlung,leicht verständlich und als Laie gut nachvollziehbar.
5 von 5 Sternen.
14.07.2013

Alles in allem ein sehr übersichtliches und gut aufgebautets und gut gegliedertes Training
5 von 5 Sternen.
06.05.2013

Super gemachte DVD, sehr informativ!
5 von 5 Sternen.
12.03.2013

Diese DVD ist Genial.

Für alle die sich für Homepage interessieren, ist sie sehr zu Empfhelen.

5 von 5 Sternen.
03.03.2013

Super Training... Wieder was neues gelernt... Hat mir sehr geholfen meine Webseite umzugestalten und zum reagieren zu überreden.. Weiter so :)
5 von 5 Sternen.
25.01.2013

Super Training, toller Service! Volle Punktzahl...
5 von 5 Sternen.
21.01.2013

super dvd genau das was ich gesucht habe.
5 von 5 Sternen.
30.09.2012

Hat mir sehr viel gebracht. Meiner Meinung nach ein sehr guter Einstieg in Responsive Webdesign. Absolute Empfehlung für Beginner.
5 von 5 Sternen.
14.08.2012

Super Videotutorial kann ich dazu sagen
5 von 5 Sternen.
01.08.2012

Super erklärt und auch vom technischen Standpunkt überzeugt diese DVD. Ich kannte zwar leider das meiste schon, aber dennoch habe ich ein paar wichtige Sachen gelernt.
5 von 5 Sternen.
23.07.2012

klasse Tutorial... sehr gut und vertändlich erklärt
5 von 5 Sternen.
21.07.2012

Alles in allem ist es schon ein gutes Tutorial. Man kann Pascal wie gewohnt gut zuhören und er erklärt den Inhalt verständlich.

Ist man jedoch schon etwas bewanderter im Umgang mit HTML und CSS, so muss ich leider vom Kauf abraten! Alles was hier zum Thema Responsive Webdesign gesagt wird, kann man sich auch selbst schnell im Internet zusammen tragen.

Ein großer Teil des Inhalts befasst sich einfach nur mit dem Aufbau einer Resposive Webseite in drei verschiedenen Größen, unter der Nutzung von CSS @media. Zugegeben, viel mehr scheint Responsive Webseiten-Design auch nicht zu sein.

Eine Kaufempfehlung kann ich wissensdurstigen Anfängern aussprechen. Hat man jedoch etwas Erfahrung und weiß wie man auf Google "Responsive Webdesign" und "@media" eingibt, so rate ich vom Kauf ab.

Schade fand ich, dass die Möglichkeit die verschiedenen Auflösungsgrößen zu testen so sehr auf Apple beschränkt war. Der iPhone Simulator ist eine sehr gute Möglichkeit die Webseite für Apple-Geräte zu testen. Für mich als Windows-Nutzer jedoch nutzlos.
Es gibt jedoch eine sehr gute Möglichkeit auch in Windows die Ausgabe der Webseite in den verschiedenen Größen zu testen. Browser kleiner schieben! ;) Für FF gibt es das Add-On Web-Developer. Installiert man sich dieses, so kann man darüber die Browser- oder Fenstergröße exakt in Pixeln angeben. Im Video gab es hier bei der kleinen Mobilgeräte-Auflösung das Problem, dass der Browser nicht so klein geschoben werden konnte. Lösung: Navigations-Symbolleiste ausblenden. Dann geht es!

Ich hätte mir mehr von dem Thema erwartet. Anfängern sage ich: "Kaufen!". Fortgeschrittenen rate ich: "Lieber selbst recherchieren."

2 von 5 Sternen.
20.07.2012

Anschaulich gemachtes Training, welches einige Möglichkeiten zeigt, die zum Ziel zu führen. Wie vom Autor ausdrücklich erwähnt sind dies nicht die einzigen Wege, aber selbst nach Rom führen ja bekanntlich mehrere. Das ist bei der Webseitenerstellung natürlich nicht anders .. die gezeigten Möglichkeiten (in Dreamweaver) sind nachvollziehbar und haben - bei mir - spontan und problemlos zum Erfolg geführt.
5 von 5 Sternen.
ALLE

img

Responsive Webdesign - Einleitung

Länge: 3 Minuten
In diesem Video-Training möchte ich mich dir kurz vorstellen und dir einen Überblick über dieses Training verschaffen.

  Auf TutKit.com ansehen


img

Responsive Webdesign testen

Länge: 7 Minuten
In diesem Video-Training möchte ich dir zeigen, wie du deine Responsive-Webdesign-Seiten mittels Dreamweaver, XCODE oder Online-Tools testen kannst.

  Auf TutKit.com ansehen


img

Responsive Webdesign - Kaffee am Meer - Teil 1: Der Grundaufbau

Länge: 7 Minuten
In diesem Training möchte ich dir das Thema Responsive Webdesign nahebringen. Dieses erste Video-Training behandelt vor allem allgemeine Basics wie den Grundaufbau und das richtige Speichern von Bildern für Web in Photoshop usw.

Wer sich hier bereits auskennt, kann diesen Teil überspringen und mit dem darauf folgenden weitermachen.

Hinweis: Die beigefügten Arbeitsdateien sind bei allen vier Teilen dieselben und enthalten die komplette fertige Webseite mit Responsive-Design-Anpassung.

  Auf TutKit.com ansehen


img

Responsive Webdesign - Kaffee am Meer - Teil 2: Der Grundaufbau in HTML und CSS

Länge: 38 Minuten
In diesem Video-Training zeige ich die einfache Grundumsetzung der Beispielseite mittels HTML und CSS. Es werden einige Grundlagen erklärt und die eigentliche Seite komplett umgesetzt, sodass an dieser Stelle ein komplettes Beispiel für eine einfache HTML- und CSS-Seite existiert.

Hinweis: Die beigefügten Arbeitsdateien sind bei allen vier Teilen dieselben und enthalten die komplette fertige Webseite mit Responsive-Design-Anpassung.

  Auf TutKit.com ansehen


img

Responsive Webdesign - Kaffee am Meer - Teil 3: Erste Schritte in Richtung Responsive Webdesign

Länge: 9 Minuten
In diesem Video-Training werde ich das in Teil 1+2 erstellte Design bzw. die in HTML- und CSS-Code vorliegende Basis-Seite anpassen. Dies sind die ersten Schritte in Richtung Responsive Webdesign. Du lernst den Umgang mit fließenden Elementen, die eine wichtige Basis für gutes Responsive Webdesign bilden.

Hinweis: Die beigefügten Arbeitsdateien sind bei allen vier Teilen dieselben und enthalten die komplette fertige Webseite mit Responsive-Design-Anpassung.

  Auf TutKit.com ansehen


img

Responsive Webdesign - Kaffee am Meer - Teil 4: Media Queries

Länge: 31 Minuten
In diesem Teil behandle ich den wichtigsten Part beim Thema Responsive Webdesign, die Media Queries. Diese sind unerlässlich, um Seiten für die verschiedenen Endgeräte zu optimieren und zugleich einfach zu verstehen, wenn man erst einmal die dahinter steckende Funktionsweise kennt.

Wie genau dies funktioniert, wie man es am besten testet, zeige ich in diesem letzten Video-Training der Reihe.

Hinweis: Die beigefügten Arbeitsdateien sind bei allen vier Teilen die gleichen und enthalten die komplette fertige Webseite mit Responsive Design Anpassung.

  Auf TutKit.com ansehen


img

Dreamweaver CS6: Fließendes Rasterlayout

Länge: 9 Minuten
Adobe hat der neuen Version von Dreamweaver eine sehr nützliche Funktion verpasst: Denn mit der neuen Version CS6 ist es möglich,  fließende Layouts sehr einfach mit einem selbst definierten Raster zu erstellen.

Wie einfach das funktioniert, lässt sich aber kaum beschreiben, sieh es dir daher am besten selber an.

  Auf TutKit.com ansehen


img

Dreamweaver CS6: Fließendes Rasterlayout - ein Beispiel aus der Praxis

Länge: 11 Minuten
In meinem vorherigen Video-Training habe ich ja bereits die Einstellungen der Funktion "Fließendes Rasterlayout" in Dreamweaver CS6 erläutert. Bei dem Beispiel habe ich mich an einen einfachen Standard-Webseiten-Aufbau gehalten. In diesem Video-Training möchte ich den Grundaufbau von Webdesign-Podcast.de zeigen. In der vierteiligen Video-Trainingsreihe erkläre ich den kompletten Aufbau von Webdesign-Podcast.de, dadurch haben wir an dieser Stelle einen sehr guten Vergleich, wie schnell und einfach das Ganze hier mit der Funktion "Fließendes Rasterlayout" in Dreamweaver CS6 funktioniert.

Einziges Problem ist die teils etwas mürrische Positionierung des Cursors, wenn man neue DIV-Tags für das fließende Raster an der richtigen Stelle anlegen will.

  Auf TutKit.com ansehen


img

Responsive Webdesign - Praxis-Projekt - Teil 1: Einleitung

Länge: 22 Minuten
In dieser Video-Trainingsreihe baue ich ein Praxis-Projekt nach. Als Grundlage für die HTML-/CSS-Programmierung dient das HTML5Boilerplate und nachprogrammiert wird die Webseite Webdesign-Podcast.de.

In diesem Teil wird vor allem der konzeptionelle Bereich abgedeckt und ein Einstieg in die Thematik vermittelt.

Hinweis: Allen Teilen dieser Reihe liegen dieselben Arbeitsdateien bei!

  Auf TutKit.com ansehen


img

Responsive Webdesign - Praxis-Projekt - Teil 2: Kopfbereich/Header

Länge: 38 Minuten
In dieser Video-Trainingsreihe baue ich ein Praxis-Projekt nach. Als Grundlage für die HTML-/CSS-Programmierung dient das HTML5Boilerplate und nachprogrammiert wird die Webseite Webdesign-Podcast.de.

In diesem Teil wird der HTML- und CSS-Aufbau des Headers sowie der allgemeine Grundaufbau erläutert.

Hinweis: Allen Teilen dieser Reihe liegen dieselben Arbeitsdateien bei!

  Auf TutKit.com ansehen


img

Responsive Webdesign - Praxis-Projekt - Teil 3: Content-Bereich und Footer

Länge: 48 Minuten
In dieser Video-Trainingsreihe baue ich ein Praxis-Projekt nach. Als Grundlage für die HTML-/CSS-Programmierung dient das HTML5Boilerplate und nachprogrammiert wird die Webseite Webdesign-Podcast.de.

In diesem Teil wird der Aufbau des Content-Bereiches mit den einzelnen Artikeln sowie der Footer mit seinen Listen erklärt.

Hinweis: Allen Teilen dieser Reihe liegen dieselben Arbeitsdateien bei!

  Auf TutKit.com ansehen


img

Responsive Webdesign - Praxis-Projekt - Teil 4: Responsive Webdesign

Länge: 23 Minuten
In dieser Video-Trainingsreihe baue ich ein Praxis-Projekt nach. Als Grundlage für die HTML-/CSS-Programmierung dient das HTML5Boilerplate und nachprogrammiert wird die Webseite Webdesign-Podcast.de.

In diesem Teil wird der wohl interessanteste Part dieses Praxis-Projekts erklärt: Hier bekommst du alle Informationen darüber, wie eine Webseite möglichst variabel aufgebaut wird und mittels Media Queries die entsprechenden Anpassungen für Tablets und Smartphones durchgeführt werden.

Hinweis: Allen Teilen dieser Reihe liegen dieselben Arbeitsdateien bei!


  Auf TutKit.com ansehen


img

Farbe im Web

Länge: 90 Minuten
Der erste Eindruck einer Website entsteht innerhalb von 50 Millisekunden. Ob der Besucher dabei ein gutes oder ein schlechtes Gefühl bekommt, hängt stark von der richtigen Farbwahl ab. Denn jede Farbe und jeder Kontrast löst bestimmte Gefühle aus und kann den Betrachter somit aktiv beeinflussen.

  Auf TutKit.com ansehen

Mithilfe der Lernkurve erfährst du, welche weiteren Themen zu deinem ausgewählten Training inhaltlich am besten passen. So erkennst du auf einen Blick, wie dir der einfache Einstieg zum gekonnten Aufstieg am besten gelingt und du kannst dein eigenes Know-how zielführend einschätzen.