Как сделать так, чтобы подпись в Outlook для мобильных устройств была отзывчивой или просто отзывчивой - PullRequest
Новая
       36

Как сделать так, чтобы подпись в Outlook для мобильных устройств была отзывчивой или просто отзывчивой

0 голосов
/ 08 января 2019

У меня проблема с моей подписью электронной почты. Я разработал его в Dreamweaver, и когда я добавляю его в Outlook, он меняет макет, растягивает мое изображение и не реагирует на мобильные устройства.

Я не являюсь подписью электронной почты pro, любая помощь будет оценена. Вот мой код.

Вот изображение, которое показывает, что он делает в outlook: Подпись электронной почты Изображение

HTML 

 <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
 <html>
 <head>
    <title>Email Signature</title>
    <meta content="text/html; charset=utf-8"http-equiv="Content-Type">
</head>

<body>
<table width="593" cellpadding="0" cellspacing="0" style="width: 600px; 
font-size:9pt; font-family: 'Calibri Light', sans-serif;">
<tbody>
    <tr>    
        <td valign="top"  style="width:253px; vertical-align:top;">
            <a  href="https://www.tashascafe.com/media/1436/galaxy-bar- 
logo.png link URL"target="_blank"><img border="0"alt="Logo"     
width="250"style="width:250px; 
border:0;"src="https://www.tashascafe.com/media/1436/galaxy-bar- 
logo.png"></a>   
        </td>
            <td valign="top" style="width:338px; vertical-align:top;">
                <table width="340" cellpadding="0" cellspacing="0" 
                  style="border-collapse: collapse;">
 <tbody>
        <tr>
            <td style="width: 338px; font-size:12pt; font-family:'Calibri 
             Light', sans-serif; font-weight:600; color:#85754e; padding- 
             bottom:5px; line-height:16px;">RESERVATIONS AT GALAXY 
             BAR</td>
        </tr>
            <tr>
                <td style="font-size:10pt; font-family:'Calibri Light', 
             sans-serif; color:#000000; padding-bottom:1px; line- 
              height:14px; font-weight: 400;">
                    <span style="font-weight:600;">t: </span>+971 58 513 
                      0694
                </td>
            </tr>   
        <tr>
            <td style="font-size:10pt; font-family:'Calibri Light', sans- 
             serif; color:000000; padding-bottom:1px; line-height:14px; 
             font-weight: 400;">
                    <span style="font-weight:600;">e: 
</span>reservations@galaxy-bar.com
            </td>
        </tr>           

        <tr>
            <td style="font-size:10pt; font-family:'Calibri Light', sans- 
serif; color:#000000; padding-bottom:1px; line-height:14px; font-weight: 
400;"><span style="font-weight:600;">w: </span>www.galaxy-bar.com<a 
href="http://www.galaxy-bar.com"target="_blank"style="color:#000000"></a>
            </td>
        </tr>
        <tr>
            <td style="font-size:10pt; font-family:'Calibri Light', sans- 
 serif; color:#000000; padding-bottom:1px; line-height:14px; font-weight: 
 400;">
                <span style="font-weight:600;">a: </span>Unit C-01, DIFC, 
 Dubai, United Arab Emirates, 506609
            </td>
        </tr>                   

        <tr>
            <td style="padding-top:10px; vertical-align: bottom;"><span 
            style="display:inline-block; height:22px;"><span><a href=" 
            {facebookURL}"target="_blank"><img alt="Facebook 
             icon"border="0"width="20"height="20"style="border:0; 
              height:20px; 


  width:20px"src="https://www.tashascafe.com/media/1435/facebook-icon.png"> 
</a>&nbsp;</span><span><a href="{twitterURL}"target="_blank"><img 
alt="Twitter icon"border="0"width="20"height="20"style="border:0; 
height:20px; 
width:20px"src="https://www.tashascafe.com/media/1438/twitter-icon.png"> 
</a>&nbsp;</span><span><a href="{instagramURL}"target="_blank"><img 
alt="Instagram icon"border="0"width="20"height="20"style="border:0; 
height:20px; 
width:20px"src="https://www.tashascafe.com/media/1437/instagram- 
icon.png"></a></span></span>
        </td>

    </tr>
</tbody>
</table>
</td>
</tr>   
</tbody>
 </table>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 19 марта 2019

Вы должны понимать, что Outlook не является браузером и фактически использует движок MS Word для рендеринга HTML. Таким образом, почти невозможно, чтобы ваш код Dreamweaver (который, к сожалению, очень плохой) работал в нем.

Вы можете прочитать эту статью, чтобы получить несколько советов: https://www.emailonacid.com/resource/outlook-coding-guide/

Но имейте в виду, что написание HTML на электронную почту - это совершенно другой зверь, чем написание для современных браузеров.

0 голосов
/ 06 марта 2019

Я не знаю, сделает ли это мобильность отзывчивой или нет, но я могу рассказать вам, как предотвратить искажение. Войдите в свои подписи (Самый быстрый способ для меня - создать новое электронное письмо, нажмите на вкладку подписи, затем выберите подписи) Здесь вы захотите создать свою подпись, если только это не изображение, тогда я все равно создаю его и добавляю вам изображение. Как только вы это сделаете, дважды щелкните по изображению в подписи (иногда вам может потребоваться дважды щелкнуть мышью в другом месте). Появится диалоговое окно, щелкните вкладку размера, затем щелкните абсолютное значение под высотой и шириной. Под масштабом убедитесь, что выбрано соотношение сторон относительно исходного размера изображения.

Надеюсь, это поможет!

...