20 января
Данная статья устарела и, вероятно, не в полной мере отражает текущее состояние вещей, поэтому рекомендую ознакомиться с новой статьей на эту же тему: Верстка писем. Полная версия

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

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

 
30 ноября (обновлено 30 ноября)
Данная статья устарела и, вероятно, не в полной мере отражает текущее состояние вещей, поэтому рекомендую ознакомиться с новой статьей на эту же тему: Верстка писем. Полная версия

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

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

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

 
27 октября

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

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

 
26 августа

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

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

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

 
23 июля

С совершенствованием технологий, увеличения скорости интернет соединений появилась отдельная категория сайтов, единственной целью которых является реклама товаров или услуг, причем зачастую делается под каждый конкретный продукт отдельный сайт. Такие сайты отличаются от привычных ярким запоминающимся дизайном, использованием анимации, простым и понятным интерфейсом и практически полным отсутствием функционала. Их называют промо сайтами (promotion - продвижение, реклама).

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

Данный эффект был предложен дизайнером вот для этого проекта: http://www.jungly62.ru/

Если использовать корректную формулировку, то это называется Паралакс эффект - изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. Хотя, на самом деле, этим термином в верстке обычно обозначают немного другой эффект (parallax scrolling). Так что назовем его "упрощенный паралакс" или parallax mouse. Как видно из названия, мы будем реагировать на изменение положения мыши.