Responsive Funktionen in Contao: Wo/Wie belesen?

Hallo zusammen,

ich möchte mich mit den responsiven Funktionen in Contao auseinandersetzen bzw. möchte sie verstehen, um zukünftige Webseitenprojekte "Mobile First" besser planen zu können.

Das Grundsätzliche Verständnis für responsives Webdesign ist vorhanden. Nun will ich wissen, wie Contao damit funktioniert. Ich möchte ja nicht alles umbauen, sondern die Standardfunktionen verwenden.

Wo kann ich mich belesen? Wo finde ich weitere Informationen?

Über Antworten, Links, Buchtipps (leider wird das Thema in den meisten Büchern nur kurz angerissen), Videos usw. würde ich mich sehr freuen.

leider gibt es noch keine Antworten :/

Die Frage ist wohl zu allgemein von mir gestellt worden.

In dem Buch von Peter Müller

"Contao - Das umfassende Handbuch"

Da ist einiges beschrieben wie eine Website Responsive gestaltet und in Contao umgesetzt wird.

Zitat:

---

Zitat von µaTh

leider gibt es noch keine Antworten :/

Die Frage ist wohl zu allgemein von mir gestellt worden.

---

Eher zu ungenau gesucht ;) . Das Thema wurde schon ziemlich ausführlich diskutiert hier.

Mal so zu Therm "Mobile First" das ist nicht wirklich was Contao spezifisches, eher eine "neue" Herangehensweise an ein Webprojekt (link Buchtip).
Weg vom Print-medien Gedanke wo von der Briefpapier bis zur Visitenkarte alles gleich aussehen muss. Anzeige Geräte haben sich sehr stark verändert in letzter Zeit.

Contao hat Werkzeuge eingebaut welche auf Holygrail basieren und ein 12Spalten Grid. Mal so ein paar Stichworte um mit der Contao-Google Suche im Forum zu stöbern.

Buchtipps findest Du übrigens im Forum ganz unten.
Mein Tipp neben dem Buch von Peter Müller dass von Thomas Weitzel, welches meines Erachtens eher auf das Grid eingeht.

Hallo µaTh,

neben den schon genannten Quellen von ciaobello (wusste nicht das man mich auch so schreiben kann ;) ) gibt es allgemeine Infos in Bücher / Videos:

Eine Buchempfehlung von Jens Grochtdreis:
http://grochtdreis.de/weblog/2013/12...ive-webdesign/

Ein Videotraining von Jonas Hellweg aka kulturbanause (auf dessen Website auch viele Tipps stehen):
https://www.galileo-press.de/responsive-webdesign_3347/

Das Buch zu Responsive Webdesign von Christoph Zillgens:
http://responsive-webdesign-buch.de/

- Contao Official Demo installieren und daran studieren.

- Oder wenn du dir das kostenfreie Theme Opensauce von rocksolid installierst, kannst du dort ebenfalls die responsive Verhaltensweise studieren.

Peter Müller hat vor ein paar Tagen seinen Rückblick 2014 gepostet und darin auch die Neuerungen seiner kommenden Bücher aufgeführt:
http://pmueller.de/blog/2014.html

Und hier gibt es auch noch eine gute Sammlung:
http://bradfrost.github.io/this-is-r...resources.html

Und eben frisch auf Twitter gepostet wurde:
http://tutorialzine.com/2014/12/50-u...onsive-design/

So dann ist das Jahr rum mit Lesen :)

Hallo,

ich habe µaTh so verstanden, dass es v.a. darum geht, mit Contaos Bordmitteln ein "Mobile first"-Design umzusetzen.

Soweit ich es bisher gesehen habe (ich kenne bis 3.2.16), ist es meistens nicht "Mobile first", auch nicht OpenSauce. Das CSS beschreibt zunächst das Design für große Bildschirme und die Anpassungen für kleinere Screens werden dann per Media-Query eingebunden. Soweit ich es bisher verstanden habe bedeutet "Mobile first" genau die umgekehrte Herangehensweise.

Aber natürlich hindert Contao niemanden daran, "Mobile first" im CSS umzusetzen. Falls auch schon das contaoeigene Gridsystem "Mobile first" sein sollte, dann ist mir das bisher entgangen :rolleyes:.

An Ideen dazu wäre ich auch interessiert!

folkfreund

Eben bin ich darüber gestolpert - vielleicht Lesefutter…
http://www.zell-weekeat.com/how-to-w...ile-first-css/

Ich arbeite mit PHPStorm/SCSS/Contao 3.2/Jeet und bin sehr zufrieden mit meinem jetzigen Workflow.
Scss erleichtert mir dir MobileFirst Entwicklung, z.B:

Code:

---

@mixin mobil{
  @media only screen and (max-width:767px) {
    @content;
    }
  }
@mixin tablet{
  @media only screen and (min-width:768px) and (max-width:1023px) {
    @content;
    }
  }
@mixin full{
  @media only screen and (min-width:1024px) {
    @content;
    }
  }
@mixin child($n) {
  &:nth-child(#{$n}){
    @content;
    }
  }

---

Damit habe ich jeweils immer nur ein Element mit jeweiligen Änderungen für mobile/tablet/full.

Code:

---

.topic{
    letter-spacing:20px;
    color:$orange;
    text-transform:uppercase;
    @include mobil{
      @include fs(17px);
      }
    @include tablet{
      @include fs(28px);
      }
    @include full{
      letter-spacing:20px;
      @include fs(28px);
      }
    }

---

Vorab verändere ich das Frontend Template nach meinen Wünsche.
PS: Das CodeFolding in PhPStorm ist sehr nützlich für scss...

Grüße. RSelma