«У вас тут не работает». Как опубликовать сайт на «Тильде» без багов и опечаток

То заявка не отправляется, то на мобилке шрифты какие-то не такие, то кнопки никуда не ведут.

«У вас тут не работает». Как опубликовать сайт на «Тильде» без багов и опечаток

Привет! Меня зовут Юля, я редактор. Раньше я собирала страницы на «Тильде» сама, поэтому знаю, какая это боль, когда тебе пишут: «Ой, а у вас на сайте баг».

Юля Сабукевич
Пишу тексты для сайтов и лендингов в студии Busy 

Чтобы меньше страдать, список багов я собрала в чек-лист.

Вместе с Машей Ярцевой, сооснователем и арт-директором студии Busy, мы доработали чек-лист. И теперь используем его, чтобы убрать максимум недочетов перед тем, как прислать сайт клиенту.

Делюсь чек-листом с моими комментариями, чтобы и вы могли проверить себя или подрядчика.

💬 Текст

Тут не будет пунктов типо «убедитесь, что ваш контент работает на аудиторию и всем хорош». О смысле и стиле мы уже подумали на этапе прототипа и написания текстов. Теперь проверяем, не пропустили ли мелочи, которые могут повлиять на восприятие.

Нет опечаток и ошибок. Банально, но необходимо. Чтобы посмотреть на текст взглядом новичка и найти ошибки, которых не замечали раньше, можно прочитать текст наоборот — с конца. Если не уверены в своей пунктуации — покажите другу-копирайтеру.

Точки в конце предложений. Частая опечатка — в одном буллите стоит точка, в другом — нет.

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

Оформление списков. Если коротко, то список должен быть оформлен единообразно. В справочнике Мильчина можно прочитать тру правила для списков. Короткая версия — ниже.

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

Правильные кавычки и длинные тире. Мелочь, но влияет на восприятие. Особенно для тех, кого уже научили ставить кавычки-«елочки» и тире вместо дефиса.

Тонкое искусство отличать дефис от длинного тире ( - vs —) приходит с практикой.
Тонкое искусство отличать дефис от длинного тире ( - vs —) приходит с практикой.

Если вы сейчас смотрите на свой сайт и понимаете, что кавычки-«елочки» и точки на своих местах делу не помогут (так бывает) — приходите к нам в Busy. Поможем сделать хорошо.

Идем дальше!

🧚‍♀ Дизайн

Здесь тоже ничего нового — дотошно проверяем, что все выглядит аккуратно.

Верное отображение в разных разрешениях. Мы проверяем через i love adaptive — расширение для Гугл-хрома. А еще делаем контрольную проверку вручную на iPhone и Android.

Часто десктоп и мобилка выглядят отлично, но есть проблемы с промежуточными разрешениями, на планшет. Найти ошибку поможет тот же i love adaptive.

Слева можно выбрать устройства и системы для теста.
Слева можно выбрать устройства и системы для теста.

• Типографика без косяков. Проверить, что нигде не закрался системный шрифт, не «скачет» кегль (везде были заголовки одного размера, а один вдруг меньше или больше). Также стоит посмотреть с двух браузеров и убедиться, что везде отображается верный шрифт.

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

Для сжатия картинок на vc тоже подходит!
Для сжатия картинок на vc тоже подходит!

🖥 SEO и отображение сайта

• Верное название страницы в браузере. Бывает так, что страница опубликована, а название осталось рабочим, что-то в духе «new main ver 2». Поменять название страницы и ее описание можно в настройках.

Настройки —> Заголовок.
Настройки —> Заголовок.

• Бейджик для соцсетей. Бейджик — это мини-изображение, превью сайта, которое появляется, когда вы публикуете ссылку, например, на Фейсбуке. Размер бейджика — 1200х630. На бейджике изображения и буквы должны быть крупными. Мелкие иконки и теги будут нечитаемыми. Бейджик можно также добавить в настройках страницы.

• Расставлены заголовки H1-H2. H1 влияет на поисковую выдачу, поэтому выделять как H1 самый важный заголовок, один на страницу.

• Прописаны alt для изображений. Сеошники говорят, что прописанные альты тоже влияют на выдачу. Мы им верим, поэтому прописываем в alt, что изображено на картинке.

H1-H2 и alt — это минимум из того, что касается SEO. Подробнее про оптимизацию сайта на Тильде под поисковики можно прочитать в их гайде.

• Нет галочки на «запрет индексации». Ее могли поставить случайно или специально, пока страница еще была в разработке. Проверьте, что галочки нет, а если была — отправьте страницу в Google search console, чтобы она снова индексировалась.

Настройки страницы —> SEO —> скролим до конца —> проверяем, что галочки нет.
Настройки страницы —> SEO —> скролим до конца —> проверяем, что галочки нет.

• Страница 404. Если все-таки что-то сломается, пользователь не потеряется, а перейдет на 404. Вот инструкция от Тильды, как назначить страницу 404.

🆗 Кнопки и ссылки

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

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

Совет: рекомендуем создавать header и footer как отдельные страницы на Тильде. Иначе в какой-то момент вы измените что-то в футере на одной странице и забудете изменить это на других. В итоге — битые ссылки и запутавшиеся пользователи.

Так выглядит сайт на Тильде, когда назначен хедер, футер и страница 404. 
Так выглядит сайт на Тильде, когда назначен хедер, футер и страница 404. 

• Плавный скрол для якорных ссылок. Модификатор делает так, чтобы пользователь не «скакал» по странице после нажатия кнопки, например, а плавно «катился». Ставим модификатор внизу страницы.

Ищем в библиотеке блок T178.
Ищем в библиотеке блок T178.

💰 Формы

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

• Форма есть. Просто перепроверьте.

• Подключена Тильда CRM или Гугл таблица. Это необязательно, но удобно, если у вас нет свой CRM. Все заявки будут храниться в одном месте. Главное — не делать доступ по ссылке для Гугл-таблицы, иначе она будет открыта для всех в интернете.

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

• Соглашение на обработку персональных данных. Должна быть галочка или предупреждение в стиле «нажимая на кнопку, вы соглашаетесь на обработку персональных данных».

Теперь все! Можно наконец-то публиковать и делиться! Или нет? Если есть пункт, который я не учла — пишите в комментариях.

99
Начать дискуссию