Создайте HTML-шаблон для электронной почты из Scratch

Лучший способ понять любой процесс состоит в том, чтобы выполнять это самостоятельно, с нуля.

Примечание редактора: это учебное пособие было первоначально написано Николь в июне 2013 года. С тех пор, как то он стал ориентиром для лидеров отрасли во всем мире и использовался миллионами новичков в качестве отправной точки для их приключений в электронной почте. Это актуально и сегодня, когда оно было впервые опубликовано.

Популярные шаблоны электронной почты на элементах Envato

Если вы ищете готовое профессиональное решение, возьмите один из наших лучших шаблонов электронной почты. У нас есть сотни откликов на Envato Elements, с легкостью настроить функции, чтобы вы начали.

Не то, что вы ищете? Нет проблем, этот учебник научит вас, как создавать свои собственные.

Kick Things Off

Начнем с того, что стоит упомянуть, откуда я взял некоторые ресурсы.

Теперь, как мы обсуждали в предыдущем учебном пособии, вам нужно будет начать свой документ электронной почты HTML с помощью документа XHTML:

С этим отсортированным мы можем начать строить остальную часть структуры.

Создание тела и основного стола

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

Мы также добавим таблицу шириной 100%. Это действует как истинный тег тела для нашей электронной почты, потому что стиль тега тела не поддерживается полностью. Если вы хотите добавить цвет фона в «тело» вашего письма, вам нужно будет применить его к этой большой таблице.

Установите для вашего cellpadding и cellspacing значение «0», чтобы избежать непредвиденного места в таблице.

Примечание: Мы собираемся оставить border = "1" на всех наших таблицах, чтобы мы могли видеть скелет нашего макета, когда мы идем. Мы удалим их в конце с помощью простого Find & Replace.

 
 
  
   
  
 

    Здравствуйте!
   
 

" Если атрибут существует в HTML, используйте его вместо CSS "

Теперь разместите в таблице контейнера центрированный стол шириной 600 пикселей . 600 пикселей — это максимальная максимальная ширина для ваших электронных сообщений, которые удобно отображают на большинстве настольных и веб-клиентов на большинстве разрешений экрана.

Установите эту ширину, используя HTML вместо CSS, используя атрибут width. Золотое правило в разработке электронной почты HTML: если атрибут существует в HTML, используйте это вместо CSS.

Мы заменим наше приветствие «Привет!» Этой таблицей:

 
 
  
 

   Здравствуйте!
  
 

Мы также добавили свойство встроенного стиля, которое устанавливает свойство border-collapse в свернуть . Если мы этого не сделаем, более новые версии Outlook добавят небольшое пространство между нашей таблицей и нашей границей.

Создание Структура и заголовок

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

Давайте дублируем одну строку, которую мы уже сделали, чтобы у нас было всего три. Я изменил текст внутри них, чтобы мы могли легко идентифицировать каждую строку.

 
 
  
 
 
  
 
 
  
 

   Строка 1
  

   Строка 2
  

   Строка 3
  
 

Now we ' цвет их в соответствии с дизайном. Поскольку bgcolor является допустимым атрибутом HTML, мы будем использовать это, чтобы установить цвет фона вместо CSS. Не забывайте использовать полные шесть символов шестнадцатеричного кода, поскольку три символа сокращений не всегда будут работать.

 
 
  
 
 
  
 
 
  
 

   Строка 1
  

   Строка 2
  

   Строка 3
  
 

Ok, далее мы собираемся сосредоточьтесь на строке 1. Мы хотим настроить прописку на ячейке, а затем вставить изображение.

Использование Padding

При использовании прокладки в электронной почте вы всегда должны указывать каждое значение (сверху, справа, внизу и влево), иначе вы можете получить непредсказуемые результаты. Я нахожу, что вы все еще можете использовать стенографию, т. Е. padding: 10px 10px 8px 5px; но если у вас возникнут проблемы, вы можете записать ее длинную форму, то есть padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px; .

Если у вас еще большие проблемы с заполнением (например, если ваша платформа отправки удаляет ваш CSS), не используйте ее вообще. Просто используйте пустые ячейки для создания пространства. Нет необходимости использовать разделительные GIF-файлы, просто убедитесь, что вы добавили style = "line-height: 0; font-size: 0;" в ячейку, поместите & nbsp; внутри и дать ему явную высоту или ширину. Вот пример:

   & NBSP;   

Также обратите внимание, что безопасно использовать прописку на тегах TD, но не на P-тегах или DIV. Они ведут себя гораздо более непредсказуемо.

Итак, мы будем использовать встроенный CSS, чтобы добавить дополнение к ячейке. Затем мы добавим наш образ, добавив текст alt и добавив style = "display: block;" который является общим исправлением, которое останавливает некоторые почтовые клиенты, добавляя пробелы под вашими изображениями. Мы сосредоточим изображение, добавив align = "center" к нашему тегу td. Мы также добавим тег alt, который важен для того, когда первоначально загружается наша электронная почта, которая в большинстве случаев будет отключена.

