Ältere Website auf Responsive umstellen, geht das?

**mattes** · 24.01.2013, 10:30

Hallo Zusammen,

ich möchte eine Website (Contao Version 2.10.4) auf Resposive Layout umbauen. Das Thema Responsive-Webdesign ist für mich noch relativ neu und ich weiss nicht so recht wie ich am besten an das Thema herangehe.

Fragen hierzu:

1. Muss ich unbedingt die Version von 2.10.4 auf 3.0 updaten?
2. Muss unbedingt ein Grid dafür benutzt werden?
3. Muss die alte Website komplett neu erstellt werden oder gibt's hier eine andere Alternative?

Wie immer vielen Dank!

**JanoschSkuplik** · 24.01.2013, 10:53

Hallo mattes,

hier stellt sich zunächst die Frage: was willst du wirklich erreichen?
Soll die Seite responsive sein, oder möchtest du nur eine optimierte Darstellung für bsp. mobile Geräte haben?

Der Begriff responsive an sich geht nämlich um einiges weiter und bezieht sich auch auf die Darstellung auf verschiedenen Desktop-Browsern (abhängig des Viewports). Responsive Webdesign an sich bezieht sich auch auf ein fluides Grid, fluide Grafiken und den Einsatz von Media Queries (siehe auch hier https://community.contao.org/de/show...l=1#post215927).
Wenn du deine Seite "nur" für mobile Geräte anpassen willst, so reicht in der Regel schon der Einsatz von Media Queries, die dafür sorgen dass sich einzelne Breiten/Abstände etc. von Elementen verändern. Somit hättest du eher ein adaptives Design.

Der Begriff "Grid" ist in diesem Zusammenhang aus meiner Sicht auch etwas anders zu verstehen, als ein Grid, das aus bsp. 12 Spalten besteht. Auch eine Seite, die aus einer linken. mittleren und rechten Spalte besteht hat aus meiner Sicht ein Grid.

Dies bedeutet für mich, dass du deine 3. Frage damit beantworten kannst, dass die Seite nicht komplett neu erstellt werden muss, sondern durch Media Queries ergänzt werden kann. All dies hängt natürlich auch von dem Layout deiner Seite ab

Ich hoffe, dass dich diese Ausführung einen Schritt weiter bringt.

Viele Grüße
Janosch

***lucina*** · 24.01.2013, 10:54

Das hängt alles ein wenig von Deiner Arbeitsweise ab ... ;-)

1. Nein, das ist nicht unbedingt nötig, man kann auch mit C2 durchaus Responsive Layouts bauen
2. Grids sind extrem nützlich dabei, wenn sie responsive sind, aber selbstverständlich musst Du sie nicht einsetzen und kannst auch alles selbst bauen
3. Man kann auch die Themes-Funktionen nutzen
4. Wer genauer fragt, bekommt vermutlich auch genauere Antworten

**andreasisaak** · 24.01.2013, 11:40

Ich bekomme jedesmal einen heftigen Würgereiz wenn jemand "Contao 3" in Verbindung mit den Wörtern "Mobile" oder "Responsive" bringt. Das sind keine Features die ohne Contao nicht zu realisieren sind. Und ich behaupte das eine responsive Website vor Contao 3 sogar noch besser erstellt werden konnte weil man den Layoutbuilder nicht jedesmal vergewaltigen muss.

Nutzt CSS und nicht euer CMS um mobile und responsive Websites anzubieten. Und bitte nicht erst damit beginnen wenn ihr Contao 3 einsetzt.

**andreasisaak** · 24.01.2013, 11:44

Zitat von mattes

1. Muss ich unbedingt die Version von 2.10.4 auf 3.0 updaten?
2. Muss unbedingt ein Grid dafür benutzt werden?
3. Muss die alte Website komplett neu erstellt werden oder gibt's hier eine andere Alternative?

1. Nein (wie schon im vorherigen Beitrag erwähnt)
2. Nein, definitiv nicht. Ich nutze nur selten ein Grid und fast alle meine Websites sind responsive
3. Du kannst jede Website mit Anpassungen responsive machen. Aber es kommt sehr drauf an wie gut sie davor angelegt wurde. Am besten ein Link zur Website veröffentlichen und wir schauen uns das im Forum an.

**mattes** · 24.01.2013, 12:05

Hi Zusammen,

wie schon gesagt, das Thema ist für mich sehr neu und man wird regelrecht überschwemmt von Informationen. Es gibt soviel Ansätze wo ich nicht unterscheiden kann welche hierfür die beste alternative wäre.
Ziel ist es, die alte Website für mobile Endgeräte zu optimieren und das so schnell (kostengünstig) wie möglich!

