Template zweispaltig responsive

20 Jan 2022 08:33 #2069 by Romana

  • Moderator
  • Moderator

  • Posts: 963
  • Thank you received: 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.

    Please Log in or Create an account to join the conversation.

    20 Jan 2022 10:02 #2070 by Graf

    • Senior Member
    • Senior Member

  • Posts: 40
  • Thank you received: 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
    Attachments:

    Please Log in or Create an account to join the conversation.

    22 Jan 2022 16:39 #2071 by Karl

    • Administrator
    • Administrator

  • Posts: 334
  • Thank you received: 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.
    Attachments:
    The following user(s) said Thank You: Graf

    Please Log in or Create an account to join the conversation.

    22 Jan 2022 16:51 #2072 by Graf

    • Senior Member
    • Senior Member

  • Posts: 40
  • Thank you received: 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!

    Please Log in or Create an account to join the conversation.

    31 Jan 2022 18:13 #2073 by Graf

    • Senior Member
    • Senior Member

  • Posts: 40
  • Thank you received: 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

    Please Log in or Create an account to join the conversation.

    01 Feb 2022 11:00 #2074 by Karl

    • Administrator
    • Administrator

  • Posts: 334
  • Thank you received: 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

    Please Log in or Create an account to join the conversation.

    Time to create page: 0.123 seconds

    Register to newsletter

    Hint: Your entered data are only used to register to and sending of the newsletter. Your data will be processed and stored by me. For more information have a look at my privacy policy.
    Your mailing list:
    BwPostman:
    Infos about Joomla! extensions of Boldt Webservice...

    () Mandatory fields

    Information

    ×

    Voluntary salary

    If you like Boldt Webservice then I would be glad about your backing:
    • Recommend Boldt Webservice.
    • If you want to support my work with a donation, please click on the following button - the donation will be handled via paypal.

    With your voluntary salary you also support the development of free software and extensions for the CMS Joomla.

    Enter your amount below and click on the following button:

     

    Register to newsletter

    Hint: Your entered data are only used to register to and sending of the newsletter. Your data will be processed and stored by me. For more information have a look at my privacy policy.
    Your mailing list:
    BwPostman:
    Infos about Joomla! extensions of Boldt Webservice...

    () Mandatory fields

    Information

    ×

    Voluntary salary

    If you like Boldt Webservice then I would be glad about your backing:
    • Recommend Boldt Webservice.
    • If you want to support my work with a donation, please click on the following button - the donation will be handled via paypal.

    With your voluntary salary you also support the development of free software and extensions for the CMS Joomla.

    Enter your amount below and click on the following button: