Image Image Image Image Image Image Image Image Image Image

GUTES TUN | 18. Oktober 2017

Nach oben

Top

Keine Kommentare

Mailpoet für Smartphones optimieren

Mailpoet für Smartphones optimieren

Mailpoet ist eines der beliebtesten WordPress-Plugins um Newsletter zu verschicken. Es wurde unter dem Namen “Wysija Newsletter Plugin” bekannt und hat mittlerweile über 300.000 aktive Installationen.

Die Erweiterung bietet so gut wie alle Möglichkeiten um einen Newsletter zu verwalten. Es ist möglich verschiedene Listen aufzubauen und man kann manuelle oder auch automatisierte Newsletter in einem einfachen Editor gestalten. Ein postiver Aspekt des Tool ist auch, dass die meisten Funktionen in der kostenlosen Version des Plugins verfügbar sind.

Ein Problem der 2.x-Version von Mailpoet ist, dass das Standard-Template des Newsletters nicht auf Smartphone wie dem iPhone angepasst ist. Das Design ist nicht responsive, sondern auf Desktop-Auflösungen ausgerichtet. Der Blog Blackhillswebworks hat jedoch eine gute Möglichkeit gefunden um diesen Fehler zu korrigieren.



Insgesamt müssen zwei Dateien angepasst werden css.html und email_template.html. Beide Files finden sich im Plugin Folder unter /wysija-newsletters/tools/templates/newsletter.

email_template.html anpassen

Im Quellcode von email_template.html erkennt man, dass die Breite des Templates auf 600 Pixel fixiert ist. Dies muss man auf 100% abändern. width=”600″ wird zu width=”100%” und style=”min-width:600px;” wird zu style=”max-width:600px;width:100%;”.

Sowie muss man den table-Tag mit style=”margin:0 auto;max-width:600px;” ergänzen. Die komplette Änderungen sehen im Standard-Template dann so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" {if #is_rtl} dir="rtl" {/if} >
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>{#subject|default:Wysija template}</title>
    {#css}
</head>
<body bgcolor="{#styles.html.background|color}" yahoo="fix">
    <span style="margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;display:block;background:{#styles.html.background|color};">
    <table width="100%" cellpadding="0" cellspacing="0" border="0" id="wysija_wrapper" style="margin:0 auto;max-width:600px;">
        <tr>
            <td valign="top" align="center">
                <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
                    {if ! #hide_viewbrowser}
                    <tr>
                        <td width="100%" style="max-width:600px;width:100%;" valign="top" align="center" {if #is_rtl} dir="rtl" {/if}  >
                            {#viewbrowser}
                        </td>
                    </tr>
                    {/if}
                    <tr>
                        <td width="100%" style="max-width:600px;width:100%;" valign="top" align="center">
                            {#header}
                        </td>
                    </tr>
                    <tr>
                        <td width="100%" style="max-width:600px;width:100%;" valign="top" align="left">
                            {#body}
                        </td>
                    </tr>
                    <tr>
                        <td width="100%" style="max-width:600px;width:100%;" valign="top" align="center" {if #is_rtl} dir="rtl" {/if}  >
                            {#footer}
                        </td>
                    </tr>
                    {if ! #hide_unsubscribe}
                    <tr>
                        <td width="100%" style="max-width:600px;width:100%;" valign="top" align="center" {if #is_rtl} dir="rtl" {/if} >
                            {#unsubscribe}
                        </td>
                    </tr>
                    {/if}
                </table>
            </td>
        </tr>
    </table>
    </span>
</body>
</html>

css.html anpassen

Bei der Datei css.html muss man die Befehle zu den Bildern anpassen. Im Quellcode findet man diesen Abschnitt:

    img {
        outline:none;
        text-decoration:none;
        -ms-interpolation-mode: bicubic;
    }
    a img {border:none;}
    .image_fix {display:block;}

Diesen kann man wie im Beispiel unten ergänzen:

    img {
    	max-width:100%;
    	height:auto !important;
        outline:none;
        text-decoration:none;
        -ms-interpolation-mode: bicubic;
    }
    a img {border:none;}
    .image_fix {display:block; height:auto !important;}

Um das Styling weiter zu verbessern, habe ich bei der Überschrift h2 folgenden Befehl hinzugefügt:

    h2 {
        color:{#h2.color|color} !important;
        display:block;
        font-family:{#h2.family};
        font-size:{#h2.size}px;
        font-style:normal;
        font-weight:normal;
        line-height:125%;
        letter-spacing:normal;
        margin:0;
        {if #is_rtl}text-align:right;{/if}
        {if ! #is_rtl}text-align:left;{/if}
        padding-bottom: 15px !important;
    }

Fazit

Mit diesen Änderungen ist auch die Darstellung auf dem Smartphone ansprechend und erhöht die Klickrate bei Mailpoet. Das Problem mit der Optimierung auf mobile Oberflächen sollte sich jedoch mit der Version 3 des Plugins behoben werden. Diese Version beinhaltet ein responsives Template. Derzeit gibt es eine Beta-Version von Mailpoet 3.

Kommentar senden