Template zweispaltig responsive

20 Jan. 2022 08:33 #2069 von Romana

  • Moderator
  • Moderator

  • Beiträge: 963
  • Dankeschön erhalten: 86
  • Hallo Silke,

    jetzt muss ich doch auch meinen Senf dazu abgeben. Ohne CSS kein responsive. Media queries mit ihren Breakpoints und den unterschiedlichen CSS-Definitionen gibt es nur da. Ich habe gerade noch mal zu responsiven Mails recherchiert. Überall wird empfohlen, einspaltige Layouts zu verwenden, damit die kleineren mobilen Geräte vor allem im Hochformat nicht außen vor bleiben. Als Schriftgröße wird mindestens 14pt genannt.

    Ich habe den Eindruck, Du meinst, in zwei oder drei Stunden sei so was erledigt. Aber falls dem so sein sollte, muss ich Dir diesen Zahn ziehen. Da gehen locker Tage ins Land… Wenn Du bei den Webseiten schon viele Clients, sprich Browser, hast, in denen es immer gleich aussehen soll, was sich durch die mobilen Geräte und die "Anpassungen" der Browser durch die Handy-Provider nicht verbessert hat, kommen bei den Mails noch weitere Clients dazu: Die Webmailer der Mail-Provider sind da ein Beispiel. Wenn ich dann noch bedenke, dass zum Beispiel bei einem GMX-Account die Mail zwar im Browser geöffnet wird, die Interpretation der Mail aber in einem iframe durch GMX erledigt wird, kommen noch mal etliche Clients dazu.
    Und jeder kocht bei der Interpretation sein eigenes Süppchen. Bei den Browsern hat sich das erst mal ziemlich standardisiert, wird durch die Anpassungen der Handy-Provider aber auch wieder zum Teil karrikiert. Doch bei den Mails hat sich für die Interpretation noch nicht wirklich durchgesetzt, dass man sich an den Standard hält. Das bedeutet, dass es eine Menge Anpassungen durch CSS-Definitionen geben muss, was das mitgelieferte CSS wieder deutlich aufbläst. Das musst Du alles in die Mal packen, externe CSS-Dateien werden eher nicht geladen.

    Wenn ich mir den Quellcode von Mails ansehe, die per Newsletter mit einem responsiven Template von Karl versendet wurden, dann sehe ich da neben den Media queries und den dazugehörenden CSS-Anweisungen auch noch zusätzlich viele verschachtelte Divs und selbst auch noch verschachtelte Tabellen, damit wenigstens die geläufigen Mail-Clients das irgendwie ziemlich gleich aussehen lassen. Ich sehe da noch zusätzliche Hürden durch den Wechsel von einspaltig zu zweispaltig und zurück. Du darfst nicht vergessen, dass gerade dein Beispiel Tschibo keine "5-Mann-Klitsche" ist. Die haben eine ganz andere Man-Power, aber auch finanzielle Möglichkeiten, um so eine Mail-Vorlage zu erstellen.

    Ich will Dir den Mut nicht nehmen, aber ich will Dich deutlich darauf hinweisen, dass der Aufwand nicht zu unterschätzen ist, solch eine Mail-Vorlage zu erstellen. Ich an deiner Stelle würde erst mal herausfinden, welchen der Kunden ich so was verkaufen kann, damit man diesen Aufwand auf mehrere Schultern verteilen kann. Wenn Du dann der Meinung bist, dass sich der Aufwand lohnt (und nicht zu viele Abonnenten außen vor gelassen werden), dann werden wir sicherlich eine Lösung finden.

    Hth
    Romana

    Problem gelöst? Dann bitte auf gelöst klicken. Über ein Danke freue ich mich immer.
    Problem solved? Please click to solved.I am glad to every thank you.

    Bitte Anmelden oder Registrieren um der Konversation beizutreten.

    20 Jan. 2022 10:02 #2070 von Graf

    • Senior Mitglied
    • Senior Mitglied

  • Beiträge: 40
  • Dankeschön erhalten: 0
  • Hi Romana, danke für Senf dazu geben.
    Also ich habe gestern mehrere Stunden mit diesem Thema zugebracht und wie verrückt nach einer Lösung gegoogelt.
    Ich habe ganz oft ein/zwei spaltige Templates gesehen. Von einem Abraten davon keine Spur. Ganz im Gegenteil.

    Ich habe eines auch erfolgreich einbinden können - läuft auf outlook, gmx.net und IOS. Alles Tip Top.
    Ich kann deine abratende Aufregung deswegen nicht richtig verstehen.

    Das eintige was nicht läuft (und da kenne ich mich nicht aus) ist die zweisplatige Anordnung auf dem Smartphone.
    Dort macht es immer eine untereinander-Ansicht.
    Ich benötige aber ein Bild in voller Breite und manchmal zwei Stück unten drunter.

    Ich habe nochmal ein Bild angehängt (responsive Ansicht). Gibt es irgendeine Möglichkeit oder Workarround
    dies mit BW Postman umzusetzen? Solche Newsletter flattern bei mir zu Hauf von den unterschiedlichsten
    Anbietern rein.

    Bei mir sind leider die Programmierkenntnisse zu wenig ausgeprägt, diese Zweispaltigkeit hinzubekommen.

    Das man aus einem Newsletter-Template gleich ein Projekt draus machen muss,
    um zwei Bilder nebeneinander zur Ansicht zu bekommen, dachte ich in der Tat nicht.

    Vielen Dank, Silke
    Anhänge:

    Bitte Anmelden oder Registrieren um der Konversation beizutreten.

    22 Jan. 2022 16:39 #2071 von Karl

    • Administrator
    • Administrator

  • Beiträge: 334
  • Dankeschön erhalten: 31
  • Hallo Silke,
    große Mailversanddienstleister bieten ausgeklügelte Hilfssysteme an, mit deren Unterstützung der Nutzer eine Newslettervorlage ausfüllt und anschließend sein Ergebnis versenden kann.
    Das lassen sie sich allerdings auch gut bezahlen.
    Joomla-Erweiterungen können diesen Service nicht bieten.

    Ohne HTML-Kenntnisse von dir bzw. deinem Kunden, wird es nicht einfach sein einen responsiven Newsletter zu erstellen.

    Im angefügten ZIP-Archiv habe ich dir mal eine Mailvorlage mit Bildern gelegt, die ich mal aus einer Vorlage von Campaign Monitor erstellt habe.
    Eine Anleitung wie man eigenes HTML mit Joomla und BwPostman nutzen kann habe ich beigefügt.

    Vielleicht könnte dir auch dieser Link www.campaignmonitor.com/email-templates/ helfen.
    Klicke unten auf eine Vorlage und starte die Bearbeitung.
    Am Ende kann man sich die bearbeitete Vorlage per E-Mail senden lassen.

    Kostenlose Newslettervorlagen findest du auch bei GitHub z.B. hier github.com/ColorlibHQ/email-templates


    Gruß Karl

    P.S.: Responsive bedeutet, dass Inhalte, abhängig von der Bildschirmgröße des Betrachters, anders dargestellt werden.
    Du solltest dich nicht wundern, dass auf einem 24-Zoll Monitor Inhalt mehrspaltig und auf dem Smartphone einspaltig angezeigt wird.
    Anhänge:
    Folgende Benutzer bedankten sich: Graf

    Bitte Anmelden oder Registrieren um der Konversation beizutreten.

    22 Jan. 2022 16:51 #2072 von Graf

    • Senior Mitglied
    • Senior Mitglied

  • Beiträge: 40
  • Dankeschön erhalten: 0
  • Ooh toll Karl, vielen Dank! Der Hunde-Newsletter werde ich mir anschauen und rumprobieren.
    Der sieht nach BW Postman aus - das könnte klappen.

    Danke auch für die Anleitung, die hilft mir zu verstehen und zu lernen.
    Ich setze mich gleich morgen vormittag dran und versuche das umt´zusetzen.

    Danke einstweilen, vielen Dank!

    Bitte Anmelden oder Registrieren um der Konversation beizutreten.

    31 Jan. 2022 18:13 #2073 von Graf

    • Senior Mitglied
    • Senior Mitglied

  • Beiträge: 40
  • Dankeschön erhalten: 0
  • Lieber Karl, nochmals vielen Dank, für deine Hilfe zur Selbsthilfe.
    Ich habe mich jetzt durchgearbeitet und dank deiner Anleitung habe ichs hinbekommen.

    Ich finde die Vorlage "index-komplett.html" super, da darin alle Spalten enthalten sind.

    Eine Bitte hätte ich noch: Könntest du mir bitte sagen, was ich ändern muss, damit auf dem
    Handy die zwei oder drei Spalten anzeigt werden - so wie am Bildschirm?

    Damit es für die Kunden zur Bedienung einfach wird (die haben keine Programmierkenntnisse,
    möchten aber jetzt wegen Corona online aktiv sein) soll der Newsletter jetzt doch als Beitrag
    im Joomla Backend angelegt und in BW Postman eingefügt werden - so wie von dir ursprünglich vorgeschlagen.

    Einige Kunden sind aus dem textilen Einzelhandel. Es sind deswegen oft nur freigestellte Produkte,
    die im Newsletter in einer oder zwei Spalten nebeneinander gezeigt werden sollen.

    Die Newsletter-Hilfe die du geschickt ist, macht genau das - am Handy, werden aber die zwei Spalten
    zu einer. Das ist bei responsive und auch üblich und vollkommen richtig. Gibt es jedoch eine Möglichkeit,
    die zwei Spalten auch auf dem Smartphone zweispaltig zu lassen?

    Ich danke dir einstweilen. Herzliche Grüße, Silke

    Bitte Anmelden oder Registrieren um der Konversation beizutreten.

    01 Feb. 2022 11:00 #2074 von Karl

    • Administrator
    • Administrator

  • Beiträge: 334
  • Dankeschön erhalten: 31
  • Hallo Silke,
    man kann da nicht einfach was umstellen.
    Das ist ein für eine Vielzahl an Clients optimiertes E-Mail-Template, das mit kalkulierten Weiten und viel Inline-CSS arbeitet - da ist alles aufeinander abgestimmt.
    Ändert man eine Stelle, dann schaut das vielleicht am Handy gut aus, aber in Outlook auf dem Tablet kann es ganz anders sein.

    Sorry, aber da kann ich dir nicht weiterhelfen.

    Gruß Karl

    Bitte Anmelden oder Registrieren um der Konversation beizutreten.

    Ladezeit der Seite: 0.138 Sekunden

    Zum Newsletter registrieren

    Hinweis: Ihre eingegebenen Daten werden von mir nur für die Registrierung zum und den Versand des Newsletters verwendet. Diese Daten werden von mir verarbeitet und gespeichert. Weitere Informationen erhalten Sie in meiner Datenschutzerklärung.
    Ihre Mailingliste:
    BwPostman:
    Infos rund um Joomla!-Erweiterungen von Boldt Webs...

    () Pflichtfelder

    Information

    ×

    Freiwilliges Honorar

    Wenn Sie Boldt Webservice gut finden, freue ich mich über ihre Unterstützung:
    • Empfehlen Sie Boldt Webservice weiter
    • oder lassen Sie mir ein freiwilliges Honorar zukommen, wenn Ihnen die Tipps auf dieser Seite oder die Erweiterungen für Joomla eine Hilfe waren. Die Abwicklung erfolgt über Paypal.

    Sie unterstützen mit ihrem freiwilligen Honorar auch die Neu- und Weiterentwicklung freier Software und Erweiterungen für das CMS Joomla.

    Geben Sie einfach unten den Betrag ein, den Sie mir zukommen lassen möchten und klicken auf den Button freiwilliges Honorar:

     

    Zum Newsletter registrieren

    Hinweis: Ihre eingegebenen Daten werden von mir nur für die Registrierung zum und den Versand des Newsletters verwendet. Diese Daten werden von mir verarbeitet und gespeichert. Weitere Informationen erhalten Sie in meiner Datenschutzerklärung.
    Ihre Mailingliste:
    BwPostman:
    Infos rund um Joomla!-Erweiterungen von Boldt Webs...

    () Pflichtfelder

    Information

    ×

    Freiwilliges Honorar

    Wenn Sie Boldt Webservice gut finden, freue ich mich über ihre Unterstützung:
    • Empfehlen Sie Boldt Webservice weiter
    • oder lassen Sie mir ein freiwilliges Honorar zukommen, wenn Ihnen die Tipps auf dieser Seite oder die Erweiterungen für Joomla eine Hilfe waren. Die Abwicklung erfolgt über Paypal.

    Sie unterstützen mit ihrem freiwilligen Honorar auch die Neu- und Weiterentwicklung freier Software und Erweiterungen für das CMS Joomla.

    Geben Sie einfach unten den Betrag ein, den Sie mir zukommen lassen möchten und klicken auf den Button freiwilliges Honorar: