Чек лист
Как сделать загрузку сайта более быструю,
а интерфейс понятным и удобным для пользователя.
Оптимизируем все изображения
Как правильно сохранять изображения. Сервисы сжатия PNG. Спрятанный функционал Тильды.
Помогаем ориентироваться по сайту
Анимируем все элементы, на которые можно нажать. Подсвечиваем пункты меню.
Плавный скролл
Как его добавить и его преимущества.
Эффект загрузки сайта
Как он влияет на восприимчивость сайта.
Кликабельный номер телефона
Почему это нужно делать и как это повысит конверсию.
Оптимизация изображений
Раньше тут был фотошоп, но теперь я откопал крутой онлайн сервис, который точно также сжимает фотки. Можно и обрезать еще.
Давайте разберем, что и как нужно делать, чтобы получить правильный результат:
Размер изображений
Tilda Publishing разрешает загружать изображения шириной не больше 1680 px, а при включении дополнительной функции не больше 1920 px.
Тем самым мы выставляем нужный нам размер при сохранении изображения и экономим лишние килобайты загрузки страницы.
Просто загружаем туда фото, справа в настройках указываем размер и качество сжатия. Сохраняем и загружаем в тильду
Настройка навигации по сайту
Чтобы пользователь сайта не терялся на сайте, нужно помочь ему с ориентированием.
Давайте разберем самые основные моменты:
Подсвечивание пунктов меню
В настройках блока меню, делаем цвет активного блока меню отличающимся от основного.

Настройки > Пункты меню > Активный пункт меню: цвет, подчеркивание
Благодаря этому действию, пользователь всегда будет в курсе, на каком именно разделе он находится
Настройка кнопок
На все кнопки, на которые можно нажать, обязательно нужно проставить смену цвета по ховеру. Данная функция показывает пользователю, что эта кнопка точно работает и при нажатии на нее произойдет какое-то действие.
ПРИМЕР
ПРИМЕР
Плавный и правильный скролл
Чтобы не путать пользователя и не пугать резкими скачками по сайту, мы добавляем блок плавного скролла
T178 в разделе "Другое"
Преимущества блока
Данный блок делает скролл по сайту плавным и пользователь понимает, куда он попал:
«Незаезжающая» шапка
Чтобы при навигации по меню, само меню не перекрывало часть контента, мы в блоке, в настройках, указываем необходимое расстояние.

Настройки блока T178 > Дополнительное смещение px
Дополнительное смещение ставим равную высоте шапки.
Эффект загрузки сайта
Для того, чтобы посетитель сайта не видел поэтапную прогрузку сайта, мы добавляем блок:
T228 в разделе "Другое"
Чего мы добьемся
Первые пол секунды загрузки сайта будет плавный белый экран, после чего он исчезнет и покажет весь контент прогруженным.
Отключение Lazy Load
В некоторых случая, чтобы все корректно работало, необходимо отключить Lazy Load изображений.

Настройки сайта > Еще > Выключить Lazy Load
Кликабельный номер телефона
Чтобы упростить пользователю жизнь, нужно обязательно делать кликабельные номера телефонов, почту и ссылки на все соц. сети.
Как это сделать в Zero блоке
Нажимаете на текстовый элемент с номером телефона. Справа в настройках ищите раздел "LINK", добавляете ссылку:
Как это сделать в стандартном блоке
Нажимаете 2 раза на нужный текст > Выделяете текст > в верхнем левом углу добавляете ссылку.
Полезные сервисы
Бесплатный пак сервисов для поиска иконок, картинок, видео. Все то, чем пользуюсь лично.