Мобильная версия или адаптивная верстка

Ещё до недавнего времени для того, чтобы сайт пользовался успехом, достаточно было иметь красивый уникальный дизайн и максимально удобный для пользования интерфейс.  Сейчас же этого мало. Технический прогресс создал новое направление по разработке и выпуску широкой линейки мобильных устройств и планшетов. Для того, чтобы посетить интересующий веб-ресурс или найти ответ на возникший вопрос, достаточно иметь современное устройство в виде смартфона или планшетного компьютера.

Чтобы понять, насколько популярны мобильные устройства, зайдем в  сервис «Яндекс Wordstat» и введём запрос «купить окно ПВХ». С помощью указанного ключа проанализируем структуру запросов, а именно: количество сделанных запросов с десктопов (настольных ПК/ноутбуков) и мобильных устройств.

Видим, что за месяц было сделано 17 251 запрос, из них 12 120 приходится на ПК, 5131 на мобильные устройства (телефоны + планшеты). В процентном соотношении пропорция составляет 70/30%.

Введя другой запрос, такой как «заказ еды на дом», увидим статистику, которая сильно отличается от предыдущей. Из 13 010, с мобильных устройств было сделано 7 017 запросов, что составляет почти 54% поискового трафика.

О чем говорит данная статистика? В зависимости от тематики и ниши, значительную роль может оказать на количество клиентов наличие адаптивной или мобильной версии сайта, что ведет к безусловному росту прибыли или потере, в случае недоработок и её недостаче.

Мобильная версия сайта или адаптивность? В чем разница? Преимущества и недостатки.

Для понимания отличий между данными терминами, давайте выясним, в чем между ними разница.

Мобильная версия сайта – отдельная версия сайта, созданная и имеющая ориентир специально на пользователей со смартфонами или планшетами. Как правило, отличается от версии для ПК урезанным функционалом для более быстрой загрузки с сохранением всех основных блоков сайта. Чаще всего располагают на поддоменах типа m.name.ru, mobile.name.com. Пример можете увидеть, зайдя через мобильное устройство в социальную сеть «Вконтакте» (*!не приложение, а именно через мобильный браузер!*).

Преимущества:

• легкое изменение контентной части и кода, так как мобильная версия в 95% случаев не связана с основной частью;

• скорость загрузки, благодаря меньшему весу тех же фотографий и того же функционала;

• удобство пользования юзером, возникающее из перечисленных выше преимуществ;

• возможность представления информационных сайтов типа новостного портала без переделки кода и структуры сайта. Особенно актуально на тех сайтах, которые уже давно существуют и технологии могут не позволить реализовать адаптивность;

• возможность выбора. Решение автоматического перехода сайта системой на мобильную версию определяется с помощью MAC-адреса устройства и с помощью IP-адреса. Если пользователю потребовался функционал десктопной версии, то, как правило, он может на нее переключиться, перейдя на основную (полную) версию сайта.

Недостатки:

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

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

• ограниченность. Если повторить функционал и контент полной версии, то будет долго грузится и отразится на недовольстве пользователя слишким долгим временем ожидания. Если сделать информационную часть минимальной, то скорость загрузки будет высокая, а пользователь может не понять многие моменты из-за недостатка информации. Идеальное решение в данном случае – разумное и оптимальное сочетание и компромисс между скоростью загрузки и выводимой информацией.

Давайте теперь рассмотрим, что же такое адаптивность сайта?

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

Преимущества реализации адаптивной версии:

• контент такой же, как и на полной версии сайта, нет необходимости заполнять информацию в двух источниках;

• один адрес сайта, нет необходимости использования операции редирект, отсутсвие возможного «ругательства» поисковых систем на дублирование информации;

• удобство и быстрота разработки, которая благодаря применению современных технологий и фреймворков (например, bootstrap) не требует переделки всего кода сайта, достаточно вставить необходимые операторы и прописать стили в CSS;

• большое количество разрабатчиков в сфере предоставления данной услуги;

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

• удобство пользования юзером;

• масштабируемость. Технология адаптивности может применться, как на сайтах с html-разметкой, так и на сайтах, в которых присутствуют популярные системы администрирования (WordPress, Bitrix, OpenCart и т. д.), а также сосбтвенноручно написанная админка.

Недостатки:

• может возникнуть медленная загрузка сайта, вследствие большого объема информации;

• мобильную версию сайта всегда можно отключить, в отличии от технологии адаптивности.

Основные методы реализации адаптивности и мобильной версии сайта в современном мире

Разберем популярные и наиболее применяемые на территории нашей страны и близлежащих странах СНГ.

Наибольшее распространение в среде frontend-разработки  получили:

• «Классический» метод создания версий сайта для различных мобильных устройств. В основном применяется следующая технология. Производится верстка страниц согласно дизайн-макету под утвержденные размеры устройств. Затем, происходит реализация их подгрузки под необходимое разрешение, путем добавления в основной код сайта операторов типа медиаскрин (например, @mediascreen and (max-width: XXXXpx)). Находит применение, как при создании версии для планшетов и смартфонов, так и при адаптиве, однако, более популярен при реализации отдельных страниц;

