SEOчеклист состоит из 151 инструкции
Новый пункт: Арендные ссылки при продвижении сайта

Основные требования к адаптивной вёрстке

Приоритет: Высокий

Адаптивная верстка (RWD - Responsive web design) – это html-верстка сайта с помощью гибкого макета, которая подстраивается под размер экрана пользователя. Позволяет существенно сэкономить и не отрисовывать новый дизайн для каждого разрешения экрана, а менять размеры и расположение отдельных элементов.

Содержание:

мем про seo рекомендации

Преимущества адаптивной вёрстки

  • Любой пользователь на любом устройстве сможет пользоваться всеми доступными возможностями сайта.
  • Адаптивная версия улучшает позиции сайта в поисковых системах, поскольку он удобен для просмотра на мобильных устройствах.
  • Улучшает показатели по поведенческим факторам сайта - снижает процент отказов и увеличивает время, проведённое пользователем на сайте.

пример адаптивности сайта seochecklistПример адаптивности сайта SEOCheckList.pro

Основные требования по адаптивной вёрстке

  1. Бургер-меню. Это мобильное меню, которое раскрывается при клике на 3 полоски в левом или правом верхнем углу сайта.
  2. Отсутствие горизонтальной прокрутки.
  3. Поддержка основных браузеров (кроссбраузерность) - Google Chrome, Safari, Opera, Mozilla Firefox.
  4. Скорость загрузки страниц на мобильных устройствах должна быть не менее 50 баллов по показателям PageSpeed Insights.
  5. Обязательная адаптивность под следующие разрешения экрана: 1920px, 1440px, 1200px, 992px, 768px, 568px, 414px.
  6. Не использовать Flash-элементы, Java-апплеты и Silverlight-плагины.
  7. Размер шрифтов более 12pх, чтобы информация легко читалась с небольших экранов планшетов и смартфонов.
  8. Наличие мета-тега viewport. Viewport - это видимая пользователю область страницы сайта без прокруток.
  9. Сайт должен проходить Mobile Friendly Test по всем пунктам.

Как написать рекомендации?

1. Создайте файл в MS Word и назовите его "Рекомендации по адаптивной версии для site.ru":

файл с рекомендациями по адаптиву

2. Проанализируйте конкурентов и перечислите какие основные моменты должны быть на адаптивной версии сайта:

пример пункта из рекомендаций

3. Добавьте примеры конкурентов или нарисуйте предварительный макет:

пример макета для адаптивной версии

4. Сохраните файл и отправьте Заказчику для ознакомления.

Спасибо, что дочитали до конца. Переходите к следующей инструкции. 

Спонсоры

Добавление проекта

Сообщение успешно отправлено!

Спасибо, мы свяжемся с вами в ближайшее время.

Стать спонсором

Оставьте ваши контактные данные и опишите ваше предложение в двух словах. Мы ответим в кратчайшие сроки.

Заказать SEO

Оставьте ваши контактные данные и ссылку на ваш сайт.

Заказать SERM

Оставьте ваши контактные данные и мы свяжемся с вами в ближайшее время.