Zeige alle Blogbeiträge

Webseiten »ohne responsiv« in Contao 3

 (Kommentare: 6) | Beitrag empfehlen auf 

Das Stylesheet layout-builder-overwrite

Wer mit Contao 2.* gebaute Sites auf Contao 3.* updatet, bekommt es automatisch mit dem Layout-Builder und seinem Holy Grail zu tun, bei dem die Quelltextreihenfolge der Layoutbereiche anders ist als früher und Seiten unterhalb von 768px automatisch einspaltig dargestellt werden. 

Besonders bei älteren, nicht für »mobile« optimierten Sites ist dieses Verhalten manchmal eher unerwünscht. Hier ein paar Gedanken, wie man in Contao 3 Websites "ohne responsive" erstellen kann. 

UPDATE (Mai 2014)

In Contao 3.3 wurde der Layout-Builder in einen statischen und einen responsiven Teil gesplittet. Dadurch wird es in den Seitenlayouts möglich, dass responsive Verhalten mit einem Klick zu deaktivieren.

Die in diesem Artikel gezeigten Lösungen sind also ab Contao 3.3 nicht mehr nötig. Details dazu finden Sie bei Bedarf auf Github in den Tickets #6251 und #6894.

Das Problem: Der Layout-Builder ist immer responsiv

Nach dem Update einer nicht responsiven Website, stören beim Layout-Builder insbesondere die folgenden drei Dinge:

  1. Normalerweise verkleinern mobile Browser nicht optimierte Seiten. Der Layout-Builder verhindert das. 
  2. Ein mehrspaltiges Layout wird unterhalb von 768px automatisch einspaltig dargestellt. 
  3. Die Reihenfolge der Layoutbereiche im Quelltext ist anders: von #left, #right, #main zu #main, #left, #right.

Wenn man diese Eigenheiten bei der Erstellung einer Site berücksichtigt, sind alle drei durchaus sinnvolle Maßnahmen, aber bei besonders bei älteren Sites ist das nicht immer der Fall. Da fluppt dann zum Beispiel auf kleinen Bildschirm die Hauptnavigation in der linken Spalte mal eben unter den Inhalt und ist somit scheinbar verschwunden. 

Eine Website vorher (Contao 2.11) und nachher (Contao 3.2)

Vor dem Update hatte der User die Seite im Überblick und konnte sie zoomen und auf dem Bildschirm hin- und herschieben (linkes Bild). Nach dem Update wird die Seite nicht mehr verkleinert und der Überblick ist weg. Das sieht im Screenshot auf den ersten Blick vielleicht gar nicht mal so schlecht aus, ist aber in der Realität in vielen Fällen so gut wie nicht mehr bedienbar (rechtes Bild). 

Idealerweise würde man die Seiten natürlich "responsivieren", aber dem stehen oft ganz simple Worte wie "keine Zeit" oder "kein Geld" entgegen. Deshalb möchte ich kurz zeigen, wie man Contao 3 ohne großen Aufwand dazu bringt, Webseiten zumindest bis zum nächsten Relaunch in einer nostalgischen, mehrspaltigen Miniaturversion darzustellen.

Die Lösung: Im Seitentemplate den Meta-Viewport auskommentieren

Die Lösung ist zum großen Teil simpel und besteht schlicht und einfach darin, die folgende, "Meta-Viewport" genannte Zeile aus dem Seitentemplate zu entfernen oder auszukommentieren: 

<meta name="viewport" content="width=device-width,initial-scale=1.0">

Etwas vereinfacht gesagt bittet diese Zeile mobile Browser, Webseiten nicht zu verkleinern. Damit der Meta-Viewport nicht im Quelltext erscheint, genügen zwei Schritte: 

  1. Erstellen Sie im Backend-Modul Layout - Templates eine Kopie der fe_page
  2. Kommentieren Sie in dieser Kopie die PHP-Anweisung zur Erstellung des Meta-Viewport aus.

Das könnte im Seitentemplate zum Beispiel so aussehen: 

<?php // In fe_page den Meta Viewport auskommentieren ?> 
<?php // echo $this->viewport; ?>

Das ist alles. Jetzt erzeugt Contao den Meta-Viewport nicht mehr und mobile Browser dürfen wieder verkleinern, wenn Sie denn wollen. Und sie wollen. 

Mobile Browser verkleinern ohne Meta Viewport, Desktop-Browser nicht

Die Betonung liegt dabei auf mobile Browser. Mobile Browser tun so, als ob die Webseite zwischen 800px und 980px breit wäre und zoomen dieses gedachte Layout solange runter bis es auf den kleinen Bildschirm passt. Der Meta Viewport sagt dem Browser "Bitte verzichte auf dieses gedachte Layoutbreite und mache die Seite so breit wie der Bildschirm ist (width=device-width)". 

