Артём Поликарпов http://artpolikarpov.ru/ E2 (v3254; Aegea) Дурашки http://artpolikarpov.ru/all/durashki/ http://artpolikarpov.ru/all/durashki/ http://artpolikarpov.ru/all/durashki/ <p>Тдщь! Наконец-то записали мой альбом детских песен, сочинённый ещё в 2002-м. Аккомпанирует — Анна Давидчик. Время исполнения: ≈10 минут.</p> <div class="e2-text-audio"> <a class="jouele" data-space-control="true" href="/audio/Durashki-1.mp3" >Дурашки — 1. Мячик и мальчик</a> </div> <div class="e2-text-audio"> <a class="jouele" data-space-control="true" href="/audio/Durashki-2.mp3" >Дурашки — 2. Рыбалка</a> </div> <div class="e2-text-audio"> <a class="jouele" data-space-control="true" href="/audio/Durashki-3.mp3" >Дурашки — 3. Апрель</a> </div> <div class="e2-text-audio"> <a class="jouele" data-space-control="true" href="/audio/Durashki-4.mp3" >Дурашки — 4. Красный Первомай</a> </div> <div class="e2-text-audio"> <a class="jouele" data-space-control="true" href="/audio/Durashki-5.mp3" >Дурашки — 5. Баран</a> </div> <div class="e2-text-audio"> <a class="jouele" data-space-control="true" href="/audio/Durashki-6.mp3" >Дурашки — 6. Кот</a> </div> <div class="e2-text-audio"> <a class="jouele" data-space-control="true" href="/audio/Durashki-7.mp3" >Дурашки — 7. Крокодил</a> </div> <div class="e2-text-audio"> <a class="jouele" data-space-control="true" href="/audio/Durashki-8.mp3" >Дурашки — 8. Лев</a> </div> <div class="e2-text-audio"> <a class="jouele" data-space-control="true" href="/audio/Durashki-9.mp3" >Дурашки — 9. Новый год</a> </div> <p>С нетерпением жду ваших отзывов. Готов выступить с этими песнями в детском саду или музыкальной школе, зовите :-)</p> Tue, 26 Sep 2017 17:40:38 +0400 Бочка — чёрная http://artpolikarpov.ru/all/bochka-chyornaya/ http://artpolikarpov.ru/all/bochka-chyornaya/ http://artpolikarpov.ru/all/bochka-chyornaya/ <p>Не понимаю ребят, которые красят бочку красным. Бочка — чёрная!</p> <div class="e2-text-picture"> <div class="fotorama" data-width="540" data-ratio="1"> <img src="/pictures/blackkick1@2x.jpg" width="540" height="540" alt="kik1" /> <img src="/pictures/blackkick2@2x.jpg" width="540" height="540" alt="kik2" /> <img src="/pictures/blackkick3@2x.jpg" width="540" height="540" alt="kik3" /> </div> </div> <p>Интересно, кто-нибудь ещё читает блог... :-)</p> Tue, 04 Jul 2017 00:57:49 +0400 Как собрать бургер http://artpolikarpov.ru/all/kak-sobrat-burger/ http://artpolikarpov.ru/all/kak-sobrat-burger/ http://artpolikarpov.ru/all/kak-sobrat-burger/ <div class="e2-text-picture"> <img src="/pictures/FullSizeRender@2x.jpg" width="1173" height="1567" alt="" /> <div class="e2-text-caption">Здесь всё прекрасно, особенно закрывающий тег сверху</div> </div> Tue, 20 Oct 2015 23:28:18 +0400 Вёрстка телефонов http://artpolikarpov.ru/all/vyorstka-telefonov/ http://artpolikarpov.ru/all/vyorstka-telefonov/ http://artpolikarpov.ru/all/vyorstka-telefonov/ <p>Номера телефонов на многих сайтах вставлены плохо, даже на сайтах, якобы оптимизированных под телефон. Прямо невозможно пользоваться.</p> <p>Вот дизайнер убрал код страны и вынес за скобки код города — сделал вёрстку поопрятнее:</p> <div class="e2-text-picture"> <img src="/pictures/IMG_7200@2x.png" width="320" height="568" alt="" /> </div> <p>...и лишил меня возможности позвонить по номеру в один клик:</p> <div class="e2-text-picture"> <img src="/pictures/IMG_7201@2x.png" width="320" height="568" alt="" /> </div> <div class="e2-text-picture"> <img src="/pictures/IMG_7202@2x.png" width="320" height="568" alt="" /> <div class="e2-text-caption">«Неправильно набран номер. Пожалуйста, уточните номер и перезвоните».</div> </div> <p>Дальше два пути:</p> <ol start="1"> <li>Записать номер на оперативную память в голове и руками набрать его, добавив нужный префикс.</li> <li>Попробовать обойтись телефоном.</li> </ol> <p>Выбираю второй путь, копирую:</p> <div class="e2-text-picture"> <img src="/pictures/IMG_7204@2x.png" width="320" height="568" alt="" /> </div> <p>С третьей попытки вставляю номер в «Телефон», но отредактировать не могу — курсора нет, удалять и добавлять цифры можно только с конца:</p> <div class="e2-text-picture"> <img src="/pictures/IMG_7206@2x.png" width="320" height="568" alt="" /> </div> <p>Ладно, иду в блокнот:</p> <div class="e2-text-picture"> <img src="/pictures/IMG_7207@2x.png" width="320" height="568" alt="" /> </div> <p>Эээ — <nobr>tel:(812)%20234-2646</nobr> — фигня какая-то. За несколько попыток исправляю номер — <nobr>+7 (812) 234-26-46</nobr>. Не был бы разработчиком, не справился бы, ведь простые пользователи не знают, что <nobr>%20</nobr> — это пробел.</p> <p>Плохо.</p> <p><hr></p> <p>Совет. Показывайте на сайтах полные номера, это нормально:</p> <pre class="e2-text-code"><code>Наш телефон: +7 (812) 234-26-46</code></pre><p>Ну или прячьте их в атрибут <tt>href</tt>, вот так:</p> <pre class="e2-text-code"><code>Наш телефон в СПб: &lt;a href=&quot;tel:+78122342646&quot;&gt;234-26-46&lt;/a&gt;</code></pre><p>С номерами <nobr>8 800 xxx-xx-xx</nobr> обычно всё хорошо.</p> Sun, 13 Jul 2014 14:52:06 +0400 #666 http://artpolikarpov.ru/all/666/ http://artpolikarpov.ru/all/666/ http://artpolikarpov.ru/all/666/ <div class="e2-text-picture"> <img src="/pictures/666.png" width="1000" height="300" alt="cover white transparent" /> </div> <p>Дизайнеры говорят, что нельзя использовать чистые оттенки серого, нужно обязательно подмешивать чего-нибудь цветного — чуть-чуть голубого, или капельку красного. Типа, в жизни же не бывает чистого серого, полностью белого или чёрного.</p> <p>Дизайнеры забывают, что мы живём не в виртуальной реальности. Между монитором и глазами есть воздух, от глаз до мозга тоже не близкая дорога, за окном светит солнце, ночью в мониторе отражается торшер, на мониторе пыль, да и откалиброван он хреново. А кто-то вообще дальтоник. Природа сама подмешает всякого разного в ваши #000, #666 и #FFF — и цвета, и шума — никто не увидит их такими же, как видели вы в своём воображении.</p> <p>Не стесняйтесь, используйте чистые цвета. Не страдайте, проверяя всю палитру на наличие в ней ровно трёх процентов серобуромалинового. Будьте проще. Камон.</p> Wed, 02 Jul 2014 12:08:03 +0400 Красивые письма убивают конверсию? http://artpolikarpov.ru/all/krasivye-pisma-ubivayut-konversiyu/ http://artpolikarpov.ru/all/krasivye-pisma-ubivayut-konversiyu/ http://artpolikarpov.ru/all/krasivye-pisma-ubivayut-konversiyu/ <div class="e2-text-picture"> <img src="/pictures/code.jpg" width="1124" height="560" alt="cover white transparent" /> </div> <p>Недавно на Медиуме вышла интересная заметка о том, что <a href="https://medium.com/@giuliano/good-looking-emails-are-killing-your-customer-conversations-ac3b8da9a7d9">красивые шаблонные рассылки плохо работают</a> и лучше всего писать письма плейн-текстом. В Гетвеаре как раз подошло время для летнего письма клиентам, и мы решили замутить А/Б-тест оформления рассылки.</p> <p>Мне казалось, что <a href="http://mailchimp.com/">Мейлчимп</a> даёт какие-то инструменты для этого, но нет. Там есть понятие «А/Б-кампания», но она работает не так, как хочется: тестирует или заголовок, или имя отправителя, или время отправки на небольшом сегменте пользователей, и затем отправляет письмо-победитель оставшимся пользователям.</p> <p>Пришлось выгрузить список адресов, <a href="http://share.artpolikarpov.ru/eY6X">небольшим скриптом</a> разбить список на два сегмента, выгрузить сегменты обратно в Мейлчимп, сделать две отдельных кампании с разным оформлением, и разными ютм-метками, чтобы всё посчитать.</p> <p>Письмо в шаблоне выглядело так:</p> <div class="e2-text-picture"> <img src="/pictures/Screen-Shot-2014-06-30-at-12.27.42@2x.jpg" width="685" height="804" alt="" /> </div> <p>Письмо «без дизайна»:</p> <div class="e2-text-picture"> <img src="/pictures/Screen-Shot-2014-06-30-at-12.29.06@2x.jpg" width="685" height="804" alt="" /> <div class="e2-text-caption">От картинок решили не избавляться, так что это не плейн-текст, а плейн-хтмл.</div> </div> <p>Результаты теста:</p> <div class="e2-text-table"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td style="text-align: center"></td> <td><strong>Шаблон</strong></td> <td><strong>«Без дизайна»</strong></td> </tr> <tr> <td>Открыли письмо</td> <td style="text-align: right">53,7%</td> <td style="text-align: right">56,2%</td> </tr> <tr> <td>Перешли на сайт</td> <td style="text-align: right">6,9%</td> <td style="text-align: right">7,9%</td> </tr> <tr> <td>Заказали джинсы</td> <td style="text-align: right">7,2%</td> <td style="text-align: right">3,9%</td> </tr> <tr> <td>Отписались</td> <td style="text-align: right">0,6%</td> <td style="text-align: right">0,7%</td> </tr> </table> </div> <p>Процент открытия выше 50% — это круто, у Гетвеара очень лояльные клиенты, в среднем по икомерсу письма открывают всего 13,1% адресатов, если верить Мейлчимпу. На сайт перешло тоже относительно много человек — ≈7%, тогда как среднее по икомерсу — 2%.</p> <p>В строке «заказали джинсы» только те транзакции, которые мы смогли отследить по ютм-метке, это ничтожные 16,5% от всех заказов с купоном, указанным в письме — остальные переходили на сайт напрямую. Поэтому реальная разница продаж неизвестна. Но по полученным цифрам красивое письмо выигрывает с небольшим перевесом: 0,5% открывших заказали джинсы, конверсия простого письма — 0,3%.</p> <p><strong>Наш вывод — для рекламно-новостных рассылок вполне допустимо использовать шаблон «с дизайном».</strong></p> <p>Это никак не опровергает ту заметку на Медиуме, ведь там говорится о личных письмах. В личных и сервисных письмах никакая красота не нужна, даже и проверять не хочется.</p> <hr /> <p>Краткое содержание <a href="http://us7.campaign-archive2.com/?u=c8132844f9f527216d51fde2b&id=dbbc872757&e=3f0d83b334">рассылки</a>:</p> <ol start="1"> <li>Шорты за $70. Больше шорты не стоят столько же сколько и целые джинсы.</li> <li>Карго. Свободные мужские джинсы с накладными карманами на бёдрах.</li> <li>Новый чёрно-синий цвет. Выглядит также как сырой деним, но не красится.</li> <li>Волшебный купон <i>12737CP1C7W0B</i> на скидку 30%.</li> </ol> <p>Купон действует ещё до четверга. Воспользуйтесь и вы.</p> Mon, 30 Jun 2014 15:00:16 +0400 :—) http://artpolikarpov.ru/all/smile/ http://artpolikarpov.ru/all/smile/ http://artpolikarpov.ru/all/smile/ <div class="e2-text-picture"> <img src="/pictures/;)@2x.png" width="361" height="238" alt="" /> </div> <p>Уверен, что это я придумал вип-смайлики с тире вместо дефиса, но не расстроюсь если кто-то докажет обратное.</p> Mon, 23 Jun 2014 23:39:39 +0400 Что такое хорошо и что такое плохо http://artpolikarpov.ru/all/chto-takoe-horosho-i-chto-takoe-ploho/ http://artpolikarpov.ru/all/chto-takoe-horosho-i-chto-takoe-ploho/ http://artpolikarpov.ru/all/chto-takoe-horosho-i-chto-takoe-ploho/ <div class="e2-text-picture"> <img src="/pictures/chto-takoe-horosho@2x.jpg" width="220" height="220" alt="" /> </div> <p>Не вникать в смысл дизайна, забывать о полезном действии и верстать макет по пикселям, в лоб. Плохо.</p> <p>Понимать задачу. Писать спецификации до начала работы. Хорошо.</p> <p><hr></p> <p>Полагаться только на свои силы. Плохо.</p> <p>Общаться с коллегами. Радоваться их успехам. Помогать в трудную минуту. Хорошо.</p> <p><hr></p> <p>Надолго застревать на сложных элементах и не обсуждать решение или возможность упрощения. Плохо.</p> <p>Планировать время, делать работу в срок без начальника с палкой. Хорошо.</p> <p><hr></p> <p>Валить вину на других. Тыкать пальцем и не предлагать решения. Говорить «так было в дизайне». Плохо.</p> <p>Не просить дизайнера отрисовать макет для разной ширины браузера, а самостоятельно предложить разумную «резину». Хорошо.</p> <p><hr></p> <p>Паниковать. Смотреть телек. Плохо.</p> <p>Отдыхать. Точить пилу. Хорошо.</p> <p><hr></p> <p>Радоваться чужим ошибкам. Критиковать, держать обиду. Плохо.</p> <p>Брать ответственность на себя, руководствоваться принципами «если не я, то кто?» и «сделать, а потом извиниться». Хорошо.</p> <p><hr></p> <p>Умалчивать о замеченных проблемах, чтобы, не дай бог, не добавилась ещё одна тудушка. Плохо.</p> <p>Видеть проблемы там, куда не добрался дизайнер. Хорошо.</p> <p><hr></p> <p>Хранить удачные решения и трюки в секрете. Плохо.</p> <p>Делиться знаниями и идеями. Вести блог. Выступать на конференциях. Хорошо.</p> <p><hr></p> <p>Психовать, когда арт-директор с дизайнером переделали макет целиком. Плохо.</p> <p>Не успокаиваться и улучшать продукт после релиза. Хорошо.</p> <p><hr></p> <p>Закрывать глаза на стиль кода, использовать нечитаемые названия переменных и классов. Плохо.</p> <p>Документировать. Хорошо.</p> <p><hr></p> <p>Считать неразрывные и тонкие пробелы дизайнерской блажью. Плохо.</p> <p>Ненавидеть <a href="https://github.com/artpolikarpov/upyachka.js">упячку</a>, задавать картинкам ширину и высоту. Управлять внешним видом страницы во время загрузки. Хорошо.</p> <p><hr></p> <p>Не заботиться о деградациях. Плохо.</p> <p>Заботиться о доступности данных. Хорошо.</p> <p><hr></p> <p>Прокрастинировать, полируя неважные мелочи, заниматься рефакторингом ради рефакторинга. Плохо.</p> <p>Расставлять приоритеты, отсекать лишнее. Меньше обещать. Хорошо.</p> <p><hr></p> <p>Ничем не интересоваться, работать по старинке. Пренебрегать семантикой и микроформатами. Плохо.</p> <p>С удовольствием исследовать новые области, читать черновики спецификаций на английском, пробовать новые технологии в бою. Хорошо.</p> <p><hr></p> <p>Не усложнять жизнь, забывая об исключениях, изменяемых данных, пользовательских ошибках. Плохо.</p> <p>Любить нестандартные элементы интерфейса. Выходить из зоны комфорта, браться за самые сложные проекты. Хорошо.</p> <p><hr></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Плохо.</p> <p>Придумывать уместные анимации интерфейса, не требуя разжевать каждый кадр. Хорошо.</p> <p><hr></p> <p>Не оптимизировать разметку, картинки, стили и скрипты. Плохо.</p> <p>Бороться с рутиной автоматизацией и готовыми решениями. Хорошо.</p> <p><hr></p> <p>Думать, что «кроссбраузерно» — одинаково во всех браузерах. Плохо.</p> <p>Писать автоматические тесты, тестировать руками, не полагаться только на тестировщиков. Хорошо.</p> <p><hr></p> <p>Не делать собственные проекты. Плохо.</p> <p>Пользоваться своими интерфейсами. Хорошо.</p> <p><hr></p> <p>Притворяться хорошим. Плохо.</p> <p>Видеть, в чём сегодня был недостаточно хорош, и завтра становится лучше. Хорошо.</p> Sat, 14 Jun 2014 14:12:23 +0400 Моя тема для Эгеи http://artpolikarpov.ru/all/moya-tema-dlya-egei/ http://artpolikarpov.ru/all/moya-tema-dlya-egei/ http://artpolikarpov.ru/all/moya-tema-dlya-egei/ <p>Меня часто просили поделиться своей темой оформления для Эгеи. Но там было столько хардкода и подсебятины, что мне было стыдно кому-то её показывать.</p> <p>Недавно Илья выпустил <a href="http://ilyabirman.ru/meanwhile/all/aegea-2-4/">новую Эгею 2.4</a>, в которой куча всего и новая базовая тема «без дизайна». Теперь можно написать свою тему практически с нуля, не наследуя развесистую «Классику».</p> <p>В общем, я решил открыть свою тему для всеобщего использования. Около месяца пилил и полировал, вчера решил заверстать длинную страницу о ней, упарился пока верстал и решил сделать тему платной, а сегодня вроде всё закончил и придумал название — «Свежая».</p> <p>Теперь не стыдно:</p> <blockquote> <p>**<a href="http://artpolikarpov.github.io/fresh/**">http://artpolikarpov.github.io/fresh/**</a></p> </blockquote> <p>Я постарался сохранить все возможности штатных тем, включая дополнительные блоки. Тема работает только с самой последней сборкой Эгеи. Тему можно наследовать и изменять. Исходный код <a href="https://github.com/artpolikarpov/fresh/">на Гитхабе</a>.</p> <p>Перед использованием темы заплатите. Сколько хотите. Можно ничего.</p> Sun, 01 Jun 2014 00:14:44 +0400 Вселенная http://artpolikarpov.ru/all/vselennaya/ http://artpolikarpov.ru/all/vselennaya/ http://artpolikarpov.ru/all/vselennaya/ <p>Расстояния во Вселенной специально такие немыслимо огромные, чтобы мы не могли встретится нос к носу с представителями внеземных цивилизаций. Видимо, у Природы по-другому не получилось разграничить жизни, поэтому она захардкодила очень большие отступы в парсеках:</p> <pre class="e2-text-code"><code>.life { margin: ≈9999pc; }</code></pre><p>Не лучший способ, но бывает пригождается и нам:</p> <pre class="e2-text-code"><code>.hidden { position: absolute; left: -9999px; }</code></pre> Fri, 23 May 2014 13:47:00 +0400