Техники мобильной оптимизации сайтов

Сейчас адаптировать сайты под маленькие экраны – это не тренд, не мода, а острая необходимость. Поисковые системы все чаще отдают предпочтение ресурсам, имеющим мобильную версию. Веб-серфинг с помощью компьютера на сегодняшний день неактуальный. Смартфоны – вот основной инструмент для выхода во Всемирную Сеть. И нужно, чтобы посетителям было удобно пролистывать страницы и получать нужную информацию. Поэтому мы в этой статье поговорим о техниках адаптации ресурсов для смартфонов, обычных телефонов и планшетов.

Справочная документация Google содержит такие термины, описывающие адаптацию сайтов под мобильные устройства: «разные URL», «динамический показ», «адаптивный дизайн. Следует рассмотреть каждый из них детальнее.

Разные URL

Это означает, что мобильная и десктопная версии интернет-ресурсов доступны по разным адресам, а также используются различные варианты HTML. То есть, на базе или в дополнение к основному сайту вы создаете еще и мобильную версию, которая имеет другое доменное имя. В первом случае адрес может выглядеть, как «m.aaa.ru», а во втором «aaa.mobi». Оба варианта имеют свои преимущества и недостатки.

При использовании метода разных «URL», используются мобильные и десктопные версии сайта, как правило с разным контентом

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

Что же осталось? Только самое главное: каталог товаров, адреса магазинов, информация о имеющихся скидках и другой полезный контент. Отличаются они и по дизайну. Мобильная версия упрощена, а все содержимое влезает по ширине экрана любого устройства. Но самое важное – перелинковка между главным сайтом и его мобильной версией. Без нее ни браузер, ни Google бот не смогут определить, что у ресурса есть адаптированная вариация. Поисковые системы должны видеть, что эти ресурсы зависят друг от друга.

Чтобы связать между собой полноценную и мобильную версии сайтов, необходимо подправить HTML код. На десктопной версии необходимо к тегу link добавить атрибут rel="alternate" и установить два значения: media и href. Это позволит браузеру определить, при каком разрешении экрана надо осуществлять перенаправление. В свою очередь, на мобильной версии к тому же тегу необходимо добавить атрибут rel="canonical", который ссылается на эту же страницу, но на десктопном сайте.

Адаптивный дизайн

В этом случае для мобильной и компьютерной версий сайта предусмотрен один адрес и тот же самый HTML код. То есть, архитектура страниц универсальная, и они автоматически адаптируются под экраны любого разрешения. Этого результата можно добиться, если редактировать CSS файлы. Браузер после обработки кода автоматически корректирует размеры разных частей страницы. Шрифты становятся больше, картинки перемещаются и меняют свои размеры. Таким образом, сайт автоматически становится удобным пользователям смартфонов и компьютеров.

Пример адаптивного дизайна, при котором сохранены и фотографии и контент

Можно провести эксперимент. Запустите Youtube на компьютере и уменьшите окно по ширине. Вы увидите, как страница сразу приспособится к новому размеру «экрана». Действительно, веб-страница окно воспримет, как экран. Эта техника считается Google наиболее перспективной, в то время как предыдущая ушла в прошлое. Она использовалась еще во времена wap-сайтов, когда мобильные телефоны не умели обрабатывать HTML, им на это не хватало оперативной памяти. Google приводит несколько рекомендаций по тому, как реализовать данную технику.

  1. Необходимо добавить мета-тег metaname=”viewport", чтобы сообщить о приспособляемости страницы к любым экранам.

  2. Множество CMS предусматривает готовые решения по адаптации сайта под мобильные устройства. Сейчас совершенно не надо самому писать код, отлаживать его. Все сделано до вас, осталось только пользоваться.

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

Динамический показ

В этом случае для одного URL используется разный HTML код. Это средний по удобству способ, в котором для одного адреса используются различные шаблоны верстки.

Вкратце этот процесс описывается так: когда открывается страница сайта на устройстве, браузер передает свой User Agent серверу. Это строка, в которой описывается, какой программой просматриваются интернет-страницы. А браузер непосредственно связан с типом устройства пользователя. И в зависимости от того, с компьютера, смартфона или планшета человек заходит на сайт, он получает соответствующую версию сайта. По сути, данная техника объединяет две предыдущих.

При динамическом показе, в зависимости от агента пользователя, используется один URL с разным HTML-кодом (и CSS)

При этом важно выдавать соответствующую версию сайта не только браузеру, но и поисковому роботу. Для этого следует пользоваться HTTP заголовком Vary, благодаря которому поисковой робот сможет верно определить наличие оптимизированного под мобильные устройства контента, который затем будет учитываться при ранжинровании в мобильном поиске. Вся необходимая информация доступна на странице Google для вебмастеров.

И что же выбрать?

Выбирать технику адаптации сайта непросто, и в каждом случае нужно индивидуально подходить к этому вопросу. Все зависит от сложности воплощения задумки, сколько ресурсов (времени, денег) потребуется, и как продукт будет поддерживаться в дальнейшем.

Инструмент «разные URL» предусматривает работу с двумя наборами содержимого сайта. Если допускаются ошибки во время перелинковки между десктопной и адаптированной версиями ресурса, появятся проблемы с их отображением на экране смартфона или планшета, а также при ранжировании поисковыми роботами. Но с другой стороны, контент мобильной версии весит значительно меньше, а потому загружается быстро даже при невысокой скорости мобильного интернета. И что важно, без сжатия трафика специальными программами. А если оно будет, то страницы будут загружаться еще быстрее.

Адаптивный дизайн имеет одно огромное преимущество – удобство реализации. Стили дорабатываются, и страница сама адаптируется. Эта техника перспективна, но и ее использование требует исключительного профессионализма. Судите сами: необходимо не только качественно исполнить ресурс, но и устранять недочеты, такие как медленная загрузка интернет-страниц. Между прочим, самая распространенная проблема, связанная с этой техникой. Желательно, чтобы у разработчика был успешный опыт решения этих проблем.

Последний же метод (динамический показ) может решить проблему медленной загрузки страниц, поскольку загружается не весь HTML код, а только адаптированная его версия. Но при этом необходимо добиться, чтобы вовремя показывалась нужная страница. Частые ошибки – версия для планшета демонстрируется пользователю смартфона или наоборот.

Время для выводов

Нет особой разницы, какую технику вы выберете, чтобы приспособить ваш ресурс под мобильные устройства. Более важно не забывать об поисковой оптимизации. В ином случае некому даже будет посещать ваш сайт, что очень неприятно. Надо тщательно подходить к вопросу именно продвижения ресурса. Но перед тем, как его продвигать, необходимо еще создать сайт. И советы, приведенные в этой статье, помогут вам в этом. Выбирайте тот способ адаптации ресурса, который больше всего понравится именно вам. Ведь делать нужно то, что нравится. А если не нравится, значит надо сделать так, чтобы понравилось. И тогда будут результаты. Ведь когда мы делаем что-то с душой, то и не нужно напрягаться, а все сложности еще сильнее захватывают.

Комментарии

Добавить новый комментарий

Еще по теме:

Последние новости: