Когда сайт одинаково привлекательно и без ошибок отображается на мониторах разного разрешения, его называют адаптивным.
Не смотря на то, что сами сайты верстаются на стационарных компьютерах, просматривают их сегодня чаще с мобильных устройств. Век безумных скоростей и широких возможностей сделал адаптивность сайта одним из приоритетных показателей его качества и удобства как для пользователей, так и для поисковых систем.
Что надо помнить, учитывать и проверять на своем сайте
- Существует не только компьютер и смартфон. Да-да, не забываем про ноутбуки и планшеты, это тоже мобильные устройства, на которых сайт должен отображаться корректно.
- Браузер браузеру рознь. Адаптивная верстка должна быть кроссбраузерной. То есть если сайт без ошибок отображается в Chrome, не факт, что Safari покажет его так же хорошо (ну или наоборот). Учитывайте, что не вся ваша целевая аудитория использует тот же браузер, что и вы, и проверяйте во всех.
- Вечная битва яблок и андроидов. Операционная система также может по-разному “переваривать” сайт, и внешний вид его может отличаться в зависимости от. Проверяем обе, чтобы быть спокойными.
- Важен не размер, а разрешение. Даже на двух телефонах с одинаковым размером экрана сайт может отображаться по-разному, если настроено разное разрешение. Этот параметр является ключевым в адаптивной верстке, от него и отталкиваемся при проверке.
Почему так важно, чтобы сайт правильно отображался на разных устройствах?
- Нельзя полагаться на случай. Никогда не знаешь, откуда придет клиент, заряженный на моментальную покупку, а его ждет каждый владелец бизнеса. И обидно его потерять только потому, что он решил оформить заказ с планшета, а не с телефона, а там все криво и косо. Сайт должен быть удобным, понятным и корректным на всех устройствах.
- Поисковики такое любят. Главным приоритетом при оценке сайтов Яндекс всегда позиционировал удобство и полезность ресурса для пользователей. Если сайт с ошибками отображается в мобильной версии - это не удобно. Вывод: этот сайт не заслуживает высоких позиций, пока что-нибудь не исправит.
- Хорошо, когда все работает. Один и тот же клиент может начать просматривать сайт с компьютера, а потом продолжить с ноутбука по дороге домой. На компьютере все было круто и нравилось, а с ноутбука не получается куда-то зайти или что-то открыть - все, впечатление испорчено, клиент потерян.
Существует множество онлайн сервисов и приложений, позволяющих проверить, насколько корректно сайт отображается на разных устройствах. А что значит корректно?
Что точно нужно посмотреть при проверке сайта на разных устройствах
- Контент никуда не пропадает. Все, что пользователь видит с компьютера, он должен видеть и с телефона. Если какой-то информации не хватает в мобильной версии, никто не будет ради ее поиска включать компьютер, проще поискать другой сайт.
- Дизайн на месте. Десктопная и мобильные версии должны иметь одну цветовую гамму, шрифты и логотипы. Не надо делать на телефоне зеленым то, что в десктопе у вас синее. Пользователь должен понимать, что это все тот же самый сайт, а не Зазеркалье.
- Иерархия элементов должна быть постоянной. Не надо менять порядок блоков, заголовков и кнопок в мобильной версии, если на десктопе уже выстроена логика. Если человек хочет купить кружку и смотрит ваш сайт с телефона, не надо подсовывать ему кнопку заказа до того, как он прочитал о самом продукте. Это важно для принятия решения вне зависимости от того, с какого устройства пользователь изучает сайт.
- Что работало в десктопе - должно работать в мобильной версии. Различные фильтры, варианты отображения товаров, формы и банальные кнопки кликаться и функционировать, как задумано, должны во всех вариантах и на всех устройствах.
Ваш сайт готов? Поздравляем! Только убедительно просим: не забудьте проверить, как он смотрится на разных мобильных устройствах и в разных браузерах. Так и вам спокойнее, и вашей целевой аудитории удобнее.
