Roadmap

Das TYPO3-Theme wurde für TYPO3 7.6 entwickelt und unter TYPO3 8.7 und TYPO3 9.5 deutlich weiterentwickelt. Aktuell liegt es für das TYPO3 10.4 vor, für das es wieder konsequent weiterentwickelt wird.

  • Effiziente Umsetzung von responsiven Templates dank eigener Integration des TOP-Frameworks Bootstrap.
  • Verbesserte Bootstrap-Navigation für Windows-, Android- und Apple-Geräte sowie für alle gängigen Browser, egal ob Mobile- oder Desktop-Browser
  • Zusätzliche Alternative zum Toggle-Menü für mobile Endgeräte: Off-Canvas-Navigation, die zur Seite aus dem Viewport geschoben wird
  • MegaMenu für TYPO3 als Ergänzung zur verbesserten Bootstrap-Navigation (anpassbar für bestimmte Menü-Punkte)
  • Schlanker Code für kurze Ladezeiten (<150KB CSS (unkomprimiert), sofern z. B. Slider, Carousel oder Lightbox nicht benötigt werden)
  • Zahlreiche Funktionen inklusive: Touch-Slider, Carousel, Full Screen-Background, Header Backgrounds, flexible Galerien, Lightbox, Video Backgrounds, Aufklapper, Click2tweet, Scroll Animations u.v.m. 
  • Vollwertiges Blog durch CORE-Team-Erweiterung blog (datenschutzfreundliche Share-Buttons (rx_shariff), RSS-Feed, integrierte Kommentar-Funktion oder DISQUS (DISQUS sollte nicht mehr genutzt werden, da diese Kommentarfunktion nicht DSGVO-konform zu sein scheint), Gravatar (Nutzung von Gravatar ist vor dem Hintergrund der DSGVO zu diskutieren) etc.).
  • Zukunftssichere Templates dank zeitgemäßer FLUID Engine (FLUID Templates)
  • Hohe Kompatibilität für alle gängigen Endgeräte und Browser (IE9+, Safari, Firefox, Chrome, Edge)
  • Zusätzlich zu den Layout-Dateien (CSS) erhalten Sie eine Sass-Datei (SCSS), mit der Sie grundsätzliche Einstellungen wie z. B. das Farbschema Ihrer Organisation (Corporate Colors/Vereinsfarben), Schriftgrößen ohne umständliche Anpassungen in nur einer Minute anpassen können.
  • SSL-Ready: Bestellen Sie einfach Ihr Zertifikat und fügen - falls notwendig - den mitgelieferten Code in Ihre .htaccess ein. Fertig! Umständliche Anpassungen in dem Theme oder in PlugIns entfallen. 
  • TYPO3-Child-Theme, wie Sie es vielleicht von WordPress kennen: Nehmen Sie Anpassungen (TypoScript, CSS, JavaScript, Template-Dateien) im Child vor, damit das Parent-Theme sicher Updates bekommen kann.
  • Responsive Images (sog. srcset), mit denen Sie z. B. für Smartphones kleinere Bilder ausliefern, um die ladezeit zu optimieren
  • Backend-Layouts, um das Layout der Website (Zeilen und Spalten) für Redakteure auch im TYPO3-Verwaltungsbereich abzubilden. Keine Shortcodes wie bei WordPress, jedes Content-Element hat seinen eigenen komfortablen Editor.
  • Individueller Editor (CKEditor), individuell erweiterbar
  • Eigene Cropping-Varianten in TYPO3 anlegen, um Bilder nach individuellen Vorgaben direkt in TYPO3 zurechtzuschneiden
  • Cookie-Consent kann im Bedarfsfall direkt verwendet werden (NEU: Neben Cookie-Hinweis ohne weitere Funktion kann nunmehr ein Opt-in realisiert werden).
  • Integrierte SEO-Hilfe für Redakteure, etwa zur Semantik von Überschriften
  • Entfernung von redundanten HTML-Leerzeichen für Performance und SEO (entweder über replacement (TypoScript), spaceless (ViewHelper) oder SourceOpt (Extension))
  • Weitere spannende Extensions: Yoast SEOAB Test PagesCart, guide, schema_orgTYPO3 Mautic, SUPR, avalexvideo_shariff u. v. m.

