Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Responsive Webdesign – Grundlagen

Zeilenlänge und Aufteilung in Spalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Für gute Lesbarkeit ist auch die Zeilenlänge entscheidend. Um zu sehen, ob die Zeilenlänge passt, bietet sich der Sternchen-Trick an. Außerdem lernen Sie eine Möglichkeit kennen, zu lange Zeilen auf mehrere Spalten aufzuteilen.

Transkript

Für eine gute Lesbarkeit ist auch die Zeilenlänge entscheidend. Um zu sehen, ob die Zeilenlänge passt, bietet sich der Sternchen-Trick von Trent Walton an. Diesen Trick sehen wir uns zuerst an und dann beschäftigen wir uns mit der Möglichkeit zu lange Zeilen auf mehrere Spalten aufzuteilen. Der Trick von Trent Walton besteht einfach darin, dass Sie sich überlegen wie viele Zeichen sind gut, wenn sie in einer Zeile sind. Im Beispiel sage ich mal: es sind zwischen 45 und 75 Zeichen pro Zeile sind gut. Und wenn diese, der kleinste Wert erreicht ist, machen Sie ein Sternchen. Und wenn der größtmögliche Wert erreicht ist, machen Sie auch ein Sternchen. Und dann können Sie sich das Dokument ansehen. Mache ich es jetzt einmal hier ein bisschen kleiner. Und dann sieht man immer was sind gute Zeilenlängen. Also, diese Zeilenlänge wäre sozusagen an der oberen Grenze. Und hier, das hier wäre auch möglich, dass der Umbruch innerhalb dieser Sternchen stattfindet. Oder eine gute kurze Zeilenlänge wäre beispielsweise dieses hier. Wenn es aber länger so ist, dann wäre die Zeile zu kurz. Was kann man jetzt machen, um die Zeilenlänge zu verändern? Da gibt es natürlich mehrere Parameter, an denen Sie schrauben können. Eine Möglichkeit ist auch die Schrift zu vergrößern, was sich ja auch anbietet für größere Bildschirme. Die andere Möglichkeit kommt von CSS 3 und die besteht darin, dass man automatisch, wenn zu viel Platz zur Verfügung ist, das heißt die Zeilen zu lang werden würden, die sie auf mehrere Spalten aufteilt. Diese Spaltenaufteilung kennen Sie an sich auch aus dem Print. Da ist die ganz gängig, wenn man beispielsweise an Zeitungen denkt. Wie funktioniert das? Dafür habe ich hier einmal ein Beispiel vorbereitet. Ich habe hier unten wieder einfach Absätze mit Text. Und hier oben sind meine Definitionen für die automatische Aufteilung in Spalten. Die Eigenschaft, die ich hier verbrauche, ist column-width. Damit kann ich sagen: also, wenn die Spalten eine bestimmte Breite haben, dann soll automatisch eine neue Spalte kommen. Also, das ist meine Optimalspaltengröße, die ich jetzt hier angegeben habe: 20 em. Und wenn die wesentlich länger werden und zwei Spalten Platz haben, dann kommt automatisch die Aufteilung. Sie sehen: diese Angabe müssen Sie zum einen als Standard-Variante schreiben. Das ist ohne irgendein Präfix. Sie brauchen außerdem noch die Angabe mit dem moz-Präfix für den Firefox. Für Webkit-Browser wie zum Beispiel Safari oder auch den Opera ab Version 15, schauen wir uns das hier einmal an. So, hier habe ich jetzt eine Spalte. Jetzt wird die Spalte lang-lang und dann plötzlich bricht das auf und das fließt eben auf von hier unten hier oben weiter. Also, das geschieht jetzt hier automatisch. Und wenn ich es noch größer werde, sind es sogar drei Spalten. Das heißt, ich habe hier jetzt nicht festgelegt wie viel Spalten ich haben möchte, sondern habe einfach nur gesagt, was ist meine optimale Breite für die Spalten. Und wenn dann die Zeilen zu lang werden, dann funktioniert das automatisch, dieser Umbruch erfolgt. Jetzt gibt es aber bei diesen Mehrspalten-Aufteilungen ganz schnell ein großes Usability-Problem. Und das sehen wir hier auch, wenn wir mal vorstellen, dass das Ganze jetzt hier kleiner wird. Und dann hätten wir folgenden Fall. Ich muss jetzt, wenn ich den Text hier lese, ganz nach unten gehen und dann bin ich hier. Und dann muss ich nach oben scrollen, um hier weiter zu lesen. Und das ist von der Usability her natürlich katastrophal. Das sollten Sie auf jeden Fall vermeiden. Und da sieht man natürlich auch noch einen Unterschied jetzt zwischen Print und Web, also bei Zeitschriften ist das ganz was anderes. Da geht es gut, dass ganz unten, man dann wieder oben beginnt. Aber hier eben, indem man scrollen muss, passt das nicht mehr. Was können wir hier machen? Hier können wir natürlich wieder mit Media Queries ansetzten und sagen: ich möchte eine bestimmte Mindesthöhe haben. Und nur dann mache ich überhaupt die Aufteilung in Spalten. Sonst lasse ich diese Aufteilung in Spalten und mache sie nicht. Schauen wir einmal dieses Beispiel an. Sie sehen hier eine Media Query mit min-height. Also, das ist jetzt auch ein Fall, wo es gut ist auf die Höhe zu gehen, wo man die meisten Media Queries ja immer auf die Breite macht. Aber hier ist die Höhe ein guter Ansatzpunkt. Wenn wir dieses hier jetzt ansehen, dann sehen Sie: es ist hier mehrspaltig. Aber wenn ich jetzt das hier schmaler mache und wir hätten sonst den Fall, dass die Spalte sozusagen man nur weiter lesen könnte, wenn man scrollen muss, dann ist diese Merhspalten-Darstellung ausgeschaltet durch Media Queries. Wir haben in den Beispielen hier immer column-width genommen, also die Breite definiert. Sie können mit column-count auch die Anzahl an Spalten definieren, zum Beispiel sagen: ab einer bestimmten Menge an Platz möchten Sie gern dass es zweispaltig ist über Media Queries und Kombination mit column-count. Dann können Sie über column-gap noch den Abstand zwischen den Spalten definieren. Sind also weitere Möglichkeiten das fein zu tunen. Wie schaut es aus mit der Browser- Unterstützung für diese CSS 3-Eigenschaft? Die entsprechende Spezifikation ist schon sehr stabil, das ist schon eine Candidate Recommendation, sodass wir da keine großen Änderungen mehr zu erwarten haben. Browser-Unterstützung schaut soweit eigentlich ganz gut aus. Ein Problem allerdings ist der Internet Explorer, der kann das erst ab Version 10. Eine Möglichkeit ist natürlich jetzt, dass man einfach das für kleine Verbesserungen nimmt und an irgendeiner Stelle, wo man auch akzeptieren kann, wenn dieser Spaltenumbruch nicht stattfindet im Internet Explorer 9. Sonst gibt es die Möglichkeit über ein jQuery Plugin nachzubessern über den sogenannten Columnizer. Und da können Sie dann auch definieren eben beispielsweise hier wie breit die Spalten sein sollen oder wie viele es sein sollen. Die Aufteilung auf mehr Spalten ist normalerweise etwas was Sie eher bei großen Viewports benötigen als bei kleinen Viewports, wie etwa bei Smartphones. Und damit die Usability nicht leidet, sollten Sie aber immer mit Media Queries dafür sorgen, dass die Aufteilung in Spalten auch nur erfolgt, wenn genügend Platz, das heißt auch genügend Höhe zur Verfügung steht.

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!