Предисловие

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

Предлагаю рассмотреть все тонкости и нюансы верстки html-писем – от простых шаблоных решений, до современных адаптивных подходов.

Верстка HTML писем для мобильных устройств

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

Основы верстки html писем

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

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

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

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

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

С появлением HTML5, применение flash потеряло актуальность. И прогресс бары, иллюстрирующие ход загрузки файлов, и предварительную обработку изображений можно реализовать на новом технологическом стандарте. =)

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