{"id":3000,"date":"2013-05-31T15:37:38","date_gmt":"2013-05-31T13:37:38","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=3000"},"modified":"2018-02-23T10:32:51","modified_gmt":"2018-02-23T08:32:51","slug":"contao-holygrail-und-mobile-devices","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2013\/05\/contao-holygrail-und-mobile-devices\/","title":{"rendered":"Contao, Holygrail und mobile Devices"},"content":{"rendered":"

Mit Version 3 wurde der Contao Layoutbuilder ge\u00e4ndert. Das Framework setzt nun auf die so genannte „Holy Grail“ Struktur, weshalb sich sowohl das Markup, als auch das Framework-CSS entscheident ge\u00e4ndert haben.<\/p>\n

Als Vorteil von Holygrail sind die Verbesserung hinsichtlich Suchmaschine und Lesbarkeit f\u00fcr Screenreader zu nennen, denn im Holygrail-Layout erscheint der Inhalt der Hauptspalte, also der Bereich, in welchem f\u00fcr gew\u00f6hnlich die wichtigen Inhalte stehen, zuerst. Erst dann folgen die Inhalte der Spalten left und right.<\/p>\n

Um die Unterschiede besser zu verstehen, hier eine kurze Betrachtung des alten und des Layoutbuilders:<\/strong>
\n
\nAlter Layoutbuilder<\/strong>
\nIn der fe_page konnte man sehen, dass (wenn vorhanden) zuerst die Inhalte der linken Spalte, dann die der rechten Spalte und erst zum Schluss die Inhalte der Hauptspalte ausgegeben w\u00fcrden. Mit CSS wurde die linke Spalte nach links und die rechte Spalte nach rechts gefloatet. Die Hauptspalte schob sich automatisch immer zwischen beide Spalten.
\n
\nNeuer Layoutbuilder mit Holygrail<\/strong>
\nIm Holygrail Layout erscheint in der fe_page zuerst die Hauptspalte\u00a0 gefolgt von rechter und linker Spalte. Alle drei Spalten floaten nach links. Eine entscheidene Rolle nimmt der umgebende #container ein. Damit sich die Spalten – obwohl im Markup in der Reihenfolge #main, #left und #right – im Frontend zur Reihenfolge\u00a0 #left, #main, #right zusammenpuzzeln, wird links und rechts neben #main Platz ben\u00f6tigt. Dieser Platz wird durch ein dem container zugeschriebenes padding geschaffen. Padding f\u00fcr den Container ist immer so breit wie die Spalten sind. Mit negativen margins und position relative k\u00f6nnen die Spalten anschlie\u00dfend links und rechts neben der Hauptspalte ihren zugedachten Platz einnehmen. Das in groben Z\u00fcgen.<\/p>\n

Der Nachteil des Holygrail-Layouts ist, dass prozentuale Spaltenbreiten nicht oder nur sehr umst\u00e4ndlich m\u00f6glich sind. Ein weiterer Nachteil ist meiner Meinung nach das instabile Verhalten der Konstruktion, vor allem, wenn die Spaltenbreiten sehr breit werden – insbesondere bei 3-spaltigen Layouts. An diesem Punkt n\u00e4mlich finde ich einen Wechsel auf ein responsive Grid, welches einem die arbeitsintensive Anpassung an mobile Endger\u00e4te abnimmt, sinnvoll.<\/p>\n

F\u00fcr meine eigenen Themes und Templates arbeite ich derzeit sowohl an neuen, aber auch an alten Layouts und stelle mir dabei die ehrgeizige Aufgabe allen Layouts eine Seitenvorlage f\u00fcr 3 Spalten hinzuzuf\u00fcgen. An sich ist das kein Problem, wenn man die Seitenvorlage adaptive macht – also feste Breiten f\u00fcr #wrapper vorgibt, die je nach Breakpoint ge\u00e4ndert werden.<\/p>\n

Solche Design unterscheiden sich an der Oberfl\u00e4che nicht arg viel von den Layouts vor „Web3“, denn zumeist bleibt es bei einer Ausgangswrapperbreite von 960px. Nicht ber\u00fccksichtigt wird dabei jedoch, dass es inzwischen nicht nur eine Menge kleiner Endger\u00e4te gibt, sondern auch Flatscreens mit 1600 Pixel und mehr. Und auf gro\u00dfen Monitoren – also denen, vor denen ein Webseitenbesucher sich gen\u00fcsslich r\u00e4kelt und den vollen Designgenuss erwartet – st\u00f6rt es mich dann schon, dass sich ein 960 Pixel breites Design schon fast unscheinbar in der Breite verliert – mehr Raum drumherum hat, als innendrin.<\/p>\n

Abgesehen davon kann man meiner Meinung nach nicht mehr kalkulieren f\u00fcr welche Ger\u00e4te man Breakpoints einrichtet. Im Grunde ist es v\u00f6llig egal wer sich nun mit was das Internet anschaut. Ein Design muss fl\u00fcssig zusammenschiebbar und an jedem Punkt mindestens bedien- und benutzbar sein, denn wer wei\u00df welches Ger\u00e4t als n\u00e4chstes auf den Markt kommt und welche Abmessungen es haben wird?<\/p>\n

Ausgangspunkt ist also ein dreispaltiges Layout mit max-width von mindestens 1440 Pixel und ca. 420 Pixel breiten Seitenspalten. Um mir die Bez\u00fcge klar zu machen, habe ich mir eine Arbeitsinstallation gebaut, die hier angeschaut werden kann:<\/a><\/p>\n

Zweispaltiges Layout mit Spalte links<\/h2>\n

Beispiel: www.templates.jukemedia.de – holygrail – Spalte links<\/a><\/p>\n

\"jukemedia-contao-holy-grail-2-spalten-links\"<\/a><\/p>\n

Im Backend sind 3 Seitenlayouts angelegt:
\nWichtig<\/strong>: jedes Layout hat seine eigene Bodyklasse. cols2.links<\/span> steht f\u00fcr das zweispaltige Layout mit Spalte links, cols2.rechts<\/span> f\u00fcr den Zweispalter mit Spalte rechts und cols3<\/span> f\u00fcr das dreispaltige Layout.<\/p>\n

In den Einstellungen habe ich f\u00fcr die Breite der Spalte 420 Pixel angegeben. Diese Breite ist dann auch immer die Breite des paddings-left von #container und der Abstand um den die relativ positionierte Spalte links verschoben werden muss, damit sie sich links neben der Hauptspalte anlegt. Die im Layoutbuilder gemachten Eingaben werden von Contao als Stylesheet eingef\u00fcgt.<\/p>\n

Das CSS-Framework besorgt den Rest indem linke und Hauptspalte nach links gefloatet werden und Spalte links als auch rechts einen negativen margin von -100% erhalten.<\/p>\n

Mit 420 Pixel ist die Spalte links sch\u00f6n breit, aber zu breit f\u00fcr Viewportgr\u00f6\u00dfen von 1024px und kleiner. Also habe ich als n\u00e4chstes einen Breakpoint eingef\u00fcgt, der die Spaltenbreite im Bereich von 1024 bis 769 Pixel auf 320 Pixel herabsetzt. Das entsprechende padding beim #container m\u00fcssen dabei ebenfalls ge\u00e4ndert werden.<\/p>\n

Im Ergebnis l\u00e4asst sich das Layout bis zum major-breakpoint gut zusammenschieben, ab 768px greift dann das Contao-mediaquery und l\u00f6st die floats der Spalten so auf, dass die Inhalte untereinander stehen.<\/p>\n

Zweispaltiges Layout mit Spalte rechts<\/h2>\n

www.templates.jukemedia.de – holygrail- spalte-rechts.html<\/a><\/p>\n

\"jukemedia-contao-holy-grail-2-spalten-rechts\"<\/a><\/p>\n

Das Layout mit Spalte rechts verh\u00e4lt sich analog zum Layout mit Spalte links. Es gibt nur einen kleinen Unterschied, der aber wird vom Contao-Framework geliefert. Die relative positionierte Spalte #right muss nicht verschoben werden.<\/p>\n

<\/h2>\n

<\/h2>\n

<\/h2>\n

Dreispaltiges Layout<\/h2>\n

www.templates.jukemedia.de – holygrail – 3 Spalten <\/a><\/p>\n

\"jukemedia-contao-holy-grail-3-spalten\"<\/a><\/p>\n

Wie eingangs schon angedeutet – der Dreispalter ist eine kleine Herausforderung. Die rechte und linke Spalte beginnt wieder mit 420px Breite, diese werden aber schnell zu breit, so dass der erste Breakpoint schon bei 1450px einsetzt. Die mediaqueries sind hier auch mit einer unteren Mindestbreite von 1024px angegeben.<\/p>\n

Weil es aber ab 1024px noch etwas zu fr\u00fch w\u00e4re die Spalten zu „entfloaten“ w\u00fcnscht man sich, dass der Dreispalter zun\u00e4chst in einen Zweispalter \u00fcbergeht. Weil wir aber wissen, dass in der fe_page die Spalte #main zuerst kommt und sich – in der Regel –\u00a0 in der linken Spalte wichtigere Inhalte wie z.B. eine Subnavigation befindet, war es mein Ziel die linke Splate nach rechts zu bef\u00f6rdern.<\/p>\n

Zwischen 920 und 1024 px habe ich daher erstmal die ganze Spalten sozusagen auf Null gesetzt und die Spalten entfloatet. In einem zweiten Schritt werden sie dann mit prozentualen Breiten und float:right; neu eingerichtet bzw. die Spalte rechts ohne float auf den Bereich unter main und left angeordnet.<\/p>\n

Ich habe auch eine M\u00f6glichkeit ausprobiert bei der die Spalte links einfach da bleibt wo sie ist und sich nur die rechte Spalte nach unten verschiebt. Dabei muss man das Holygrail nicht\u00a0 resetten. Weil man dann jedoch padding- left f\u00fcr #container beibehalten muss, kann die Spalte rechts, die sich dann unter main und left befindet nie die volle Breite einnehmen.<\/p>\n

Unter 920px greifen Auszeichnungen, die bei den anderen Layout erst ab 769px greifen, schon jetzt.
\nDamit l\u00f6sen sich die Spalten schon hier zu untereinander liegenden Bl\u00f6cken auf.<\/p>\n

\u00a0<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Mit Version 3 wurde der Contao Layoutbuilder ge\u00e4ndert. Das Framework setzt nun auf die so genannte „Holy Grail“ Struktur, weshalb sich sowohl das Markup, als auch das Framework-CSS entscheident ge\u00e4ndert haben.
\nAls Vorteil von Holygrail sind die Verbesserung hinsichtlich Suchmaschine und Lesbarkeit f\u00fcr Screenreader zu nennen, denn im Holygrail-Layout erscheint der Inhalt der Hauptspalte, also der … Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":3014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11],"tags":[],"yst_prominent_words":[980,999,984,1000,985,986,987,988,989,990,991,992,993,994,995,996,537,997,709,998],"class_list":["post-3000","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","category-contao"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=3000"}],"version-history":[{"count":3,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3000\/revisions"}],"predecessor-version":[{"id":4484,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3000\/revisions\/4484"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media\/3014"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3000"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}