Die Entfernung des Meta Viewport aus dem Seitentemplate wirkt sich in mobilen und Desktop-Browsern sehr unterschiedlich aus: 

  • Ohne Meta Viewport gehen mobile Browser von einem virtuellen Viewport zwischen 800px und 980px aus, sodass die im Layout-Builder integrierte Media Query von max-width: 767px ignoriert wird, weil die Breite des gedachten Layouts oberhalb davon liegt (linkes Bild). 
  • Desktop-Browser hingegen haben kein "gedachtes Layout" und stellen die Seiten immer noch einspaltig dar, sobald der Viewport kleiner als 768px wird (rechtes Bild).

Fazit: Wer seine Seiten nicht in mobilen Browsern testet, sondern nur in einem verkleinerten Browserfenster am Desktop betrachtet, hat an dieser Stelle das Problem zum großen Teil schon gelöst, merkt es aber nicht und bastelt munter weiter. Details zum Meta-Viewport gibt es zum Beispiel in Kapitel 12 von "Flexible Boxes".

Für Desktop-Browser: Das CSS vom Layout-Builder überschreiben

Damit das Layout auch in Desktop-Browsern unterhalb von 768px mehrspaltig bleibt und die Webseiten sich "wie früher" verhalten, ist noch ein weiterer Schritt nötig, der etwas aufwändiger ist. Nochmal zur Deutlichkeit: Der folgende Schritt hilft nur Desktop-Browsern unterhalb von 768px Viewportbreite. In mobilen Browsern ist das "Problem" bereits gelöst. 

Der Kern des Layout-Builder ist das Stylesheet assets/contao/css/layout.css, das als layout-uncompressed.css auch in einer für Menschen lesbaren Form vorliegt. Oberhalb einer Viewportbreite von 768px erstellt dieses Stylesheet ein Holy-Grail-Layout, das unterhalb davon wieder zurückgesetzt wird, wofür der folgende Code sorgt: 

/**
 * Apply the holy grail CSS layout if the screen is at least 768 pixel wide,
 * otherwise display all columns underneath each other ... */ 

/* hier stehen die Styles für den Holy Grail */ 

/* Unterhalb von 768px alle Layoutbereiche untereinander darstellen */ 
@media (max-width:767px) {
  #wrapper {
    margin:0;
    width:auto;
  }
  #container {
    padding-left:0;
    padding-right:0;
  }
  #main,#left,#right {
    float:none;
    width:auto;
  }
  #left {
    right:0;
    margin-left:0;
  }
  #right {
    margin-right:0;
  }
}

Man könnte diese Styles einfach aus der layout.css entfernen, aber erstens sind Änderungen an Core-Dateien tabu und zweitens müsste man diesen Schritt nach jedem Bugfix-Update wiederholen. 

Nachhaltiger wäre es, die entsprechenden Styles aus der layout.css in einem eigenen Stylesheet zu überschreiben:

  • Dieses Stylesheet könnte layout-builder-overwrite heißen.
  • Es hätte auf jeden Fall eine Media Query von screen and (max-width: 767px)
  • In den Formatdefinitionen würden für die Layoutbereiche die Werte aus dem mehrspaltigen Layout definiert.
  • Im Rahmen der Kaskade würden die Anweisungen aus dem Layout-Builder überschrieben.

Die genauen Werte für die Layoutbereiche müssen dabei manuell aus dem Seitenlayout übernommen werden. Und so könnte das CSS aussehen: 

/* Stylesheet layout-builder-overwrite; @media screen and ( max-width: 767px ) */ 

#container {
  min-width: /* Breite von #right aus dem Seitenlayout */; 
  padding-left: /* Breite von #left aus dem Seitenlayout */; 
  padding-right: /* Breite von #right aus dem Seitenlayout */; 
}

#wrapper {
  width:/* Wert aus dem Seitenlayout */ ;
  margin:0 auto
}

#main {
  float: left; 
  position: relative; 
}

#left {
  float: left; 
  position: relative; 
  width: /* Breite von #left aus dem Seitenlayout */ ;
  right: /* Breite von #left aus dem Seitenlayout */ ; 
  margin-left: -100%; 
}

#right {
  float: left; 
  position: relative; 
  width: /* Breite von #right aus dem Seitenlayout */ ;
  margin-right: -100%; 
}

Mit diesen Styles werden die Seiten auch in Desktop-Browsern mit einem Viewport unterhalb von 768px nicht mehr einspaltig. Da ein Desktop-Browser die Seiten im Gegensatz zu seinen mobilen Kollegen nicht verkleinert, erscheinen horizontale Scrollbalken. Wie früher. Nicht schön, aber so war das immer schon, "ohne responsiv".

Fazit

Mit ein bisschen Handarbeit kann man Contao 3 dazu bringen, sich fast "wie früher" zu verhalten. Ob das sinnvoll ist, steht auf einem anderen Blatt, aber in "Notwehr" ist vieles erlaubt. 

