Казалось бы простая задача: вывод номера телефона в письме. Что может быть сложного? Классика. Никто не может прийти к единому стандарту.

Вопрос дня:

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

Возьмем номер:

8 (800) 888-88-88

И будем извращаться

Картинка для привлечения внимания пренадлежит studio4

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

Картинка для привлечения внимания честно сперта у invisionapp (кстати, у них божественная рассылка)

С момента публикации последнего поста прошло ни много ни мало, полтора месяца, но на то были причины. Уйма работы и бредовые мысли задрота-верстальщика. Сначала я собирался просто перенять приемы Николь Мерлин для верстки писем себе, но потом хипстерская голова подумала: А почему бы не зафигачить целый фреймворк? Громкое слово для моей поделки, но мне приятно его так называть. Начнем с простого.

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

К чему мы приходим:
— Использование внешних стилей и последующий прогон кода через инлайнер. Из-за усложнения кода это стало целесообразным
— Улучшение семантики через именование классов и сокращение участков кода
— Частичная поддержка the Bat! Хотя Николь на него забила.
— Полная поддержка всех мобильных почтовых клиентов
— Использование ранее опасных конструкций. Благодаря усердному тестированию проблемы решены.

Написание данного поста навеяно недавней поистине шикарной работой, Niсole Merlin. Во многом ее методика верстки схожа с моей и мне радостно от того, что это направление развивается теперь и на западе. Чем же этот способ так хорош? Все очень просто. Не нужно объяснять как важно адаптировать под мобильные платформы сверстанные письма для того, чтобы они были прочтены. Читать простыни на телефоне мало кто будет. Что же все это время делал западный разработчик? Он верстал табличной версткой с элементами блочности, затем причесывал этот код медиазапросами для поддержки мобильников. Чем этот подход ущербен? А тем, что ни на андроиде, ни на яблоке медиазапросы не поддерживаются следующими почтовыми клиентами: Gmail, Yandex, Mail.ru. По большому счету западные коллеги могли бы и наплевать на яндекс с мейлом, но вот Gmail как ни крути первый среди почтовиков.



Для Nicole Merlin это стало очевидно и она разработала свою методику, которая основывается на резиновой верстке с минимальным использованием медиазапросов(progressive enhancement) и это работает! Но немного не так как хотелось бы нам в России. Вся резиновость автора держится на inline-block элементах и оперированием max-width. Но вот беда-то, наши ребята из яндекса и мейла max-width не поддерживают. Сначала я расскажу об отличиях моего подхода от приемов Nicole, а затем плавно перейду к своим мыслям и примерам кода, которые стоит использовать при подготовке писем.

Привет.

В очередной раз получив письмо от хабра, я расстроился. А дело вот в чем. На скриншоте слева мы видим нормальное адаптированное письмо. Так оно отображается во всех вменяемых мобильных почтовых клиентах, которые поддерживают media queries. Теперь давайте взглянем на скрин справа. Таким письмо мы видим в мобильных Gmail, Yandex, Mail.ru клиентах как на андроиде, так и на яблочке. Как вы уже возможно догадались, эти клиенты media queries не поддерживают.

Так уж сложилось, что в уютном Санкт-Петербурге меня особо ничего не держит, да и душа возжелала смены обстановки и новых открытий. В ход пошла википедия со списком стран и их визовыми режимами, airbnb и aviasales. Задача стояла в том, чтобы найти страну с неславянской культурой, более теплыми погодными условиями, нежели в центральной России и стоимостью проживания, которая бы не превышала привычную мне в Питере.

Таким образом, выбор пал на Турцию. Аргумент простой — а почему бы и нет? Я не слишком серьезный и дотошный человек в плане досконального изучения моего будущего места обитания, поэтому отчасти мой выбор был от балды.

Тема навеяна постом Lee Munroe, который освещался в дайджесте на хабре. Я просто не смог пройти мимо него. Поэтому дальше я расскажу о своем workspace для разработки писем.

Еще в прошлом году разработчики Дропбокса выкатили в Эппстор MailBox App. Волне себе удобный и приятный почтовый клиент для мобильных устройств от Apple. Вот здесь можно увидеть его обзор на момент выхода.

Сейчас же клиент претерпел нехилые изменения, получил очень минималистичный дизайн (даже чище стандартного Mail App), см. скриншот справа. Кроме всего прочего клиент позволяет прикреплять в аттач файлы с вашего дропбокс аккаунта. Но не об этом данный топик.

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

Разумеется я запулил 100500 тестов и вот к чему я пришел.

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

Спам

Куча писем попадает в спам. Даже если они таковыми и не являются. 30% сервисов, в которых я регистрируюсь отправляют подтверждение регистрации мне на почту, но я ловлю его в спаме. Но это я. Да, я читаю папку «спам». Складывается впечатление, что многим просто плевать на потенциальных клиентов. Куда смешнее получать подобные письма в спам от компаний, предоставляющих, например, услуги рассылок. Каламбур.

Меня зовут Артур Кох, и я не вижу своей жизни без интернет-рассылок. Многие читатели хабра знают меня по длинной серии публикаций на тему верстки HTML-писем, но это не все, чем я занимаюсь. Я с большим интересом работаю в сфере email маркетинга уже не первый год, и за это время накопилось очень много интересных наблюдений как на российском рынке, так и за его пределами, о которых я бы хотел рассказать. Будет здорово, если все ниже описанное не вызовет типичный для этой темы холивар на тему “email рассылки не нужны, горите в аду”. Местами будет сумбурно, субъективно, но скорее всего, интересно.

