Адаптивность сайта
Привет :)
Это третья статья из серии материалов по мотивам инструкции (чек-листа) по проверке соответствия сайта стандартам качества. Что это за чек-лист? Это сборник советов, благодаря которым:
- В твой сайт начнут влюбляться посетители
- Он бесплатно выйдет на первые позиции поиска
- И начнет продавать все больше и больше
Как его получить? Достаточно подписаться на полезную рассылку от нашей онлайн-школы https://vk.cc/9I26Zj
В третьем пункте инструкции я советую проверить наличие у сайта адаптивности.
Что такое адаптивность сайта?
Адаптивность — это свойство сайта правильно отображаться на разных устройствах с различными разрешениями экрана.
Следует отличать адаптивность и мобильную версию сайта. Хотя мобильная версия является одной из составляющих хорошего, адаптивного сайта.
- Адаптивность — это один из основных признаков соответствия современным требованиям и стандартам качества сайтов, поскольку количество мобильного трафика растет с каждым годом. На адаптивном сайте страницы доступны для всех типов устройств и корректно отображаются вне зависимости от разрешения экрана.
- Мобильная версия — отличная от ПК версия сайта с урезанным функционалом для удобства посетителей с мобильных устройств. Например. в мобильной версии может отсутствовать слайдер с картинками, который есть в версии для ПК.
Как видите, мобильный трафик на сайт нашей веб-студии составляет половину от общего. И эта цифра постоянно растет. Еще пару лет назад она составляла 30%
Первым понятие «адаптивность» ввел Итан Маркотт в своей книге Responsive Web Design (пер. Адаптивный Веб-Дизайн). И поэтому сайты, которые могут подстраиваться под заданные размеры экранов, начали называть адаптивными.
Пример адаптивного сайта:
Как видите, один и тот же сайт на различных устройствах выглядит по-разному.
Зачем нужно адаптировать сайт?
Как мы сказали выше — адаптивность является одним из основных признаков соответствия современным требованиям и стандартам качества сайтов. И поэтому каждый современный сайт должен быть адаптивным. А в некоторых случаях иметь отдельные мобильные версии.
Раньше каждую мобильную версию сайта проектировали на отдельном поддомене. Сейчас концепция адаптивного дизайна позволяет оптимизировать процесс. В этом случае адаптивность достигается применением разных правил в таблицах стилей для каждого разрешения экрана.
Старые сайты нуждаются в доработке и разнообразные подходы к адаптивности позволяют это реализовать. Главное, правильно оценить масштабы на старте. В ряде случаев проще, быстрее и дешевле создать новый дизайн.
Если ваш фирменный стиль не является узнаваемым брендом, зачастую к переделке подталкивает еще и факт, что он морально устарел. И ребрендинг, как этап перехода на новый уровень, никто не отменял. Адаптивный сайт - это мощный инструмент для вашего бизнеса. Если у вашего сайта нет адаптивного дизайна, считайте, что вы теряете половину посетителей.
Какими качествами должен обладать адаптивный сайт?
- Отсутствие горизонтальной прокрутки, когда сайт на экране мобильника можно двигать пальцем вправо-влево.
- Быстрая загрузка, отсутствие тяжелых картинок.
- Корректно прописан метатег viewport, который отвечает за видимую пользователю область страницы сайта без прокруток. Пример корректного тега viewport <meta name="viewport" content="width=device-width, initial-scale=1">.
- Интерактивные элементы (ссылки, кнопки, формы и т.д.) не находятся слишком близко друг к другу.
- Удобная навигация по разделам. Мобильное меню часто выглядит как три полоски.
- Контент (текст и картинки) адаптирован под размер экрана и читается без увеличения.
Сервисы для проверки адаптивности сайта
1) Google Mobile Friendly - https://search.google.com/test/mobile-friendly
Все просто, в строку на главной странице вставляем ссылку на сайт, который хотим проверить и ждем результата.
2) Adaptivator — http://iloveadaptive.com/ru/
У этого сервиса намного больше функций, чем у первого, потому что мы можем посмотреть как будет выглядеть сайт почти на всех моделях смартфонов и на разных расширениях мониторов.
Всем спасибо за внимание, внедряйте фишки, учитесь делать классные сайты!