Todos:

  • Sidebar-Suche aus Caching-Gründen nicht über das Ke_Search Plug-in realisieren
  • SVG im Footer nutzen, Icons optimieren
  • Stacked Images mit Rellax-Effekt realiseren, ScrollReveal ggf. nur noch optionale Variante
  • Meta-Header komplett in Fluid realisieren
  • KLARO Cookie-Skript auf ca. 50 KB (unkomprimiert) reduzieren und schlankere Alternative anbieten (#DONE)
  • Dokumentation / Screencasts
  • Pricing Table realisieren (#INPROGRESS)
  • TYPO3 Composer (#DONE)
  • Templates (#IMPORTANT)
  • Sprachauswahl für mehrsprachige Websites hinzufügen (#DONE)
  • Barrierefreiheit verbessern bzw. besser vorbereiten (#INPROGRESS)
  • Facettierte Suche (ke_search) als Alternative zur Indexed Search (#DONE, wird aktuell genutzt)
  • "Arrows" außerhalb des Carousels platzieren (#DONE)
  • Conditional Variants für Forms vorbereiten, sodass mehrstufige Formulare mit Bedingungen realisiert werden können. (#DONE)
  • Neue Version von SmoothScroll verwenden
  • Breite des Headers (Navigationsbereich) unabhängig von übrigen Bereichen einstellen können (#DONE)
  • Möglichst kein Content-Reflow durch Lazy Images (#DONE #WEITERETESTS) 
  • Formular-Template für EmailToReceiver erstellen, Formular als Vorlage anbieten (#INPROGRESS)
  • Modernizr hinzufügen (#DONE)
  • Fallback für Accordion, falls JavaScript deaktiviert, da Accordion auf dieser Website in der Datenschutzerklräung genutzt wird und die Zugänglichkeit gewährleistet werden muss (#DONE)
  • Möglichkeit, <header> zu deaktivieren, da z. B. innerhalb von <footer> nicht valide (#DONE)
  • W3C-Optimierung: Aktuell zeigt die Markup-Validierung unter https://validator.w3.org/ lediglich zwei Fehler, die durch Nutzung von "Google Pagespeed" hervorgerufen werden und somit auf Wunsch sofort entfernt werden können. (#DONE)
  • NoScript-Lösung für Lazy Loading zumindest vorbereiten, aber nicht realisieren, da diese Lösung zu schwächeren Ergebnissn in Performance-Tests führt (#DONE)
  • "The Front-End Checklist" (https://frontendchecklist.io) durchgehen und prüfen, ob ggf. noch Punkte umgesetzt oder verbessert werden können. 
  • Einstellungen für "Cookie Consent" (#DONE)
  • HubSpot (#DONE)
  • Schema.org
  • Shop (#INPROGRESS)
  • Kleinere SEO-Optimierungen im Blog-Bereich (#DONE)
  • Verbesserte "nginx-Direktiven" mit Anleitung für TimmeHosting hinterlegen (#INPROGRESS)
  • Navigation zusätzlich zu TypoScript mit FLUID zur Verfügung stellen (#INPROGRESS)
  • Lazy Loading mit IntersectionOberserver und Fallback für Bilder und YouTube-Vidoes hinzufügen (#DONE)
  • Möglichkeit, bei Galerien in der Smartphone-Ansicht die Anzahl der Spalten auf 1 oder 2 zu ändern (#DONE)
  • Möglichkeit, den Abstand von Zeilen-Blöcken ("Features") nach oben oder unten auf 0 zu ändern (#DONE)
  • JavaScript "Table of Contents" für Blog-Beiträge (#DONE)
  • Google Analytics ins TYPO3-Dashboard via Google Embed API integrieren (#DONE)
  • TYPO3 Dashboard (Modul-Übersicht) aufräumen, optimieren & Kunden-Dokumentation als Modul integrieren (#DONE)
  • Backend-Komponenten evtl. übersichtlicher gestalten (#INPROGRESS)
  • Im Conversion-Element muss es mehr Backgrounds geben! (#DONE)
  • Colorpicker einsetzen, um Icons in Icon-Groups individuelle Farben geben zu können! (#DONE)
  • Fullwidth Background-Images für C2As realisieren: An sofort können Background-Elemente grundsätzlich mit jedem Content-Element genutzt werden, was entsprechend vielfältige Möglichkeiten für Call-to-Actions mit sich bringt, da zusätzlich Content-Elemente per Klick über die gesamte Bildschirmbreite angezeigt werden können. (#DONE)
  • Fullwidth-Element: Einzelne Content-Elemente können jetzt auf Knopfdruck "fullwidth" gemacht werden. (#DONE)
  • Leere Demo-Robotx.txt und Hinweis erstellen, dass bei jedem Projekt zumindest eine leere robots.txt erstellt werden sollte (#DONE)
  • Zoom-Effekt für Bilder evtl. auch in Blog-Beiträgen und Card-Groups ermöglichen
  • Konfiguration für Spellchecker hinzufügen, damit die Default-Sprache auf Deutsch eingestellt ist und Texte live überprüft werden können. (#DONE)
  • Button in Hauptnavigation ermöglichen: Lösung wurde vorbereitet und kann leicht eingefügt werden (#DONE) 
  • "Google Ads"-Integration (#INPROGRESS)
  • Controller für sys_note erstellen, um in Template Verlinkungen zu ermöglichen: Ziel ist es, Notizen für Redakteure anzulegen, in denen u. a. auf die Dokumentation verlinkt wird. (#DONE)
  • Modul-Extension für Dokumentation: Redakteure sollen über ein Modul direkt in TYPO3 eine hinterlegte Dokumentation aufrufen können. (#DONE)
  • Aus Blog-Template zwei Templates für Listen- und Detail-Ansicht machen. (#DONE)
  • Schriftauswahl für Redakteure anpassen: Es kann nun z. B. die Hausschrift hinterlegt werden sowie eine zusätzliche Serifen-Schrift, etwa für Zitate (#DONE)
  • Buttons optimieren, mehr Varianten realisieren: Es wurden nun Buttons mit Icon und Split-Buttons realisiert. Weitere Varianten (z. B. mehrzeilige Buttons mit Icon) wurden vorbereitet. (#DONE)
  • Layouts und Effekte für Navigationen vorbereiten, jedoch nicht im Theme "verbauen" (aus Performance-Gründen)
  • Mehr Layouts (z. B. Head- & Sub-Headline) (#INPROGRESS)
  • Alternatives Erscheinungsbild für Listen hinzufügen (zusätzlicher vertikaler Abstand, Linien) (#DONE)
  • Accordion optisch verbessern (#DONE)
  • Hintergrundfarbe sollte in Text/Bild-Elementen bündig mit dem Bild abschließen. Es sollte zudem ein Padding für den Text hinzugefügt werden. (#DONE)
  • "Max-width" für Texte hinzufügen (#DONE)
  • Textboxen, die Bilder teilweise überlagern, hinzufügen (z. B. an der unteren Kante des Headers, etwa wie bei www.erpit-service.de)
  • Feature-Backgrounds (Colors / Images)
  • Verhältnis via Erscheinungsbild bei Bild-Text-Elementen verändern können (wenigstens 2. Varianten)
  • Abstand zwischen Grids einstellen können (entweder via Saas oder gezielt für bestimmte Elemente via Erscheinungsbild)
  • Vertical Alignment in Background- und Header-Elementen
  • Refactoring Saas (#ZURÜCKGESTELLT)
  • Bodytext für Icongroup hinzufügen (#DONE)
  • Vergrößerungs-Icon für Galerien mit Lightbox hinzufügen, damit der Nutzer die Zoom-Möglichkeit erkennen kann (#DONE)
  • Footer-Code in Partial für leichtere Bearbeitung auslagern (#DONE)
  • Box-shadow zu Erscheinungsbild hinzufügen (#DONE)
  • Border-radius zu Erscheinungsbild hinzufügen
  • Blätterfunktion für Seiten, um zur nächsten oder vorherigen Seiten zu gelangen. (#DONE)
  • "srcsets" für Galerien optimieren, heißt in einer Galerie mit mit vier Spalten sollte für eine bessere Ladezeit eine kleinere Version von jedem Bild geladen werden als in einer Galerie mit zwei Spalten oder bei einem einzelnen Bild (#DONE)
  • Card-Groups in Blog-Liste (#DONE)
  • AOS-Scrolling-Effekte ersetzen (#DONE)
  • Variante des Themes ohne jQuery zur Verfügung stellen ("Bootstrap Native"), ansonsten jQuery-Slim nutzen (#DONE)
  • Alle Komponenten ohne jQuery einsetzen, um Variante ohne jQuery überhaupt zu ermöglichen (#DONE)
  • Schlanke Alternative zu Fancybox und Lightgallery finden, die ohne jQuery auskommt (#DONE)
  • Performance-Optimierung durch "srcsets" für Bilder (#DONE)
  • Buttons nebeneinander in diversen Elementen prüfen (#DONE)
  • Ggf. aus Connversion-Element zwei Elemente machen, ein Conversion-Header- und eine Conversion-Content-Element
  • Crossbrowsertesting: Getestet wurde u. a. iPad, iPhone, Andoid Phones, Internet-Explorer (ab V10), Safari (ab V9), Firefox, Chrome, Opera. Im Zuge dessen wurden kleinere Fehler behoben. (#DONE) Wenn Sie eine Unterstützung für Safari 8 oder Internet Explorer 8/9 benötigen, stellen wir Ihnen gerne unsere ältere Version mit "Bootstrap 3" zur Verfügung. 
  • Migration auf Bootstrap 4 (#DONE)
  • "fluid_styled_content" als Dependency entfernen - wird in TYPO3 10 ohnehin entfernt (#DONE)
  • Performance-Tests (Performance ist bereits jetzt gut, Bild-Optimierungen könnten noch Potenziale aufweisen)
  • Form im Conversion-Element verbessern (#DONE)
  • Image-Hover-Effects
  • ggf. Verbesserte Unterstützung für Safari 7.1 und 8 durch Nutzung von Prefixes
  • Verbesserte Unterstützung für Internet Explorer 10, da unter Windows 8 oder 7 eventuell noch genutzt (#DONE)
  • Diverse Feinarbeiten, Optimierungen für mobile Endgeräte, spezielle Einstellungen für mobile Endgeräte durch Redakteure ermöglichen (#INPROGRESS)
  • Cross-Browser-Testings aufgrund zahlreicher Änderungen vornehmen (#DONE)
  • Card-Groups: Überschriften vereinheitlichen
  • Icon-Groups: Darstellung auf Tablets optimieren, Position Right verbessern
  • TCA Migrations
  • Frontend-Layouts gegen Backend-Layouts austauschen
  • Responsive Images mittels CropVariants (#DONE)
  • Card-Groups für Portfolios oder Kurse als einfache Alternative zu Menüs (#DONE)
  • Templating mit Backend-Layouts ermöglichen (#DONE)
  • Update auf Bootstrap 3.4.0 (#DONE)
  • Stacking Grid-Items: Hiermit soll es möglich sein, z.B. Bilder zu stapeln (wirklich schöne Beispiele sieht man hier: https://de.shopware.com/unternehmen/forschung/)
  • Portfolio- oder Kursverwaltung mit Menüs (#INPROGRESS)
  • Typografie verbessern (#DONE)
  • Flex-Boxes ("Boxen auf gleicher Höhe halten") (#DONE)
  • Styleguide für TYPO3Men entwickeln (#INPROGRESS)
  • Usability für Redakteure weiter verbessern (#INPROGRESS)
  • Searchbox verbessern (#DONE)
  • Suchergebnisseite optimieren (#INPROGRESS)
  • No-Header-Image-Header: Es gibt immer wieder Kunden, die einfach nicht über genügend hochwertiges Bildmaterial verfügen. Hier wäre es sinnvoll, einen einfach konfigurierbaren Header zur Verfügung  zu stellen, um dennoch ein hochwertiges Design zu ermöglichen.  (#INPROGRESS)
  • Roadmap / Release-History
  • YOAST SEO auch für Blog-Extension nutzen (#DONE)
  • Background-Images mit Farb-Overlays ermöglichen (#DONE)
  • Kompatibilität mit TYPO3 9 herstellen (#DONE, für einige Blog-Funktionen warten wir lediglich noch auf ein Update der Blog-Extension, die in den nächsten Tagen kommen müsste. )
  • Form-Anpassungen für TYPO3 9.5 vornehmen (#DONE)
  • Searchbox aus Fileadmin entfernen und in eine eigene Extension packen (#DONE)
  • <article> in Blog-Listing nutzen, damit Suchmaschinen Artikel-Einträge leichter identifizieren können (#DONE)
  • Responsive Fonts ermöglichen (#DONE: Beispiel hinzugefügt, kann leicht an eigene Bedürfnisse angepasst werden)
  • Fullscreen-Header-Text unterschiedlich positionieren (#DONE)
  • Funktionen für Landing Pages (#INPROGRESS)
  • DSGVO-freundliche Videos in Lightbox/Popup (#INPROGRESS)
  • Weitere DSGVO-Maßnahmen (#DONE)
  • Performance-Optimierung (#ALWAYSNEARLYDONE)
  • Sorting explizit angeben, da Reihenfolge mitunter nicht mehr stimmt: contentGet.select.orderBy = sorting (#DONE)
  • jQuery aus Header in den Footer verschieben und in die Komprimierung einbeziehen (#DONE)
  • Carousel neu realisieren, um das Slick-Carousel durch Swiper zu ersetzen. Vorteil: Da Swiper bereits für Slideshows genutzt wird, kann mitunter Code eingespart und die Ladezeit so optimiert werden. (#DONE)
  • Dynamische Validierung für Formulare (#DONE)
  • Erweiterte Solr-Suche vorbereiten
  • Masonry/Isotope Gallery (#DONE)
  • Suche (#DONE, #NEU - es können noch Fehler auftrauchen)
  • Canonicals (#DONE)
  • Testimonials (#DONE)
  • Alternative zu Backend-Layouts: Grid via Layouts, weniger übersichtlich im Backend, dafür deutlich flexibler (gut geeignet für schnelle, flexible Erstellung von Landing Pages oder Footer) (#DONE)
  • Umstellung auf Bootstrap (#DONE)
  • (Die wichtigsten) Google-Fonts lokal zur Verfügung stellen 
  • Möglichkeit schaffen, Patterns festlegen zu können, siehe demo.patternlab.io
  • Child-Theme für eigene Konfiguration, CSS etc. (#DONE)
  • Scroll-Animations, leicht pflegbar im Backend (#DONE)
  • Parallax-Effekt (#DONE)
  • Animated Hamburges (Mobiles Menu-Icon animieren)
  • Navigation im oberen Bereich des Hintergrundbildes (#DONE)
  • Bessere Unterstützung für responsive Videos in verschiedenen Anwendungskontexten (#DONE)
  • Navigation mit Suchfeld  (#DONE)
  • Conversion-Element (#DONE)
  • Theme (#DONE)
  • Lazy load neu realisieren (#DONE)
  • Einsatz von Bootstrap 4 (#DONE)
  • Mehr Sass für größere Konfigurationsfreiheit (#DONE)
  • Endung .typoscript für TypoScript-Dateien verwenden (#DONE)
  • Page Templates und Blocks
  • Google AMP (Accelerated Mobile Pages)
  • Schräge Kanten (#DONE)
  • Media Objects

Bugs:

  • Header bei "Template for Search-Page" springt; hier muss ein kleiner Fehler drin sein
  • "Tried resolving a template file for controller action "Standard->Header" in format ".html", but none of the paths contained the expected template file (Standard/Header.html). The following paths were checked: , /var/www/t3guards.de/web/typo3_src-9.5.4/typo3conf/ext/cogtail_publishing/Resources/Private/Templates/", wenn "fluid_styled_content" deinstalliert
  • Zusätzlicher Doktype "blog" wird nach Update der YOAST-Extension wieder entfernt (#DONE)
  • Durch die Realisierung von "Lazy Loading" für Bilder funktioniert der Slider nicht mehr richtig. (#DONE)
  • Text mit vorangestelltem Icon ist nicht immer in der richtigen Schrift (Meta-Navigation / Buttons prüfen) !!!
  • Prüfen, ob in Content-Elementen mit Records zusätzlich die Layouts eingebunden werden und ggf. <f:layout name="Blank" /> nutzen (#DONE)
  • "Section "Content" does not exist." Fehlermeldung ab Version 10 der Blog-Extension, weil <f:section name="content"> zu <f:section name="Content"> wurde. Zusätzliche Probleme in Feed.html (#DONE)
  • Nach Anpassung der Suchresultate kommt es nach erneuter Suche direkt auf der Seite zu einem Fehler. (#DONE)
  • Pagination in Suchresultaten funktioniert nicht (#DONE)
  • Bei Isotope-Galerie funktioniert die Navigation nicht, da das jQuery nicht richtig funktioniert. Als kurzfristiger Workaround wird "Bootstrap Native" genutzt. (#INPROGRESS)
  • Abstände bei Mailschimp-Subscription nicht immer einheitlich: Die Abstände sind nur dann nicht einheitlich, wen nicht alle entsprechenden Rows "Fullscreen" sind oder eben nicht. Fullscreen soll aber gerade andere Eigenschaften haben, von daher ist das Verhalten so grundsätzlich okay, obwohl das für den Redakteur mitunter sicherlich verwirrend sein kann (evtl. in Doku mit aufnehmen). (#DONE) 
  • "Indexed Search" sorgt in TYPO3 9.5 für eine Latenz bzw. TTFB von ca. 0,7 Sekunden, normal ist hingegen 0,2. Es lag nicht an "Indexed Search", sondern an der Weise, wie die Searchbox auf allen Seiten eingebunden wurde. Die Searchbox wird nun anders eingebunden (#DONE)
  • Layout bei "Indexed Search"-Resultaten erneut anpassen (#DONE)
  • Double Encoding (&amp;&amp;) in Suchresultaten von "Indexed Search" beheben (#DONE)
  • Error bei "Insert Records" nach Entfernung von "fluid_styled_content". Der Grund liegt in dem Fehlen der Konstanten (#DONE)
  • Formular-Text nicht immer mittig in älteren Browsern (IE's) (#DONE)
  • "Small Spaces Before" greifen nicht immer. Prüfen, wie wichtig das letztlich ist. 
  • TYPO3-Bug: /Partials/Header" "could not be loaded", wenn Bild/Text-Element mit "Bild rechts" oder "Bild links" gewählt wird und KEIN Text (bodytext) genutzt wird  (#DONE; genutzt wird ab sofort die Lösung aus dem "Bootstrap Package")
  • Textposition bei Hintergrundbildern passt auf Smartphones nicht immer (#INPROGRESS)
  • "Bootstrap Affix Flickering" in manchen Situationen. Affix ersetzen (zumal es Affix in Bootstrap 4 nicht mehr gibt)  (#DONE)
  • Überschrift springt, wenn meta description hinzugefügt wird, da alter header.meat Code in Blog-Extension vorhanden war und diese Code in TYPO3 9 nicht mehr funktioniert und somit eine zusätzliche Zeile mit dem Inhalt der description hinzugefügt hat, nur eben den Tag nicht. (#DONE)
  • Parameter "uriToCheck" in der YOAST-Extension führt sowohl im Blog-RSS als auch in den Indexed-Search Ergebnissen zu Fehlern (#DONE) (Issue: Snippet preview isn't working)
  • No Content Object definition found at TypoScript object path "lib.internalnav". More information regarding this error might be available (#DONE)
  • BaseSetup.yaml hat sich in TYPO3 9.5 geändert. Anpassungen in der CustomSetup.yaml vornehmen (#DONE)
  • Tag-Widget im HTML-Template verursacht in TYPO3 8.7.19 einen Fehler (#DONE)
  • page.footerData.4229765632468: Maximal 7 Stellen hinter dem Punkt verwenden, da die Skripte in neuen TYPO3-Versionen sonst nicht eingebunden werden (#DONE)
  • Ungenutzte libs im Theme entfernen, da sie in TYPO3 9.5 Fehler verursachen (#DONE)
  • TypoScript für lib in Pagination anpassen (#DONE)