Кнопка в html письме

• 
• 
• 

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

Особенности вёрстки писем коротко:

• используем табличную вёрстка;
• все стили прописываются инлайново либо в голове страницы — там прописываем все медиазапросы;
• в стилях предпочтительней использовать развернутую форму записи свойств. Например, так: «border-width: 1px; border-style: solid; border-color: #e1e1e1;» , а не так: «border: 1px solid #e1e1e1;»;
• аккуратно используем свойства CSS3, так как работать они будут не везде;
• ширина письма в среднем от 600px до 700px;
• используем только стандартные шрифты, которые присутствуют на всех устройствах.

Вёрстка письма имеет структуру стандартной html-страницы:

Для вёрстки писем подходит доктайп 4.01 и кодировка utf-8.

Особенности html-вёрстки писем и элементов дизайна

В письмах используется табличная вёрстка

Контент письма оборачиваем в две таблицы:

Первая таблица по ширине 100% экрана задаёт фон, минимальную ширину, размер шрифта в 1px, чтобы не вылезло ненужных отступов.

Вторая имеет ширину контента, в данном случае 700px, задаёт фон, минимальную ширину. В таблицах обнуляем cellpadding, cellspacing, border.

У последующих таблиц ширина должна быть указана в процентах, например 86%. При уменьшении ширины письма будут оставаться отступы по краям, и не нужно будет использовать медиазапросы.

В html вёрстке писем не используем margin и padding

Для отступов не используем margin и padding, а берём следующие конструкции: для вертикальных используем div:

для горизонтальных используем столбец таблицы:

Вставка текста в html шаблон письма

Для вставки текста используем следующую конструкцию:

Свойства шрифта добавляем в span. Чтобы предлог не был оторван от слова, используйте символ неразрывного пробела: «Бесплатно с 07:00 до 21:00» Для ссылок оборачиваем это ещё и в тэг а, и тоже дублируем свойства. У ссылок необходимо указывать атрибут target=”_blank”:

Изображения

Для изображений обнуляем border, задаём ширину. Если изображение при адаптации нужно уменьшить, то указываем максимальную ширину 100%. Так изображение будет подстраиваться под ширину блока-родителя. Если нужно, можно указать и минимальную ширину.

Фоновые изображения Пример использования:

Видим таблицу шириной 86% и фиксированной высотой. К столбцу прописаны свойства background-image, background-position, background-repeat, background-size, bgcolor. Внутри таблицы расположена структура, благодаря которой можно добиться отображения фона в Outlook. Внутри этой структуры для Outlook располагается таблица с фиксированной высотой. Также можно увидеть таблицу с высотой 60px, которая выполняет роль отступа, так как с ними может возникнуть проблема из-за структуру для Outlook.

Кнопки

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

В случаях, когда фон, например, с градиентом или нестандартной формы, но требуется, чтобы текст был текстом, можно использовать фоновое изображение. Но в таком случае придётся пожертвовать отображением в Outlook и не использовать особую структуру для фона, так как отображение будет искривлено. В результате на Outlook будет просто монотонный фон, который будет задан в bgcolor.

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

Адаптивная вёрстка писем — варианты адаптации

Вариант с «плавающими блоками»

Вариант с подстраивающимся содержимым

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

Красиво сверстаем ваши письма

Какие клиенты поддерживают media queries, а какие нет

Поддержка Media Query почтовыми рассылкамиiOS (iPhone/iPad)✅Gmail app (iOS + Android)✅Inbox by Gmail app (iOS + Android)❌Android 4.x native client✅Android Outlook Exchange native client❌Android Outlook.com app✅Android Yahoo! Mail app❌Gmail (Android Browser)❌Mailbox (iOS + Android)❌Outlook.com (Android Browser)❌Outlook.com (iOS)✅Yahoo! Mail (Android Browser)❌Windows Phone 7❌Windows Phone 7.5✅Windows Phone 8❌BlackBerry OS 6✅BlackBerry OS 7✅BlackBerry Z10✅Kindle Fire native client✅

Какие инструменты для вёрстки используем

• Figma или Photoshop для нарезки макета и оптимизации изображений;
• изображения, экспортированные из Figma, оптимизируем через сервис TinyPNG;
• любой текстовый редактор с подсветкой синтаксиса html;

Мы не используем никакие инлайнеры, а сразу прописываем все стили в html-файле. Код получается чище и аккуратней.

Как тестируем верстку

Для теста используем:

