Ergebnis 1 bis 32 von 32

Thema: Responsive Layout

  1. #1
    Contao-Nutzer
    Registriert seit
    11.05.2011.
    Beiträge
    24

    Standard Responsive Layout

    Hallo,

    ich möchte meine Seite mit einem responsive Layout erstellen. Gibt es zu diesem Thema Tutorials? Ich habe mich schon ins Thema eingelesen, aber weiß nicht so recht, wie ich das jetzt am Besten angehen soll. Vielleicht kann mir jemand helfen?

    Vielen Dank schon mal!

  2. #2
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.756
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Es gibt dazu soweit ich weiß keine Tutorials, was aber auch daran liegt, dass hierbei die Hauptarbeit beim Webdesigner liegt, nicht beim CMS.

    Du kannst in Contao ganz normal dein CSS schreiben, Media Queries anlegen, bei Bedarf auch den HTML-Aufbau in den Templates ändern. Von der Seite steht dir das CMS in keinster Weise im Weg, sondern erlaubt einen sehr einfachen Zugriff auf alle Punkte.

    Abgesehen davon wird es auf der Contao-Konferenz im Sommer einen Vortrag zum Thema geben.
    // Der Vortrag ist von Marie Dietz (am 2. Tag) - Beschreibung von der Contao-Konferenz-Website:
    Responsive Design im Web bekommt mit den neuen Möglichkeiten von CSS3 und dem Zuwachs unterschiedlicher Endgeräte (Smartphones, Tablets...) seit einiger Zeit immer mehr Aufmerksamkeit.

    In der Vergangenheit wurden mobile Webseiten eher als Nischenthema gesehen, direkt auf mobile Applikationen ausgelagert oder mit diversen Baukastensystemen in ein Korsett gesteckt, welches wenig Raum für eine individuelle Gestaltung überlie.. Eine flexible Ausgabe für Geräte unterschiedlicher Hersteller und Betriebssysteme wurde dabei oft außer Acht gelassen.

    Ein Umdenken in der Konzeption und die Einführung der Media Queries in CSS3 machen eine unabhängigere Ausgabe möglich. Denn statt wie bisher, die Seiten an ein bestimmtes Ausgabemedium anzupassen, können mit dem Einsatz von Media Queries Eigenschaften und Fähigkeiten wie Breite und Höhe des Browserfensters, die Bildschirmauflösung oder auch die Ausrichtung (z.B. Portrait u. Landscape) abgefragt und Inhalte entsprechend aufbereitet ausgegeben werden.

    Ich möchte mit meinem Vortrag eine Einführung in das Thema Responsive Design geben, welche anderen Möglichkeiten es bisher gibt/gab und welche Vor- oder Nachteile sich daraus für das mobile, fluide Webseitendesign ergeben.

    Darauf aufbauend führe ich vor, wie und mit welchen Methoden man z.B. Media Queries bei der Arbeit mit Contao einsetzen kann und was es hierbei zu beachten gibt.

  3. #3
    Contao-Fan Avatar von Wian
    Registriert seit
    21.09.2010.
    Ort
    Dresden
    Beiträge
    283
    Partner-ID
    6772
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Waere das Thema "Webdesign fuer mobile Geraete / responsive Webdesign" nicht eine eigene Rubrik wert - wo man auch Infos und Links sammeln koennte? Eine Art Erfahrungsaustausch. Irgendwie ist das bei mir aktuell der Bereich mit den meisten Fragezeichen und sicherlich geht es anderen auch so. Dabei bietet Contao so viele Moeglichkeiten wie Mobilcore ...

    Gruesse!

  4. #4
    Alter Contao-Hase Avatar von bizon
    Registriert seit
    16.06.2010.
    Beiträge
    1.125

    Standard

    Responsive Webdesign ist hautsächlich mit CSS zu lösen. Mit Media Queries werden die Bildschirmgrößen abgefragt und vom Webdesigner ein für diese Bildschirmgröße optimiertes CSS bereitgestellt.

    Hier ist eine Seite, die das verständlich erklärt.

    Auch dieses 1140px-CSS-Framework zeigt in den mitgelieferten CSS-Dateien, wie Media Queries anzuwenden sind.

  5. #5
    Contao-Fan Avatar von manfred
    Registriert seit
    08.05.2011.
    Ort
    Schwäbisch Gmünd
    Beiträge
    548

    Standard

    Hallo,

    im ER gibt es eine Erweiterung: [flexi_responsive_template].
    Nach der Installation hast Du eine cto.-Datei unter tl-files, die Du dann über den Theme-Manager installieren kannst. Ich hab zwar bei der Installation viele Fehlermeldungen bekommen, und es ist auch nichts kommentiert, aber zum "reinschnuppern" finde ichs nicht schlecht.

    Gruß Manfred.

  6. #6
    Contao-Fan Avatar von Wian
    Registriert seit
    21.09.2010.
    Ort
    Dresden
    Beiträge
    283
    Partner-ID
    6772
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich finde die Erweiterung Mobilcore genial. Mein größtes Problem ist das Testen. Sicherlich kann ich den Firefox zusammenschieben, aber durch Mobilcore muss man schon wirklich mit einem Tablet kommen. Smartphone habe ich mir endlich zugelegt - jetzt fehlt nur noch das geeignete Tablet. Wobei ein ipad 3 unnütz wäre, da das eine Breite von 1500 px hat und die Webseiten normal darstellt.

    Oder gibt es irgendwo im Web Testseiten für Tablets?

    Grüsse!

  7. #7
    Contao-Nutzer Avatar von Goody
    Registriert seit
    01.06.2010.
    Ort
    Frankfurt am Main
    Beiträge
    100

    Beitrag Responsive Webdesign – Wie geht man mit der Navigation um?

    Grundlegend habe ich es ja verstanden und diese Erklärung hat mir zum Verständnis sehr geholfen.
    Aber im Detail möchte ich eine waagerechte Navigation im Header durch Zusammenschieben des Broserfenster in eine senkrechte Navigation umwandeln mittels CSS. Aber meine CSS-Angaben für die Navigation in den Media-Query's behindern sich gegenseitig.

    Dann versuchte ich es mit einer zweiten Navigation mit der ID=mobil und blendete sie beim großen Browserfenster über display {none} aus. Dann war sie nicht zu sehen, aber bei zusammengeschobenen Fenster war dann auch keine zu sehen, wenn ich die normale .mod_navigation dort auch über display {none} ausblendete.

    Hat jemand eine Idee oder Lösungsansatz wie man eine horizontalen Navigation mittels media queries in eine vertikale Navigation umwandeln kann.

    Vielen Dank im Voraus
    Goody

  8. #8
    Alter Contao-Hase Avatar von bizon
    Registriert seit
    16.06.2010.
    Beiträge
    1.125

    Standard

    Damit die Media Queries greifen, müssen sie in der Reihenfolge nach deinem normalen Navi-CSS aufgerufen werden.
    Die Reihenfolge der Queries ist ebenfalls wichtig. Abfrage für den größten Bildschirm oben und dann nach unten kleiner werdend.

    Alle relevanten Positionierungen wie: float, width, padding, margin, height, etc müssen in den Queries für die abgefragte Bildschirmgröße angepasst oder komplett neu definiert werden - je nach Anforderung. Dabei musst du genau die Selektoren aus der ursprünglichne Navi-CSS nehmen, die dadurch überschrieben werden - deshalb ist auch die Reihenfolge so wichtig.

  9. #9
    Contao-Nutzer
    Registriert seit
    06.11.2009.
    Beiträge
    134

    Standard

    Zitat Zitat von Wian Beitrag anzeigen
    Waere das Thema "Webdesign fuer mobile Geraete / responsive Webdesign" nicht eine eigene Rubrik wert - wo man auch Infos und Links sammeln koennte? Eine Art Erfahrungsaustausch. Irgendwie ist das bei mir aktuell der Bereich mit den meisten Fragezeichen und sicherlich geht es anderen auch so. Dabei bietet Contao so viele Moeglichkeiten wie Mobilcore ...
    Dem kann ich wirklich nur beipflichten!

    RWD erfreut sich momentan extrem wachsender Beliebtheit bei meinen Kunden. Alle glauben allerdings, es gäbe dafür irgendeinen Knopf und zack ist die Website mobil. Habe mir gerade das Buch "Mobiles Web von Kopf bis Fuß" geholt. Das momentan einzige am Markt, das dieses Thema überhaupt vorrangig und sehr gut behandelt. Hier wird deutlich, dass - wenn man es richtig machen will - doch eine ganze Menge mehr zu beachten ist, als nur ein paar Media Queries einzubauen. Bei den meisten Websites, die ich bisher gesehen habe, bleibt z. B. der Inhalt meist identisch, nur eben anders angeordnet. Dies berücksichtigt aber nicht die z. T. erhebliche langsamere Anbindung und die geringeren Kapazitäten der mobilen Geräte. Hier müssten eigentlich andere Inhalte ausgeliefert werden. Da wird es dann schon schwierig z. B. mit Slideshows, die immer eine feste Größe erfordern. "Mobile first" wäre z. B. eine Thematik, sowie die Entwicklung wirklicher responsive Extensions für Contao, so dass z. B. Slideshows tatsächlich Bilder in unterschiedlicher Auflösung ausliefern können und die Bilder nicht einfach klein skaliert anzeigen.

    Grüße
    Sitting Bull

  10. #10
    Contao-Fan Avatar von Doro
    Registriert seit
    22.06.2009.
    Ort
    Ammersbek
    Beiträge
    359

    Standard

    Hi Wian,

    Zitat Zitat von Wian Beitrag anzeigen

    Oder gibt es irgendwo im Web Testseiten für Tablets?
    gibt es, schaumal hier http://www.responsinator.com/
    Gruß Doro

  11. #11
    Contao-Fan Avatar von neophron
    Registriert seit
    12.06.2010.
    Ort
    Berlin
    Beiträge
    290

    Standard

    Ich habe auch verschiedene Links gesammelt, wo »devices« simuliert werden. Es ist jedoch ein großer Unterschied ob man die Seite simuliert und mit einer Maus bedient oder ob man sie auf einem echten Tablett oder Smartphone »befummelt«.
    Daher habe ich mir letzte Woche dieses Gerät hier für € 120,– bestellt:
    http://www.amazon.de/gp/product/B007...=1&s=computers
    Wenn man auf youtube nach Odys Next sucht, wird man auch fündig. Dort bekommt man eine gute Vorstellung wie das Gerät funktioniert.
    Kann ich nur empfehlen.

  12. #12
    Contao-Fan Avatar von Doro
    Registriert seit
    22.06.2009.
    Ort
    Ammersbek
    Beiträge
    359

    Standard

    Es ist jedoch ein großer Unterschied ob man die Seite simuliert und mit einer Maus bedient oder ob man sie auf einem echten Tablett oder Smartphone »befummelt«.
    Da geb ich dir absolut recht!
    habe gerade bei einem Test unter dem Responsinator einen Unterschied in der Darstellung auf dem IPAD3 zu verzeichnen, das wird eindeutig anders dargestellt.

  13. #13
    Contao-Nutzer Avatar von wandski
    Registriert seit
    06.07.2009.
    Ort
    Insel Usedom
    Beiträge
    26

    Daumen hoch responsive webdesign - links

    Hi, responsive webdesign ist schon eine tolle Sache. Ich habe bisher auch 2 Seiten umgesetzt und Contao ist bestens dafür geeignet. Dabei haben mir auch folgende Seiten geholfen. Der Nachteil der Geschichte ist eben das die Bilder mit der vollen Größe geladen werden und per CSS skaliert (width: 100%) wird. Deshalb passen sich die Bilder der Größe an.

    Hier meine Beispielseiten:

    Hier die Informationsseiten:


    Viele Grüße, Wandski

  14. #14
    Contao-Fan Avatar von Doro
    Registriert seit
    22.06.2009.
    Ort
    Ammersbek
    Beiträge
    359

    Standard

    Hi wandski,

    Beispiel 1 ist echt eine coole Seiten, gefällt mir ausgesprochen gut,
    bei der zweiten sind mir zu viele unterschiedlich Grüntöne dabei. Aber die ist ja auch noch in Arbeit.
    ist bei Beispiel 1 der Flexi slider im Einsatz?
    ich kämpfe gerade mit den CSS dazu, mich irritiert das Höhen und Seitenverhältnis von dem Teil.
    im Moment kann ich noch nichts zeigen, das ist noch alles im absoluten Rohbau. Stelle die Seite aber später gerne auch zur diskussion und ja responsive webdesign ist eine tolle Sache, aber ehrlich gesagt finde ich das auch ganz schön schwierig, was alles zu Bedenken ist, aber vielleicht wird auch das mit der Zeit leichter.

    übrigens habe ich das mit den Bildgrössen inzwischen mit lazyResize gelöst, nachdem ich an dem Einbinden von adaptive-images irgendwie gescheitert war. Außerdem ist es ja auch vielleicht auch schöner mit "hausinternen" Contaomodulen zu arbeiten.
    Hier der Forenbeitrag dazu.

    und danke für die Links.
    herzl. Gruß Doro

  15. #15
    Contao-Nutzer Avatar von wandski
    Registriert seit
    06.07.2009.
    Ort
    Insel Usedom
    Beiträge
    26

    Standard Responsive Webdesign

    Hi Doro,

    danke für den Hinweis und den Link zum Beitrag. Ja im 1. Beispiel (Umsetzung eines Templates von Themeforest) ist der Flexi Slider integriert. Ich habe die Bilder mit meinen Proportionen 940x375px erstellt und die Breitenangabe ist halt 100% hausintern auch in der Flexi CSS. Die Höhe nimmt er dann vom erstellten Bild und daraus resultiert das Format.
    HTML-Code:
    .flexslider {width: 100%; margin: 30px 0 70px 0; padding: 0;}
    .flexslider .slides > li {display: none; margin-bottom:0;} /* Hide the slides before the JS is loaded. Avoids image jumping */
    .flexslider .slides img {max-width: 100%; display: block;}
    .flex-pauseplay span {text-transform: capitalize;}
    Ich habe hier auch einen sehr schönen Slider der für das responsive design geeignet ist.


    An dem 2. Layout farblich und technisch gesehen muss noch geschraubt werden. Ist eben auch ne menge Arbeit und testen. Aber so ist es halt eben. Der Kunde, der Webdesigner und der Nutzer....

    Viele Grüße, Rene

  16. #16
    Contao-Fan Avatar von Doro
    Registriert seit
    22.06.2009.
    Ort
    Ammersbek
    Beiträge
    359

    Standard

    Hallo Rene,
    inzwischen habe ich schon gesehen, es handelt sich hier tatsächlich um eine leicht verwechselbare Namensähnlichkeit.
    Was Du hast, ist offenbar der Jedo FlexiSlider, ich habe gerade den Flexi Slider im Einsatz.

    slider_module.png

    welchem ich jetzt den Vorzug gebe bin ich mir noch nicht im Klaren.
    Danke für deinen CSS-Schnipsel, den teste ich jetzt mal, freu*

    Grüße Doro

    nachtrag: der Flexi Slider ist hier zu finden
    Geändert von Doro (09.08.2012 um 11:38 Uhr)

  17. #17
    Contao-Nutzer
    Registriert seit
    23.04.2010.
    Ort
    Augsburg
    Beiträge
    199

    Standard Contao + externe css-Frameworks

    Hallo zusammen!
    Ich möchte mich hier einklinken, weil ich zum Thema responsives Layout auch zwei Fragen allerdings mehr allgemeiner Natur habe, die mir unter den Nägeln brennen. Ich hoffe es geht in Ordnung dazu keinen extra-Thread aufzumachen.

    Es gibt ja bekanntlich eine Menge externer, responsiver css-Frameworks. Seit Tagen google ich auf der Suche nach Hinweisen wie man diese Frameworks HTML-technisch (!) in ein CMS und speziell in Contao einbindet. Ich habe nichts gefunden. Selbst Merz und Müller halten sich in ihren Contao-Wälzern dazu eher bedeckt.
    1. Da ja der Kopf und der Fuß ebenfalls anpassungsfähig sein soll, wird man nicht um eine angepasste fe_page in Contao herumkommen. So dass es wohl nicht reicht, nur die externen Framework-Stylesheets einzubinden. Ist das richtig?
    Heißt das: ich müsste den Header und den Footer in Contao sozusagen außer Kraft setzen? Kann mir jemand bitte sagen, wie man das macht?

    2. Contao 3: Wie ich mit Interesse gelesen habe, bringt Version 3 ein responsives Raster mit. Ich kann nicht beurteilen wie gut/ flexibel dieses Grid ist. Vielleicht gibt es dennoch Gründe oder Vorlieben, die dafür sprechen, ein fremdes css-Framework (z.B. Skeleton) auch dort zu benutzen. Muss man dann wie bei Punkt 1 auch hier die fe_page anpassen?

    Vielen Dank für eure Hinweise

    Gruß
    Thannhäuser

  18. #18
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

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

    Ethan Marcotte hat seinen ALA-Artikel zu "RWD" im Mai 2010 veröffentlicht. Da ist quasi der Begriff erfunden worden. Richtig ins Rollen gekommen ist die Sache mit dem Erscheinen des ABA-Buchs "RWD" im Jahre 2011. Marcotte meint damit drei Dinge: "fluid grids", "flexible images" und "media queries".

    Der Begriff hat von Anfang an für Verwirrung gesorgt. Jeffrey Zeldman hat das sehr schön ausgedrückt in seinem Blog-Artikel "RESPONSIVE DESIGN. I DON’T THINK THAT WORD MEANS WHAT YOU THINK IT MEANS." Seit Fazit ist:
    Our understanding of 'responsive design' should be broadened to cover any approach that delivers elegant visual experiences regardless of the size of the user's display and the limitations or capabilities of the device.
    Seitdem wird unter "responsive" so ziemlich alles verstanden, was nicht "festgenagelte Breite in Pixel" ist. Wenn also jemand was "responsive" machen will, sollte er erst genau überlegen, was genau er damit eigentlich meint.


    Zitat Zitat von thannhäuser Beitrag anzeigen
    Es gibt ja bekanntlich eine Menge externer, responsiver css-Frameworks.
    Stimmt. Fast soviel wie Definitionen von "responsive". Und das wiederum sind fast so viele wie Facebook-User.

    Ich habe so ein bisschen das Gefühl, dass du dich von dem Vorhandensein so vieler toller Responsive-Frameworks ein bisschen kirre machen lässt. Ich habe bis jetzt noch keines gesehen, dass irgendwas könnte, was zum Beispiel YAML nicht auch könnte. Und einarbeiten muss man sich immer


    Zitat Zitat von thannhäuser Beitrag anzeigen
    Seit Tagen google ich auf der Suche nach Hinweisen wie man diese Frameworks HTML-technisch (!) in ein CMS und speziell in Contao einbindet. Ich habe nichts gefunden. Selbst Merz und Müller halten sich in ihren Contao-Wälzern dazu eher bedeckt.
    "Merz" ist im August 2010 erschienen. "Müller" im Oktober 2010, mit einer zweiten Auflage im November 2011. Da kann zum Einbinden von "responsive Frameworks", die zum großen Teil nach diesen Büchern entstanden sind, wirklich nicht soviel drinstehen.


    Zitat Zitat von thannhäuser Beitrag anzeigen
    ... wird man nicht um eine angepasste fe_page in Contao herumkommen. So dass es wohl nicht reicht, nur die externen Framework-Stylesheets einzubinden.
    Ein CSS-Framework setzt oft eine bestimmte HTML-Struktur voraus, und wenn das nicht zufällig dieselbe ist wie in der fe_page, ja dann brauchst du eine anderes Seitentemplate.


    Zitat Zitat von thannhäuser Beitrag anzeigen
    Heißt das: ich müsste den Header und den Footer in Contao sozusagen außer Kraft setzen? Kann mir jemand bitte sagen, wie man das macht?
    Warum? Darf eine "responsive Website" keinen Header oder Footer haben? Aber sei's drum: Im Seitenlayout kann man die Header oder Footer de-aktivieren.


    Zitat Zitat von thannhäuser Beitrag anzeigen
    Wie ich mit Interesse gelesen habe, bringt Version 3 ein responsives Raster mit. Ich kann nicht beurteilen wie gut/ flexibel dieses Grid ist.
    Einfach ausprobieren. Aber überlege dir vorher etwas genauer, was du erreichen willst

    So. Das reicht für heute. "Müller" muss jetzt wieder ans Buch schreiben. Contao3. Und die Beispielsite läuft schon wie geschmiert. Auch die mobile Version. Und responsive wird das auch noch. Whatever that may mean...
    Geändert von pmmueller (09.08.2012 um 15:56 Uhr)

  19. #19
    Contao-Nutzer
    Registriert seit
    23.04.2010.
    Ort
    Augsburg
    Beiträge
    199

    Standard

    Wie eh und je fundierte Auskünfte. Vielen Dank dafür, pmmueller!

    Dennoch, die Frage nach der Anpassung des Contao-Seitentemplates ist noch offen. Weder auf den Websites von Gumby, Skeleton oder 960gs noch in den dazugehörenden Downloads dazu, habe ich die jeweiligen HTML-Strukturen entdeckt. Selbst wenn, ist mir nicht klar, wie das im fe_page HTML/PHP-Code anzupassen wäre. Schade, dass man dazu nirgendwo eine Anleitung finden kann.

    Der erheiternde Einwand, ob eine resp. Website keinen Header und Footer haben darf, geht wohl auf meine unglückliche Formulierung zurück. Meist gehen ja die externen css-Frameworks von einem umgebenden <container> aus. (Vielleicht entspricht das dem Contao-wrapper?) Dann ließe sich, so verstehe ich das als Laie, Header und Footer nicht mit der Standard-fe_page ansprechen.

    Gruß
    Thannhäuser

  20. #20
    Contao-Fan Avatar von melzebub
    Registriert seit
    21.05.2010.
    Ort
    Lüneburg
    Beiträge
    292
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von thannhäuser Beitrag anzeigen
    Der erheiternde Einwand, ob eine resp. Website keinen Header und Footer haben darf, geht wohl auf meine unglückliche Formulierung zurück. Meist gehen ja die externen css-Frameworks von einem umgebenden <container> aus. (Vielleicht entspricht das dem Contao-wrapper?) Dann ließe sich, so verstehe ich das als Laie, Header und Footer nicht mit der Standard-fe_page ansprechen.
    Es gibt den #wrapper. Der liegt um header, container und footer. Du kommst mit der Standard fe-page meist ganz gut klar. Oder verstehe ich dich falsch?

  21. #21
    Contao-Nutzer
    Registriert seit
    23.04.2010.
    Ort
    Augsburg
    Beiträge
    199

    Standard

    Wenn Contao tatsächlich mit den externen css-frameworks meist klar kommt – um so besser.
    Dann komme ich dann einmal vom Theoretischen ins Praktische und probiere es aus.

    Vielen Dank für deine Antwort.
    Gruß
    Thannhäuser

  22. #22
    Contao-Nutzer Avatar von wandski
    Registriert seit
    06.07.2009.
    Ort
    Insel Usedom
    Beiträge
    26

    Standard Contao Sitetemplates

    @thannhäuser nehme Dir doch mein erstes Beispiel. Da habe ich die fe_page gar nicht angefaßt oder brauchte es verändern. Zum tragen kommt das Skeleton CSS Framwork. Das hauseigene Framework wurde deaktiviert und die Spaltenkonfiguration wurde einspaltig gewählt. So wenn Du dann in den Quelltext schaust siehst Du vielleicht Deine Antwort auf die Fragen. Aber wie meine Vorredner schon sagten, egal welches System eine Einarbeitung ist immer von Nöten. Baue Dir doch erstmal eine Demoseite ohne CMS um den Aufbau zu verstehen.

    Hier findest Du eine paar freie Template dazu: http://designmodo.com/html-responsiv...ite-templates/

    Gruß Rene

    PS: @pmmueller sehr erfrischender Beitrag... ;-)

  23. #23
    Contao-Fan Avatar von Doro
    Registriert seit
    22.06.2009.
    Ort
    Ammersbek
    Beiträge
    359

    Standard

    ich selbst kann zu der Diskussion mit den Grids wenig fundiertes beitragen,
    aber ich habe gesehen, dass wandski's erstes Beispiel offenbar mit Skeleton umgesetzt ist,
    vielleicht kannst Du da mal in die CSS bzw. den Quelltext schauen.

    Vielleicht kann er ja auch noch was über seine Erfahrung damit sagen,
    das würde mich auch sehr interessieren.

    herzl. Gruß Doro

    p.s uups wandski war schneller als ich

  24. #24
    Contao-Nutzer
    Registriert seit
    23.04.2010.
    Ort
    Augsburg
    Beiträge
    199

    Standard

    @Rene: Vielen Dank für Deinen Beitrag auf meine Anfrage! Ich bin wirklich froh, dass sich noch jemand meldet.
    Ich muss in dieser Sache einen Knoten im Hirn haben weil ich das nicht verstehe.
    Mir ist beim Durchlesen dieses Threads sehr wohl aufgefallen, dass du das Skeleton verwendest mit dem ich auch liebäugle. Übrigens Deine Lösung, Beispiel 1, finde ich auch beeindruckend.
    Du schreibst, "das hauseigene Framework wurde deaktiviert". Wir sprechen von der fe_page, ja? Im Seitenlayout kann man das aber doch nicht deaktivieren (Contao 2.11). Und, vielleicht blöde Frage, aber von irgendwoher muss ja schließlich ein HTML-Gerüst kommen? Außerdem ist das ja auch noch eine HTML-PHP-Kombi.

    Gruß
    Thannhäuser
    Nachtrag: Die Frage für mich ist: woher nimmst du das HTML-Gerüst für z.B. Skeleton und wo schreibst du das hin (wenn nicht in eine fe_page-Kopie)?
    Geändert von thannhäuser (09.08.2012 um 20:23 Uhr)

  25. #25
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard Contao und andere CSS-Frameworks

    Rene hat doch glaube ich geschrieben, dass die fe_page unverändert bleibt.

    Mit CSS-Framework ist wohl der Layout-Builder gemeint. In Contao 3 RC1 kannst du im Seitenlayout superbequem alles vom Contao-CSS-Framework ausstellen und an gleicher Stelle deinen externen Stylesheets von irgendeinem Skelett oder Golden Grids Dingelbumbel einbinden.

    Wenn ein CSS-Framework keine bestimmten HTML-Strukturen voraussetzt (wie z. B. das bei YAML der Fall ist), dann funktioniert das mit der Gestaltung über die Vergabe von Klassen. Darum setzt du im Seitenlayout alles auf eine Spalte und die Gestaltung machst du mit den Klassennamen bei den Artikeln oder Inhaltselementen.

    Leo hat dazu einen schönen Beitrag geschrieben:
    http://www.contao.org/de/news/den-la...mbinieren.html

    Ist zwar nicht "responsive", aber zum Lesen und Verstehen der Prinzipien bestimmt nicht schlecht.
    Geändert von pmmueller (17.01.2013 um 10:34 Uhr)

  26. #26
    Contao-Nutzer
    Registriert seit
    23.04.2010.
    Ort
    Augsburg
    Beiträge
    199

    Standard

    Na das ist doch eine Auskunft auf den Punkt gebracht!
    Herzlichen Dank Peter Müller

    Mit freundlichem Gruß
    Thannhäuser

  27. #27
    Contao-Fan
    Registriert seit
    05.11.2009.
    Ort
    Liebschützberg (Sachsen)
    Beiträge
    527

    Standard Firefox Addon Web Developer mit View für Responsive Layouts

    Mein größtes Problem ist das Testen.
    Durch Zufall habe ich heute, im Firefox Addon Web Developer V. 1.2.2, eine Vorschau für Responsive Layouts entdeckt!

    Risize --> View Responsive Layouts


    Steffen Winde
    Geändert von swinde (11.09.2012 um 16:36 Uhr)

  28. #28
    Contao-Fan Avatar von neophron
    Registriert seit
    12.06.2010.
    Ort
    Berlin
    Beiträge
    290

    Standard

    Danke für den Hinweis, dann braucht man nicht mehr den http://responsinator.com/

    Habe diese Seite gefunden: 8 popular online apps to test the mobile version of your site: http://www.webdesignerdepot.com/2011...-of-your-site/

    Ich habe gestern mit dem http://validator.w3.org/mobile/ eine Seite getestet und er hat viel gemeckert. Vorhin habe ich die gleiche Seite noch einmal getestet und komischerweise waren es weniger Fehler
    Der Logik des mobilen w3c-validators nach, müsste jede Seite eine mobile Version haben.

  29. #29
    Contao-Nutzer
    Registriert seit
    21.02.2014.
    Beiträge
    158

    Standard

    Eine kleine vielleicht dumme Frage dazu: wie geht man eigentlich mit winzigen Displays mit riesiger Auflösung um?
    Es gibt ja z.B. nur 11 cm hohe Disples mit hochkant bald 2000 px Auflösung, da bringt dann ja die Abfrage nach Auflösung gar nichts, weil die Seite darauf winzig erscheint.

  30. #30
    Contao-Urgestein Avatar von ways2web
    Registriert seit
    23.03.2010.
    Ort
    Berlin
    Beiträge
    1.698
    User beschenken
    Wunschliste

    Standard

    Retina?

    Gesendet von meinem SM-G935F mit Tapatalk

  31. #31
    Contao-Nutzer
    Registriert seit
    21.02.2014.
    Beiträge
    158

    Standard

    z.B. das SGS4

  32. #32
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.198
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das SGS4 meldet eine device-width von 360px, also nur ein Drittel der Pixelauflösung des Displays. Das wird nun per Meta-Tag als Breite des Viewports gesetzt.
    HTML-Code:
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    Also ist auf dem Ding für den Browser der Viewport 360x640px. Darauf beziehen sich dann auch die ganzen Pixelangaben im CSS. Dass das Gerät eigentlich tatsächlich eine wesentlich höhere Auflösung hat, nämlich 1080x1920px, ist eine andere Geschichte und insbesondere bei Bildern interessant. Wenn du z.B. per CSS ein Bild auf 100x100px Größe festlegst, sollte die Bilddatei mindestens 300x300px groß sein, um eine möglichst scharfe Darstellung zu bekommen. Damit entspricht dann ein Bildpixel einem Bildschirmpixel, ansonsten würde das Bild praktisch aus 3x3(Bildschirm-)Pixel großen Blöcken aufgebaut, was natürlich mögliche Bildschärfe verschenkt.

    Edit: Wahrscheinlich würden keine 3x3 Blöcke mit konstanter Farbe gerendert, sondern es würde interpoliert. 100x100 Bildpixel würden auf 300x300 Bildschirmpixel hochgerechnet, mit den selben Folgen wie auf einem "normalen" Bildschirm, ein unscharfes Bild.
    Geändert von tab (25.05.2016 um 17:53 Uhr)

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •