Contao 3 Grundkurs

Layout-Builder

Testen Sie unsere 2007 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Contao liefert mit dem Layout-Builder bereits "responsive Design". Doch Vorsicht: Seiten werden nicht mehr geschrumpft! Wer das übersieht, erzeugt auf Smartphones Seiten, die eventuell nicht mehr bedienbar sind.
03:27

Transkript

Contao hat mit Version 3 auf die Anforderungen reagiert, die kleinere Endgeräte, wie Smartphones, Tablets, an uns Webdesigner stellen. Es beginnt im Seitenlayout. Ich gehe da mal rein. An dieser Stelle, wenn Sie den Layout-Builder aktivieren und das mitgelieferte Template nicht ändern, fe_page, dann trägt Contao zunächst mal ein meta viewport-Tag in den Head Ihrer Seite ein. Das schauen wir uns mal im Quellcode an. Hier ist der meta viewport-Tag. Der sagt Smartphones: "Liebes Smartphones, nicht zurückgehen." Also nicht die Seite so weit runter skalieren, dass sie komplett in das Smartphone oder Tablet passt. Das ist einerseits gut, andererseits: Was passiert denn im Smartphone? Wir gucken uns das auf unserer Seite an, indem wir einfach unser Browser-Fenster verkleinern. Huuuups! Wir sehen jetzt schon, dass wir da Handlosbedarf haben und wenn ich das noch weiter treibe, dann wird es immer unangenehmer, zumindest hier in diesem Bereich. Gut ist natürlich, dass der Text hier ohne dass man ihn skalieren muss, ganz normal lesbar ist. Die schnelle Lösung wäre, dass man jetzt diesen meta viewport-Tag hier aus dem Template entfernt und dann würde sich die Seite wieder wie andere Seiten verhalten. Die bessere Lösung ist natürlich, dass man sich um diese Fälle hier kümmert und dann die Vorteile nutzt, die responsives Webdesign mit sich bringt. Vielleicht ist Ihnen auch etwas anderes schon aufgefallen? Ich mache die Seite nochmal breiter. In der normalen Desktop-Version haben wir ja hier einen linken Bereich und was passiert mit dem linken Bereich? Wenn ich die Seite jetzt kleiner mache, verschwindet der und rutscht unter den Hauptinhalt. Das ist auch so gewollt, weil für kleinere Endgeräte das Ziel eben erreicht werden soll, dass der Content zuerst kommt und dann irgendwelche Dinge, die im linken oder rechten Seitenbereich sich befinden. Die dahinter steckende Technik heißt: Holy Grail, basiert auf CSS. In dem Zusammenhang empfehle ich Ihnen gerne den Ur-Artikel von Matthew Levine aus dem Jahr 2006, aber zurück zu Contao. Mit dem Layout-Builder wird eine Datei Layout. css eingebunden Und die befindet sich in: assets - contao - css und dann Layout. css Die kann man sich auch einmal unkomprimiert angucken. Da gibt es zunächst ein paar grundlegende Einstellungen und die entscheidende Zeile ist jetzt diese hier: ein media query, sprich: "Ist der viewport", also der sichtbare Bereich eines Endgerätes kleiner als 786, also geht bis 767, dann sollen diese CSS-Regeln greifen. Und damit haben wir auch bereits die Antwort auf unsere Frage: Wie wir denn dieser Problematik begegnen? Dass sich die Elemente im Header da so zusammen schieben? Nämlich auch mit einem Media query. Wenn ich einmal an der Stelle bin, kann ich auch gleich diese Zeile in die Zwischenablage kopieren.

Contao 3 Grundkurs

Lernen Sie die Grundidee des Content Management Systems Contao 3 kennen und machen Sie sich mit den Möglichkeiten der Inhaltsdarstellung bis hin zum komplexen Webauftritt vertraut.

6 Std. 34 min (102 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!