Сегодня наблюдается тенденция к увеличению мобильного траффика. Он уже составляет не менее 60% от всего потока и продолжает расти. Даже интернет-покупки, согласно статистике, в 65% совершаются с помощью смартфонов. С учетом современных тенденций владельцы сайтов стремятся повысить юзабилити своих ресурсов для мобильных устройств. Но на практике это не так-то просто. Например, адаптивная верстка интернет-магазина особенно сложна в реализации, поэтому важно, чтобы при этом он не терял прибыль. Но обо всем по порядку.
Что предполагает адаптивная верстка сайта
Адаптивный дизайн сайта предполагает отображение страниц на различных устройствах, а не только на ПК. Даже девайсы одного типа могут иметь разные характеристики экранов и передавать изображение иначе. Если вы рассчитываете поддерживать близкий контакт с клиентом и хотите, чтобы он мог получить доступ к вашему ресурсу с любого устройства, необходимо позаботиться о его корректном отображении. При этом необходимо сохранять один URL-адрес и источник контента. Адаптивный веб-дизайн (Responsible web-design, RWD) — это система, которая позволяет шаблону сайта реагировать и приспосабливаться к разрешению экрана устройства. Осуществить это возможно благодаря верстке с гибким макетом.
На сегодня наличие адаптивного сайта это не преимущество, а скорее необходимость.
Особенности
Адаптивная верстка подразумевает настройку макета на CSS с помощью медиазапросов с учетом параметров области просмотра. Гибкая сетка моментально меняет изначальную конструкцию шаблона, адаптируя ее под размер экрана. При этом отдельные блоки могут скрываться, чтобы акцентировать внимание пользователя на основных элементах страницы.
Разработка адаптивной верстки имеет два основных подхода: 1. «Mobile first» — первоначально создание макета под смартфоны, «растягивающегося» до размеров планшета или десктопной версии. 2. Традиционный — разработка шаблона ориентированного на экраны ПК или ноутбуков, который впоследствии уменьшается до размера устройства. В данном случае важно обеспечить правильную всех адаптацию элементов, так как при сжатии часто возникают проблемы.
Важно знать
В общих чертах задачи и особенности адаптивной верстки понятны, но важно также уяснить еще несколько моментов: • адаптивный сайт ? мобильная версия; • функционал остается тем же на любом устройстве; • адаптивность бывает полная и частичная, т.е. охватывать все возможные типы устройств или только некоторые из них; • адаптивный дизайн имеет ограничения; • за идентичность отображения в разных программах отвечает кроссбраузерность, этот пункт должен отдельно прописываться в ТЗ.
Вывод
Адаптивная верстка, безусловно, является необходимостью в условиях стремительно развивающихся технологий. Парадоксально, но она не всегда помогает сайту «выиграть». Каждый проект требует индивидуального подхода. Например, ресурсы со сложным функционалом, большим количеством контента требуют много экранного пространства. Адаптировать подобный сайт для смартфонов нецелесообразно. Гораздо лучше будет выбрать те устройства, на которых функционал останется полным и создать мобильную версию с основными опциями и возможностью перейти в десктопный режим. Такие моменты оговариваются и регулируются.
