Оптимизация дизайна сайта

Размер шрифта

Печать

Для продвижения всё имеет значение: содержание сайта, его структура, контент, вес страницы, а также дизайн. Проект может быть простым и легким, а может – сложным для восприятия и тяжелым. Оптимизация дизайна сайта относится к внутренним факторам, над которыми следует вести работу. Улучшать нужно следующие моменты:

Заменить теги в верстке, которые важны для продвижения (часто можно встретить использование заголовков группы H);
Проработать с разными разрешениями (сайт должен быть удобным при просмотре с разных устройств – десктопов, планшетов, смартфонов);
Расположение навигации и других значимых элементов;
Улучшение скорости загрузки.

Требования к дизайн-макету сайта для его дальнейшей оптимизации

Разработка сайта, как правило, включает в себя следующее шаги (исключение – создание ресурса на основе готового шаблона):

Получение информации от клиента, каким он хочет видеть сайт, заполнение брифа, подбор площадок, которые нравятся и не нравятся;
Проектирование сайта, создание прототипов страниц (главной страницы, основных внутренних);
Отрисовка дизайна главной страницы, согласование, внесение правок (пакетно);
Дизайн внутренних страниц;
Утверждение дизайна, подпись актов;
Верстка по готовому макету;
Интеграция с CMS, дописывание функционала;
Тестирование и окончательная сдача проекта заказчику.

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

Оптимизация дизайна сайта: мобильная версия или адаптивный дизайн?

Адаптивный дизайн – это, по сути, один шаблон. А мобильная версия идет как отдельный сайт. Разница между ними приведена в таблице:

	Адаптивный дизайн	Мобильная версия
Адрес сайта	Один URL	Для мобильной версии другой URL, требуется настройка редиректов
*Сложность и скорость разработки*	Не требует отдельной разработки, делается быстрее, необходимы правки стилей и шаблона	Требуется отдельная разработка, прорисовка дизайна, дольше по времени
*Скорость загрузки*	Медленнее, т.к. вес страниц больше	Быстрая скорость загрузки, малый вес страниц
*Управление*	Сложное, невозможно отключить, требуется править стили и шаблон	Легко отключается и подключается
*Функционал*	Полный, ограничения возможно только по выводу в шаблон (некоторые блоки можно пропустить)	Ограниченный функционал
*Переход между вариантами отображения сайта*	Невозможен, т.к. все завязано на ширине экрана устройства пользователя	Возможен, как с основной версии на мобильную, так и наоборот

У мобильной версии и адаптивного шаблона есть свои плюсы и минусы, которые нужно учитывать при оптимизации дизайна сайта. Так, например, важный момент для продвижения – дополнительные адреса, которые для поисковика будут дублями. Их можно закрывать от индексации в robots.txt, но лучше установить теги rel="alternative" и rel="canonical".

Оптимизация дизайна сайта: основные направления работы

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

Работа над чистотой кода. Стили должны быть вынесены в файлы .css (.less и т.п.), скрипты – в .js, а в .html следует оставить только шаблон. Особенно это актуально при подключении разных плагинов и модулей посредством хуков: они добавляют свои стили и скрипты на загружаемую страницу, тем самым утяжеляя ее. Могут и вовсе блокировать некоторые элементы. Правильным решениям для оптимизации дизайна сайта будет вынесение таких вставок в соответствующие файлы.

Удаление из шаблона ненужных тегов. Код страницы можно проверить на валидность и исправить критические ошибки. Также из шаблона следует убрать теги группы H (оставить только один H1), <strong> (полужирное начертание можно задать стилями).

Резюме

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