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

Grundlagen des Layouts

Responsives Design

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Wie Sie das Layout einer Website mittels responsivem Design angehen, lernen Sie anhand des Werkzeugs Adobe Edge kennen.
09:37

Transkript

Wie Sie responsives Webdesign in Ihr Layoutkonzept einbeziehen können, will ich Ihnen hier in diesem Video vorstellen. Dazu benutze ich Edge Reflow. Aber zuvor gucken wir uns ein Beispiel an. Was bedeutet überhaupt responisves Design? Responsiv heißt, eine Website reagiert auf die Breite des Browsers und somit auf verschiedene Geräte, die mit verschiedenen Auflösungen daherkommen. Zum Beispiel Tablets oder Smartphones. Das kann man an einem Fenster auch hier simulieren. Ich verkleinere einfach mein Browserfenster auf der Seite und ab einer gewissen Position sortieren sich die Elemente einfach plötzlich untereinander oder werden komplett ausgeblendet. Zudem wird auch die Schriftgröße skaliert oder das Menü sortiert sich neu. In dieser Darstellung zum Beispiel ungefähr so bei Smartphonegröße haben wir hier ein Aufklappmenü. Wenn ich nun das Fenster auseinanderziehe, haben wir die Menüelemente wieder nebeneinander. Das wäre ungefähr die Darstellung auf einem Tablet. Auch die Inhalte darunter können sich natürlich unterschiedlich anordnen. Wenn ich hier zum Beispiel das Layout verkleinere, haben wir irgendwann Elemente nur noch untereinander, kaum noch nebeneinander. Ab einer gewissen Größe sind sie wieder da. Zum Beispiel hier. Das bedeutet also responsives Design. Und das kann man unter anderem mit dem Werkzeug Edge Reflow testen. Dieses Werkzeug in diesem Stand, den ich hier zeige, ist natürlich nur beispielhaft, es gibt dazu viele Möglichkeiten oder auch so genannte Frameworks, wo man dann entsprechende Inhalte platziert. Zunächst habe ich hier ein Layout, was erstmal aussieht wie ein ganz normales Monitor-Format in einer gewissen Breite. Ich habe aber keinerlei Angaben, wie breit mein Fenster ist. Es sei denn, ich gucke hier oben in das Lineal und wir sind hier bei 960 Pixel. Das sehe ich hier. Das ist also die maximale Breite. Und dann kann ich die Anzahl der Spalten definieren. Wie groß sollen den die Spalten werden und wie breit sollen sie auseinandersitzen? Nun kommen wir mal zum Layout. Ich sehe die Breite des Fensters ist exakt 100 %. Links und rechts gibt es entsprechende Markierungen und Grenzen, die man einstellen kann. Ich wende hier allerdings einfach 100 % an. Nun brauchen wir nochmal Text dazu. Wenn ich jetzt einen Textrahmen hier einfach aufziehe, so tue ich das mal hier über diese Breite und sehe, ich habe jetzt hier erstmal entsprechende Abstände nach links 8,5 % und nach oben sind es 68 Pixel. Das heißt, alles was die Breite eines Fensters angeht, wird hier relativ ausgedrückt, also in Prozenten. Und das ist das interessante an der ganzen Geschichte. Jetzt brauche ich noch ein bisschen Text für mein Layout. Das kann ich hier natürlich einfach einsetzen. Und diesen ganzen Text, den kann ich hier jetzt auch ganz konkret steuern. Die Breite des Fensters oder dieses Rahmens, stelle ich hier im Layout ein. Entsprechend auch die Abstände und Ränder. Und dann gibt es natürlich auch das Styling. Also letztendlich die CSS-Anweisungen, die daraus entstehen. Welche Schrift kann ich hier verwenden? Ich kann zum Beispiel die Source Sans verwenden, die Schriftfamilien von Adobe, die Open Source ist, deswegen heißt sie auch so. Wenn ich diese Source Sans hier verwende, dann kann ich auch gleich das Gewicht, also den Weight, einstellen. Ist das Ganze eher eine magere oder eine fette Type? Und in welche Schriftgröße wird die überhaupt dargestellt? Hier gibt es die Möglichkeit das Ganze in em zu machen, was ein proportionales Maß ist oder in Prozenten. Das heißt hier 100 % der normalen Schriftgröße. Oder ich sage einfach 400 %. Entsprechend haben wir eine Überschrift hier. Und das Ganze natürlich auch in einem fetten Schriftschnitt. Wir sehen hier auch, wie schön das Ganze typografisch passiert, wenn man die ganzen Breiten direkt auswählen kann. Die Schriftgröße und die Breite des Rahmens sind also schon in Prozenten ausgedrückt. Ich habe keine absoluten Maße. Das Nächste, was ich tue, ich brauche ein Bild. Das Bild habe ich hier vorbereitet ein .jpg. Und das platziere ich mir hier an dieser Position. Das muss natürlich ein bisschen skaliert werden, damit das hinterher auch eingepasst ist. Und dann kann ich das hier im Layout natürlich wunderbar auch unterkriegen. So jetzt habe ich ein Abstand nach links und das Bild soll natürlich auch irgendwo vielleicht nach oben ausgerichtet sein, damit die Dame hier quasi auf diese Textzeile guckt. Wenn ich jetzt also dieses Bild ausdrücke, so steht hier auch wieder ein Styling, man kann also noch diverse Ränder oder Konturen einstellen oder ein Schattenwurf. Oder ich sage, wie ist den eigentlich die Autodarstellung? Das heißt, die Größe des Bildes wird hier automatisch eingesetzt. Nun können wir folgendes machen: Das ist die normale Desktop-Version von meiner Mini-Website und wir können die Breite variieren mit diesem fetten Regler. Den ziehen wir jetzt einfach mal nach links und dann sieht man schon, was passiert. Das Bild wird immer kleiner und kleiner und kleiner. Die Schriftgröße bleibt bei 400 %. Der Textrahmen auch, der ändert sich natürlich in der Breite, aber dann wird halt alles übereinander und untereinander angeordnet. Und das ist natürlich insgesamt etwas unpraktisch. Das heißt ab einer gewissen Größe zum Beispiel hier sage ich, ich brauche eine neue Darstellung. Spätestens hier sieht das Ganze sehr ungünstig aus. Ich muss mit der Schrift kleiner werden oder ich muss auch die Anordnung der Elemente verändern. Dann kann ich hier einen neuen Viewpoint einsetzen. Dieser Viewpoint wird hier einfach bei 743 Pixel definiert. Und jetzt kann ich an dem Layout arbeiten. Ich kann also jetzt sagen, dieses Styling ändere ich auf zum Beispiel 300 %. Zum Beispiel wird das Bild vielleicht noch anders oder die Breiten des Textes werden anders. So lasse ich es mal. Und dann kann ich hinterher das Layout einfach verschieben. Und sobald der Regler diesen Viewpoint überspringt, wird das Layout entsprechend anders angeordnet. Und jetzt brauchen wir natürlich noch eine Variante. Spätestens hier unterhalb von diesem Begrenzungsbereich, wird es extrem eng. Und an der Stelle sage ich, ich möchte wieder einen neuen Viewpoint. Und jetzt setze ich einfach die Elemente untereinander. Das heißt, zuerst kommt das Bild oben und jetzt kann ich es natürlich wieder vergrößern, dadurch haben wir wieder Platz gewonnen. Ich kann also in diesem Spaltenraster genau einrichten. Und wir können natürlich auch den Textrahmen hier benutzen um die Breiten wieder auszurichten. An dieser Stelle könnte man sogar mit der Schriftgröße wieder leicht größer werden um diesen gewonnenen Platz auch auszunutzen. Jetzt gehe ich mit dem Regler wieder zurück. Jetzt sind wieder nebeneinander. Das Bild wird permanent mitskaliert. Und dann sind wir hier an dieser Stelle. Jetzt hat allerdings Edge Reflow hier die beiden Elemente umgedreht. Die Logik ist so, dass ich sage, in der Reihenfolge des Codes muss das Bild also oben beginnen, wenn es hier in der Smartphone-Fassung an dieser Stelle stehen soll. Darunter gibt es dann den Text. Und wenn das nebeneinander angeordnet ist, geht es nur so, dass das Bild hier links ist und dann der Text auf der rechten Seite und dann natürlich noch größer in der Desktop-Fassung. Das heißt, Sie müssen konzeptionell eigentlich anders vorgehen. Sie beginnen also in der Darstellung für Samrtphones oder kleine Tablets in der vertikalen Wiedergabe, layouten dafür und anschließend ziehen sie den Regler nach rechts und gestalten dann die anderen Layout-Fassungen. Über diese Art und Weise können Sie also mit Edge Reflow ein responsives Webdesign gestalten. Was dann hinterher für CSS-Anweisungen dabei rauskommt, das sieht man, wenn man zum Beispiel so eine Box anklickt und hier unten auf dieses Ausklappmenü geht. Dann steht hier der Text der CSS-Code, der für diese Elemente verantwortlich ist. Zum Beispiel das Flowting-Verhalten also wie fließen die Elemente innerhalb der HTML-Seite, also hier bei linksbündig. Wie groß ist die Schrift, wie hoch und wie breit sind die ganzen Elemente die Maße, etc. und so weiter. Und das kann ich hier für diese gesamten Elemente anklicken. Auch das Bild kann entsprechend eingestellt werden. Und dann sehen wir hier zum Beispiel, die maximale Breite ist hier 40 % oder hier die Abstände entsprechend. Und je nachdem welchen Viewpoint ich erreiche, kann ich diesen Code hier entsprechend abfragen und sehe dann hinterher, was damit passiert. Dieses Video war für Sie also ein Einblick, wie responsives Webdesgin in der Logik überhaupt funktioniert. Beachten Sie dabei, es ist eine hochkomplexe Thematik. Wenn Sie einen kompletten Internetauftritt planen, so sprechen Sie am besten mit Ihrem Programmierer um dieses Thema gemeinsam anzugehen.

Grundlagen des Layouts

Erfahren Sie am praktischen Beispiel, wie Sie das Layout von Magazinen, Zeitungen, Websites und weiteren Medien optimal gestalten und so zu professionellen Ergebnissen gelangen.

3 Std. 56 min (50 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!