Интернет прочно вошел в жизнь людей и для многих стал одной из основных ее составляющих. При этом наблюдается постепенное вытеснение «клавишного» оборудования – компьютеры и ноутбуки уступают позиции планшетам и смартфонам с различным размером и разрешением экрана. Эта тенденция бросила новый вызов владельцам сайтов. Им необходимо добиться того, чтобы ресурс одинаково смотрелся на всех типах экранов.
Раньше эта проблема часто решалась за счет создания мобильной версии сайта. Сегодня специалисты предлагают более «элегантный» способ в виде адаптивной верстки. Многие исполнители при этом, как можно увидеть на https://itargency.ru/sozdanie-sajtov/adaptiv, работают на тестовых доменах, что позволяет не прекращать функционирование ресурса на время модификации. В конечном счете код должен быть написан таким образом, чтобы сайт самостоятельно подстраивался под размер экрана. Под адаптацией, в частности, подразумевается отсутствие горизонтальной линии прокрутки.
Необходимость адаптивной верстки
В первую очередь такие изменения интересуют владельца. Если пользователь будет недоволен видом страниц на своем устройстве, он не будет повторно их посещать. Кроме того, отсутствие адаптивного дизайна влияет на отображение ресурса в результатах поисковых запросов. Так, в конце апреля 2015-го Google ввел новые правила ранжирования сайтов, основанные на этом параметре. При отсутствии адаптивного дизайна их рейтинг в выдаче понижается. Вместе с реакцией пользователей, такая недоработка может привести к потере 5-60% посетителей.
Основы адаптивной верстки
Чаще всего доработку кода сайта заказывают специалистам. Если владелец (или просто любопытный пользователь) хочет вникнуть в принципы адаптивной верстки, источники советуют воспользоваться определенными материалами, вроде книги Бена Фрейна.
Методика основана на внедрении в код CSS стилей, «подгоняющих» ресурс под существующее разрешение экрана. Для этого создается отдельный файл или в существующий текст добавляются медиа запросы (@media), указывающие максимальную ширину дисплея. В них уже прописываются дополнительные параметры, вроде высоты экрана или отступов. Так прописывается каждое разрешение.
Адаптивная верстка может быть рассчитана на все существующие экраны, или на наиболее распространенные типы. В первом случае владелец сайта избегает риска нарушения дизайна, но и платить за большее количество кода придется дороже.
