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

Вот дизайнер убрал код страны и вынес за скобки код города — сделал вёрстку поопрятнее:

...и лишил меня возможности позвонить по номеру в один клик:

Дальше два пути:

1. Записать номер на оперативную память в голове и руками набрать его, добавив нужный префикс.
2. Попробовать обойтись телефоном.

Выбираю второй путь, копирую:

С третьей попытки вставляю номер в «Телефон», но отредактировать не могу — курсора нет, удалять и добавлять цифры можно только с конца:

Ладно, иду в блокнот:

Эээ — tel:(812)%20234-2646 — фигня какая-то. За несколько попыток исправляю номер — +7 (812) 234-26-46. Не был бы разработчиком, не справился бы, ведь простые пользователи не знают, что %20 — это пробел.

Плохо.

---

Совет. Показывайте на сайтах полные номера, это нормально:

Наш телефон: +7 (812) 234-26-46

Ну или прячьте их в атрибут href, вот так:

Наш телефон в СПб: <a href="tel:+78122342646">234-26-46</a>

С номерами 8 800 xxx-xx-xx обычно всё хорошо.

Недавно на Медиуме вышла интересная заметка о том, что красивые шаблонные рассылки плохо работают и лучше всего писать письма плейн-текстом. В Гетвеаре как раз подошло время для летнего письма клиентам, и мы решили замутить А/Б-тест оформления рассылки.

Мне казалось, что Мейлчимп даёт какие-то инструменты для этого, но нет. Там есть понятие «А/Б-кампания», но она работает не так, как хочется: тестирует или заголовок, или имя отправителя, или время отправки на небольшом сегменте пользователей, и затем отправляет письмо-победитель оставшимся пользователям.

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

Письмо в шаблоне выглядело так:

Письмо «без дизайна»:

Результаты теста:

Процент открытия выше 50% — это круто, у Гетвеара очень лояльные клиенты, в среднем по икомерсу письма открывают всего 13,1% адресатов, если верить Мейлчимпу. На сайт перешло тоже относительно много человек — ≈7%, тогда как среднее по икомерсу — 2%.

В строке «заказали джинсы» только те транзакции, которые мы смогли отследить по ютм-метке, это ничтожные 16,5% от всех заказов с купоном, указанным в письме — остальные переходили на сайт напрямую. Поэтому реальная разница продаж неизвестна. Но по полученным цифрам красивое письмо выигрывает с небольшим перевесом: 0,5% открывших заказали джинсы, конверсия простого письма — 0,3%.

Наш вывод — для рекламно-новостных рассылок вполне допустимо использовать шаблон «с дизайном».

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

---

Краткое содержание рассылки:

1. Шорты за $70. Больше шорты не стоят столько же сколько и целые джинсы.
2. Карго. Свободные мужские джинсы с накладными карманами на бёдрах.
3. Новый чёрно-синий цвет. Выглядит также как сырой деним, но не красится.
4. Волшебный купон 12737CP1C7W0B на скидку 30%.

Купон действует ещё до четверга. Воспользуйтесь и вы.

Никакое специальное приложение для проверки размеров в вёрстке, вроде Икс-скоупа, у меня не прижилось. Слишком большая погрешность:

Когда мне нужно что-то проверить приблизительно, я использую стандартную маковскую скриншотилку, cmd shift 4:

После измерений нажимаю esc, чтобы не сохранять скриншот.

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

Идеальная измерялка должна вести себя так:

• жмёшь cmd shift M (или другой хоткей),
• экран замирает и поверх появляется фотошопный Rectangular Marquee Tool,
• работает зум,
• выход по эскейпу.

А как вы проверяете размеры элементов и отступов в вёрстке?

Ссылки на РСС-поток — издевательство, они ведут в машинное отделение:

Прячьте их. Никакой пользы. Люди, не знакомые с РСС, ничего не поймут и подумают, что сайт разломался. А гики и без вашей помощи скормят УРЛ блога агрегатору, который найдёт адрес потока в исходном коде:

<link rel="alternate" type="application/rss+xml" title="АП" href="/rss/" />

Вместо сырой ссылки «РСС» должен быть виджет «Подписаться», который в пару кликов добавляет блог в один из сервисов или спрашивает у человека адрес почты, чтобы присылать заметки почтой. Кто сделает такой?

В Гетвеаре я не только ведущий разработчик, но и ведущий дизайнер, представьте себе! Мой сериал-фантазия «Технолог — тоже дизайнер» материализовался.

Не всё даётся быстро и просто, но мне нравится, сдаваться не собираюсь.

Вот моя любимая форма со всеми измерениями джинс, тело — выкройка — ожидаемые джинсы — получившиеся джинсы, так она выглядела до нашей эры:

Два месяца назад чуть лучше:

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

Когда всё хорошо, он молчит:

Но это бывает редко, люди сделаны не по Левайсу, так выглядит допустимое отклонение:

Бывает всё совсем плохо, тогда надо написать человеку письмо и убедиться, что он не измерил себя линейкой:

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

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

В таком месиве сложно разобраться что к чему.

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

Теперь, даже когда всё ужасно с мерками, интерфейс не взрывается.

Наконец-то нашёл правильное расположение ноутбука относительно Аймака, который я использую как монитор. Вот:

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

Рекомендую.

Анонс!

Три с небольшим месяца назад я начал переписывать Фотораму с нуля. Было сложно и интересно. Сейчас всё уже почти готово, остались тесты, новая документация и сайт. Третью (текущую) версию думаю временно поселить на old.fotoramajs.com для желающих. Но это ещё когда.

С новой архитектурой Фоторама стала круче и гибче.

Раньше, если забыть указать отдельные превьюшки, Фоторама их генерировала, но так как вся лента навигации строится сразу целиком, приходилось загружать все большие фотографии тоже разом. Это страшно тормозило, я просил людей всё же готовить маленькие превьюшки заранее, и поставил там костыль — все загрузки и отрисовка приостанавливались на время взаимодействия с интерфейсом. Теперь наконец-то ленивая загрузка работает и для превьюшек, грузятся только те, которые видимы, плюс парочка по краям.

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

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

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

Опций, кстати, стало меньше в два раза, все цвета и отступы теперь будут настраиваться только через ЦСС. Оставшиеся опции меняются на лету (можно будет даже конфигуратор сделать потом). Также без переинициализации можно перемешивать, сортировать, удалять и добавлять картинки в галерею:

var api = $('.fotorama').data('api');
api
  .push({img: 'trololo.jpg'})
  .setOptions({loop: true})

Да миллион всего! Честный полный экран, тенюшки, правильный фейд и наплыв, подписи, хеш для ссылки другу, ширина и высота в процентах, подписи, ХТМЛ, минимальная и максимальная ширина и высота, АПИ и события, честная закольцовка первой и последней фотки, подъезжание следующей превьюшки под курсор...

При этом всём Фоторама не потяжелела и стала работать в два раза быстрее. Поверьте и не переключайтесь :-)

Вчера купил ещё одну эпловскую клаву, а в ней одно приятное изменение:

F4 теперь отвечает за лончпад, а не дашборд.

Помнится Валера придумывал будильник для Айфона. Я никогда не запаривался по валериной схеме: Часы → Будильник → Изменить → Выбрать единственный будильник → Попасть наконец в настройку будильника → Выставить нужное время → Сохранить.

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

Выглядит интерфейс под стать пятому Айфону: