Improve design of HTML emails
authorTim Düsterhus <duesterhus@woltlab.com>
Sat, 27 Aug 2016 15:53:36 +0000 (17:53 +0200)
committerTim Düsterhus <duesterhus@woltlab.com>
Sat, 27 Aug 2016 15:54:00 +0000 (17:54 +0200)
com.woltlab.wcf/templates/email_adminActivation.tpl
com.woltlab.wcf/templates/email_changeEmailNeedReactivation.tpl
com.woltlab.wcf/templates/email_html.tpl
com.woltlab.wcf/templates/email_lostPassword.tpl
com.woltlab.wcf/templates/email_registerNeedActivation.tpl
com.woltlab.wcf/templates/email_sendNewPassword.tpl
wcfsetup/install/lang/de.xml
wcfsetup/install/lang/en.xml
wcfsetup/setup/db/install.sql

index 0c649ac7c8860f10c879becdd114317a32f5ea24..c49a2d371fa9e6204b0bc5146b140591398da3cf 100644 (file)
@@ -3,7 +3,7 @@
 {include file='email_plaintext'}
 {else}
        {capture assign='content'}
-       <h1>{lang}wcf.acp.user.activation.mail.html.headline{/lang}</h1>
+       <h2>{lang}wcf.acp.user.activation.mail.html.headline{/lang}</h2>
        {lang}wcf.acp.user.activation.mail.html.text{/lang}
        {/capture}
        
index 069f5c642ec2f4a473d4d50a64f5500e16bc04a8..8dd16dd1e6cf1b17f36e8ecde47f6cc513d04177 100644 (file)
@@ -3,7 +3,7 @@
 {include file='email_plaintext'}
 {else}
        {capture assign='content'}
-       <h1>{lang}wcf.user.changeEmail.needReactivation.mail.html.headline{/lang}</h1>
+       <h2>{lang}wcf.user.changeEmail.needReactivation.mail.html.headline{/lang}</h2>
        {lang}wcf.user.changeEmail.needReactivation.mail.html.intro{/lang}
 
        {capture assign=button}
index 4a4c871feef64a060e273273aeb96ef621284f6b..b41740a0f3eff57fa170459a72e3ca8d45adc324 100644 (file)
@@ -3,8 +3,9 @@
                <style type="text/css">
                * {
                        font-family: {@$style->getVariable('wcfFontFamilyFallback', true)};
+                       font-size: {$style->getVariable('wcfFontSizeDefault')};
                }
-               html {
+               html, h1, h2, h3 {
                        padding: 0;
                        margin: 0;
                }
                .content {
                        padding: 40px 40px 60px;
                }
+               .header, .footer {
+                       padding: 20px 40px;
+               }
                .header {
                        background-color: {$style->getVariable('wcfHeaderBackground', true)};
                        color: {$style->getVariable('wcfHeaderText', true)};
-                       padding: 20px 10px;
                }
                .footer {
                        background-color: {$style->getVariable('wcfFooterBackground', true)};
                        color: {$style->getVariable('wcfFooterText', true)};
-                       padding: 20px 10px;
+                       padding: 20px 40px;
                }
                h1 {
                        font-weight: 300;
                        line-height: 1.05;
                        font-size: {$style->getVariable('wcfFontSizeTitle')};
+               }
+               h2 {
+                       font-weight: 400;
+                       line-height: 1.28;
                        color: {$style->getVariable('wcfContentHeadlineText')};
+                       font-size: {$style->getVariable('wcfFontSizeSection')};
                }
                small {
                        font-size: {$style->getVariable('wcfFontSizeSmall')};
        </head>
        <body>
        {capture assign='header'}
+       <h1>{@PAGE_TITLE|language}</h1>
        {/capture}
        {include file='email_paddingHelper' block=true class='header' content=$header sandbox=true}
        
index 94b405ab2ac02b244a407e460a91cb6f066989cb..29aee6fcc81d505c477330b175a20a59adbafbb2 100644 (file)
@@ -3,7 +3,7 @@
 {include file='email_plaintext'}
 {else}
        {capture assign='content'}
-       <h1>{lang}wcf.user.lostPassword.mail.html.headline{/lang}</h1>
+       <h2>{lang}wcf.user.lostPassword.mail.html.headline{/lang}</h2>
        {lang}wcf.user.lostPassword.mail.html.intro{/lang}
 
        {capture assign=button}
index bec7cbcc201077f9221fa9a13d2a92b1dabbc1a8..d910a7fa0f422296a321a8e3c8216ed38da5afc1 100644 (file)
@@ -3,7 +3,7 @@
 {include file='email_plaintext'}
 {else}
        {capture assign='content'}
-       <h1>{lang}wcf.user.register.needActivation.mail.html.headline{/lang}</h1>
+       <h2>{lang}wcf.user.register.needActivation.mail.html.headline{/lang}</h2>
        {lang}wcf.user.register.needActivation.mail.html.intro{/lang}
 
        {capture assign=button}
index 5a3a139e569ab8f57f57fc71930c395d71ddd934..7316337b442f6863fe5372ebcda91d7b87da6997 100644 (file)
@@ -3,7 +3,7 @@
 {include file='email_plaintext'}
 {else}
        {capture assign='content'}
-       <h1>{lang}wcf.acp.user.sendNewPassword.mail.html.headline{/lang}</h1>
+       <h2>{lang}wcf.acp.user.sendNewPassword.mail.html.headline{/lang}</h2>
        {lang}wcf.acp.user.sendNewPassword.mail.html.intro{/lang}
 
        {capture assign=button}
index 72ab78f5b39618ce973b904030dc13911f9baa2d..c2f4fb42e5a917da8946fae3967a5469e0a6a8b6 100644 (file)
@@ -3275,7 +3275,7 @@ Die E-Mail-Adresse des neuen Benutzers lautet: {@$user->email}
 Benachrichtigungen auf {@PAGE_TITLE|language} [URL:{link isEmail=true}{/link}] nach {if LANGUAGE_USE_INFORMAL_VARIANT}deinen{else}Ihren{/if} Wünschen zu konfigurieren.
 
 Wenn {if LANGUAGE_USE_INFORMAL_VARIANT}du{else}Sie{/if} nur diese E-Mail-Benachrichtigung nicht mehr erhalten {if LANGUAGE_USE_INFORMAL_VARIANT}möchtest{else}möchten{/if}, dann {if LANGUAGE_USE_INFORMAL_VARIANT}kannst du{else}können Sie{/if} diese direkt abbestellen: {link controller='NotificationDisable' isEmail=true}eventID={@$event->eventID}&userID={@$mailbox->getUser()->userID}&token={@$mailbox->getUser()->notificationMailToken}{/link}.]]></item>