Um diese Website handelt es sich: http://www.golfclub-schmallenberg.de

Ich dachte nur bei der 3 Version von Contao mit den vorhanden Bordmittel wäre das relativ schnell zu machen.

**CeeKay** · 24.01.2013, 13:18

Ich würde sagen, du musst dir mal ansehen, was aktuell so möglich ist. andreasisaak hat da Recht, es hat erstmal nicht viel mit der Contao-Version zu tun. Guck mal hier, das sind beides recht brauchbare Quellen zum Thema:

**andreasisaak** · 25.01.2013, 00:45

Ich kann für diese Fälle nur ganz viel Kaffee (oder Tee), syncCto und Theme+ empfehlen. Du baust dir eine Entwicklungsumgebung mit syncCto, mit Theme+ entwickelst du dir performante und dynamische CSS-Dateien und das Getränk hilft dir beim Recherchieren.

Es ist nicht mehr und nicht weniger. Mittlerweile brauche ich bei schon bestehenden Websites je nach Umfang nicht mehr als 5-6 Stunden um sie komplett responsive zu bauen. Alles eine Frage des CSS!

**mattes** · 25.01.2013, 09:24

Hi andreasisaak,

erledigst du auch Auftragsarbeiten???

**andreasisaak** · 25.01.2013, 09:34

Ja das tue ich. Aber wäre es nicht das beste für dich wenn du dich im Forum und mithilfe der Doku Schritt für Schritt herantastest? Am Ende hast du nichts gewonnen wenn du die nächste Seite responsiv anlegen musst und immer noch nicht weißt wie es geht.

Übrigens ist deine Website grade down.

**mattes** · 25.01.2013, 10:01

Hi andreasisaak,

klas wäre das sinnvoll ich würde das selber machen, allerdings habe ich das Gefühl, dass diese Website für einen Start in dieses Thema zu komplex ist. Außerdem der Faktor Zeit spielt hierbei eine große Rolle!

Hast du Interesse das zu erledigen?

**andreasisaak** · 25.01.2013, 10:05

Interesse ja, aber keine Zeit. Ich würde dich gerne an die Partner verweisen.

PS: Ein Contao Update auf 2.11 würde ich dir aber aus Sicherheitsgründen schon empfehlen.

**ciaobello** · 25.01.2013, 14:44

Zitat von andreasisak

PS: Ein Contao Update auf 2.11 würde ich dir aber aus Sicherheitsgründen schon empfehlen.

@mattes, falls Du dazu jemand suchst, könnte ich dass für Dich machen.
Falls Interesse bitte weiteres per PM oder E-mail.

**mattes** · 25.01.2013, 15:22

Hi ciaobello,

danke für deine Hilfe aber das Update bekomme ich selber hin.

Ich habe mich jetzt in das Thema ein bisschen rein gearbeitet, die ersten Erfolgserlebnisse sind auch schon da! :-)

Momentan komme ich aber was die CSS-Kenntnisse angeht an meine Grenzen. Ich versuche bis jetzt vergebens die Div's #left, #right und #main anders zu platzieren. Ich möchte ersten den #main, dann den #left und dann denn #right untereinander darstellen.

Zum Testen habe ich mal @media only screen and (max-width: 480px) eingesetzt.

Das ganze liegt hier: http://www.cms.4net.de/golf/

Hat jemand einen Rat für mich?

**mattes** · 28.01.2013, 15:30

Hat denn keiner eine Idee wie das funktionieren könnte???

**ciaobello** · 28.01.2013, 23:13

Wenn Du am Hoygrail selber etwas rum drehen willst, dann empfehle ich Dir "a list apart" > Holy grail zu lesen. Da wird die Basis erklärt wie von Contao eingesetzt. Dann siehst Du auch die Möglichkeiten.

Ansonsten eine Gute Übung ist es ein Freies Contao3 Theme zu installieren und schauen ob du so zu einer Lösung kommst.

Hier ein Bespiel: http://www.contao-themes-templates.c...mes/free01_c3/ . . . contaostyles.com

**BugBuster** · 28.01.2013, 23:32

Er hat ja kein Holy Grail, da Contao 2. (ja da gibts ne Erweiterung aber....)

**ciaobello** · 28.01.2013, 23:58

Zitat von BugBuster

Er hat ja kein Holy Grail, da Contao 2. (ja da gibts ne Erweiterung aber....)

