Что такое адаптивный дизайн сайта?

Специальная конфигурация веб-сайта, при которой клиент-сервер отображает единый код HTML на устройствах любого типа с учетом корректировки масштаба и расположения контента посредством CSS называется адаптивным дизайном. Все алгоритмы поисковой системы Google способны определять веб-порталы, созданные при помощи этого метода, при условии, что все Googlebot User Agents допущены к сканированию ресурсов CSS, JavaScript и изображений. Т.е. адаптивный дизайн сайта использует одинаковый код страницы для всех стационарных и мобильных устройств, но при этом подбирается наиболее подходящий формат вывода информации, учитывая размеры экрана.

Заказать адаптацию сайтов под мобильные устройства

Метатег meta name="viewport" 

Для оповещения веб-обозревателя о том, что ваш сайт приспосабливается к любым размерам мобильных и стационарных устройств, необходимо прописать в заголовке страницы данный метатег. Viewport предназначен для служебных задач браузера, которые получают соответствующие распоряжения по изменению масштабов открываемого содержания, опираясь на заданные параметры экрана. При отсутствии этого элемента в заголовке веб-обозреватели на мобильных устройствах отображают изначальную страницу, т.е. «резиновую верстку», созданную для стационарного ПК. После получения информации мобильный браузер оптимизирует содержание, показывая ту часть контента, которая умещается на экране устройства.

Главное неудобство для мобильного юзера – это необходимость выполнения дополнительных манипуляций по настройке масштабов и нормального взаимодействия с веб-ресурсом. Службы Google не принимают во внимание такие страницы и не отображают в результатах поиска или же «награждают» сайт специальной предупредительной меткой.

Страница без meta name="viewport" отображается на экране смартфона так же, как должна бы на мониторе компьютера, из-за чего контент трудно воспринимается. Когда же метатег присутствует, то отображение уравнивается с величиной экрана мобильного устройства и содержимое легко прочесть. Поэтому следует учитывать популярные разрешения экранов для адаптивного дизайна веб-страницы.

Если на вашем имеются адаптивные изображения, то для их определения Googlebot необходимо указать элемент <picture>. Если новые версии браузера нормально взаимодействуют с веб-страницей, то и поисковые системы обрабатывают ее без ошибок.

В чем заключаются преимущества приспосабливаемого дизайна?

• Пользователи охотнее поделятся найденным контентом с вашей площадки, если для всех устройств предназначен один и тот же URL.
• Вместо регистрации различных мобильных версий одной и той же страницы алгоритмы Google просто «подгоняют» размеры сайта по ширине дисплея.
• Создание адаптивного дизайна одного веб-ресурса намного проще, быстрее и выгоднее, нежели разработка мобильных приложений идентичного содержания, но для разнотипных устройств.
• Типичные ошибки, возникающие при создании мобильный версий, практически исключены.
• Для пользования контентом не требуется переадресация, что положительно влияет на скорость загрузки. Более того, перенаправление на мобильный сайт могут возникать ошибки в User Agent, что создает препятствия при взаимодействии сайта с пользователем.
• Единоразовое сканирование сайта Goodlebot-ом увеличивает эффективность точного индексирования содержания контента, что значит поисковая система будет отражать сайт в результатах поиска по соответствующему запросу.

Обратите внимание на то, чтобы все ресурсы веб были открыты для свободного сканирования программой-роботом, что позволит системе распознать наличие адаптивного дизайна сайта и соответствующим образом его обрабатывать.

Роль JavaScript в разработке веб-сайтов

Чтобы качественно и безошибочно создать адаптивный дизайн веб-ресурса под мобильные устройства, следует уделить внимание кодированию JavaScript. Он и является главным инструментом для приспособления содержания к различным видам экранов. Как правило, эта система кодирования применяется для объявлений и картинок, отображающихся в браузере юзера.

Наиболее распространенные методы конфигурации JavaScript в адаптивном веб-дизайне:

• Если ваш сайт использует JavaScript, то выбирайте адаптацию отображения с его помощью. Тогда все устройства получают один и тот же код HTML, JavaScript и CSS, но механизмы форматирования подстраиваются под параметры используемого устройства.
• Существует комбинированный метод распознавания условий, в котором принимают участие и коды JavaScript совместно с функцией распознавания User Agent. Как следствие, стационарные и мобильные устройства получают разное содержание.
• Динамический показ JavaScript предусматривает отправку единого HTML-кода, но JavaScript направляется с URL, отвечающим за различное отображение кода для разных параметров.

Теперь детальнее остановимся на каждом из способов.

Методы конфигурации JavaScript в адаптивном веб-дизайне

✔ Адаптация посредством JavaScript

Этот способ отличается тем, что все устройства получают одинаковый контент, но код JavaScript изменяет формат отображения содержимого, опираясь на параметры используемого устройства. Этот же алгоритм использует адаптивный дизайн сайта с медийными интерпретациями CSS.

Это выглядит так: страница всегда использует тот же самый HTML со <script> элементом, запрашивающий JavaScript с наружного URL. Оборудование, с которого обращаются к данному веб-адресу, принимают идентичный код, но только обработанный с учетом используемых параметров, и формат веб-страницы будет скорректирован соответствующим образом. К примеру, контент будет отображать изображения и объявления, созданные специально для смарт-устройств, а не для ПК. Чтобы охватить как можно больше пользователей, следует определиться, под какие разрешения делать адаптивный дизайн.

Поисковые системы Google определяют данную конфигурацию машинально. При этом не требуется дополнительное использование заголовка типа Vary, т.к. адреса страницы не «заточены» под динамическое использование контента. Поэтому если ваш веб-сайт использует платформу JavaScript, то смело применяйте этот способ.

✔ Определение параметров комбинированным способом

Для распознавания параметров используемого устройства применяются код JavaScript совместно с функционалом сервера.

Чтобы внешний вид веб-страницы изменялся в зависимости от условий (компьютер или смартфон), необходим код JavaScript, определяющий характеристики экрана и отправляет данные на сервер, а последний предоставляет устройству уже видоизмененный код. Обычно JavaScript фиксирует сведения в файлах cookie, которые просматривает сервер при каждом следующем посещении сайта с этой платформы.

Из-за того, что клиент-сервер отправляет разные коды HTML, данный способ настройки можно причесть к динамическому использованию. Поэтому в запросе URL, дающего различные варианты кода, необходимо применять заголовок типа Vary.

✔ JavaScript: динамический показ

Этот способ предоставляет всем устройствам одинаковый HTML, указывающий на разные параметры содержания с учетом User Agent. Т.е. код JavaScript передается в динамическом изменении. Здесь также требуется заголовок Vary, чтобы Googlebot и кэш-системы знали о возможностях изменения кода JavaScript при определении агентов пользователя.