-               <item name="wcf.user.notification.mail.html.intro"><![CDATA[<h1>Hallo {$mailbox->getUser()->username},</h1>]]></item>
+               <item name="wcf.user.notification.mail.html.intro"><![CDATA[<h2>Hallo {$mailbox->getUser()->username},</h2>]]></item>
                <item name="wcf.user.notification.mail.html.outro"><![CDATA[<p>Diese E-Mail ist eine automatische Benachrichtigung. <b>Bitte antworten Sie nicht auf diese E-Mail</b>.</p>
 
 <p>{if LANGUAGE_USE_INFORMAL_VARIANT}Besuche deine{else}Besuchen Sie Ihre{/if} <a href="{link controller='NotificationSettings' isEmail=true}{/link}">Benachrichtigungseinstellungen</a>, um die
@@ -3294,7 +3294,7 @@ Benachrichtigungen auf <a href="{link isEmail=true}{/link}">{PAGE_TITLE|language
 Benachrichtigungen auf {@PAGE_TITLE|language} [URL:{link isEmail=true}{/link}] nach {if LANGUAGE_USE_INFORMAL_VARIANT}deinen{else}Ihren{/if} Wünschen zu konfigurieren.
 
 Wenn {if LANGUAGE_USE_INFORMAL_VARIANT}du{else}Sie{/if} keine E-Mail-Benachrichtigungen mehr erhalten {if LANGUAGE_USE_INFORMAL_VARIANT}möchtest{else}möchten{/if}, dann {if LANGUAGE_USE_INFORMAL_VARIANT}kannst du{else}können Sie{/if} diese direkt abbestellen: {link controller='NotificationDisable' isEmail=true}userID={@$mailbox->getUser()->userID}&token={@$mailbox->getUser()->notificationMailToken}{/link}.]]></item>
-               <item name="wcf.user.notification.mail.daily.html.intro"><![CDATA[<h1>Hallo {@$mailbox->getUser()->username},</h1>
+               <item name="wcf.user.notification.mail.daily.html.intro"><![CDATA[<h2>Hallo {@$mailbox->getUser()->username},</h2>
 
 <p>{if LANGUAGE_USE_INFORMAL_VARIANT}Du hast{else}Sie haben{/if} derzeit insgesamt {#$notifications|count} ungelesene Benachrichtigungen, die älter als 24 Stunden sind:</p>]]></item>
                <item name="wcf.user.notification.mail.daily.html.outro"><![CDATA[{if $notifications|count > $maximum}<p>{if LANGUAGE_USE_INFORMAL_VARIANT}Besuche{else}Besuchen Sie{/if} <a href="{link controller='NotificationList' isEmail=true}{/link}">{if LANGUAGE_USE_INFORMAL_VARIANT}deine{else}Ihre{/if} Benachrichtigungs-Übersicht</a>, um auch die restlichen {#$remaining} Benachrichtigungen einzusehen.</p>{/if}
@@ -3435,7 +3435,7 @@ Benachrichtigungen auf <a href="{link isEmail=true}{/link}">{PAGE_TITLE|language
 „{@$username}“ hat {if LANGUAGE_USE_INFORMAL_VARIANT}dir{else}Ihnen{/if} über die Website {@PAGE_TITLE|language} [URL:{link isEmail=true}{/link}] folgende Nachricht gesandt:
 
 {@$message}]]></item>
-               <item name="wcf.user.mail.mail.html"><![CDATA[<h1>Hallo {$mailbox->getUser()->username},</h1>
+               <item name="wcf.user.mail.mail.html"><![CDATA[<h2>Hallo {$mailbox->getUser()->username},</h2>
 
 <p>„{$username}“ hat {if LANGUAGE_USE_INFORMAL_VARIANT}dir{else}Ihnen{/if} über die Website <a href="{link isEmail=true}{/link}">{PAGE_TITLE|language}</a> folgende Nachricht gesandt:</p>
 
index c39963a9125b3a6c772bf48a68912dc909adde6c..92e39fec06113e95d96e3e300a66e226320c5b7b 100644 (file)
@@ -3302,7 +3302,7 @@ your notifications on {@PAGE_TITLE|language} [URL:{link isEmail=true}{/link}] as
 
 If you only wish to disable this type of notification you can do so by visiting:
 {link controller='NotificationDisable' isEmail=true}eventID={@$event->eventID}&userID={@$mailbox->getUser()->userID}&token={@$mailbox->getUser()->notificationMailToken}{/link}]]></item>
-               <item name="wcf.user.notification.mail.html.intro"><![CDATA[<h1>Dear {$mailbox->getUser()->username},</h1>]]></item>
+               <item name="wcf.user.notification.mail.html.intro"><![CDATA[<h2>Dear {$mailbox->getUser()->username},</h2>]]></item>
                <item name="wcf.user.notification.mail.html.outro"><![CDATA[<p>This is an automatic notification, <b>please do not reply to this email</b>!</p>
 
 <p>Visit your <a href="{link controller='NotificationSettings' isEmail=true}{/link}">notification settings</a> to configure
@@ -3322,7 +3322,7 @@ your notifications on {@PAGE_TITLE|language} [URL:{link isEmail=true}{/link}] as
 
 If you wish to disable all email notifications you can do so by visiting:
 {link controller='NotificationDisable' isEmail=true}userID={@$mailbox->getUser()->userID}&token={@$mailbox->getUser()->notificationMailToken}{/link}]]></item>
-               <item name="wcf.user.notification.mail.daily.html.intro"><![CDATA[<h1>Dear {@$mailbox->getUser()->username},</h1>
+               <item name="wcf.user.notification.mail.daily.html.intro"><![CDATA[<h2>Dear {@$mailbox->getUser()->username},</h2>
 
 <p>you currently have got {#$notifications|count} unread notifications that are older than 24 hours:</p>]]></item>
                <item name="wcf.user.notification.mail.daily.html.outro"><![CDATA[<p>{if $notifications|count > $maximum}Visit your <a href="{link controller='NotificationList' isEmail=true}{/link}">notification list</a> to view the remaining {#$remaining} notifications.</p>{/if}
@@ -3463,7 +3463,7 @@ your notifications on <a href="{link isEmail=true}{/link}">{PAGE_TITLE|language}
 “{@$username}” sent you a message on {@PAGE_TITLE|language} [URL:{link isEmail=true}{/link}]:
 
 {@$message}]]></item>
-<item name="wcf.user.mail.mail.html"><![CDATA[<h1>Dear {$mailbox->getUser()->username},</h1>
+<item name="wcf.user.mail.mail.html"><![CDATA[<h2>Dear {$mailbox->getUser()->username},</h2>
 
 <p>„{$username}“ sent you a message on <a href="{link isEmail=true}{/link}">{PAGE_TITLE|language}</a>:</p>
 
index 878a027fe4995f322631a64e1f2a178109ff7b2f..a2334a85625616f53a6509273c833eb6ad980dbc 100644 (file)
@@ -2039,7 +2039,7 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdow
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownLink', 'rgba(33, 33, 33, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownLinkActive', 'rgba(33, 33, 33, 1)');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfDropdownText', 'rgba(33, 33, 33, 1)');
-INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontFamilyFallback', '"Segoe UI", "Lucida Grande", "Helvetica", sans-serif');
+INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontFamilyFallback', '"Segoe UI", "DejaVu Sans", "Lucida Grande", "Helvetica", sans-serif');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontFamilyGoogle', 'Open Sans');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontLineHeight', '1.48');
 INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfFontSizeDefault', '14px');