Чеклист подготовки к запуску вашего сайта

Веб-дизайн

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

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

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

Проверка дизайна

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

Первая проверка чисто визуальная — хорошо ли смотрится сайт. Следующим шагом у нас станет тестирование функциональности.

Кросс-браузерное функционирование

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

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

Я всегда проверяю следующее:

• шрифты

• цвета и градиенты

• изображения

• логотип

Функционирование на различных устройствах

Убедитесь, что ваш сайт на любом устройстве работает прекрасно.

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

( В конце концов, вы ведь перфекционист, правда? :)

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

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

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

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

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

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

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

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

Проверка интегрированных компонентов

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

В число самых распространенных компонентов, подлежащих тестированию, могут войти:

• веб-формы (убедитесь, что формы работают, и что введенная информация отправляется по нужному адресу)

• автоответчики

• почтовые рассылки (MailChimp, Constant Contact, HubSpot, «капельный» маркетинг и т.п.)

• ленты новостей RSS

• компоненты электронной коммерции

• система управления взаимоотношениями с клиентами (CRM)

• система управления контентом (CMS)

Проверка работоспособности ссылок

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

Вот некоторые из самых важных ссылок для проверки:

• ссылки верхнего меню

• ссылки футера

• ссылки на соцсети (Facebook, Twitter и т.п.)

• логотип (обычно содержит ссылку, ведущую на главную страницу)

Я бы посоветовал вместо того, чтобы делать всё это руками, воспользоваться отслеживателями ссылок наподобие W3C Link Checker, плагина браузера Chrome под названием Check My Links, или робота Screaming Frog (который к тому же прекрасно справляется с аудитом SEO).

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

Отдайте королю должное.

Контент — король и всему голова, и процесс проверки должен отвечать этому правилу. Обычно она сводится к отслеживанию того, обновлен ли ваш контент и получил ли он одобрение заказчика. Я просто не могу сказать, сколько мне попадалось сайтов, где среди прочих сохранился абзац с «Lorem Ipsum».

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

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

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

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

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

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

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

Согласно сложившейся практике, это означает, что вам следует использовать следующие семантические теги:

• <h1> – <h6> (теги заголовков)

• <p> (тег абзаца)

• <ul>/<ol> (упорядоченные и неупорядоченные списки)

Помимо этого, вы можете использовать некоторые из новых семантических тегов, появившихся в HTML5 и доступны справа, на второй вкладке параметров в Webflow:

<article>

<aside>

<details>

<figcaption>

<figure>

<footer>

<header>

<main>

<mark>

<nav>

<section>

<summary>

<time>

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

2. Мета-теги для SEO

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

Мета-тег title

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

• отразите в нем основную тему страницы

• не превышайте длины в 70 символов (включая пробелы)

• используйте соответствующие теме ключевые слова

• помещайте самые важные ключевые слова перед заголовком

Мета-тег description

В состав этого тега входит короткое предложение (или два) с описанием того, что может предложить пользователю ваш сайт. Оно (иногда) появляется в результатах поиска после содержания мета-тега title.

Вот некоторые из лучших приемов по его оформлению:

• включайте в него слова, описывающие страницу

• не превышайте ограничения в 160 символов

• Пишите свои описания для людей, а не для роботов. (Google не использует описания для ранжирования веб-страниц).

3. Параметры Open Graph

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

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

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

Аналитика

Анализируйте всегда.

Аналитика вебсайта — еще один критический элемент, который следует установить перед тем, как вы запустите свой сайт. Создать аккаунт в Google Analytics можно совершенно бесплатно, а интегрировать Google Analytics в Webflow очень просто.

Сделав это, вы почти сразу же получаете возможность отслеживать своих посетителей и их поведение на своем сайте!

Мэт Вогелз

Перевод статьи: Hi-Tech English

Оригинал статьи доступен по ссылке

Комментарии для сайта Cackle
Автор поста:
Соколов Максим
Основатель академии