Блог

Главная - Вопросы по программированию - шаблон электронной почты?? Является ли отзывчивым способом? Не верьте, что мой шаблон является адаптивным, а в Gmail изображения занимают весь экран

шаблон электронной почты?? Является ли отзывчивым способом? Не верьте, что мой шаблон является адаптивным, а в Gmail изображения занимают весь экран

#html #css

#HTML #css

Вопрос:

Я думаю, что у меня есть 2 вопроса. Первый вопрос: я скопировал этот код с веб-сайта, думая, что он отзывчивый, но я не уверен, так ли это.

2nd. вопрос: Я просмотрел это в gmail, изображения огромные, размером с мой экран шириной 2 фута. Я понимаю, что логотип id имеет безумную ширину: 600 пикселей. Поэтому я не понимаю, почему gmail не соблюдает никаких границ.

Любые мнения о том, нужно ли мне полностью отказаться от этого кода или его можно использовать с одним или двумя исправлениями?

Спасибо за любую помощь. Это электронное письмо, которое я хочу отправить в ближайшие несколько дней, ограничено по времени.

   <!doctype html>

<html lang="en">
<head>
<style type"text/css">
    @import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');
  * { margin:0;
  border:0;
  padding:0; }
  body {background-color: #F1F4F4;
        font-family:'Quicksand', sans-serif;
        font-size: 16px;
        max-width: 650px;
        margin: 0 auto;
        /*padding: 1%;*/
        color: #565859;}
        
 #wrapper {  margin-right: auto;
           /* tried this which was no different than   margin-left:  auto;
            max-width: 700px; */
         background: #FFF;
        }


 h2 {/*letter-spacing: 1%;*/
        font-weight: 600;
        padding-left: 2%;
        }
 p {padding-left: 2%;
       /* left-align: justify;*/}
        
 img { max-width: 100%}
 
.line {
            clear: both;
            margin: 4% auto;
            width: 90%;
            height: 2px;
            background-color: #E3E9E9;
        }
header { width: 100%;}

#logo { float: left;
             margin: 2% 0 0 3%;
             max-width: 600px;
        }
#callout {    /*float: right; */
    margin: 3% 3% 2% 0;
    height: auto;
    overflow: hidden;}
    
.social li {display: inline;}

.social {
    float: right;
    list-style-type: none;
    margin-top: 4%;
    padding: 0; }
    
.banner { margin-left: 3%;}
    
.btn {float: right; border-radius:8px;
    color: #FFF; font-size: 17px;
    background: #18A0D3; padding: 8px; text-decoration: none;}
    
.button-holder {float: right; margin: 0 2% 4% 0;}

.btn:hover {background: #4EC0EB;}
    
.contact {text-align: center; margin-bottom: 4%;}
</style>
<title><!-- Insert your title here --></title>
</head>
<body>
<div id="wrapper"  >
    <header>
  <div id="logo"><img src="https://ggeddes.com/_media/BannerHomeIs.jpg"></div>                        
    </header>
  <h2>Perks of being with CIR Realty: </h2>

<p>Every month they offer a short getaway contest for Clients of CIR Realtors.  Every month is a 
different destination in Alberta.
I didn't know where Azuridge Estate Hotel was so I looked it up. It looks really nice and is in 
Priddis so just a short hop from the City.
Wish we could enter  <span>amp;#9786;</span>. </p>
<p style= "padding-left: 2%; padding-top: 2%;"> Before you click, I would suggest that you Copy  - 
Grant Geddes  - so that you can Paste it in the Realtor's® Name field. 
   </p>
<p style= "padding-left: 2%; padding-top: 2%;"> This is important to Grant and I as the CIR Form does 
not automatically put Grant's name in. (You can just type it in directly also)
   </p>
<h3 style= "padding-left: 2%; padding-top: 2%;">The link to this contest is: <a 
href="http://cirrealty.ca/contest">cirrealty.ca/contest</a></h3>

<p style="margin: 10px"> Or Click on the Image.</p>
      <div class="banner">
        <a href="http://cirrealty.ca/contest"><img style ="max-width: 60%" 
src="https://ggeddes.com/_media/October Instagram _ Facebook Posts.jpg"></a>
</div> <p style= "padding-left: 2%; padding-top: 2%;"> We wish you all luck. It would be nice if one 
of our clients wins.  Carol and Grant
   </p>  
    

<div class="line"></div>
<p class= "contact" style = "font-size: 10px;">Information herein deemed reliable but not guaranteed. 
</p> 
<p class="contact">Geddes Group Calgary / CIR Realty<br>
Grant Geddes REALTOR® 403-540-8584<br>
Email: <a href="mailto: geddesgroupcalgary@gmail.com">geddesgroupcalgary@gmail.com</a></p>
<div id="callout">
            <ul class = "social">
                <li><a href="https://www.facebook.com/pages/The-Geddes-Group-Real-Estate- 
Calgary/792213167479235"
                       target = "_blank">
<img src="https://www.ixactcontact.com/iXactAccountContent/CnttzVNt/Images/facebook.png" width="17"
                     height="17" /></a></li>
            
<li><a href="https://twitter.com/TheGeddesGroup" target = "_blank"><img 
src="https://www.ixactcontact.com/iXactAccountContent/CnttzVNt/Images/twitter.png" width="17"
                     height="17" /></a></li>
                           
            <li> <a href="http://ca.linkedin.com/in/grantgeddes/" target = "_blank">
 <img src="https://www.ixactcontact.com/iXactAccountContent/CnttzVNt/Images/linkedin.png" width="17"
                     height="17" /></a></li> 
                </ul>
          <div id="logo"><img src="https://ggeddes.com/_media/BottomBannerCIRGeddesGroup.jpg"></div>  
        </div>
</div>
<!-- Insert your content here -->
</body>
</html>

Комментарии:

1. HTML-письма должны быть построены с <table> помощью s, а ячейки таблицы могут использовать значения процентного размера, чтобы вы могли сделать таблицы более отзывчивыми, но почтовые клиенты HTML все разные и в основном довольно отсталые в своем подходе к HTML, поэтому постарайтесь упростить его, чтобы сделать его работоспособным для как можно большего числа клиентов

2. Не используйте <style> тег, вместо этого вам нужно встроить стили в каждый элемент, например <p style='padding-left: 2%;'>

3. @MaxiGui Я бы сказал, что <style> теги в HTML-письме <head> принимаются некоторыми почтовыми клиентами, но они абсолютно не универсальны, и правила CSS, разрешенные в теге стиля, крайне ограничены.

4. Вот пример style из электронной почты, которую я использую. codepen.io/Maxigui/pen/ExyPBPe это очень сложно, но я думаю, что оно охватывает множество правил css. Очевидно, что их html сложный table table . Но вы можете установить множество правил css уже в этих тегах. Но, очевидно, если вы хотите более конкретно, он должен быть встроенным

5. @Martin, о, вау, я прочитаю это. Спасибо