Grundlegende Vorgehensweise bei Contao 3 um ein Responsive Design zu erstellen?

[elmuerto]

Hallo,

ich hätte einige Fragen zu Contao 3 und dem Responsive Design.
Was muss ich grundsätzlich beachten wenn ich eine neue Seite unter Contao 3 mit Responsive Design erstellen will.
Muss ich alles in % angeben oder kann ich die verschiedenen Spalten weiter in px angeben.
Soll "Statisches Layout" angehakt sein?
Was macht der Layoutbuilder?
Was macht CSS Reset?
Was passiert mit den Bildern, skalieren die sich automatisch?
Ich habe mir die Grid Academy angeschaut, da steht ja unter Contao 3 noch nicht so viel.
Gilt das Tutorial vom 1140er Grid auch für Contao 3?
Ich habe mir bis jetzt unzählige Postings angeschaut und bin mehr denn je verwirrt.
Was ich echt super fänder wäre eine Step by Step Anleitung für die Grundlagen der Responsive Layouterstellung in Contao 3.
Eine Grundlegende Vorgehensweise um zu einem echten adapiven Design zu kommen.

Sorry für die vielen Fragen...

LG
Martin

[pmmueller]

Ich habe mir bis jetzt unzählige Postings angeschaut und bin mehr denn je verwirrt.

Mach dir keine Sorgen wegen der vielen Fragen. Das geht uns allen so. Don't worry. We all feel overwhelmed. ist momentan mein Lieblingssatz

Was muss ich grundsätzlich beachten wenn ich eine neue Seite unter Contao 3 mit Responsive Design erstellen will.

Du musst zuerst einmal genau überlegen, was du überhaupt unter einem "Responsive Design" verstehst. Das ist nicht so einfach wie es klingt. Überfliege mal folgenden Beitrag:

• Responsive Web Design. Was is'n das genau?

Das RWD-Buch von Christoph Zillgen ist als Grundlagenlektüre zu RWD sehr zu empfehlen.

Muss ich alles in % angeben oder kann ich die verschiedenen Spalten weiter in px angeben.

Siehe den oben verlinkten Beitrag. Die reine Lehre des Responsive Webdesign besteht aus drei Faktoren

• Flexible Grid
• Flexible Media
• Media Queries

Dann wäre die Antwort ja, du musst alle Layoutspalten in Prozent angeben. Und am besten auch noch die Inhalte flexibel halten. Idealerweise benutzt man die Einheit px gar nicht mehr, aber das ist einfacher gesagt als getan.

Viele Leute lassen das flexible Grid lieber weg und nehmen dann ein pixelbasiertes mit ein paar Media Queries. Genau genommen würde man das dann "adaptive Webdesign" nennen (siehe oben verlinkten Beitrag). Entsprechend dieser Definition wäre das "Responsive Grid" von Contao übrigens eigentlich ein "Adaptive Grid", denn es ist pixelbasiert.

Soll "Statisches Layout" angehakt sein?

Mit statisches Layout bestimmst du die Breite des umgebenden Wrapper, der ja letztlich eine Dopplung von body ist. Wenn du ein "Full-Header-Layout" haben willst (wie auf pmueller.de), dann solltest du das nicht ankreuzen. Mit "Responsive" hat das nicht so viel zu tun.

Was macht der Layoutbuilder?

Er baut das Layout setzt die Angaben aus dem Seitenlayout um. Details in /assets/contao/css/layout-uncompressed.css (oder in meinem Buch ab Seite 213).

Was macht CSS Reset?

Einen CSS-Reset? Wenn du mehr wissen willst, steht das entweder in der Datei /assets/contao/css/reset-uncompressed.css (Buch ab Seite 219).

Du hast noch gar nicht gefragt, was "Responsive Grid" eigentlich macht. Das steht in /assets/contao/css/responsive-uncompressed.css (Buch ab Seite 221)

Was passiert mit den Bildern, skalieren die sich automatisch?

Zum Teil ja. Der Layout-Builder enthält folgenden Style: img, embed, object, video { height: auto, max-width: 100%; }. Das macht man heute so ;-)

Was ich echt super fänder wäre eine Step by Step Anleitung für die Grundlagen der Responsive Layouterstellung in Contao 3 ... Eine Grundlegende Vorgehensweise um zu einem echten adapiven Design zu kommen.

Das Thema ist für eine "Step by Step"-Anleitung ein bisschen zu umfangreich. Das ist fast so wie eine Schritt-für-Schritt-Anleitung zu "Wie baue ich mir ein Eigenheim?"

Fazit:
Eigentlich geht es um Flexibilität. Das Web ist ein flexibles Medium, und Webseiten sollten dementsprechend auch flexibel sein. Alles andere (responsive, adaptive, fluid, liquid) sind nur Etiketten.


EDIT
Seminare zum Thema gibt's auch: http://websites-erstellen-mit-contao...o-und-css.html

Noch'n EDIT
Ich habe jetzt erst gesehen, dass dieser Beitrag im Thread "Probleme mit dem Responsive Grid" steht. Da gehört das ja eigentlich nicht rein. Sorry.

[elmuerto]

Vielen Dank für die ausführliche Antwort.
Jetzt wird mir einiges klarer!
Werde mir das Buch gleich bestellen.
SUPER DANKE!

[pmmueller]

You're welcome

[Cristal]

oder in meinem Buch ab Seite 213

Welches deiner Bücher ist hier genau gemeint?

Herzliche Grüße

Cristal

[tab]

Den Seitenzahlen nach passt das auf "Websites erstellen mit Contao 3". Da würde ich dann aber doch eher den "Nachfolger" empfehlen, also "Contao: Das umfassende Handbuch". Zum einen, weil es auf aktuelleren Contao-Versionen basiert (das alte auf Contao 3.0), zum anderen, weil es wohl deutlich mehr auf responsive Webdesign eingeht.

[larsi86]

Also wenn du dir viel Arbeit in Zukunft sparen möchtest, würde ich ein CSS Framework verwenden. Bei vielen CSS Frameworks ist ein Gridsystem integriert und automatisch ein Responsive Design über Media Queries bereits eingebaut und optimiert für viele mobile Endgeräte.

Ich bin ein großer Fan von Bootstrap (von Twitter entwickelt). Einige andere Nutzer haben sich bereits mit dieser Thematik auseinandergesetzt und bieten für Contao fertige Layouts mit an. Nach einer kurzen Recherche bin ich auf die Webseite: http://denniserdmann.de/contao-bootstrap/ gestoßen. Vielleicht sagt dir bereits das Layout zu.

[tschero]

Du kannst Dir auch mal die Contao official Demo (aus dem ER) oder das freie Template "opensauce" anschauen.
Die sind beide Responsive und dort kannst Du auch sehr schön nachvollziehen wie alles aufgebaut ist.

Hat mir auch sehr geholfen.

Gruß
tschero

[Flaschenzug]

Kann mich larsi86 nur anschließen. Ich habe mich vor knapp einem Monat bei Bootstrap eingearbeitet und bin begeistert wie schön einfach die Umsetzungen damit möglich sind.
Habe gerade eine responsive Seite damit umgesetzt und mir viel Zeit gespart.

Wenn du bereits eine Seite hast die noch nicht responsive ist, dann würde ich es manuell machen (wie weiter oben sehr ausführlich beschrieben).
Denn nachträglich Bootstrap zu integrieren spart meiner Meinung nach nicht wirklich viel Zeit.