Создание рамок для электронного письма

Создание рамок для электронного письма

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

Создание рамки для писем

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

Шаг 1: Создание шаблона

Наиболее сложным процессом является создание шаблона для письма с использованием рамок, стилей оформления и правильной разметки. Код необходимо создавать полностью адаптивным, чтобы содержимое правильно отображалось на всех устройствах. В качестве основного инструмента на данном этапе можно использовать и стандартный Блокнот.

Также код следует создавать цельным, чтобы его содержимое начиналось с «!DOCTYPE» и заканчивалось «HTML». Любые стили (CSS) необходимо добавлять внутрь тега «Style» на той же странице без создания дополнительных ссылок и документов.

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

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

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

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

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

Шаг 2: Преобразование HTML-кода

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

Щелкните по представленной выше ссылке и в поле «EMAIL» введите адрес почты, с которой в будущем вы хотите сделать пересылку. Также необходимо нажать расположенную рядом кнопку «Добавить», чтобы указанный адрес появился ниже.

В следующее поле вставьте заранее подготовленный HTML-код письма с рамкой.

Для получения готового сообщения нажмите кнопку «Отправить».

При успешной пересылке вы получите соответствующее уведомления на странице данного онлайн-сервиса.

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

Шаг 3: Отправка письма с рамкой

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

Откройте письмо, полученное на почту после второго шага, и нажмите кнопку «Переслать».

Укажите получателей, измените прочие аспекты содержания и по возможности отредактируйте текст письма. После этого воспользуйтесь кнопкой «Отправить».

В результате каждый получатель увидит у себя содержимое HTML-письма, включая рамку.

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

Заключение

Как было сказано в начале, именно объединенные средства HTML и CSS позволяют создать в письме рамку того или иного вида. И хотя мы не акцентировали внимание на создании, при должном подходе она будет выглядеть именно так, как нужно вам. На этом мы завершаем статью и желаем удачи в процессе работы с разметкой сообщений.

Отблагодарите автора, поделитесь статьей в социальных сетях.

Создайте стильный дизайн email в конструкторе писем Canva

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

Произведите незабываемое впечатление с помощью дизайна рассылки

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

Красивое оформление письма менее чем за 5 минут:

1. Откройте Canva и выберите тип дизайна «Заголовок электронного письма».
2. Выберите понравившийся шаблон из обширной библиотеки.
3. Загрузите свои фотографии или тематические картинки из вкладки «Элементы».
4. Адаптируйте графику, примените уникальные фильтры и отформатируйте текст.
5. Скачайте файл в формате «PDF для печати», готовом для отправки в типографию.

Оформите email так, чтобы привлечь внимание

1. Добавляйте изображения. К вашим услугам – более миллиона клипартов и фото «С днем рождения».
2. Подберите шрифты. Оформите текст в одном из сотен шрифтов для русского языка.
3. Замените фон. Найдите в каталоге картинки-фон для объявления, которые будут лучше всего сочетаться с общей композицией.
4. Задайте цвета текста. Подходящие оттенки надписей внесут завершающий штрих в работу.

С оригинальным баннером ваше письмо не останется незамеченным

Вы мастер слова, но не художник? Легко можете сочинить слоган или текст маркетингового предложения, но все шрифты для вас на одно лицо? Не беда! Canva предлагает онлайн-конструктор рассылок с массой встроенных стильных, смелых и современных шаблонов для шапок электронного письма, чтобы вы могли полностью сосредоточиться на тексте.

Выберите образец и добавьте в него собственные фотографии, чтобы ваш макет для продающей рассылки нельзя было ни с чем спутать. Если в вашей коллекции не нашлось той самой подходящего снимка, на сайте Canva вы можете выбрать идеальный вариант среди более 1 млн готовых изображений и фотографий для личного и коммерческого использования. С массой бесплатных изображений на любой вкус и премиум-изображениями всего за 1 $ все возможности сделать свои письма особенными теперь у вас в руках.

С Canva создание новостных рассылок упрощается в разы

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

Canva хранит все ваши дизайнерские проекты в облаке, чтобы вы могли открывать, редактировать и публиковать их везде, где есть интернет-соединение. С помощью бесплатного приложения Canva для устройств iOS и Android вы можете обновлять фирменные бланки даже в пути или из хоум-офиса.

Больше, чем редактор email-рассылок

