AFINA agency
webflow

Контрольный список для вашего сайта

Мы знаем, что вы взволнованы, чтобы начать.
Вы сделали это! Вы наконец-то закончили работу над тем веб-сайтом, над которым работали несколько дней / недель / месяцев, и готовы поделиться им со всем миром. Но пока не нажимайте кнопку публикации.
Заказать разработку сайта
После уточнения деталей мы можем приступить к вашему проекту
Несмотря на то, что ничто не сделает вас счастливее, чем создать свой сайт, вы должны проверить его (и, возможно, дважды) через контрольный список нового веб-сайта из 4 частей.

Контрольный список дизайна сайта

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

Для начала обязательно проверьте свои:
  • Интервал: является ли интервал постоянным по всему сайту? У всех элементов есть достаточно места для дыхания?
  • Цвета: Вы придерживались последовательной, гармоничной цветовой палитры? Являются ли все экземпляры синей марки на самом деле синей? Вы использовали глобальные образцы?
  • Тени: Если вы использовали тени, является ли источник света постоянным для всех и каждого? Использовали ли вы те же значения размытия, непрозрачности и разброса?
  • Типография: Является ли ваш стек шрифтов логичным и непротиворечивым? Соответствуют ли размеры вашего курса? Вы использовали правильный (не искусственный) курсив и жирный шрифт? Все ли текстовые ссылки выглядят правильно? Является ли весь текст разборчивым и читаемым?
  • Изображения: Есть ли какие - либо изображения выглядят размытыми, пикселизированные? Есть ли какие-либо изображения битые или слишком тяжелые с точки зрения размера файла? Все ли не декоративные изображения имеют альтернативные теги?
  • Логотип: это (обычно) просто другое изображение, но оно настолько важно, что требует своего собственного шага. Это последняя версия?
После того, как вы сделали эти начальные визуальные проверки, вы захотите убедиться, что внешний вид вашего сайта является последовательным и функциональным на любом экране.

Кроссбраузерный внешний вид

Разные браузеры могут отображать ваш сайт по-разному, поэтому важно протестировать ваш сайт в разных браузерах. Посмотрите статистику браузеров W3, чтобы понять, на чем стоит сосредоточиться. (Хотя, если вы работаете над редизайном, статистика использования браузера будет более полезной.)

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

Элементы, которые имеют тенденцию наиболее сильно различаться в разных браузерах и, следовательно, наиболее важны для проверки:
  • Шрифты
  • Цвета / градиенты
  • Картинки
  • Логотип

Внешний вид устройства

Никогда еще не было таких веб-устройств, и с этим приходит огромное количество размеров экрана. Если все сделано правильно, ваш сайт должен работать хорошо при любом размере экрана, но обязательно перепроверьте. (Вы ведь перфекционист, верно?)

Здесь также важна мобильная навигация. Обязательно проверьте способность пользователя перемещаться по веб-сайту на устройстве с сенсорным экраном и убедитесь, что при переходе устройства ничего не теряется.
Убедитесь, что ваш сайт выглядит и работает красиво на любом устройстве

Оптимизация изображения

Изображения и графика являются важным элементом многих веб-сайтов, поэтому вам нужно убедиться, что они отображаются правильно, особенно на всех этих устройствах сверхвысокой четкости (например, экранах Apple Retina).

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

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

Тестирование функциональности сайта

Дизайн и функциональность неразрывно связаны друг с другом, но мне бы хотелось разделить их, чтобы убедиться, что веб-сайт выглядит так, как он был разработан, и работает должным образом.

Интеграционное тестирование

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

Некоторые общие интеграции для тестирования могут быть:
  • Веб-формы (убедитесь, что формы работают и отправленная информация отправляется в нужное место)
  • Автоответчики
  • Маркетинговые электронные письма (MailChimp, Constant Contact, HubSpot и т.д.)
  • RSS-каналы
  • Электронная торговля
  • CRM
  • CMS

Тестирование ссылок