• https://validator.w3.org, чтобы проверить валидность кода и увидеть опечатки, если есть;
• Email on Acid помогает сразу увидеть отображение письма во множестве клиентов, но бывают случаи, когда отобржение на сайте разнится с отображением в реальности;
• через MailChimp отправляем письма на свои почтовые ящики, чтобы проверить отображение в реальной ситуации;
• The W3C Markup Validation Service — подходит для массовых тестов.

Почему html-вёрстка, а не блочный конструктор

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

• 
• 
• 

Узнавайте об обновлениях блога Email Soldiers первым

Спасибо!

Осталось подтвердить подписку — кликнуть по кнопке в письме, которое мы вам отправили.

Читайте также:  Проверить комплектацию мерседес по вин коду бесплатно

Следите за обновлениями в соцсетях или получайте их от нашего телеграм-бота

• 
• 
• 

Похожие статьи

Что делать, чтобы дизайн email-рассылок не ломался в тёмных темах оформления почтовых клиентов.

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

Какими должны быть текст, дизайн и вёрстка в рассылках, чтобы они дошли до подписчиков и заинтересовали их.

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

Для продвинутых пользователей, наверное, проще сверстать кнопку с нуля, чем брать уже готовую и заморачиваться над изменениями. Мы разобрали популярные практики, как можно сделать кнопку СТА разными способами.

Краткое содержание статьи, как сверстать кнопку:

1. Кнопки в виде картинок

Если вы не хотите мучиться с вёрсткой или дизайн вашего письма требует уникальных кнопок со спец. эффектами, такими как: тени, свечения, анимация, градиенты или нестандартные шрифты — вы всегда сможете использовать кнопку нарисованную в графическом редакторе. Такая кнопка будет выглядеть 100% одинаково везде, но есть вероятность, что некоторые почтовые клиенты сразу ее не загрузят. Тот же Outlook по-умолчанию блокирует загрузку картинок.

Не забывайте использовать ALT-текст для кнопок-картинок. Дублируйте в нем название вашей кнопки, а так же применяйте стили для оформления ALT-текста.

2. Campaign Monitor

Компания разработала инструмент для создания кнопок на основе VML. Язык VML используется для корректного отображения кнопки в MS Outlook.

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

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

Пример кода для тестирования:

Откровенно говоря, слишком много кода получается. В Outlook такая кнопка хорошо смотрится, но она не универсальная из-за фиксированных размеров. Получается, её нужно постоянно генерировать заново, изменяя размеры в зависимости от длины названия.

3. MailChimp

Компания предлагает использовать кнопки на основе таблицы. Образец кнопки вы можете найти на странице Buttons.

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

Пример кода для тестирования:

Кликнуть по такой кнопке получится только если точно попасть по ее названию. Так же получилось довольно много кода, а значит — это увеличит размера письма.

4. eSputnik

Мы не задаем фиксированных размеров кнопкам, поэтому наши кнопки увеличиваются в размерах вместе с увеличением размеров шрифта текста и его длины.

Делайте красивые письма!

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

А это HTML верстка самой кнопки:

Пример кода для тестирования:

При создании письма выбираете блок кнопку и добавляете её в письмо.Кроме того, в нашей системе есть готовые наборы кнопок, которые можно добавлять лёгким движением руки.

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

Создание кнопки, как и всего письма не займёт много времени. В редакторе вы сможете задать настройки кнопки:

• отступы,
• обводку,
• выравнивание,
• адрес ссылки,
• расположение в письме,
• адаптивность,
• цветовую гамму.

Вот и всё! Останется только дополнить вашу кнопку красивым призывом к действию.

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

Светлана Шаповалова, коммерческий автор и переводчик, специально для «Нетологии» адаптировала статью Ли Манро, в которой он рассказывает об основах верстки писем и делится советами по ее оптимизации.

Верстка HTML-писем. Когда веб-разработчики видят эти слова — на глазах у них выступают слезы.

Если вы верстальщик, то рано или поздно столкнетесь с версткой писем, нравится вам это или нет. HTML-письма — это настоящий олдскул.

Эдакое путешествие в прошлое, в год, скажем, 1999 — эпоху вебмастеров, Frontpage и WYSIWYG-редакторов и табличной верстки.

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

Последние несколько лет я провел, проектируя инструменты для разработчиков, и два года из них работал ведущим дизайнером продукта в Mailgun — email-сервиса для разработчиков. Я многое узнал о том, как работают email-рассылки и с какими проблемами сталкиваются разработчики при верстке HTML-писем. В этой статье я поделюсь своими знаниями.

Коммерческий автор и переводчик

Старт в программировании

