You are currently viewing TYPO3-Tutorial 2012-23 – HTML-Vorlage in TYPO3 integrieren – Teil 10 – Responsive Layout

Bevor ein Responsive Layout in TYPO3 4.6.x wirklich funktioniert, müssen noch ein paar Anpassungen an der Ausgabe der Extension „CSS Styled Content“ vorgenommen werden.
Ab TYPO3 4.7 ist die Anpassung der CSS Styled Content nicht mehr nötig! Schaut dazu auch meine Slides an, gegen Ende kommt ein Abschnitt zur Version 4.7!

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Dieser Beitrag hat 40 Kommentare

  1. Andreas

    Hallo Wolfgang, auch für dieses Video vielen Dank!
    Ich habe noch eine Frage zum responsiven Layout bzw. möchte ich Deine Meinung dazu wissen:
    Es ist ja so, dass momentan die meisten Webseiten ihr Layout in Pixeln berechnen. Auch hier in diesem Videobeispiel wird es so gemacht. Nun kommen aber für das mobile Web in diesen Tagen mehr und mehr Geräte mit besonders hohen Pixel-Auflösungen auf eher kleinem Raum. Das bekannteste Beispiel ist sicher Apple mit dem Retina-Display, aber auch andere Anbieter haben vergleichbare Produkte im Angebot.
    Hier ist es ja nicht mehr unbedingt schlau, das Layout nach Pixeln zu gestalten, sondern man sollte vielleicht lieber in em oder pt messen? Oder gibt es da eine andere Lösung? Weißt Du, ob Typo3 und YAML dazu geeignet sind? Also responsives Layout UND nicht mehr in Pixeln gemessen. Klappt das auch mit der Bildgröße und Typo3?
    Kurz zusammengefasst: Wie ist Deine Meinung, wie ist Deine Erfahrung, was sind Deine Tipps rund um den Themenkomplex responsive Layout, Typo3, YAML und Bemaßung in anderen Maßeinheiten als Pixel?
    😉

    1. Wolfgang Wagner

      Hi,
      also prinzipiell hat das mit TYPO3 erst mal wenig zu tun, sondern ist mehr ein „Problem“ des HTML-Templates und der CSS-Anweisungen. Denn man kann ja jedes beliebige Template in TYPO3 einbauen, und dem ist es egal, mit welchen Maßen gerechnet wird.
      Zu dem anderen Problem habe ich mir ehrlich gesagt noch nicht viele Gedanken gemacht. Aber bei einem responsive Layout kann man ja z.B. auch die max-width in em angeben, wie es z.b. bei YAML 3.x der Fall ist. min-width:760px; max-width:90em; ist da glaube ich die Standardeinstellung.
      Und da sich die Einheit em ja an der Schriftgröße des Betrachtungsmediums orientiert, dürften da theoretisch keine Probleme auftauchen.

  2. Sascha

    Hi Wolfgang!
    Ich wollte dir ein großes Lob und Dank aussprechen, ich finde es toll, was du an Wissen weitergibst. Ich betreibe schon seit langer Zeit eine Typo3-Website, allerdings mehr oder weniger im Standard-YAML-Design, weil mir bisher einfach das Wissen im Bereich Templating fehlte. Mit deinen wirklich gut gemachten Videos traue ich mich jetzt aber auch mal an ein komplett eigenes Template. Wie viele Folgen wird es denn in naher Zukunft noch geben und vor allem, wann gehts endlich weiter? 😉

    1. Wolfgang Wagner

      Es wird schon noch einige Folgen geben, aber wieviele, kann ich nicht sagen. Wann es weitergeht, weiss ich nicht genau, immer wenn ich mal ein wenig Zeit übrig habe, nehme ich weitere Videos auf, aber zur Zeit versinke ich ein wenig in Arbeit.

  3. Eva

    Hi Wolfgang, auch von mir ein dickes Dankeschön

  4. Robert

    Hallo Wolfgang,
    Komplimente!!!
    Ich finde diesen Kurs echt SUPER!
    Vielen Dank!

    1. Wolfgang Wagner

      Gern geschehen, wünsche weiterhin viel Spaß! 🙂

  5. charlie

    Hi! Vielen Dank für die Hilfe! Hilfreiches Video

  6. rendjy

    Hallo Wolfgang,
    hier noch ein mal möchte ich mich für die super Videos bei dir bedanken!
    Ich habe eine Seite nach deinen Anweisungen aufgebaut und habe da leider einige kleine Macken.
    z.B.:
    Habe ich ein Logo mit 1120px x 200px ohne Probleme eingebaut.
    Das Logo wird aber nicht kleiner gemacht bzw. wird nicht an das Responsive Layout angepasst, sondern bleibt immer so groß wie im normalen Zustand… und das sieht echt schlecht aus!
    Das selbe Problem habe ich mit den Tabellen einiger Extensions wie mm_forum, tt_news und sk_pagecomments.
    Hast du vielleicht eine Idee was mann ändern könnte damit es auch mit dem Logo und den Extensions funktioniert?
    Beste Grüße!

    1. Wolfgang Wagner

      Wenn ich mich recht erinnere, greift das CSS für Responsive Images nicht im Header. Dü müsstest also evtl. noch dein CSS so anpassen.
      mm_forum wirst du nicht so ohne weiteres in ein Responsive Layout integrieren können, da bereiten Tabellen generell Probleme. Es gibt zwar Lösungen, Tabellen responsive zu gestalten, aber für ein Forum wird das eher unsinnig sein. Die tt_news kannst du über eigene Templates beliebig gestalten, dazu findest du auch ein Video im 2010er-Kurs.

  7. Kurt Dona

    Hallo Wolfgang,
    zuerst möchte ich dir für deine Videos in denen du auch Anfängern der Einstieg in Typo3 sehr leicht machst herzlich danken.
    Ich habe gerade eine Typo3-Seite nach deinen Videos gemacht und ich konnte alles ohne Probleme umsetzen.
    Nun versuche ich die Extension „Perfect Lightbox“ zu installieren. Leider funktioniert diese nicht. Bei deinem ersten Kurs funktioniert sie einwandfrei. Kann es sein, dass ich Perfect Lightbox nicht in Kombination mit Responsive Layout verwenden kann oder kennst du eine andere Ursache?
    Besten Dank
    KurD

    1. Wolfgang Wagner

      Wird wahrscheinlich daran liegen, dass jQuery schon manuell eingebunden ist. Deaktiviere im Konstanteneditor von Perfectlightbox mal die automatische Einbindung von jQuery.

      1. Kurt Dona

        Hallo Wolfgagn,
        das war’s. Perfect Lightbox funktioniert jetz bestens.
        Danke für deine rasche Hilfe
        KurD

  8. Walter Späth

    Hallo Wolfgang,
    Habe deinen ersten Kurs auch schon gemacht und es hat alles super geklappt.
    Bei dem 2012-Kurs bin ich aber langsam am verzweifeln.
    Habe ca. 5x Typo3 neu aufgesetzt da es bei mir immer an der Aktion
    von Video 19_Teil 6_Page scheitert.
    Pfad zu fileadmin/templates/css/my_layout.css stimmt und beim Aufruf der Seite wird im Quelltext auch alles, wie von dir im Video beschrieben, angezeigt. Aber – bei mir erscheint immer nur der FooterText: „Copyright © , Wolfgang Wagner. Layout based on YAML.“ aber kein css Layout.
    Hast mir vielleicht einen Tipp, was ich falsch mache??
    besten Dank vorab!

    1. Wolfgang Wagner

      Ohne einen Link zu deiner Site kann man da nicht viel sagen, aber sehr wahrscheinlich hast du irgendwo im Typoscript einen Tippfehler.

      1. Walter Späth

        Hallo Wolfgang,
        Wer sucht der findet.
        Das Problem trat bei einem anderen User auch schon auf und ich fand es in der richtigen Rubrik
        :
        TYPO3-Tutorial 2012-19 – HTML-Vorlage in TYPO3 integrieren – Teil 6 – PAGE
        >> es war die baseURL!
        nun funktionierts!
        Gruß Walter

  9. Sören Mothes

    Hallo Wolfgang,
    Die Tutorials sind einfach spitze – Danke!
    Habe mir allerdings am Responsive Layout fast die Zähne aus gebissen, bis ich gemerkt habe, dass es mit Typo3 4.7 nicht funktioniert.
    Man kann aber die css styled content auf Version 4.6 einstellen und dann klappt alles.
    Gibt es vielleicht auch schon ein bekanntes Workaround für Typo3 4.7.?
    Ich habe die Extension sp_responsive gefunden die ab Typo3 4.7 prinzipiell die gleiche Funktionalität und sogar etwas mehr (image slider oder Carousel) bringt. Jedoch weiß ich nicht, wie man hier den weißen Rand um die Bilder weg bekommt.
    Viele Grüße.

      1. Sören Mothes

        Danke für die schnelle Rückinfo!
        wenn ich das richtig verstehe, müssten eingefügte Bilder bei Fenstergrößenänderung automatisch skalieren, wenn in der css-Datei
        img, embed, object, video {
        max-width: 100%;
        height: auto;
        width: auto;
        }
        hinterlegt ist.
        Das funktioniert spitze in meiner HTML anlage, aber nicht in Typo3 4.7. Dort bleibt das Bild immer genau so groß wie in den height und width Attributen im Image Tag angegeben.
        Fogender Code wird von Typo3 4.7 erzeugt:

        1. Alexander

          Hallo, ich hänge mich hier einfach mal dran. Ich habe auch die tolle Videoserie nachgebaut und bekomme das mit dem responsive design auch nicht hin. Auch ich habe T3-4.7.7 aber die Bilder werden nicht verkleinert.
          Wurde dazu schon etwas herausgefunden?
          LG, Alexander

          1. David

            Von hier auch erstmal Danke für die Super Videos!
            Also das Problem mit Typo3 4.7 habe ich auch. Mit Safari als Browser funktionert es wunderbar. Wenn man die width von auto auf 100% umstellt, funktioniert es auch im Firefox und im IE, aber nicht mehr im Safari 😀
            Meine Browser-Versionen:
            Firefox 12.0, IE 9, Safari 5.1.7
            Man könnte es mit Bedingungen abfangen, aber vielleicht hat jemand einen besser Lösungsvorschlag

  10. Florian

    Hallo Wolfgang,
    Die Tutorials find ich einfach spitze – Danke
    Sie haben mir schon sehr viel weiter geholfen, auch wenn
    es noch massen an Probleme gibt mit dem einrichten
    eines individuellem Design, scheint alles andere ganz gut zu
    funktionieren. Hab die Vorlage unserer Uni-Seite als t3d-Datei bekommen und versuch das Design, sowie die CSS an meine Sachen anzupassen. Was mich aber jetzt interessieren würde… wenn man 2 oder 3 unterschiedliche Seiten in Typo3 betreibt, wie stellt man das Typo3 so ein dass es bei der richtigen URL auch gleich die passende ID (Seite) öffnet?
    Bei uns an der Uni wird die Domain einfach auf die IP des Server gelenkt und das Typo3 öffnet gleich die dazugehörige Seite. Mehrere Lehrstühle in einer Typo3 Oberfläche…
    fände ich ganz gut, dann hab ich eine Datenbank und eine Oberfläche (eine Typo3 installation), wo ich all meine Seiten verwalten kann. Das wär doch ein Tutorial-Film wert, oder? Danke

    1. Wolfgang Wagner

      Zum einen muss man bei der Ausgangsdseite (Root-Seite) der Website in den Seiteneigentschaften einen Haken bei „Ist Ausgangspunkt…“ setzen. Zum anderen kann man über das Listenmodul auf den entsprechenden Root-Seiten einen neuen Datensatz vom Typ „Domain“ anlegen. Hier kann man die entsprechende URL (ohne http://) eintragen.

      1. Florian

        Herzlichen Dank!
        Genial…
        Du kennst dich super aus… vielleicht kannst du mir bei der sendmail Funktion weiterhelfen. Typo3 zeigt mir bzw. liest einen Pfad aus (bei den Basic-Configuration), der jedoch nicht stimmt. Und bringt mir folgenden Hinweis:
        Sendmail program not found or not executable?
        sendmail_path=/usr/sbin/sendmail -t -i
        This may be critical to TYPO3’s use of the mail() function. Please be sure that the mail() function in your php-installation works!

        Mein Provider teilte mir mit, der Pfad wäre auf dem Server falsch, ich solle diesen ändern und einfach den anderen Eintragen.
        Jetzt meine Frage: In der Version Typo3 4.7.1 gibt es aber diese Möglichkeit nicht, dass ich drunter einen alternativ Pfad eintrage. Wie kann ich diesen Pfad manuell ändern und wo?
        Herzlichen und vielen Dank !!!

        1. Wolfgang Wagner

          In TYPO3 direkt kannst du den Pfad nicht ändern, soweit ich weiss.
          Aber TYPO3 wertet den Eintrag in der php.ini aus. Sofern du also Zugriff auf die php.ini hast oder sogar eine eigene anlegen kannst, kannst du hier den korrekten Pfad eintragen. Kontaktiere dazu am besten nochmal den Support deines Hosters.

          1. Florian

            Wenn mein Anbieter den Pfad ändert oder ich eine php.ini anlegen kann…erkennt das Typo3 dann automatisch oder muss ich ihm irgendwie mitteilen – überprüfen?

  11. Wolfgang Wagner

    Theoretisch sollte der Pfad automatisch erkannt werden. Aber dieses spezielle Problem hatte ich bisher noch nie. Was ist denn das für ein Hoster?

    1. Florian

      Hoster ist die Firma Webhoster.ag
      Habe aber jetzt schon in ein paar Forums gelesen dass die Leute da Probleme haben, jedoch bis jetzt noch keiner eine Lösung aufzeigte. Werde dem Support dort jetzt einmal druck machen. Danke für deine Hilfe

  12. J.

    Hey,
    super Kurs! Ich habe mir alle Videos angeguckt und hab in der Theorie alles verstanden, glaube ich zumindest 😉
    Ich und wohl auch viele andere würden sich über weitere Kurse ,z.B. über gute Extensions oder wie man Typo3 mit twitter bootstrap nutzt, freuen.
    Noch kurz ein Tipp zum Thema Responsive:

    Durch die media queries kann je nach Auflösung das Bild ausgetauscht werden.
    Gruß
    J.

  13. Michael

    Hi Wolfgang,
    super Sache – danke.
    Allerdings habe ich ein Probelm gefunden. Sowohl in der normalen YAMB Demo, als auch bei deiner TYPO3 Demo gibt es Problme mit dem Landscape Modus im iPhone – also wenn es quer dreht.
    weißt du zufällig warum?
    Michael

  14. Olaf

    Vielen Dank für die tollen Videos!
    Hab jetzt erst gesehen das du sogar neu eingestellt hast, super!
    Als kleine Anerkennung gibt’s was für die Kaffeekasse.
    Herzliche Grüße
    Olaf

  15. Wolfgang ZL

    Hallo Wolfgang,
    super Erklärungen und vielen Dank dafür! Ich wollte mir deswegen deine ganzen Videos von Wuala lokal sichern (man weiss ja nie..), aber anscheinend ist Teil 23 deines 2012 Kurses nicht dort abgelegt. Oder täusche ich mich da??

    1. Wolfgang Wagner

      Stimmt, habe ich wohl vergessen. Werde ich bei Gelegenheit mal hochladen. Allerdings findest du die ganzen Videos ja auch bei Youtube.

  16. Dirk

    Schade, seit 4.7 kann man nicht mehr hiermit die Bilder entsprechend laden:
    tt_content.image.20 {
    1.stdWrap.innerWrap.cObject = COA
    1.stdWrap.innerWrap.cObject {
    10 = IMG_RESOURCE
    10 {
    file {
    import.data = TSFE:lastImageInfo|origFile
    maxW = 480

    }
    stdWrap.wrap =
    }
    20 = TEXT
    20.value = |
    }
    }

  17. Julian

    Dirk, es sollte weiterhin tun, solange Du unterhalb von file noch setzt: treatIdAsReference = 1

  18. Anita

    Hallo Wolfgang,
    super Tutorial – herzlichen DANK!
    Habe mein html Template selbst erstellt und auch die CSS responsive angelegt.
    Das Template habe ich in Typo3 6.0 verwendet. Es funktioniert soweit fast alles.
    Das einzige Problem ist, dass das Menü im Safari 5.1.7 in der Bildschirmgröße (ab 768px) nicht mehr anwählbar ist.
    Bei den anderen Browsern funktioniert es.
    Hast du so etwas schon mal gehört?
    Liebe Grüße

    1. Wolfgang Wagner

      Hm, dieses Problem hatte ich bisher noch nie.

Kommentare sind geschlossen.