• Responsive Grid System – популярный фреймворк, представляющий собой простой набор нескольких инструментов. Легко реализовать на практически любом сайте, не требует глубоких знаний для освоения, обладает достаточным набором инфографики для реализации кнопок и других элементов. (*для справки: фреймворк – набор универсальных запрограммированных элементов и инструментов, позволяющий уменьшить время на разработку той или иной задачи).

• BootStrap – наверное, самый известный и применяемый на данный момент набор инструментов. Отличается простотой, полной и понятной документацией с примерами реализации. Очень распространен при реализации Landing Page, сайтов-визиток и проектов, относящихся к средней степени по сложности реализации. Требует некоторых знаний в данной тематике, легок в освоении. Присутствует много инструментов реализации разных стилей, меню, кнопок и так далее.

• GUMBY - хоть данный адаптивный СSS-фреймворк обладает меньшей популярностью, чем представленный выше, однако, заслуживает своего внимания, так как в нем реализована гибкая адаптивность с гораздо большим количеством UI-элементов и инструментария, которых нет в BootStrap. Позволяет также расширить некоторые элементы «базового» функционала сайта без особых на то затрат.

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

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

Малоизвестный метод оптимизации адаптивной версии сайта

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

Данный инструмент будет полезен, как начинающим разработчикам, так и опытным пользователям, если они о нем не знают, а также заказчикам для общего понимания картины. Называется этот метод оптимизации – RESS или более полное название с расшифровкой - Responsive Design + Server Side.

Суть заключается в следующем, после реализации адаптивной верстки сайта происходят следующие действия: допустим, пользователь входит на сайт со смартфона → до прогрузки страницы, сервер загружает все страницы для всех версий сайта (в том числе и для ПК), но отображает только ту страницу, которая подходит для данного устройства. (*! Смарфон или планшет, в подавляющем большинстве случаев, может определяться сервером по MAC-адресу, IP-адресу, который выдала сеть или комбинированном методом !*).

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

Ниже представлен быстро сформированный алгоритм метода RESS для большего понимания:

	$DS = DIRECTORY_SEPARATOR;
require_once( dirname(__FILE__) . $DS . 'libraries' . $DS . 'browser.php');
$device = BBrowser::detectDevice();
if($device == DEVICE_TYPE_MPHONE){
	$tmpl = 'template.m.php';
}
else if($device == DEVICE_TYPE_TABLET){
	$tmpl = 'template.t.php';}
else{
	$tmpl = 'template.php';
}
include( dirname(__FILE__) . $DS . 'templates' . $DS . $tmpl);

Тем самым, RESS уменьшает скорость загрузки, что благоприятно отражается, как для пользователя, так и для роботов поисковых систем.

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

Несмотря на все преимущества, у данной технологии есть и свои минусы:

1. Сложность разработки и малое наличие профессионалов в данной сфере, которые могут корректно выставить и запрограммировать необходимые настройки со стороны серверной части;

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

На что следует обратить внимание при реализации адаптивной верстки или мобильной версии?

Рассмотрим в конце статьи правильную алгоритмику и последовательность действий, чтобы потом не остаться крайним. Алгоритм универсальный, и подойдет, как для ознакомления заказчику, так и тому специалисту, который будет выполнять работы. Итак:

1. Техническое задание. Чем более полно оно расписано, тем более защищен заказчик, и тем лучше понимает все нюансы и тонкости разработчик;

2. Особенности сайта, а также сервера, на котором он размещен. Очень многие не учитывают этот аспект, что ведет к возникновению между сторонами конфликта, так как заказчик и исполнитель не могут определить, кто из них виноват и что делать дальше;

3. Не бояться задавать вопросы. Относится к обеим сторонам. Такой вид работы – это диалог. Если Вам что-то непонятно, лучше спросить, уточнить, прояснить;

4. Не бояться высказывать свои предложения. Больше относится к исполнителю. Высказав свои разумные доводы, заказчик может и не разрешит вам отклониться от ТЗ, но учтет проявление инициативы, что, безусловно, повысит лояльность к Вам;

5. Обсуждение сроков, если они не прописаны четко в техническом задании.

6. Остальные моменты, возникающие в ходе разработки.

Давайте подведем малый итог, что мы сегодня сделали:

• выяснили, что мобильная версия сайта или адаптивная верстка становятся все более востребованы пользователями;

• узнали преимущества и недостатки, а также различия при реализации возможных вариантов оптимизации сайта под мобильные устройства, возможности реализации в зависимости от сложности проекта;

• рассмотрели наиболее популярные методы реализации с помощью различных инструментов;

• познакомились с малоизвестным, но частоприменяемым методом оптимизации сайта, который позволяет улучшить скорость загрузки и оптимизировать интернет-ресурс;

• рассмотрели основные аспекты, на которые следует обратить внимание, как заказчику, так и исполнителю.

В принципе, этих знаний вполне достаточно для понимания полной картины в данном вопросе