Grundlegende Vorgehensweise bei Contao 3 um ein Responsive Design zu erstellen?
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
Contao und Responsive und so
Zitat:
Zitat von
elmuerto
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 ;)
Zitat:
Zitat von
elmuerto
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:
Das RWD-Buch von Christoph Zillgen ist als Grundlagenlektüre zu RWD sehr zu empfehlen.
Zitat:
Zitat von
elmuerto
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.
Zitat:
Zitat von
elmuerto
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.
Zitat:
Zitat von
elmuerto
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).
Zitat:
Zitat von
elmuerto
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) ;)
Zitat:
Zitat von
elmuerto
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 ;-)
Zitat:
Zitat von
elmuerto
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.