Зачем ограничивать себя только почтой? Поделитесь своим дизайном в социальных сетях, чтобы все могли оценить ваше предложение или обновление. Чтобы опубликовать дизайн в Facebook или Twitter, просто нажмите кнопку «Поделиться». Кстати, для ускорения работы, дизайны Canva можно отправлять в виде вложения к электронному письму прямо из редактора.

Как сделать письмо для E-mail рассылки на онлайн-конструкторе Wilda

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

1. Создав html версию письма
2. Отправив цельное изображение в теле письма.

Остановимся на каждом варианте подробнее чуть ниже, а пока давайте разберемся, что такое Html письмо, и в чем особенности его оформления.

Что такое Html письмо?

Html письмо – это письмо, созданное на языке Html (также, как и сайты в интернете). Если у вас нет достаточных навыков, то самостоятельно создать такое письмо у вас не получится. Для этого вам потребуется помощь профессионального верстальщика, который создаст такое письмо с помощью материалов, предоставленных ему вами: тексты, изображения, структура письма. После создания html письма вам понадобится специальное программное обеспечение для рассылки его адресатам.

Существует достаточно много сервисов, позволяющих самостоятельно создать электронное письмо с помощью готовых шаблонов или используя конструкторы Html писем, а затем отправить его. Минусом этого подхода может стать некорректное отображение вашего письма у некоторых получателей, так как при создании письма может генериться лишний код, либо шаблоны недостаточно хорошо адаптированы под различные почтовые клиенты – программы, собирающие и отправляющие почту, такие как Mail, Yandex, Gmail, Rambler, Outlook,Thunderbird или The Bat.

Та же самая проблема существует и с отображением Html писем на мобильных устройствах. Ведь, по сути, рассылка и есть почти полноценная страница сайта, которая должна быть адаптирована под различные устройства.

Помимо этого, при создании рассылки требуется учитывать ограничения по использованию номенклатуры шрифтов, так как если на компьютере вашего получателя не установлен шрифт, выбранный вами для оформления письма, то он заменится на один из общеупотребительных шрифтов, например, Arial, и ваша дизайнерская задумка может не состояться!

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

Чем Wilda может вам помочь?

На конструкторе Wilda вы можете:

Создать рассылку в виде изображения и вставить в тело письма

Для этого при создании нового документа выберите тип «E-mail рассылка» или воспользуйтесь подходящим шаблоном. Ширина документа будет 700 px – рекомендуемое значение для успешного отображения письма на мобильных устройствах, а высоту вы можете регулировать в зависимости от контента. После окончания редактирования просто сохраните ваше письмо в виде Jpeg файла.

Изображение, созданное на онлайн-конструкторе Wilda.

Такой способ создания писем будет удобен, если:

• вам необходимо отправлять небольшие информационные письма высотой в один экран: открытки и поздравления, информацию о смене адреса, офиса, баннер о старте продаж продукта или услуги и т.д.
• у вас одна ссылка в письме. В любом почтовом клиенте можно прикрепить одну ссылку к вашему изображению. Однако, в случае необходимости вы всегда сможете добавить к изображению любой текст, в котором также могут быть ссылки!
• у вас небольшое количество адресатов. Например, у Вас база из 100 клиентов, и вы хотите красиво поздравить их с праздником. Вам нет смысла заказывать дорогостоящую рассылку. Просто создайте поздравительную открытку и вложите в тело письма! При этом, вы можете пользоваться бесплатными почтовыми клиентами на Google, Яндекс или Mail, у которых лимиты на отправку составляют до 400 писем в сутки, чего вполне достаточно для большинства случаев;
• вам нужна скорость. Создать рассылку на основании шаблонов очень быстро. Вы просто меняете изображения и тексты в шаблон на собственные, скачиваете файл в формате Jpeg и вставляете в тело письма;
• у вас минимальный бюджет. В данном случае вы оплачиваете только услуги конструктора по скачиванию документа;
• у вас сложный для верстки дизайн, либо вы хотите использовать креативные дизайнерские или фирменные шрифты, так как для обычных Html рассылок набор шрифтов четко регламентирован и ограничен.

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

Для создания веб-версии письма вам достаточно просто опубликовать ваш макет на сайте Wilda, и у него появится собственный адрес в сети.

Создать макет письма для последующей верстки в Html

Если обстоятельства требуют от вас создания Html письма, то с помощью конструктора Wilda вы можете создать макет письма для того, чтобы специалистам было проще понять, что вам необходимо. Вместе с макетом вам останется только передать специалисту исходники изображений и ждать результата!

