💻 Многие давно работают из дома. Многие попробовали этот формат только на прошлой и позапрошлой неделе из-за карантина.

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

Открывайте tilda.cc на компьютере, фотографируйте ваше рабочее место и присылайте через форму: tildoshnaya.com/workspace

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

https://tildoshnaya.com/workspace

Проводите время дома с удовольствием. Больше двигайтесь, попробуйте домашние тренировки или йогу, начните медитировать, научитесь рисовать или играть на гитаре. И берегите себя. Все будет хорошо 💛

🌄 Как оптимизировать изображения для сайта

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

1. Для иконок и иллюстраций используйте векторный формат SVG. Он в десятки раз меньше png или jpg и не теряет в качестве при масштабировании.

2. Не делайте размер изображений «с запасом». Для полноэкранных обложек загружайте изображения шириной 1680px. Для картинок внутри контента рассчитайте ширину по формуле: {количество колонок}*100  – 40px

3. Сжимайте картинки, но не увлекайтесь. Визульно изображение должно оставаться качественным. Используйте TinyPNG и Squoosh. Старайтесь добиться размера до 300 кб, идеально — до 100 кб.

4.  Дайте изображениям нормальные названия файлов на латинице. Не оставляйте DC14353.jpg, а назовите файл my-company-office.jpg — Яндекс и Google учитывают то, как называется файл картинки. Это добавит баллов для SEO.

5. Задайте альтернативный текст изображениям (alt атрибут). Поисковики поймут, что вы структурируете контент для поисковых роботов и добавят баллов всей странице. А еще ваши изображения будут участвовать в поиске по картинкам и смогут принести дополнительные переходы.


Подробнее про Alt атрибуты
— Добавляйте alt-атрибуты к уникальным изображениям. Alt не нужно ставить на иконки, фоновые изображения, фотографии с фотостоков.
— Делайте alt длинной 70-250 символов. Без переизбытка ключевых слов.
— Для разных видов одного товара интернет-магазина можно использовать одинаковые alt, но добавьте в конце Вид1, Вид2 и т.п.

В Тильде вы можете задать alt-атрибуты почти в каждом блоке,  где картинка не используется в качестве фона: http://help-ru.tilda.ws/search-engine#alt

В Zero Block можно задать alt в настройках элемента «Изображение». Если вы используйте элемент «shape» с картинкой на фоне, alt-атрибут задать не получится. Это элемент другого типа в HTML — к нему alt не применим.

Полезная функция — настройка элемента «pointer events» в Zero Block, которая позволяет оставлять объекты видимыми визуально, но не видимыми для мыши

Зачем нужна. Делает элемент активным (auto) или неактивным (none) при наведении и клике мышкой. Если вы разместите полупрозрачный shape поверх формы с кнопкой и выберите в настройках элемента > Pointer events > none, посетитель сайта сможет заполнить и отправить форму. Плашка не будет мешать взаимодействовать с формой.

Как использовать. Вы сможете размещать графические элементы или полупрозрачные цветные фигуры поверх контента с которым можно взаимодействовать. Например, можно сделать собственный дизайн кнопок слайдера в Zero Block и поместить их поверх стандартных со значение none в Pointer Events.

Если вы еще не смотрели серию документальных фильмов Abstract: The Art of Design, сейчас отличная возможность это сделать. Каждая серия вдохновляет по-разному, но для тех кто связан с веб-дизайном советуем в первую очередь эти выпуски:

Сезон 1
#1 Иллюстратор Кристоф Ниман
#6 Графический дизайнер Пола Шер

Сезон 2
#1 Современный художник Олафур Элиассон (желтая лампа вас удивит)
#5 Арт-директор Instagram Ян Спалтер
#6 Дизайнер шрифтов Джонатан Хёфлер

Посмотреть можно на Netflix. Или вы уже там или сможете бесплатно посмотреть на 30-дневном триале. https://www.netflix.com/ru/title/80057883

🔥 Через неделю стартует новый поток Tilda PRO

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

Сейчас заканчивается первый поток. Мы смотрим, как студенческие работы попадают в официальную подборку madeontilda, как проект с 2-часового дизайн батла в рамках курса получаeт ленточку на Behance, как люди начинают радоваться жесткой критике, потому что она тащит их вперед. Уверены, что студенты этого выпуска не раз всколыхнут комьюнити Тильды своими будущими проектами.

Посмотрите несколько студенческих работ. Отметим, что люди не тратили на них недели или месяцы. Темп курса очень высокий, поэтому им пришлось делать все очень быстро:
> http://nikelegend.tilda.ws/
> https://ecodecorpro.ru/
> https://olgazonova.com/
> http://krossovki-store.tilda.ws/
> https://livehome.tilda.ws/
> https://nikeairforce.xyz/
> http://fitolabstore.tilda.ws/


В следующий понедельник начнется новый поток. Если вы уже хорошо освоили Тильду, создали несколько проектов и хотите сделать большой скачок, приходите на курс: https://tildoshnaya.pro/pro  👈

📆 Программа курса

4 недели занятий и 2 недели экзаменационной практики, после которых вы добавите 3 мощных проекта в портфолио.

1-4 недели
— Емкие видеоуроки и короткие практические задачи
— Прямые эфиры с кураторами Максимом Ширко и Кириллом Жарким для разборов заданий и ответов на вопросы
— Закрытый живой телеграм-чат курса с Tilda-экспертами и кураторами
— Мастер-классы приглашенных экспертов: о SEO и аналитике, работе с сетками, секретах работы на фрилансе в кризис, минимализме в веб-дизайне, работе с графикой, Awwwards и других конкурсах
— Бесплатный доступ к Тильде на время обучения