• Научитесь писать код за две недели
• Создайте свой первый проект — небольшую игру для индивидуального подсчёта продолжительности жизни и мотивации
• Познакомитесь с основами самого популярного языка программирования — JavaScript

HTML-шаблоны

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

Верстка HTML-шаблонов для email-рассылки

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

Графические движки на клиентской стороне

Дизайн email-писем до сих пор завис где-то в Средневековье. В бесчисленном количестве email-клиентов и устройств письма обрабатываются совершенно по-разному.

Читайте также:  Что делать если мак завис

Для обработки HTML-писем почтовые клиенты используют различные движки:

• Apple Mail, Outlook для Mac, Android Mail и iOS Mail используют WebKit.
• Outlook 2000, 2002 and 2003 используют Internet Explorer.
• Outlook 2007, 2010 and 2013 используют Microsoft Word (да, Word!).
• Веб-клиенты используют браузерный движок (например, WebKit для Safari использует, Blink для Chrome).

Кроме того, почтовые клиенты могут добавлять стили на свой вкус прямо сверху ваших. Например, Gmail приводит все шрифты для тега к виду:

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

Поддержка встроенных стилей и медиа-запросов в Gmail

В сентябре 2016 в Google объявили о поддержке встраиваемых стилей и медиа-запросов для Gmail. Это огромный шаг для развития email-индустрии. Сейчас Gmail поддерживает немалое количество CSS-свойств, что существенно упрощает разработку e-mail-шаблонов.

Использование табличной верстки

При блочной верстке с использованием div-ов возникают проблемы с позиционированием в различных клиентах. Особенно в тех, где для обработки используется Microsoft Word, к примеру, Outlook. Конечно, при желании можно пользоваться div-ами, но безопаснее верстать, будто за окном 1999 год — таблицами. Это означает:

• table вместо div
• #FFFFFF вместо #FFF
• padding вместо margin
• CSS2 вместо CSS3
• HTML4 вместо HTML5
• background-color вместо background
• HTML-атрибуты вместо CSS
• встроенные стили вместо подключаемых или блоков style.

Это советы из опыта. Понятное дело, вы можете их проигнорировать, но действовать придется на свой страх и риск.

При использовании таблиц, не забывайте использовать

border=»0″ cellpadding=»0″ cellspacing=»0″

Если пользуетесь Premailer, у него есть список с описанием CSS-атрибутов, применяемых в таких случаях.

Встроенные стили

Некоторые клиенты, особенно Gmail до недавних пор, беспощадно обрезают любые не встроенные стили. Есть несколько вариантов:

• вписывать стили вручную в каждую строку;
• использовать веб-инлайнер CSS;
• использовать программный CSS-инлайнер;
• положиться на почтовый сервис, который вы используете (если он поддерживает такую функцию).

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

Если вы вписываете стили руками, я советую использовать сниппеты и/или язык шаблонов с partial и helper. Это избавит вас от необходимости по многу раз прописывать одно и то же.

К веб-инлайнерам относятся: CSS-инлайнер в Campaign Monitor, CSS Inliner Tool в MailChimp и Responsive Email Inliner в Foundation for Email.

В качестве программного инлайнера я рекомендую модуль Juice для Node.js. Неплохие Ruby-альтернативы — Premailer gem и Roadie.

Кнопки

Чтобы создать кнопку, идеально отображаемую любым клиентом, придется поизвращаться. Как я уже говорил, надо использовать таблицы — даже для кнопок.

Мне нравится вот такое решение. С ним вы получите нормальную кнопку для веб-клиентов:

Click Here
Instead, write it like this:

Take action now

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

Разберем подробнее. Первый тег

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

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

Что такое VML? Если вы хоть раз занимались разработкой писем, то, вероятно, сталкивались с этим понятием. Язык векторной разметки (Vector Markup Language, VML) поддерживается старыми версиями Outlook. В Microsoft заявили, что VML больше не поддерживается в Internet Explorer (IE), начиная с IE10. Тем не менее, пока в ходу Outlook 2007, 2010 и 2013, вы еще не раз увидите, как его используют для фоновых изображений.

Типографика

Проще всего пользоваться стандартными системными шрифтами. Это Helvetica, Arial и прочие. Однако можно использовать и веб-шрифты, например, Google Fonts. Расположите их за медиа-запросом WebKit, чтобы Outlook не ничего не перепутал.

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

Условия

Мы можем применять специальные CSS стили и показывать/скрывать определенные элементы/контент в различных версиях Outlook.

Если надо обратиться только к версии Outlook, базирующейся на Microsoft Word:

Этот контент видно только в версиях Outlook, базирующихся на Microsoft Word.