Примечание: Если содержимое вашего заголовка действительно важно для вашего сообщения, не используйте заголовок только для изображения. Помните, что изображения блокируются по умолчанию для большинства клиентов, поэтому, если есть важный аспект вашей электронной почты, никогда не включайте его в качестве изображения. В этом примере, однако, мой заголовок довольно лишний.

 
  
Создание области содержимого 
 Прежде всего, мы добавим некоторую прокладку в среднюю ячейку, чтобы внутри стола было какое-то пространство вокруг нее, согласно нашему дизайну. 
 
Now we'll добавьте таблицу с тремя строками для нашего основного содержимого — одно для заголовка, одно для вводного текста и одно для строки с двумя столбцами. Мы установим ширину этой таблицы на 100% вместо того, чтобы использовать значение пикселя, потому что это поможет нам продвинуться дальше по треку, если мы хотим, чтобы наша электронная почта реагировала. Если у вас всегда есть ширина пикселей во всем, вы можете получить множество значений для переопределения с помощью медиа-запросов. Если ваши вложенные ширины таблицы основаны на процентах, то при настройке ширины родительского элемента все будет соответствующим образом адаптировано. 
 
 
  
   
  
  
   
  
  
   
  
 

    Строка 1
   

    Строка 2
   

    Строка 3
   
 
 
Now we ' добавьте в наш контент и добавьте некоторые дополнения в среднюю ячейку. 
 

 
  
 
 
  
 
 
  
 

   Lorem ipsum dolor сидеть amet!
  

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. В tempus adipiscing felis сидеть amet blandit ipsum volutpat sed. Морти-портторитор, eget accumsan dictum, nisi libero ultricies ipsum, в posuere mauris neque at erat.
  

   Строка 3
  
 
 Теперь мы собираемся добавить наши два столбца контента в строку 3. Поскольку мы хотим «маржировать» между этими двумя ячейками, но маржа не поддерживается, мы создадим таблицу из трех столбцов с пустой ячейки между двумя внешними колонками. 
 Насколько мне нравится придерживаться процентов, когда у вас есть контент определенного размера, может быть сложно преобразовать его в процент (в этом примере столбцы будут 48,1%, что может запутать). По этой причине, поскольку наши два изображения имеют ширину 260 пикселей, мы создадим столбцы с шириной 260 пикселей, а также среднюю ячейку поля 20 пикселей. (Это будет 540px, что составляет 600px ширину нашего стола за вычетом 30px с обеих сторон.) Убедитесь, что нулевой размер шрифта и высота линии и добавьте неразрывный пробел  & nbsp;  в ячейке поля. 
 Мы также установим  valign  на  верх  для обеих ячеек, чтобы они по вертикали выровнялись в верхней части, даже если один столбец имеет больше текста, чем другой. По умолчанию вертикальное выравнивание  среднее . 
 
 
  
  
  
 

   Столбец 1
  

   & NBSP;
  

   Столбец 2
  
 
 
Now давайте добавим нашу изображений и содержимого для этих столбцов. Поскольку нам нужно несколько строк, мы найдем еще одну таблицу, потому что мы не сможем использовать теги  colspan  или  rowspan . Мы также добавим промежуток между изображением и копией в каждом столбце. 
 
 
  
  
  
 

   
    
     
    
    
     
    
   

      
     

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. В tempus adipiscing felis сидеть amet blandit ipsum volutpat sed. Морти-портторитор, eget accumsan dictum, nisi libero ultricies ipsum, в posuere mauris neque at erat.
     
  

   & NBSP;
  

   
    
     
    
    
     
    
   

      
     

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. В tempus adipiscing felis сидеть amet blandit ipsum volutpat sed. Морти-портторитор, eget accumsan dictum, nisi libero ultricies ipsum, в posuere mauris neque at erat.
     
  
 
 Здесь мы установили ширину изображений, используя HTML, на 100% ширины столбца. Это опять же так, что если мы будем реагировать на это электронное письмо, нам нужно будет использовать медиа-запросы, чтобы изменить ширину родительского элемента. Нам придется переопределить высоту в пикселях, потому что использование  style = "height: auto"  теперь не будет работать во всем  (кашель, Outlook) . Поэтому мы будем устанавливать его с помощью пикселей. Это означает, что мы должны установить высоту : auto! Important  на этих изображениях, используя медиа-запросы, чтобы переопределить значение пикселя, но мы могли бы сделать это с помощью одного класса. Когда мы задаем ширину в процентах, нам не нужно будет переопределять это значение. Чем меньше вещей переопределить, тем лучше. 
 