Доброго дня.

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

Итак, письмо:



Футер нас не особо интересует, ибо там все ок.

Автор изображения Mike, Creative Mints

Добрый день. Я уже не раз писал о том, что media_queries в почтовых клиентах работают прекрасно. Даже outlook.com в браузере их адекватно воспринимает. Но вот gmail на яблоке и андроиде так не считает.

Если в случае остальных клиентов мы можем сделать, например так:

@media only screen and (max-width:480px) {
.big_img { display:none !important; }	 .small_img { display:block !important; }
}
@media only screen and (max-width:600px) {
.big_img { display:block !important; }	 .small_img { display:none !important; }
}

Автор изображения MVBen

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

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

Koding.com — полноценная частично бесплатная среда разработки в браузере и социальная сеть для разработчиков в одном флаконе.

— Прошлогодний обзор
— Недавний обзор

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

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

Из минусов (если кто пропустил), виртуальная машина выключается через 15 минут после прекращения работы с ней. Позиция разработчиков сервиса: «Нефиг разворачивать бложики и эксплуатировать сервис как хостинг. Мы даем вам среду разработки и тестирования.»

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

Год назад на хабре был анонсирован сервис Koding.com. Он обрадовал немалоприятными плюшками в виде халявного сервера, apache, php, mysql, ruby, python, консоли в веб интерфейсе, удобное подобие IDE в браузере и прочие приятные вещи.



Помимо социальной составляющей разработчики обещали все больше и больше нововведений, приложений и развития проекта. Как и было обещано, все то, что поставлялось в beta версии, останется бесплатным на момент релиза (хотя он как бы еще и не релиз).

Автор изображения Eva Galesloot

Привет!

Прежде всего хочу принести извинения в адрес mail.ru и лично Андрею Сумину AndrewSumin за пост, написанный сгоряча. Проблема верстки писем изрядно наболела, но местами все не так плохо как казалось. Присутствуют и проблемы.

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

Знаете чего очень не хватает? Фичлиста от разработчиков почтовых клиентов и вебморд. Было бы очень здорово узнавать из первых рук, какие фичи ввели в обращение, а какие наоборот — урезали. Это облегчило бы головную боль верстальщика, да и пользователь перестал бы получать кривые письма. Да, это очень важная информация.

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

Автор изображения Louie Mantia

Приветствую!

В последнее время все больше времени уделяю разработке новых методик для верстки писем, которые облегчат жизнь верстальщику, и не исключено, что в скором времени вас ждет новый свежий материал по теме. Меня интересует соотношение использования вебморд и почтовых клиентов на сей день. Выборка, разумеется, не так точна как хотелось бы. Но все же хабр показывает интересные результаты. С прошедшего опроса прошло полтора года. Вероятно картина изменилась. Бесспорно гмыло будет лидировать, но как я уже говорил раньше, суть опроса — выявление не победителя, а соотношения. Прошу голосовать. В камментах не прочь обсудить фичи тех или иных клиентов и вебморд, которые появились за последнее время. От себя скажу, что было очень приятно обнаружить поддержку фоновых изображений в яндекс почте и почте mail.ru. При всем этом гуглоиды были первыми в этом вопросе, анонсировав эту поддержку 1 февраля прошлого года. Второй опрос ищет долю мобильных платформ на рынке почты.

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

Доброго дня.

Изображение честно позаимствовано с Dribbble.com

Прошло немногим менее два года с момента публикации моего первого топика по теме. Что за это время произошло? Mail.ru, Rambler, Yahoo и Яндекс дружно перелопатили свои почтовые интерфейсы, и как следствие — парсеры писем, что доставило приятных эмоций, т.к. было исправлено много противных багов. Gmail стал поддерживать фоновые изображения. Ну а благодаря развитию рынка мобильных платформ к нам на помощь приходят media queries.

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

И да, в посте картинок почти нет. За картинками прошу в обзоры css3 фич.

На данный момент занимаюсь версткой писем, скорей как хобби, поэтому времени на тестирование opera mail, sparrow и прочих «вроде как популярных» клиентов не было. Речь пойдет о следующих:

— Все версии MS Outlook
— Mail.ru
— Rambler почта (в новом интерфейсе не исключены баги)
— Яндекс почта
— Gmail
— Yahoo!
— Thunderbird начиная с версии 2.0
— Hotmail
— Windows Live Mail
— Apple Mail начиная с третьей версии
— AOL Mail
— Lotus Notes 8-8.5.
— theBat! дотошно не тестировал, но и нареканий особенно не было

Привет!

На фоне вчерашних задач выкладываю еще одну.

Жили-были два мудреца. Иван и Кузьма. Пришел однажды к ним математик и сказал:
Одному из вас(Ивану) я сообщу сумму трех натуральных чисел. Второму(Кузьме) их произведение. Назовите мне эти числа.
И тут Ваня говорит: Кузьма! Если твое произведение больше моей суммы, я сразу назову все числа. Увы, — ответил Кузьма, — Произведение меньше.

Назовите числа.