Andere Ideen? Was unklar? Was falsch? Ab ins Kommentarfeld mit den Gedanken. 

Peter Müller - Autor und Dozent

Mein Name ist Peter Müller. Ich bin Autor diverser Fachbücher und Videotrainings, Dozent und Webworker.

Ab und an schreibe ich hier im Blog Beiträge zu den verschiedensten Themen, aber meistens hat es was mit dem Web zu tun.

Zeige alle Blogbeiträge

Kommentare

Kommentar von Frank |

Danke für diesen Beitrag. So in der Art hatte ich es mir auch schon zusammengebastelt. Ein paar Kleinigkeiten fehlten jedoch bei mir :-)

vg
Frank

Kommentar von Sandro |

Hallo Peter

Habe die Site http://bald-fahren.ch/ entsprechend deinem Contaobuch erstellt. Es existiert eine "Desktop" und "Mobile" Version. Suche nach einer Möglichkeit, dass die Site nach anwählen des Links "Desktop Version" in einem Mobilen Browser einfach nur als "verkleinerte Desktopversion" erscheint.
Wenn ich jedoch die "Meta-Viewport" Zeile aus dem Seitentemplate entferne / auskommentiere, erscheint die Mobile Version der Site verkleinert im mobilen Browser und kann gezoomt werden.
Siehst Du eine einfache Möglichkeit, den mobilen Browser dazu zu bringen, die Site in der "mobilen Version" so anzuzeigen, wie vor dem Entfernen der Meta-Viewport Zeile?

Vielen Dank und Gruss

Antwort von Peter Müller

Wenn ich dich richtig verstehe, könntest du zwei Versionen der fe_page einsetzen und in den unterschiedlichen Seitenlayouts einbinden:

  • einmal mit Meta-Viewport für die mobile Version
  • einmal ohne Meta-Viewport für die Desktopversion 

Eine "mobile Version" mit eigenem Seitenlayout wie in K18 beschrieben benötigst du aber nur, wenn du wirklich unterschiedliches HTML/Frontend-Module ausliefern möchtest.

Für viele Sites würde es völlig ausreichen, eine Desktop-Version zu erstellen, die per CSS unterhalb von 768px ein bisschen anders gestaltet wird und nicht benötigte Navigationen z. B. mit display:none ein- und ausblendet. 

Kommentar von Sandro |

Vielen Dank! Hat bestens geklappt. Genau so will ich es haben.

Gemäss meiner Erfahrung reichen einige CSS-Modifikationen oft nicht aus, um die Site auf (unterschiedlichen) Smartphone-Displays im Hochformat wirklich ansprechend darzustellen. Der Teufel liegt im Detail...
Als sehr praktikable Lösung hat sich für mich hierfür die Extension "mobile_extended" erwiesen.

Antwort von Peter Müller

Schön, dass es geklappt hat. [mobile_extended] habe ich hier auch im Einsatz. 

Kommentar von Robert |

Vielen Dank für diesen Beitrag!

Zwar konnte ich der Anleitung in soweit nicht folgen, dass ich die fe_page im backend nicht finden konnte, ich habe dies dann aber über den Weg des FTPs gelöst (Contao 3.2.9)

Danke!

Antwort von Peter Müller

Die fe_page können Sie bearbeiten, indem Sie im Backend-Modul Templates ein "Neues Template" erstellen. Damit erstellen Sie technisch gesehen eine Kopie der fe_page im Ordner /templates, die Sie dann bearbeiten können.

Die fe_page im Ordner /system/modules/core/templates/frontend per FTP zu ändern ist keine so besonders gute Idee, denn sie gehört zum Core und wird beim nächsten Update wieder überschrieben wird. Basiswissen zum Umgang mit Templates finden Sie im Contaobuch in Kapitel 6.7.3 "Templates update-sicher anpassen".

In Contao 3.3 wird es übrigens bei den Seitenlayouts bei den Stylesheets ein Häkchen geben, um das "Responsive Layout" zu deaktivieren (#6251). 

Kommentar von Edgar Weitzel |

Hallo Peter, vielen Dank für die Anleitung. Das hat mir sehr geholfen und funktioniert hervorragend. Gruß Edgar

Kommentar von Uli |

Hallo Peter,

habe eine Seite im 3-spaltigen Layout angelegt. Im Smartphone wurde diese nur 1-spaltig angezeigt, das Menü aus der linken Spalte wanderte dabei unter die mittlere "Inhaltsspalte".

Das Menü funktionierte allerdings dort nicht - ist das normal ??

Nach der Änderung in fe_page wurden alle 3 Spalten wie gewünscht angezeigt und das Menü funktioniert auch wie erwartet.

Gruß Uli

Einen Kommentar schreiben

Bitte füllen Sie alle Formularfelder mit einem Sternchen aus.