АП

Блог Артёма Поликарпова
20 октября 2015, 22:28

Как собрать бургер

Здесь всё прекрасно, особенно закрывающий тег сверху

13 июля 2014, 14:52

Вёрстка телефонов

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

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

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

«Неправильно набран номер. Пожалуйста, уточните номер и перезвоните».

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

  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 обычно всё хорошо.

2 июля 2014, 12:08

#666

cover white transparent

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

Дизайнеры забывают, что мы живём не в виртуальной реальности. Между монитором и глазами есть воздух, от глаз до мозга тоже не близкая дорога, за окном светит солнце, ночью в мониторе отражается торшер, на мониторе пыль, да и откалиброван он хреново. А кто-то вообще дальтоник. Природа сама подмешает всякого разного в ваши #000, #666 и #FFF — и цвета, и шума — никто не увидит их такими же, как видели вы в своём воображении.

Не стесняйтесь, используйте чистые цвета. Не страдайте, проверяя всю палитру на наличие в ней ровно трёх процентов серобуромалинового. Будьте проще. Камон.

cover white transparent

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

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

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

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

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

От картинок решили не избавляться, так что это не плейн-текст, а плейн-хтмл.

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

Шаблон «Без дизайна»
Открыли письмо 53,7% 56,2%
Перешли на сайт 6,9% 7,9%
Заказали джинсы 7,2% 3,9%
Отписались 0,6% 0,7%

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

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

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

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


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

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

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

23 июня 2014, 23:39

:—)

Уверен, что это я придумал вип-смайлики с тире вместо дефиса, но не расстроюсь если кто-то докажет обратное.

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

Понимать задачу. Писать спецификации до начала работы. Хорошо.


Полагаться только на свои силы. Плохо.

Общаться с коллегами. Радоваться их успехам. Помогать в трудную минуту. Хорошо.


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

Планировать время, делать работу в срок без начальника с палкой. Хорошо.


Валить вину на других. Тыкать пальцем и не предлагать решения. Говорить «так было в дизайне». Плохо.

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


Паниковать. Смотреть телек. Плохо.

Отдыхать. Точить пилу. Хорошо.


Радоваться чужим ошибкам. Критиковать, держать обиду. Плохо.

Брать ответственность на себя, руководствоваться принципами «если не я, то кто?» и «сделать, а потом извиниться». Хорошо.


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

Видеть проблемы там, куда не добрался дизайнер. Хорошо.


Хранить удачные решения и трюки в секрете. Плохо.

Делиться знаниями и идеями. Вести блог. Выступать на конференциях. Хорошо.


Психовать, когда арт-директор с дизайнером переделали макет целиком. Плохо.

Не успокаиваться и улучшать продукт после релиза. Хорошо.


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

Документировать. Хорошо.


Считать неразрывные и тонкие пробелы дизайнерской блажью. Плохо.

Ненавидеть упячку, задавать картинкам ширину и высоту. Управлять внешним видом страницы во время загрузки. Хорошо.


Не заботиться о деградациях. Плохо.

Заботиться о доступности данных. Хорошо.


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

Расставлять приоритеты, отсекать лишнее. Меньше обещать. Хорошо.


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

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


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

Любить нестандартные элементы интерфейса. Выходить из зоны комфорта, браться за самые сложные проекты. Хорошо.


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Плохо.

Придумывать уместные анимации интерфейса, не требуя разжевать каждый кадр. Хорошо.


Не оптимизировать разметку, картинки, стили и скрипты. Плохо.

Бороться с рутиной автоматизацией и готовыми решениями. Хорошо.


Думать, что «кроссбраузерно» — одинаково во всех браузерах. Плохо.

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


Не делать собственные проекты. Плохо.

Пользоваться своими интерфейсами. Хорошо.


Притворяться хорошим. Плохо.

Видеть, в чём сегодня был недостаточно хорош, и завтра становится лучше. Хорошо.

1 июня 2014, 0:14

Моя тема для Эгеи

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

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

В общем, я решил открыть свою тему для всеобщего использования. Около месяца пилил и полировал, вчера решил заверстать длинную страницу о ней, упарился пока верстал и решил сделать тему платной, а сегодня вроде всё закончил и придумал название — «Свежая».

Теперь не стыдно:

http://artpolikarpov.github.io/fresh/

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

Перед использованием темы заплатите. Сколько хотите. Можно ничего.

23 мая 2014, 13:47

Вселенная

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

.life {
  margin: ≈9999pc;
}

Не лучший способ, но бывает пригождается и нам:

.hidden {
  position: absolute;
  left: -9999px;
}

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

Правильный размер 198×68

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

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

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

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

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

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

9 мая 2014, 16:54

Фоторама в Эгее 2.4

В Эгее 2.4, которая пока ещё бета, Фоторама работает из коробки. Чтобы несколько картинок превратились в фотораму, нужно поставить их названия подряд:

sun.jpg
sky.jpg
mama.jpg

И всё!

Движок не добавляет никаких опций фоторамам, кроме ширины и соотношения сторон. Настройте Фотораму на свой вкус в файле user/extras/header-pre.tmpl.php:

<script>
  fotoramaDefaults = {
    allowfullscreen: 'native', // нативный полный экран
    loop: true, // зациклить кадры
    navposition: 'top' // точки над фоторамой
  }
</script>

Список опций на сайте Фоторамы.

Всего хорошего :-)

Ctrl + ↓ Ранее