{"id":14253,"url":"\/distributions\/14253\/click?bit=1&hash=c3df30ba63239cdfca60f49674c864ab5b6179d6b87a2c008a77e9857fa505d2","title":"\u041f\u0435\u0440\u0432\u0430\u044f \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u0430\u044f VR-\u0438\u0433\u0440\u0430 ","buttonText":"\u041f\u043e\u043a\u0430\u0436\u0438\u0442\u0435","imageUuid":"9a033227-147f-59b6-bc50-01b0d0cc9f0e"}

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

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

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

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

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

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

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

💬 Текст

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

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

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

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

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

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

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

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

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

Идем дальше!

🧚‍♀ Дизайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

💰 Формы

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

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

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

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

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

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

0
Комментарии
-3 комментариев
Раскрывать всегда