5-6 недели
— Практика: вы следаете 3 сложных разноплановых проекта под руководством кураторов

Полезная функция для интернет-магазина — в блоках с единичными карточками товара ST200, ST205, ST210, ST215, ST405, ST500, ST505, ST510 можно подключать позиции из каталога.

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

ID вы сможете найти в каталоге, в самом низу панели редактирования товара.

Сделали подборку проектов, которые студенты готовили в качестве первого домашнего задания на курсе Tilda PRO. Крутой факт — многие работы уже попали в официальную подборку #madeontilda. А у ребят осталось еще 2 домашки 🙂

👉 http://fitolabstore.tilda.ws/
👉 http://techwearstore.tilda.ws/
👉 http://plants-design.tilda.ws/
👉 http://olgazonova.com/
👉 http://nikelegend.tilda.ws/
👉 https://ecodecorpro.ru/
👉 https://nikeairforce.xyz/
👉 https://livehome.tilda.ws/
👉 http://exotic-plants.tilda.ws/
👉 http://ogstore.tilda.ws/
👉 http://converse-iconic.tilda.ws/hall-of-fame
👉 http://biere-sainte.tilda.ws/
👉 http://krossovki-store.tilda.ws/

Второй поток обновленного PRO курса стартует уже в понедельник. А в воскресенье в 13:00 пройдет бесплатный вводный урок для всех желающих. Записаться можно здесь: https://tildoshnaya.pro/pro#openlesson

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

Собрали понятные не только программистам разборы по базовым терминам из Журнала КОД:

Что такое домен и как его получить
👉 https://thecode.media/domain/

Зачем нужен хостинг
👉 https://thecode.media/host/

Как устроен интернет: адреса (IP и DNS)
👉 https://thecode.media/dns/

SSL-сертификаты и безопасный интернет
👉 https://thecode.media/ssl/


И сохраните заметку, где мы собрали только определения из статей на одной странице: https://tildoshnaya.com/tpost/ghx0mtorm9-tehnicheskii-minimum-dlya-veb-dizainera

В Тильде в настройках профиля появилась галочка «Участвовать в тестировании новых функций».

Вы знаете, что делать, если хотите пробовать новые фичи первыми 🙂

Во вторник Максим Ширко провел крутой мастер-класс по типографике на канале Тильды. Рассказал о подборе шрифтов и принципах верстки текста на сайте.

Посмотрите запись эфира, если пропустили: https://youtu.be/Wx64JEY1wKA

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

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

👉  https://tildoshnaya.com/design-quiz

И поделитесь ссылкой с друзьями, если вам понравится тест ♥️

В Потоках появилась поддержка комментариев 💬

Теперь для статей и новостей можно добавить html-код любого виджета для комментариев. В настройках потока на новой вкладке «Комментарии».

Как получить код виджета для сервисов Disqus и Hypercomments можно найти в инструкции Тильды: http://help-ru.tilda.ws/comments

🎯 Интенсив по маркетингу пройдет с 27 по 30 апреля

За 4 дня вы научитесь самостоятельно делать внутреннюю SEO-оптимизацию, настраивать полезную аналитику, возвращать посетителей с помощью ретаргетинга. В конце получите практические советы, как повысить конверсию.

👏 Записывайтесь: https://tildoshnaya.pro/marketing

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

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

Что такое метатеги Title и Description. Почему они важны для SEO-продвижения.

Метатеги Title и Description — заголовок и описание страницы для поисковых роботов. Они не видны на странице, но Яндекс и Google использует их для формирования результатов поисковой выдачи. Если добавить ключевой запрос внутрь title и description, странице будет проще вырасти по нему в поиске.

Title и Description — одни из важнейших настроек для SEO-продвижения.


Как составить Title и Description:

• Title и Description должны передать поисковой системе информацию о том, чему посвящена страница

• Title и Description должны быть уникальными для каждой страницы

• Title и Description не должны совпадать

• Рекомендуемая длина Title — 60-70 символов с пробелами

• Рекомендуемая длина Description — 60-320 символов с пробелами (оптимальная — 170)

• Добавьте в Title самый важный ключевой запрос по которому вы хотите видеть страницу на высоких позициях в поиске

• Description пишите для людей

• Title и Description должны мотивировать перейти на страницу, поэтому можно добавить транзакционные слова: купить, заказать, акция. Но важно, чтобы сниппет не выглядел «кликбейтом».


Как добавить Title и Description для сайта на Тильде: http://help-ru.tilda.ws/search-engine#title-description

Полезная функция в Zero Block — Overflow

В настройках рабочей области нулевого блока есть настройка Overflow с вариантами значений Hidden, Visible, Auto

Hidden — элементы, которые попадут за пределы контейнера Zero блока не будут отображаться на экране. Например, если часть графического элемента выйдет за пределы по высоте — она обрежется.

Visible — элементы за пределами контейнера будут отображатся поверх блоков, которые находятся ниже.

Auto — если элементы будут выходить за пределы контейнера — появится полоса прокрутки. И по вертикали и по горизонтали. С overflow auto можно сделать блоки с горизонтальной прокруткой на десктопных и мобильных устройствах.

В четверг в 13:00 в прямом эфире посмотрим ваши сайты на Тильде с разных сторон.

Макс Ширко даст советы по дизайну и верстке, а маркетолог Рома Яковенко подскажет по структуре и тексту.

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

Нажмите 🔔 Напомнить на странице трансляции, чтобы не пропустить начало стрима: https://youtu.be/GPrb5S4357c

Через час в прямом эфире будем разбирать ваши сайты на Тильде. Дадим советы по дизайну, структуре и контенту. Приходите на эфир и отправляйте ссылки на ваши проекты в чат.

Не пропустите: https://youtu.be/GPrb5S4357c