Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Responsive Webdesign – Grundlagen

Layout: responsive vs. adaptive

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Wenn Sie ein Layout mit Pixeln erstellen und Anpassungen für bestimmte Viewport-Breiten vornehmen, spricht man von "Adaptive Layout".

Transkript

Neben dem Responsive Web Design gibt es auch das Adaptive Web Design. Dabei setzt man nicht auf flüssige Breitenangaben, sondern auf feste Pixelwerte. Ein Beispiel dafür ist die Sony Web-Seite. Wenn ich hier jetzt einfach mal das ein bisschen verkleinere, dann sehen Sie wie hier dieser grauer Bereich, der wird schmaler. Aber ansonsten bleiben die Sachen in einer vorgefertigten Größe und dann gibt es irgendwann einen Sprung zu einer anderen Layout-Darstellung. Aber wieder es ist so: nur der Außenabstand verringert sich. Die Breiten von anderen Elementen sind fix und dann irgendwann springt das. Aber wir haben jetzt immer sozusagen feste Werte. Und nur was flexibel ist, ist dieser Außenabstand. Und die Bilder an sich beispielsweise verändern sich nicht in der Größe und genauso auch verändern sich die anderen Sachen nicht in der Größe. Das sind immer feste Pixelwerte, die hier verwendet werden. Schauen wir das mal bei den Bildern hier unten an, dann sehen Sie auch die Bilder werden nicht schmaler, sondern die haben eine feste Größe. Wenn wir hingegen das vergleichen mit einer klassischen Responsiven Web-Seite, wo die Angaben in Prozent sind, dann sehen Sie hier... Bin ich auf der Seite von Microsoft. ...dass die Bilder schmaler werden und alles dazwischen, dass das immer flüssige Angaben sind dazwischen. Das heißt, Angaben in Prozent, sich das immer so anpasst. Hier hingegen ist es so, die Elemente haben eine feste Breite. Und wenn die keinen Platz mehr haben, dann kommen die Breakpoints. Mann entscheidet sich für eine andere Darstellung, die Elemente selber sind aber an sich fix. Der Vorteil vom Adaptive Web Design ist natürlich, dass Sie mehr Kontrolle innerhalb der einzelnen Stufen haben, weil Sie mit Pixelwerten arbeiten können. Es ist die Frage, ob Kontrolle immer ein Vorteil ist, aber es erleichtert natürlich erst einmal die Entwicklung, weil es dem klassischen IE entgegenkommt, wo man ja sowieso mit Pixelwerten gearbeitet hat. Der Nachteil an dieser Methode ist, dass Sie ja hier nur an Gerätetypen orientierte Breakpoints einsetzen können. Und da ist immer die Gefahr, dass Geräte, die weniger gut an Standardschema passen, weniger gut berücksichtigt werden, dass der Platz dann eben nicht optimal genutzt wird, der eigentlich zur Verfügung steht, wenn ein Gerät ein bisschen breiter ist, als der Standard. Und das ist natürlich beim klassischen Responsivem Web Design, wo Sie flüssige Angaben in Prozent haben, anders.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!