«Спиши, но только чтобы не точь-в-точь» или альтернативы для дизайнера в нынешних реалиях

Pixso — аналог Figma со схожим функционалом. Платформа совмещает в себе весь процесс создания прототипов, проектирования и поставки.

Достоинства:

🤍 В Pixso доступны функции, аналогичные тем, что предлагает Figma. В некоторых моментах аналог даже превосходит оригинал:

— иерархия страниц;
— коннекторы, которые можно использовать сразу;
— удобная работа с таблицами;
— лайфтайм-планы;

🤍 Участники могут совместно трудиться над проектом и обмениваться отзывами. Файлом можно делиться по ссылке, что позволяет сэкономить время.
🤍 Платформа поддерживает файлы Figma, Sketch, Adobe XD и Axure.
🤍 Программа поддерживает работу на Windows и macOS.
🤍 Используя Pixso, можно не переживать о том, что Figma может уйти из России.

Недостатки:

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

➡️Кстати, в программе также есть плагин «Dark me» от Pixcraft, с помощью которого можно создать тёмную тему для вашего проекта всего за один клик.

А что думаете вы насчет Pixso?

#Продизайн

🧐 AMP-state в почтовиках: давайте разбираться

В контексте email-верстки стейты (состояния) используются для сохранения каких-либо данных по аналогии с переменными в программировании. Управление ими происходит через события и действия.

Важно отметить некоторые неочевидные особенности:

➖Начальное состояние, заданное через <amp-state>, не будет применено при загрузке письма, а подставится только после действия пользователя (setState);

➖Mail.ru игнорирует любое задание начальных значений. То есть в данном случае myItem.el в span отобразит null после клика на кнопку:

<amp-state id="myItem">
  <script type="application/json">
    {
        "el":"some value"
    }
  </script>
</amp-state>
<span [text]="myItem.el"></span>
<button on="tap:AMP.setState({})">Кнопка</button>

При этом Gmail ее обработает корректно и мы увидим текст «some value»‎.

Какими могут быть варианты обхода этих моментов?

➖Всегда задавайте значение по-умолчанию, которое отобразится и без изменения стейта. Продолжая наш пример:

<span [text]="myItem.el">some value</span>

➖Вместо прямого использования <amp-state> используйте setState для привязки значений и их динамического обновления:

<button on="tap:AMP.setState({ myItem: { el: 'some value' } })"> 
    Кнопка 
</button> 
<div [text]="myItem.el"></div>

#How_to #AMP

Как произвести отладку AMP-письма

Ваше AMP письмо не работает и вы видите в почте обычный HTML? Давайте разберёмся, как выявить и исправить проблему:

1️⃣ Отправьте себе письмо на gmail почту.
Перейдите в Настройки/ Динамический контент/ Настройки для разработчика и укажите email отправителя. Сохраните изменения и обновите страницу.

2️⃣ Если AMP отобразилось, значит вас ещё не добавили в white-list и нужно пройти инструкцию. Если нет, то над письмом будет описана ошибка.
Самый часто встречающийся вариант это INVALID_AMP, что говорит о проблемах в вашем AMP-коде.

3️⃣Выявляем ошибку в коде:

➡️ Справа нажимаем на 3 точки и "Показать оригинал", находим блок кода с Content-Type: text/x-amp-html. Копируем весь блок в буфер и декодируем его. После чего, вставляем декодированный код в playground от Google — он подсветит ошибку.

📎Совет: чтобы избежать проблем с валидностью AMP-кода — используйте Pixcraft.

#How_to #AMP

🎉 Результаты розыгрыша:

Победитель:
1. Dmitry (@Morjodrom)

Поздравляем! Мы свяжемся с победителем для вручения приза 🥳

Проверить результаты

Как установить фавикон для email-рассылки

Аватарки повышают доверие к письмам и помогают отличать сообщения от разных отправителей. Рассмотрим как их добавить для различных почтовых провайдеров.

➡️ Mail.ru

— Подключите Постмастер для отправляющего домена для этого нажмите «Добавить домен» в шапке, укажите домен, используемый для рассылки, и подтвердите его;
— В Настройках в разделе «Настройка аватаров ваших доменов» загрузите желаемое изображение.

Требования для изображения:

⚪️ формат *.png и размер 180×180 пикселей;
⚪️ изображение чёткое и геометрически ровное при уменьшении;
⚪️ непрозрачный фон;
⚪️ отражает сферу деятельности (логотип компании или значок веб-сайта (фавикон).

➡️ Gmail

— Войдите в свой аккаунт google или селайте отдельный корпоративный и откройте личные данные;
— В разделе «Контактная информация» выберите «Электронную почту» и нажмите «Добавить дополнительный адрес»;
— Укажите адрес, который вы используете для рассылок и подтвердите его через письмо;
— Добавьте аватар: перейдите на вкладку «Главная», кликните на аватарку и загрузите изображение.

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

➡️ Яндекс

— Напишите в службу поддержки на mail@support.yandex.ru с темой запроса на добавление аватара к рассылкам;
— Укажите информацию о компании, сайт, адреса отправителей и приложите логотип в формате SVG (без вложений PNG/JPEG).

Требования к логотипу:

⚪️ круг диаметром 30px;
⚪️ иконка не должна содержать мелкий текст или большое количество элементов, должна быть читаемой в размерах 16x16 и 20x20;
⚪️ без применения масок и их наложений.

#How_to