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

Responsive Webdesign – Grundlagen

Flüssige Layouts

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Eine weitere Komponente "responsiver" Web-Seiten im klassischen Sinne sind Breitenangaben in Prozent. Im Film sehen Sie, wie Sie Pixelwerte in Prozent umrechnen und aus einem fixen Layout ein "flüssiges", dynamisches, machen.

Transkript

Flüssige Breitenangaben sind eine wichtige Komponente von Responsiven Layouts. Meist aber hat man eine Basis, die auf Pixelangaben setzt. Das heißt man muss Pixel in Prozent konvertieren. Sehen wir uns an, wie das in der Praxis funktioniert. Die Besonderheit von Prozentwerten in CSS ist, dass sie immer relativ zu ihrem Kontext sind. Also, wie breit ist jetzt zum Beispiel ein Element, dem ich eine Breite von 50% zuweise? Das hängt vom Kontext ab. Sehen wir uns ein Beispiel an. Ich habe hier ein Element mit einer Breite von 50%. Schauen wir uns das mal an. Es ist mein oberes Element. Und wenn ich jetzt das Browser-Fenster kleiner mache, dann wird es auch kleiner und der Bezugspunkt für diese 50% hier sind das Browser-Fenster. Anders wird das hingegen, wenn wir jetzt Elemente ineinander verschachteln. Und das habe ich in diesem Beispiel hier gemacht. Äußerer Element hat wieder 50%. Aber da drinnen steht jetzt ebenfalls ein Element mit 50% Breite. Und damit bezieht sich das innere Element auf das äußere Element. Also, wenn wir dieses Beispiel hier jetzt anschauen, dann sehen Sie: diese 50% sind jetzt nur die Hälfte des umfassenden Elements. Also, der Kontext spielt eine ganz zentrale Rolle. Und den Kontext brauchen wir dann auch, wenn wir aus Pixeln Prozent machen wollen. Ich habe hierfür ein kleines Layout-Beispiel vorbereitet. Sehen wir uns das einmal an. Das ist ein relativ einfaches Layout. Das sehen hier... Das hier brauchen wir nicht. Dass man unsere Prozentwerte... Ein einfaches Layout. Das hat derzeit Angaben in Pixeln. Das erkennen Sie, wenn ich das jetzt hier kleiner mache, als das vorgesehen ist. Dann bewegt sich das nicht mit und wird nicht selber auch kleiner, sondern bleibt so. Ich versuche es ja nochmal ein bisschen auch niedriger zu machen. Und dann erscheint das, was man bei festen Layouts in Pixeln immer hat. Wenn mein Browser-Fenster kleiner wird, als die vorgesehene Breite, dann habe ich so eine horizontale Scroll-Leiste hier. Also, das ist mein Beispiel-Layout. Und dieses Beispiel-Layout wollen wir dann einmal in ein flüssiges Layout verwandeln. Das heißt, in ein Layout, bei dem die Breitenangaben in Prozent festgelegt sind. Schauen wir uns erstmal den Code an. Sie sehen, es gibt ein umfassendes Element. Dem habe ich die Class Container gegeben. Es gibt ein Kopfbereich. Es gibt ein Navigationsbereich. Und es gibt einen Inhaltbereich. Und die stehen, also Kopf, Navigation und Inhalt, stehen in diesem umfassenden Element drinnen. Das umfassende Element hier - der Container, hat eine Breite von 960 Pixeln. Das war eben auch, was wir eben beobachtet haben. Wenn das Browser-Fenster kleiner wird, dann erscheinen deswegen Rollbalken. Außerdem gibt es jetzt Formatierungen, die wichtig sind bei der Navigation und beim Inhaltsbereich. Die Navigation hat derzeit eine Breite von 360 Pixeln - wird links gefloatet. Der Inhaltsbereich wird auch links gefloatet und hat eine Breite von 600 Pixeln. Und derzeit ist es natürlich auch so berechnet, dass 360+600 - ergibt die 960. Jetzt wollen wir aus dem Ganzen ein flüssiges Layout machen. Und ich speichere es erstmal unter einem neuen Namen ab. Also, das soll jetzt flüssig werden. Was müssen wir dafür alles ändern? Wir müssen überall da angreifen, wo wir Pixelwerte haben für Breitenangaben oder für Abstände. Der erste Pixelwert, der uns begegnet, ist dieser hier - 960 Pixel. Das wird da nachher unser Bezugspunkt werden. Und da ist jetzt einfach ein bisschen Geschmacksache, was ich dafür angebe. Ich kann schreiben jetzt: bei der flüssigen Variante - eine Breite von 100%. Dann würde das aber bedeuten, dass ich rechts und links keine Abstände habe. Wenn ich aber möchte, dass das Ganze zentriert sein soll und eventuell rechts und links auch kleine Abstände sind, dann werde ich einen anderen Wert nehmen, beispielsweise hier eine Breite von, sagen wir mal, 98%. Ich könnte auch 95% nehmen. Das probieren Sie einfach aus und schauen, was am besten passt. Diese Angabe hier kann ich natürlich rausschmeißen. Ich lasse sie aber erst einmal drin, weil wir sie nachher noch für ein Experiment brauchen. Ok, damit ist natürlich erstmal noch nicht so viel gewonnen. Wir haben jetzt aber hier dem umfassenden Element die Breite da richtig gesetzt. Schauen wir uns an, wo weiter Pixelangaben sind, um die wir uns kümmern müssen. Da gibt es den Kopfbereich, der hat ein Padding. Das verschieben wir ein bisschen, weil das ein Spezialfall ist. Jetzt kommen wir aber hier zur Navigation. Die hat eine Breite von 360 Pixeln und das müssen wir natürlich auch in Prozent umrechnen. Wie berechnet man das? Dafür gibt es eine sehr nützliche Formel. Und diese Formel lautet: Zielbreite durch Kontext ist das Ergebnis, was wir brauchen. Zielbreite ist in unserem Fall die 360 Pixel, weil die Navigation ist ja 360 Pixel breit. Der Kontext ist das umfassende Element, auf das sich dann die Prozentangaben beziehen. Das war unser Container mit 960 Pixeln. Und das Ergebnis ist dann der Prozentwert, den wir brauchen. Also, schauen wir uns das hier einmal in der Praxis an. Wir haben jetzt die 360 Pixel und das... Dafür nehme ich natürlich einen Taschenrechner. Da kann man den nehmen, der beim Betriebssystem dabei ist. Wir müssen also jetzt berechnen: 360 geteilt durch 960. Und dann kriegen wir hier den Wert: 0,375 Das heißt, das sind 37,5 Prozent. Das schreibe ich jetzt hier einmal hin: 37.5% Kann natürlich auch nützlich sein, wenn man später wissen möchte, wie kommt denn dieser komischer Wert zu Stande, dass man sich hinschreibt, wie der ermittelt wurde. Also, das habe ich jetzt hier noch einmal notiert: dahinter, in einem Kommentar. Ok, damit haben wir unsere erste Umrechnung durchgeführt. Kommen wir zur unserer zweiten Umrechnung. Der Inhaltsbereich ist derzeit 600 Pixel breit. Auch das müssen wir natürlich in Prozent umrechnen. Und da können wir wieder dieselbe Formel von eben nehmen. Also, wieder die Formel: Zielbreite durch Kontext ist gleich Ergebnis. Das heißt wir nehmen 600, teilen das durch 960 und das Ergebnis ist jetzt 0,625. Das heißt, 62,5 Prozent. Und das tragen wir jetzt ein, bei der Breite des Inhaltsbereiches. Also, 62.5% Und hier kann ich mir natürlich auch ein Kommentar machen, damit ich später weiß, was ich hier berechnet habe und wie dieses Ergebnis zu Stande kommt. Wir hätten das natürlich in dem Fall auch anders ausrechnen können, weil insgesamt müssen unsere Bereiche ja am Beispiel das ganze umfassende Element füllen. Und wir hätten natürlich auch ausrechnen können, was fehlt uns noch zu 100%, wenn wir die 37,5% bereits haben. Das ist natürlich dann der richtige Moment, um das einmal auszutesten. Schauen wir uns jetzt hier einmal das an. Und wir sehen: das ändert sich jetzt immer. Ich bin jetzt ganz schmal geworden und habe hier trotzdem keinen Rollbalken. Es wird natürlich dann irgendwann zu schmal, dann sieht es nicht mehr gut aus. Aber Sie sehen, das passt sich jetzt immer immer an. So, also, das hat hier gut geklappt. Jetzt folgendes. Also, bei einem echten Layout wird es natürlich so sein, dass man diese Breite beschränken möchte. Dass man sagt: also, irgendwann werden die Zeilen so lange und wir wollen nicht, dass es jetzt beim riesigen Monitor ein jemand wirklich das Browser-Fenster so groß aufzieht, auch so riesengroß ist. Das können Sie natürlich machen, indem Sie min-width und max-width hier angeben. Also, bei dem Container könnte ich jetzt natürlich sagen: einfach an dem Layout testen. Die Mindestbreite, die ich brauche, ist meinetwegen jetzt hier 500 Pixel. Und die maximale Breite, die mein Layout aushält, ist 1200 Pixel oder so ähnlich. Dann bedeutet, dass es hier nur innerhalb dieses Bereiches flüssig ist und davor und danach nicht. Wenn wir das einmal hier am Beispiel ansehen und aktualisiert ist es. Dann sehen Sie, dass irgendwann, wenn es eben schmaler wird... Jetzt im Beispiel: als die 500 Pixel, kommt wieder mein Rollbalken. Und wenn es dann größer wird, als der Bereich, der jetzt sehr großzügig angegeben ist von mir, dann sehen Sie irgendwann auch, dass hier der Bereich größer wird und dass das Layout an sich nicht mehr selber, dieser Inhalt hier breiter wird. Ich möchte das jetzt erst einmal hier aber auskommentieren, weil wir in Ruhe die Breitenangaben noch weiter anschauen wollen und das würde da ein bisschen irritieren, wenn wir hier diese Beschränkung drin haben. Aber die wäre natürlich sehr sinnvoll bei echten Beispielen. Jetzt zuerst einmal zu der Frage. Wir haben ja jetzt viel rumgerechnet und bei komplexeren Layouts müssen Sie noch mehr rechnen. Dann wäre es natürlich schön: wir könnten auch ermitteln, ob wir richtig gerechnet haben. Und dafür gibt es einen schönen Trick, den ich Ihnen jetzt einmal zeigen möchte. Sie können nämlich temporell ja wieder die Breitenangabe auf den ursprünglichen Wert setzen, nämlich auf die 960 Pixel. Und dann können Sie beim Firefox durch den Firebug anschauen, ob die Werte stimmen. Der Firebug ist ja eine sehr nützliche Erweiterung für den Firefox. Und wenn ich den jetzt hier installiert habe und dann aktiviere, dann kann ich das jetzt hier gleich... Muss ich ein bisschen runterziehen hier, dass ich die einzelnen Sachen sehe. Dann habe ich hier meinen Container. Und da sehe ich dann die ganzen Angaben dafür. Muss ich mir ein bisschen einrichten, dass es die richtige Höhe hat. Dann, was uns natürlich interessiert, ist die Navigation. Da habe ich die Breite von 37,5. Jetzt möchte ich gerne wissen, entspricht das denn unseren ursprünglichen 360 Pixeln oder nicht. Und das kann ich über Berechnet herausfinden und dann sehen Sie hier: bei Berechnet kommt das Ergebnis, was der Browser wirklich hier ermittelt. Das sind genau die 360 Pixel. Wenn wir hier auf unseren Inhaltsbereich schauen, dann hat das auch genau die 600 Pixel, das heißt, wir haben richtig gerechnet. Das ist ja schon mal sehr schön. Wir sollten dann aber natürlich diese Angabe wieder auskommentieren, sonst haben wir kein flüssiges Layout, wenn der umfassende Container hier auf eine feste Breite gesetzt ist. Jetzt fehlt noch eine Kleinigkeit. Um einen Wert haben wir uns nämlich nicht gekümmert. Das ist dieser Kopf-Bereich, der hat einen Padding. Ein Padding nach oben und unten. Also, wenn Sie zwei Werte hinter Padding haben, dann gilt ja der obere für oben und unten. Und der zweite - für rechts und links. Sie können jetzt hingehen und dieses Padding auch in Prozentwerten angeben. Seltsamerweise, manche Sachen sind ja seltsam in CSS, bezieht sich das vertikale Padding trotzdem auf die Width, auf die Breite. Schauen wir uns das einmal an. Das heißt, wir können auch wieder unsere Formel anwenden und sagen: 20 - das ist ja hier der Zielwert, geteilt durch 960 - das ist ja die Gesamtbreite, auch des Kopfbereiches, da ist ja nichts anderes sonst festgelegt. Und dann haben wir den Wert 0,020833 und den können wir jetzt hier angeben. Das heißt, den schreibe ich jetzt hierhin: 2,08333333% Und je exakter Sie den Wert hier auch angeben, desto exakter ist natürlich auch das Ergebnis. Das ist jetzt die eine Möglichkeit hier. Wenn wir uns das anschauen: jetzt sind hier die Angaben in Prozent gemacht. Und es wird natürlich dann hier umgerechnet. Auch wieder in den richtigen Wert. Das ist die eine Möglichkeit. Die andere Möglichkeit, was ich Ihnen eigentlich empfehlen würde, wäre für vertikale Abstände, also nach oben und unten, nicht auf Prozent zu setzen, sondern hier für em einzusetzen und die an der Schriftgröße zu orientieren. Also, das ist jetzt die andere Möglichkeit, die wir haben. Und dann müssen wir natürlich aus den ursprünglichen 20 Pixeln die entsprechenden em-Werte berechnen. Und wenn wir die em-Werte berechnen, dann ist der Bezugspunkt ein anderer. Nehme ich die aktuelle Schriftgröße. Und wenn die nicht geändert wurde, wir haben hier 100% angesetzt, dann können wir von einer em sind 60 Pixel, ausgehen. Und dann haben wir hier unsere 20 Pixel und können dann anschauen, wie viel em das sind. Teilen das hier durch diesen Standardwerten. Dann ist es 1,25 em Also, das ist die andere Möglichkeit, dass Sie hier mit em arbeiten. Und dann bezieht sich das auf die gewählte Schriftgröße, was eben ganz passend ist, dass hier Abstände auch größer werden, wenn die Schrift größer ist. Fassen wir die wichtigsten Dinge noch einmal zusammen. Wenn Sie aus einem Layout in Pixeln ein flüssiges Layout machen wollen, Sie müssen sich die neuen Werte nach der Formel: Zielbreite durch Kontext ist gleich Ergebnis berechnen. Das haben wir am Beispiel bei den Breitenangaben so gemacht. Für vertikale Abstände, das heißt, nach oben und unten, können Sie ebenfalls diese Formel verwenden und die Angaben in Prozent machen. Ich würde Ihnen hier aber empfehlen die Werte in em umzurechnen, damit Sie sich an der Schriftgröße orientieren. Außerdem haben Sie gesehen, dass es einen Trick gibt, um zu schauen, ob die Berechnungen auch korrekt sind. Dafür können Sie probeweise dem umfassenden Element die ursprüngliche Pixelbreite geben und dann anschauen, bei den berechneten Werten, beispielsweise im Firebug, ob auch wirklich alles stimmt.

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!