Версии Outlook, базирующиеся на IE:

Этот контент видно только в версиях Outlook, базирующихся на IE.

Если нужна определенная версия Outlook:

Этот контент видно только в Outlook 2007.

Также с помощью медиа-запросов можно выбрать клиентов, базирующихся на WebKit:

.special-webkit-element <
display: none;
>
@media screen and (-webkit-min-device-pixel-ratio:0) <
.special-webkit-element <
display: block !important;
>
>

Изображения и медиа

Изображения в письмах

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

• Outlook по умолчанию блокирует обработку изображений.
• Apple Mail нет.
• Gmail уже нет.

Не забывайте прописывать качественный alt-текст ко всем изображениям. Текст расскажет пользователю, что было написано на картинке или пояснит, что это за изображение, например, «Логотип компании». Можно даже привнести в текст немного творчества, как это сделали Email Monks:

Не забудьте добавить базовый сброс стилей для всех изображений:

Анимированные гифки поддерживаются большинством клиентов. Версии Outlook с 2007 по 2013 не отображают гифки, вместо этого показывается первый кадр.

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

У масштабируемой векторной графики (Scalable Vector Graphics, SVG) масса преимуществ для использования в вебе. Однако ее отображение в письмах может вести себя не так как надо, поэтому SVG нуждается в запасных вариантах или условиях. Обычно я не рекомендую использовать ее в письмах.

Для изображений, адаптированных под Retina-дисплеи, подбирайте изображения крупнее (1.5× to 3×) и изменяйте размер. Я обычно сохраняю изображения низкого качества в двух разрешениях, получается неплохо.

Помните, что для Outlook необходимо задавать ширину изображения с помощью атрибута width. Иначе Outlook отобразит реальный размер картинки и поломает верстку.

Видео в письмах

Видео поддерживается на iOS, Apple Mail и Outlook.com. В зависимости от клиента, вы можете использовать медиа-запросы, чтобы показывать или скрывать видео.

Формы в письмах

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

Кнопки быстрого действия в Gmail (Gmail Actions)

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

Добавить код просто. Есть два варианта:

Предзаголовок

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

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

Тестирование писем

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

Тестировать письма можно различными способами:

• Отсылать письмо себе на почту: на десктоп (Outlook), на веб-клиент (Gmail) и на мобильный клиент (iOS Mail).
• Автоматически тестировать с помощью Litmus или Email on Acid.
• Вычитывать содержание и проверять отображение верстки.
• Проводить A/B тестирование различных типов контента, размера письма и заголовка.

Как отправить HTML-письмо самому себе? Хороший вопрос. Это сложнее, чем вам кажется. Можно воспользоваться PutsMail или использовать HTML-редактор в Thunderbird.

MIME Multipart

Обычное текстовое письмо — это просто текст. HTML-письмо — это просто HTML. Большинство писем, которые вы посылаете и получаете — это MIME (Multipurpose Internet Mail Extensions — многоцелевые расширения интернет-почты). Этот стандарт комбинирует текст и HTML, так что получатель сам решает, какой тип отображать.

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

Также замечу, что некоторые клиенты отображают простой текст как HTML; например, Gmail добавляет некоторые стили по умолчанию и превращает URL в гиперссылки. Большинство сервисов рассылок конструируют MIME самостоятельно, поэтому об этом не приходится думать. Некоторые из них также создают простую текстовую версию из вашего HTML.

Совет: Выберите пункт «Показать оригинал» из выпадающего меню в Gmail, чтобы увидеть полный MIME.

Доступность

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

• Добавляйте role=»presentation» в каждую таблицу, чтобы было понятно, что таблица используется для верстки.
• Весь текст сопровождайте содержательными описаниями.
• Если не хотите использовать alt-текст, то ставьте alt=»», чтобы было понятно, что там пусто.
• При необходимости используйте семантические HTML-теги, такие как

Отзывчивый email-дизайн

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

«Отзывчивый веб-дизайн» — это понятие придумал Итан Маркотт в 2010 году: «Сочетая резиновую модульную верстку и медиа-запросы CSS3, мы можем создавать дизайн, который подстраивается под любую форму дисплея».

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

До недавнего времени Gmail не поддерживал медиа-запросы. К счастью, с сентября 2016 года это изменилось. Однако, у некоторых клиентов это параметр остался прежним: Yahoo, Windows Phone 8 и Gmail для Android.

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

Резиновая верстка

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

.container <
max-width: 600px;
width: 100%;
>

Отзывчивая и адаптивная верстка

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

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

Гибридная и эластичная верстка

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