Это может быть неестественно, просто потому, что большинство сайтов имеют десятки (если не сотни) ссылок. Чаще всего есть одна или две ссылки, которые никуда не ведут, и важно найти их до того, как это сделают ваши конечные пользователи.

Некоторые из наиболее важных ссылок для проверки:
  • Лучшие навигационные ссылки
  • Ссылки нижнего колонтитула
  • Ссылки на социальные сети (Facebook, Twitter и т.д.)
  • Логотип (обычно ссылки на домашнюю страницу)
Вместо того, чтобы делать все это вручную, я бы посоветовал попробовать сканер ссылок, такой как W3C Link Checker, плагин Chrome Check My Links или Screaming Frog (что также отлично подходит для SEO-аудита).

Редактирование контента

Контент важен, и процесс тестирования должен соответствовать. Обычно это включает в себя проверку того, что все содержимое было обновлено и одобрено. Я не могу сказать вам, сколько веб-сайтов где еще есть абзац с ipsum.

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

Также важно отметить, что это нормально, если контент будет изменен позже. Клиенты, члены команды или вы всегда можете настроить текст через CMS. Основная цель здесь - убедиться, что содержание вашего сайта не является полным бредом.
Дай королю должное.

Поисковая оптимизация (SEO)

Анализ и оптимизация вашего сайта после публикации - это бесконечный процесс. И вам нужно рассмотреть семантическую структуру сайта с самого начала. Но это не значит, что вы не извлечете пользу из обзора SEO, прежде чем нажмете «Опубликовать».

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

1. Используйте правильную семантическую структуру

Сканеры (например, роботы Google) просматривают ваш веб-сайт, чтобы получить представление о вашем контенте, чтобы поисковые системы знали, как отображать ваш веб-сайт, когда люди ищут его. Чтобы помочь им сканировать ваш сайт, вам нужно использовать язык, который они поймут.

Исторически это означало использование следующих семантических тегов:
  • h1 – h6 (заголовочные теги)
  • p (теги абзаца)
  • ul / ol (неупорядоченные и упорядоченные списки)
Вы также можете пойти дальше и дальше с некоторыми новыми семантическими тегами HTML5. Эти теги важны, поскольку позволяют идентифицировать контент, наиболее релевантный для пользователей. Короче говоря, облегчение для поисковых систем облегчает пользователям поиск вас.

2. Мета-теги SEO

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

Мета заголовок
Мета-заголовок вашей страницы переводится в связанный текст, который люди увидят на страницах результатов поисковой системы (SERP). Он также отображается на вкладке браузера, когда люди переходят на вашу страницу. Некоторые лучшие практики включают в себя:
  • Определите центральную тему страницы
  • Длина не более 70 символов (включая пробелы)
  • Используйте соответствующие ключевые слова
  • Поместите важные ключевые слова перед заголовком
Мета описание
Мета-описание - это короткое предложение (или два), которое описывает то, что может предложить ваш сайт. Он (иногда) будет отображаться под вашим мета-заголовком в результатах поиска.

Некоторые лучшие практики включают в себя:
  • Включите ключевые слова, которые описывают страницу
  • Не превышайте 160 символов
  • Напишите свое описание для людей, а не роботов. (Google не использует описания в веб-рейтинге).

3. Open Graph

Социальные медиа стали ключевым элементом SEO, поэтому очень важно, чтобы вы усилили этот процесс, предоставляя эффективную информацию Open Graph. Настройки Open Graph включают три элемента содержимого: заголовок, описание и изображение.

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

Это чрезвычайно полезно, поскольку позволяет вам определить, каким будет обмен сообщениями (и имидж), когда другие будут делиться вашим сайтом, помогая вам контролировать свой бренд.

Аналитика

Аналитика веб-сайта - еще одна важная часть, которую необходимо настроить перед запуском. Это бесплатно настроить учетную запись Google Analytics и невероятно легко интегрировать Google Analytics с Webflow.

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

Статьи по теме

Made on
Tilda