Ja .. ok... hast ja recht ... aber anfangs hat es sich angehört dass es ein Update auf Contao3 geben soll.

Wobei das anschauen vom Freien Contao Theme sicher nicht eine Dumme Idee ist ... denn da wird ja genau das auch gemacht ... das #main unter dem #header kommt ... dass will er doch ... und so wie ich das gesehen habe, wird das im (BlueBusiness) im Seitenlayout umgeordnet ... damit nicht das SeitenTemplate angepasst werden muss ... oder hab ich da was übersehen ?

Quellcode Studieren ist die beste Schule ... zumal er auf seine Frage keine Direkte Lösung gekriegt hat.

**mattes** · 29.01.2013, 10:46

Hallo Zusammen,

ich merke schon das ich mich bei erstellen dieses Themas falsch ausgdrückt habe, sorry!
Mein Ziel ist, eine bestehende Website für Mobile Endgeräte zu optimieren. Mittlerweile habe ich mir eine Menge an Möglichkeiten angesehen und ich komme immer mehr zu dem Entschluss, dass ich die bestehende Website für Desktop-Rechner so lasse und versuche für die verschiedenen Endgeräte unterschiedliche Templates veranziehe.

Meine Fragen sind jetzt:

1. Ist es machbar, je nachdem welches Endgerät (iPhone/iPad) auf die Website gelangt dem ein anderes Seiten-Layout zu zuweisen, ohne das der Content doppelt gepflegt werden muss?
2. Wenn ja, gibt es hierfür entsprechende Erweiterungen die ich hierfür benutzen kann?

Wie immer Danke! :-)

**soweit_ok** · 15.02.2013, 15:41

Zitat von andreasisaak

Ich kann für diese Fälle nur ganz viel Kaffee (oder Tee), syncCto und Theme+ empfehlen. Du baust dir eine Entwicklungsumgebung mit syncCto, mit Theme+ entwickelst du dir performante und dynamische CSS-Dateien und das Getränk hilft dir beim Recherchieren.

Es ist nicht mehr und nicht weniger. Mittlerweile brauche ich bei schon bestehenden Websites je nach Umfang nicht mehr als 5-6 Stunden um sie komplett responsive zu bauen. Alles eine Frage des CSS!

Das unterschreibe ich so, bis zu einem gewissen Punkt tatsächlich nur eine Frage des CSS, schonmal mehr als die halbe Miete. Unterhalb von 800px Breite kommt dann aber auch die Benutzeroberfläche von Modulen und Extensions ins Spiel und davon ist bisher fast nichts von selber für diese Anforderungen fit. Jedenfalls kommt man nach meiner Erfahrung nicht darum herum, denen ebenfalls eine flexible "Intelligenz" im Anzeigeverhalten zu verleihen oder man darf stattdessen bei jeder neuen Webseite aufs Neue mit dem CSS rumfrickeln, statt es ein für allemal umfassender anzugehen. Nichtmal banale Formule passen sich automatisch an Kleinstformate an und man muss an alles nochmal Hand anlegen. Damit gibst Du mir wahrscheinlich recht, oder? Außerdem hat CSS seine Grenzen und für die Eventbehandlung sollte man schon ins DOM schreiben.

@Threadersteller - Hast Du bereits bemerkt, dass es mittlerweile für kleines Geld auch schon fluid-responsive Contao-Layouts gibt? Wenn man mit deren Begrenzung nach oben auf 1280px leben kann - für eine solche Vereinsseite vielleicht okay. Dabei würde ich dann aber auch das Layout mit 2 Randspalten überdenken. Finde ich für kleine Endgeräte eher ungeeignet. Ihr müsst euch ja überlegen, wie die dann angezeigt werden sollen, womöglich untereinander? Hüstel. :-) Und Randspalten sollten dann auch aus- und einblendbar gemacht werden, mit JS. Anderenfalls kannst Du Portraitformat auf Smartphones schonmal knicken oder brauchst ne Kurbel für die 100m-Scrolls.

Macht euch vielleicht erstmal grundlegende Gedanken, wie die Seite in kleinen Viewports ausschauen soll, welche Module und Extensions dafür ggf. mit ca. wieviel Aufwand angepasst werden müssten und erst dann wählst Du die am besten geeignet scheinende Methode. Eine so kleine Webseite würde ich ansonsten auf jeden Fall auf C3 hochziehen, aber mindestens auf 2.11. Sonst machst Du vielleicht jetzt alles mögliche dafür und musst später nochmal ran.