Назад [Footer
 Теперь мы добавим наше дополнение к нижнему колонтитулу. 
 
 Строка 3
 
 
 Внутри этой ячейки мы 'll гнездят другую таблицу для того чтобы получить наши 2 колонки. 
 
 
  
  
 

   Столбец 1
  

   Столбец 2
  
 
 
We создадим еще один маленький стол для наших значков социальных сетей. Мы установим родительскую ячейку в  align = "right" . Убедитесь, что вы установили  border = "0"  на эти ссылки изображений (чтобы избежать синей границы линии) и не забудьте : block . 
 
 
  
   
   
 И у нас это есть! Наш макет завершен. 
 Проверка 
 Давайте запустим это через валидатор W3C, чтобы убедиться, что ничего плохого или не сломано. Если вы следовали точно, он скажет, что он прошел. 
 
Следующий мы собираемся запустить тест через Litmus, чтобы убедиться, что структура нашего письма работает отлично. Вот резюме моего теста: 
 ] 
 Стиль нашего текста 
 Наш первый ряд — это заголовок. Мы будем использовать тег   чтобы создать полужирный текст, потому что, как мы уже знаем, если он существует в HTML, мы используем это вместо CSS. 
 
 Мы также добавим этот встроенный стиль ко всем другим ячейкам текста: 
 style = "color: # 153643; font-family: Arial, sans-serif; font-size: 16px; line-height: 20px;" 
 Затем нам нужно будет подстроить текст нижнего колонтитула, и мы также уберем нашу ссылку на отмену подписки. Мы создадим текстовую ссылку для отмены подписки, используя как CSS, так и тег HTML   . Это удвоение — это лучший способ гарантировать, что ваши ссылки никогда не появятся в синем по умолчанию. 
 
 
And there it have it! Все в порядке. Время, чтобы отключить границы и увидеть, как он выглядит красивым. Пройдите и замените каждое происхождение  border = "1"  с  border = "0" . 
 
В этом случае он выглядит немного грустный, плавающий в белом пространстве, поэтому давайте подходим к нашему первому столе шириной 600 пикселей и добавляем: 
 style = "border: 1px solid #cccccc;" 
 Теперь это не похоже, что он больше плавает. Как последний штрих, я собираюсь добавить 30px отступов к нижней части самой первой ячейки, чтобы наша электронная почта не прерывалась внезапно внизу у некоторых клиентов электронной почты (например, Apple Mail) и 10px отступов вверху , так что наш синий заголовок имеет немного передышку. 
 

    
      & NBSP; 

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

 & Рег; Кто-то, где-то 2013 

 Отказаться от подписки на этот бюллетень мгновенно
 









  Lorem ipsum dolor sit amet! 
 




 & Рег; Кто-то, где-то 2013 

   Отказаться от подписки   в этот информационный бюллетень мгновенно
 






 
 
И вот и все! Вы готовы к окончательному испытанию. 
 
 Это обложка! 
 Прежде чем мы назовем это днем, если вы использовали какие-либо комментарии, избавитесь от них. Некоторые почтовые клиенты могут захлебываться от комментариев, поэтому мудрее не иметь никакого лишнего кода в ваших файлах. 
 Сейчас самое подходящее время для окончательного теста, а затем ваше письмо в формате HTML готово отправить! 
 Скачать шаблоны для электронной почты 
 Если вам нужно больше вариантов, тогда один из наших отзывчивые шаблоны писем могут быть именно тем, что вам нужно. Подпишитесь на Envato Elements, и вам будет предоставлен неограниченный доступ к сотням настраиваемых шаблонов электронной почты, а также сток-фотография, значки, графика и многие другие творческие ресурсы для ваших проектов.  
 Подробнее HTML Email 
 Чтобы взять то, что вы узнали на следующем уровне! Ознакомьтесь с нашим учебным пособием по Mastering HTML Email для получения дополнительных руководств по шаблонам электронной почты в формате HTML, дизайну электронной почты, электронному адресу электронной почты, доступности, маркетингу, транзакционной электронной почте, поставщикам услуг электронной почты (ESP), советам по разработке рабочего процесса и т. Д. 


Category: Статьи по дизайну01.10.2018
Теги: HTMLшаблонScratchдляизпочтыСоздайтеэлектронной

Пожалуйста, поставьте рейтинг статье:
 (Пока оценок нет)

             Загрузка...
Поделиться этой записью
Share with FacebookShare with TwitterShare with Google+Share with PinterestShare with LinkedInShare with WhatsApp
Связанные записи
Винтажная мебель и световое окно в интерьере квартиры светского обозревателя — проект Ольги Суворовой и Екатерины Фадиной
30.10.2025
Как копирайтеру подружиться с нейросетями?
29.10.2025
Color-blocking и игра геометрических фигур в ярком интерьере — проект Михаила Курносова
28.10.2025
Color-blocking и игра геометрических фигур в ярком интерьере — проект Михаила Курносова
28.10.2025
«Какой ты персонаж русской литературы… в мире фриланса?» / Жизнь / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY
27.10.2025
На Design Miami.Paris показали масштабную версию сиденья La Déclive Пьера Полена
27.10.2025

			
			
		

		
				

		

	


			
		
	

	
	
	



	Go to Top


	            
	             	

	

		

	    	

	      		

	      			

					
	        		

	          		 	      					

	      						
		
		
			

	        	

	            	
Поделитесь статьей!
	           	
	          
				

						
 
Facebook 
Google 
Twitter