Подробнее об оформлении электронных писем читайте в статье Как создать письмо для E-mail рассылки.

Создать элементы для Html рассылки

В любом Html письме есть необходимый набор элементов: шапка, подвал, фон или изображения. С помощью онлайн-конструктора Wilda вы можете создавать или редактировать эти элементы, сохраняя каждый в отдельности в виде файла Jpeg. Для этого в конструкторе предусмотрено создание документов любых размеров. Уточните у вашего специалиста необходимые требования к элементам и создайте их на конструкторе. Вы легко справитесь с этой задачей, особенно если уже создавали для себя какие-нибудь документы. При этом в конструкторе уже будут храниться ваши логотипы, изображения, фирменные цвета и т.д.
Резюмируя все вышесказанное, конструктор Wilda будет, несомненно, полезен всем, кому необходимо создать красивую и эффектную E-mail рассылку.

Создание простого адаптивного HTML-шаблона электронного письма

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

Медиа-запросы: только полдела

Было время, когда было вполне достаточно определения типа устройства для создания адапивного шаблона электронного письма, которое одинаково хорошо отображалось бы и в iOS, и в Android почтовых клиентах, оба семейства смартфонов поддерживали CSS свойство @media.

С тех пор количество почтовых приложений для обоих платформ с различным уровнем поддержки методов разработки адаптивных шаблонов достаточно увеличилось.

Наиболее примечательным является последнее обновление приложения Gmail для Android, которое является в два раза более популярней, чем стандартное почтовое Android-приложение (что составялет 11% от общих запусков). Оно никогда не поддерживало media-запросы, и до сих пор не поддерживает, однако сейчас оно масштабирует ваши электронные письма путем сжатия размера внешней таблицы для заполнения всей доступной области отобржения экрана. Этот процесс сложно проконтролировать и, в том случае, если все ваши письма зависят от медиа-запросов для правильного отображения на мобильных устройствах, создается несколько неприятных результатов.

Почему плавающий шаблон “темная лошадка”

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

Однако, имеется несколько дизайн-компромиссов, которые вы должны применить. Любимое всеми “схлопывание” в одну ленту колоночных макетов не так хорошо работает с этим методом. Если же вы научитесь обходиться без них, вы сможете применять функциональный дизайн, который работает максимально хорошо.

Сегодня мы этим и займемся.

Первый этап

Давайте начнем с создания пустого шаблона.

Все что мы создаем, так это наша базовая страница с собственным заголовком, типом документа и таблицей-контейнером с примененным цветом фона (и для body-страницы, и для большой таблицы-обвертки, так как пока стилизация тэга body не поддерживается полностью). Для получения более подробной информации этой первоначальной настройки, просмотрите Создание HTML-шаблона электронного письма в Scratch.

Я расположила главную таблицу контента по центру с помощью класса ‘content’.

Обратите внимание

Примечание: в ходе выполнения урока вы заметите то, что я собираюсь разместить CSS в заголовке страницы. Обычно я размещаю стили в заголовке страницы, когда собираюсь использовать их снова, или оставить встроенными одноразовые стили.

Важно: Когда вы используете CSS в заголовке вашего документа, вы обязаны в конце разработки использовать инструменты для их преобразования во встроенные. Если вы используете сервисы, наподобии MailChimp или Campaign Monitor, они автоматически предложат вам преобразовать эти стили во встроенные, когда вы импортируете вашу разметку. Вы обязаны это делать, потому что некоторые почтовые клиенты, такие как Gmail, проигнорируют или вырежут содержание вашего тэга

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

Создаем первую строку таблицы – заголовок. Добавляем нижеуказанное для стилизации строки, которую мы создали:

И затем в своих CSS стилях, задаем подложку для нашего заголовка.

Создание первой адаптивной строки

Теперь мы создим первую адаптивную строку. Способ, с помощью которого мы делаем это, заключается в использовании двух плавающих таблиц расположенных одна относительно другой HTML-свойством ‘align’.

Левая колонка

Заменим наше маленькое привествие тем, что приведено ниже.

Создаем таблицу в 70px и также добавляем небольшую подложку, которая будет смотреться, как зазор между нашими двумя колонками. Подложка снизу добавит вертикального просвета, когда наши колонки нагромоздяться друг на друга на смартфоне.

Правая колонка

