web analytics

ALLES ÜBER responsive_newsletter_template UND WIE ES AUF WEBSITES EINGESETZT WIRD

Untersuchte Extension

responsive_newsletter_template

Responsive Newsletter-Vorlage

Erweiterungsschlüssel: responsive_newsletter_template

Abhängigkeiten:

  • TYPO3: Version 8.7.
  • EXT: html-mail-utility

Was bewirkt es?

Die Responsive Newsletter Templates bieten responsive Newsletter-Vorlagen für TYPO3 auf Basis von Foundation for Emails 2 (ehemals Inky) (http://foundation.zurb.com/emails). Die Foundation-Inky-Templates können direkt in fluid verwendet werden und werden in einen unverwechselbaren, altmodischen und inlined HTML-Tabellencode überführt. Diese Vorlagen können z.B. mit TYPO3 Direct Mail verwendet werden.

Merkmale:

Installation

Installation

Abhängigkeiten

  • Extentsion HTML Mail Utility: erhalten Sie es von https://gitbucket.undkonsorten.com/extensions/html_mail_utility machen Sie die Composer-Installation für diese Erweiterung (siehe Erweiterungshandbuch), um die neuesten Quellen zu erhalten (ohne diese wird es nicht funktionieren!)
  • wenn dies auf dem Server nicht funktioniert, führen Sie die Funktion composer Run Extension-Build ausführen auf Ihrem lokalen Rechner und kopieren/rsynchronisieren Sie die Datei Libraries/dependencies.phar auf Ihren Webserver ** Dies ist beides ist möglicherweise nicht erforderlich bei einer Composer-Installation

Installation

Nach der Installation des HTML Mail Utility installieren Sie einfach die Erweiterung Reponsive Newsletter-Vorlagen Holen Sie es sich von: https://gitbucket.undkonsorten.com/extensions/responsive_newsletter_template

TypoScript-Setup einbinden

Fügen Sie die TypoScript-Vorlagen ein für

  • HTML Mail Utility (html_mail_utility)
  • Inhaltselemente (fluid_gestylter_Inhalt)
  • die Standardvorlage:
    • HTML-Mail-Rendering (Basis) (responsive_newsletter_template): enthält die Datei Main/setup.txt
  • eine der Newsletter-Vorlagen ("Include static from extensions") wie z.B
    • Layout: Newsletter (responsive_newsletter_template) oder
    • Layout: Newsletter2 (responsive_newsletter_template) oder
    • Layout: Held (responsive_newsletter_template) oder
    • Layout: Seitenleiste (responsive_newsletter_template) oder
  • Klartext-Rendering (responsive_newsletter_template)
  • Gridelemente (Gridelemente) bei Bedarf für die Vorlage
  • ? Was ist mit dem HTML-Mail-Programm?

und für Direct Mail (für den Versand mit Direct Mail)

  • Grenzen des Inhalts von Direct Mail (direct_mail)
  • Direct Mail News Klartext (direct_mail)
  • Direct Mail Klartext (direct_mail)

Einschließen: Seite TSConfig

Fügen Sie für Ihren Newsletter-Ordner die SeiteTsConfig (von Erweiterungen) hinzu:

  • PageTs für Newsletter-Inhalte (responsive_newsletter_template): Enthält ein einspaltiges Backend-Layout (und andere Dinge)
  • PageTS für Vorlagen mit mehr als einer Spalte: Bietet ein anderes Backend-Layout (muss nach dem Standard pageTS aufgerufen werden)
  • RTE-Konfiguration für Newsletter (responsive_newsletter_template): für Links mit Button-Style

Konfiguration

Vorlagen/Layouts

Erstellen Sie eine Dateistruktur im Projektstamm ("fileadmin" Ordner) für Inhalt und Frontend:

??? Newsletter
?   ??? Ressourcen
?       ??? Privat
?       ?   ??? Inhalt
?       ?   ??? Seite
?       ??? Öffentlich
?           ??? Css
?           ??? Bilder

Im Allgemeinen werden zunächst die Standard-Vorlagen aufgerufen (z.B. /Resources/Private/_Default) und dann die benutzerdefinierte Newsletter-Vorlage/Layout-Ordner (z.B. /Resources/Private/Templates/Sidebar)

Es gibt 2 verschiedene Vorlagenordner für die folgenden Bereiche

  • Seite: Definiert das allgemeine Seitenlayout (/Ressourcen/Private/_Default/Page)
  • Inhalt: Definiert die Inhaltsvorlagen für jedes Inhaltselement (/Resources/Private/_Default/Content)

Die Layout-Vorlagen (Hero, Newsletter, Newsletter2, Sidebar) schalten grundsätzlich nur die fluid Vorlage rootPaths ein

Sie können eigene Vorlagenpfade definieren über

plugin.tx_responsivenewslettertemplate.lib.page {
    templateRootPaths.20 = EXT:my_theme_extension/Resources/Private/Newsletter/Page/Templates/
    partialRootPaths.20 = EXT:my_theme_extension/Resources/Private/Newsletter/Seite / Teile / Teile /
    layoutRootPaths.20 = EXT:my_theme_extension/Resources/Private/Newsletter/Seiten/Layouts/
}

TypoScript-Konstanten

Konstanten können im Konstanten-Editor bearbeitet werden.

  • html.typeNum: Der Seitentyp kann definiert werden. Standardmäßig ist es 148543460607

Backend-Layout

Der Newsletter benötigt das Backend-Layout (z.B. Newsleter eine Spalte, 2 Spalten). Diese werden durch verschiedene PageTs-Konfigurationen bereitgestellt (siehe oben)

Styling

Das Styling Ihres Newsletters sollte mit Foundation for Email 2 (mit Node.js) erfolgen. Bitte beachten Sie dieses Projekt für den Start eines neuen Projekts und überprüfen Sie das Wiki

Foundation for Emails nimmt Ihnen die Arbeit bei der Entwicklung von HTML-E-Mails ab, indem es Ihnen eine Reihe von leistungsstarken, getesteten Komponenten zur Verfügung stellt. Dazu gehören ein vollständig reagierendes Raster, Schaltflächen, Beschriftungen, Menüs und mehr.

Installieren Sie es global und lesen Sie den Rest aus dem Leitfaden[http://foundation.zurb.com/emails/docs/sass-guide.html]:

sudo npm install --globale foundation-cli

Es ist wichtig, die Ausgabe von

npm run start start

Wenn Sie den npm run build verwenden, können unbenutzte CSS-Klassen entfernt werden. Du solltest entfernen inline Source Mapping aus der resultierenden app.css.

Um die app.css zu erstellen, führen Sie die Foundation aus mit npm run build

app.css

Die app.css-Datei wird von der TYPO3 Extension HTMl Mail Utility mit Markup versehen. Die app.css befindet sich im Ordner dist/css.

inject.css

Die inject.css wird als Style-Tag in TYPO3 eingebunden.

Die inject.scss muss manuell erstellt werden. Wenn Sie den npm run build ausführen, wird in der Ausgabe ein unterstrichener <style>@media ...</tag> Block angezeigt. Aus diesen Styles musst du manuell die Datei inject.css erstellen und sie in deinen Css-Ordner (Public Ressources) hinzufügen.

Dies trägt dazu bei, den Footprint der enthaltenen Style-Regeln gering zu halten (nur Pseudoelemente und Medienabfragen).

CSS-Dateien in TYPO3 einbinden

Definieren Sie dann die CSS-Datei über die TS-Konstanten

plugin.tx_responsivenewslettertemplate.cssFile = EXT:my_theme_extension/Resources/Public/Css/app.css
plugin.tx_responsivenewslettertemplate.injectCssFile = EXT:my_theme_extension/Resources/Public/Css/inject.css

Seitentypen

Der HTML-Newsletter wird mit einem benutzerdefinierten Seitentyp versendet (siehe Konstanten). Wenn der Newsletter ohne diese Seitenart angezeigt wird, werden der Online-Link Lesen und der Abmeldelink entfernt.

Newsletter-Inhalt

Seiteneigenschaften der Newsletter-Seite

  • Seitentitel:
    • wird für den Betreff des Newsletters verwendet (in der Regel verwendet DirectMail diesen normalerweise als Betreff der E-Mail)
    • wird in der xxx-Vorlage für den Newsletter für die Editionslinie verwendet (Fluid: {data.title})
  • Seite Untertitel
    • kann in der Fluid-Vorlage über {data.subtitle} aufgerufen werden
  • Seitenbeschreibung
    • wird für den normalerweise optisch verborgenen Foundation "Preheader" verwendet. Der Preheader wird in E-Mail-Clients wie Outlook, Gmail usw. angezeigt. Es wird verhindert, dass die Zeile "Diesen Newlettter online lesen" in diesen E-Mail-Programmen als Vorschau/Abstract angezeigt wird. Es sollte eine Länge von 50-100 Zeichen haben.
    • ein Fallback kann über die Konstante defaultDescription definiert werden, falls der Editor die Seitenbeschreibung nicht ausfüllt

Newsletter Inhaltselemente

Der Newsletter kann folgende Inhaltselemente anzeigen

  • Schlagzeilen
  • Überschriften + Text
  • Text-Medien (mit Bild oben, links, rechts)
  • Content-Menü (Spezielle Menüs mit dem Menu Type Section Index (Seiteninhalt, der für Section-Menüs markiert ist). Hier werden nur Inhaltselemente aufgelistet, bei denen das Feld Show in Section Menus* in der Registerkarte Appearance markiert ist
  • Trennwand (für eine horizontale Trennwand zwischen den Inhaltselementen)

FAQ - Probleme

Fehler: Konnte die Klasse nicht analysieren: "Hampe\Inky\Inky\" vielleicht nicht geladen oder kein Autoloader? Die Klasse Hampe\Inky\Inky\Inky existiert nicht

  • Lösung: Machen Sie die Composer Installation für die html_mail_utility Erweiterung (siehe oben) - die dependencies.phar fehlt

Zu tun

  • Denken Sie an den Bettnamen für die pageTS form muliti columns (#12147) WIP
  • PHP Inky im Gegensatz zu Grunt Inky für "center" Tag https://support.undkonsorten.com/issues/12185
  • ? Was ist mit dem HTML-Mail-Programm Template inclusion?

Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.

Verteilung:RESPONSIVE_NEWSLETTER_TEMPLATE ist auf

0 % aller TYPO3 installiert.

  • 0.02 % aller TYPO3 8.7.x Installationen installiert

Aktualität:RESPONSIVE_NEWSLETTER_TEMPLATE ist auf dem neusten Stand (v.unknown) bei

100 % aller TYPO3 Installationen

  • 0 % aller TYPO3 9.5.x Installationen
  • 0 % aller TYPO3 9.3.x Installationen
  • 0 % aller TYPO3 9.2.x Installationen
  • 0.02 % aller TYPO3 8.7.x Installationen
  • 0 % aller TYPO3 7.6.x Installationen
  • 0 % aller TYPO3 7.5.x Installationen
  • 0 % aller TYPO3 7.4.x Installationen
  • 0 % aller TYPO3 7.3.x Installationen
  • 0 % aller TYPO3 7.2.x Installationen
  • 0 % aller TYPO3 7.1.x Installationen
  • 0 % aller TYPO3 7.0.x Installationen
  • 0 % aller TYPO3 6.2.x Installationen
  • 0 % aller TYPO3 6.1.x Installationen
  • 0 % aller TYPO3 6.0.x Installationen
  • 0 % aller TYPO3 5.0.x Installationen
  • 0 % aller TYPO3 4.7.x Installationen
  • 0 % aller TYPO3 4.6.x Installationen
  • 0 % aller TYPO3 4.5.x Installationen
  • 0 % aller TYPO3 4.4.x Installationen
  • 0 % aller TYPO3 4.3.x Installationen
  • 0 % aller TYPO3 4.2.x Installationen
  • 0 % aller TYPO3 4.1.x Installationen
  • 0 % aller TYPO3 4.0.x Installationen
  • 0 % aller TYPO3 3.5.x Installationen

PHP Version:RESPONSIVE_NEWSLETTER_TEMPLATE wird benutzt mit

  • 100 % PHP/7.1

responsive - image 4

Gosign-Responsive Index: TYPO3 Installationen nutzen RESPONSIVE_NEWSLETTER_TEMPLATE zu

  • 0 % wenn der Gosign-Responsive-Index zwischen 80 % und 100 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 60 % und 80 % ist
  • 100 % wenn der Gosign-Responsive-Index zwischen 40 % und 60 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 20 % und 40 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 0 % und 20 % ist

speed test - image 5

Pagespeed: TYPO3 Installationen nutzen RESPONSIVE_NEWSLETTER_TEMPLATE zu

  • 100 % wenn der Pagespeed zwischen 80 % und 100 % ist
  • 0 % wenn der Pagespeed zwischen 60 % und 80 % ist
  • 0 % wenn der Pagespeed zwischen 40 % und 60 % ist
  • 0 % wenn der Pagespeed zwischen 20 % und 40 % ist
  • 0 % wenn der Pagespeed zwischen 0 % und 20 % ist

Ran an die Resultate – unser Newsletter für Sie!

Damit Sie gleich Wind davon bekommen, wenn wir in unserem Magazin zu neuen Erkenntnissen kommen.