Также мы создадим правую колонку снова применив выравниваие к левому краю. Таблица будет 445px в ширину, что позволит нам сэкономить 25px для правой стороны. Это очень важно, потому что Outlook автоматически нагромоздит ваши таблицы, если не будет оставлено по-крайней мере 25px для каждой созданной строки.

Если вы будете оставлять в запасе по-крайней мере 25px, ваши таблицы будут такими, как вы ожидаете.

К более широкой правой таблице мы собираемся применить тот же метод, что и для нашей таблицы-контейнера, который включает в себя создание класса и также условного кода-обвертки. Для этой таблицы мы также задаем 100% ширины доступной на смартфоне, на котором она будет проваливаться вниз относительно левой таблицы.

Как вы можете увидеть, что я создала класс, названный ‘col425’, для этой таблицы и задала ширину 425px для него. Я поместила таблицу, которая будет содержать в себе другую таблицу в 425px шириной, в код условия. Затем мы добавляем наш класс также и в медиа-запрос, который мы создали для Apple Mail.

Сейчас внутри нашей ячейки добавим стилизированный заголовок.

Я добавила несколько классов для каждой ячейки для стилизации, а также несколько классов, которые я позже буду использовать для текста.

Наш заголовок закончен и, как вы видите на рисунке внизу, именно так наши колонки будут наезжать друг на друга на мобильном устройстве.

Создание одноколоночной строки текста

Для создания одной строки текста, просто напросто добавим новую строку в нашу таблицу с классом ‘.content’. Этой строке добавим класс ‘.innerpadding’ с многократно используемыми значениями подложки. Также добавим класс ‘borderbottom’, чтобы создать рамку для каждой строки.

CSS этой секции:

Создание двухколоночной статьи

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

Мы добавили кнопку с классом ‘buttonwrapper’. Она содержит ячейку-распорку с цветовой заливкой фона и также текстовую ссылку внутри себя. Я предпочитаю использовать этот способ, потому что он позволяет использовать кнопки с плавающей шириной, что очень полезно при создании многократно используемых шаблонов, где ширина каждой кнопки может быть различной. Если же ширина вашей кнопки фиксирована, вы можете предпочесть использоватьBulletproof Button Generator.

Стили для нашей кнопки:

Также установим ширину для нового класса ‘col380’, и добавим наш размер в стили, чтобы позаботиться о Apple Mail. И теперь стили выглядят так:

Создание одной колонки для изображения

Это очень простая строка. Просто установим для изображения 100% ширину письма и убедимся, что его высота установлена в auto.

Создание финальной строки обычного текста

Наконец мы добавим строку текста без рамки внизу.

Создание подвала

Для создания подвала, добавим новую строку с таблицей внутри. Одна из строк будет содержать другую таблицу для наших иконок социальных сетей.

Добавим требуемые стили для подвала в CSS:

Оптимизация кнопок для мобильных устройств

Для мобильных устройств идеально, если вся кнопка – это ссылка, а не просто текст, потому что намного сложнее попасть нашим пальцем по маленькой текстовой ссылке. Так как невозможно это реализовать для всех десктопных пользователей (тэг a не полностью поддерживает свойство padding), это то, что я могу добавить в мобильную версию с помощью медиа-запросов.

Удалим цвет из тэга td, к которому он был применен и затем добавить его в тэг a с большой подложкой.

Я использую оба свойства max-width и max-device-width в этом медиа-запросе в попытке избежать баг Oulook.com IE9

Теперь, когда вы щелкните в любой части цветной кнопки это будет ссылка.

Дальнейшие усовершенствования с использованием медиа-запросов

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

В качестве примера мы добавим кнопке ссылку Отписаться, добавив ссылке определенный класс.

и добавляем соответствующие CSS стили в медиа-запрос:

Вы можете также наметить классы .innerpadding, .header и .footer, чтобы уменьшить влияние подложки для клиентов, которые поддерживает медиа-запросы.

Тестируй и двигайся дальше!

Наконец, как и всегда, убедитесь, что вы прошли валидацию (используя W3C Validator – вы можете иметь только одну ошибку с собственным атрибутом ‘yahoo’ тэга body) и протестируй всё ли в порядке, используя реальные устройства и на Интернет-просмотрищиках, наподобие Litmus или Email on Acid.

Получай удовольствие, создавая адаптивные электронные письма, которые выглядят великолепно в любом почтовом клиенте!