Новое в блогах


Личный опыт История от интернет-магазина www.groundz.ru, #ОбновлениеЗаРассказ 
Личный опыт История от портала soft-info.ru, #ОбновлениеЗаРассказ 
Личный опыт История от Центра имиджевых технологий ТВОЙ ОБРАЗ, #ОбновлениеЗаРассказ 
Личный опыт История от интернет-магазина Ma-Zay.ru, #ОбновлениеЗаРассказ 
Личный опыт История от Татьяны Азаровой, #ОбновлениеЗаРассказ 
Личный опыт История от интернет-магазина медтехники OLLZ.ru, #ОбновлениеЗаРассказ 

Теги



Мобильная версия сайта – это может быть просто!

Все говорят – она нужна, вот и Вы тоже начинаете думать, что она нужна. На самом деле проверить необходимость несложно: достаточно посмотреть отчет системы веб-аналитики (например, Google Analytics) по мобильным устройствам.

При подготовке обзора мы обнаружили, что Google не считает мобильными посещения, сделанные через JAVA-версию браузер Opera Mini. Судя по всему, Google определяет “мобильность” клиентов по ОС, что в случае JAVA-браузерами сделать невозможно. Имеет смысл анализировать отчеты с учетом этого факта.

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

Анализ данных нашего сайта www.amiro.ru показывает, что доля посещений с использованием мобильных устройств возросла с начала 2011 года более чем вдвое, но все еще составляет всего 0,5-2,5% (как уже говорилось ранее, данные разнятся в зависимости от способа учета).

На проходящей в эти дни конференции «Электронная торговля 2011» были озвучены некоторые цифры по мобильным продажам: ни у кого из участников они пока не превышают 5%.

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

В среднем, на момент написания обзора (октябрь 2011) по данным LiveInternet к мобильной аудитории в Рунете можно отнести порядка 10% посещений. Для разных проектов эта цифра будет отличаться, например, для интернет-магазинов и тематических сайтов цифры будут ниже, в то время как для соц.сетей, веб-почты, онлайн-игр эти цифры будут приближаться к максимуму.

В любом случае тренд растет и обращать на него внимание смысл есть.

Какие бывают мобильные версии сайтов?

В обзоре мы будем двигаться по мере убывания вложений/усилий/сложности реализации.

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

 Мобильное приложение, устанавливаемое на телефон/смартфон из AppStore, Android-маркета и им подобных

Примеры: Ozon.ru, Альфа-банк, РосЯма.

Плюсы: Возможность максимального погружения пользователя, полное удобство интерфейса, неограниченные возможности для реализации магазина, работа в offline, привязка к месторасположению пользователя и другие возможности, завязанные на “железо”.

Минусы: Самая высокая стоимость разработки, помноженная на недостаточное количество квалифицированных разработчиков на рынке; минимальная гибкость; приходится писать приложение под несколько ОС (iOS, Android, Windows7), что усугубляется необходимостью “заточки” приложения под конкретные модели устройств; любое движение требует перекомпиляции приложения и перезаливки его в сторы; сам процесс подачи приложения (как первичной, так и после даже минимального изменения) в сторы занимает 2-4 недели; опять же, далеко не все пользователи настолько мотивированы, чтобы скачивать ваше приложение и ставить его на телефон – это тоже дополнительный активационный барьер.

Веб-версия сайта, разработанная близко по интерфейсу к родным приложениям телефонов, но реализованная на html5

Плюсы: Почти полностью повторяют первый вариант. Для интернет-магазинов и информационных порталов практически нет необходимости разрабатывать “нативное” приложение, почти все можно реализовать в html5-версии. Нет необходимости писать приложение под каждую платформу: приложение будет работать на всех устройствах, поддерживающих html5, вне зависимости от их операционной системы. Приложение может загружаться напрямую с вашего сайта, соответственно, нет необходимости ждать по 2-4 недели результатов модерации, как в случае с распространением через “сторы”. В настоящее время основные ограничения html5 приложений лежат в графической сфере, что неактуально для информационных сайтов и магазинов. Впрочем, развитие в мобильных устройствах поддержки html5 позволит в будущем решить и этот вопрос.

Минусы: Требуется достаточно трудоемкая разработка собственной оболочки для сайта – как клиентской специально для мобильных устройств, так и серверной.

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

Адаптивная верстка сайта

Тщательно продуманные макеты позволяют получить сайт, работающий на любом устройстве автоматически. К сожалению, на практике такая верстка и организация сайта весьма дорога, трудоемка как разработке, так и в поддержке и пока редко встречается. Еще один минус такого подхода – он не минимизирует объем трафика, передаваемого на мобильное устройство.

Простые решения с минимальными усилиями по доработке: отключение лишнего контента для мобильных устройств, выдача клиенту отдельного CSS и адаптированных макетов.

Здесь остановимся подробнее.

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

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

Если схема организации макетов в CMS спроектирована грамотно, то реализация описанного подхода не представляет большой сложности.

Плюсы подобных решений: Минимально возможная стоимость адаптации сайта. Возможность постепенного доведения качества мобильной версии до состояния, не сильно уступающего вариантам 2 и 3, путем блочной верстки непосредственно страниц сайта начиная от самых важных и переходя к второстепенным. Вы практически сразу получаете базовый вариант мобильной версии, резко повышающий комфорт для посетителей мобильных устройств. Еще один плюс – уменьшение объема трафика на мобильный клиент за счет более простых оптимизированных макетов.

Минусы: Как и в предыдущем подходе, требуется понимание принципов работы с макетами и базовые знания CSS|HTML, хотя и в значительно меньшем объеме. Впрочем, даже обладая минимальными знаниями, всегда можно попробовать самому, а уж если что-то не получится, то обратиться за помощью к специалистам.


Как это сделать на Amiro.CMS?

Исходя из текущих потребностей наших клиентов мы подготовили простой в освоении механизм создания мобильной версии сайта, основанный на последнем из описанных выше подходов.

Как обычно, прежде чем отдать новый функционал пользователям, мы тщательно тестируем его, в том числе и на собственном сайте. Мы предлагаем Вам посмотреть, как работает мобильная версия нашего сайта www.amiro.ru, для этого просто зайдите на сайт с мобильного устройства или переключитесь в мобильный режим, нажав соответствующую ссылку в шапке сайта.

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

Отметим, что если для вашего сайта крайне важна мобильная версия собранная именно с использованием подходов 1 и 2, а бюджет и сроки ее исполнения не являются существенными факторами – разработка может быть осуществлена на Amiro.CMS API с привлечением разработчиков. В этом случае создание мобильной версии сводится к написанию клиентской части, а серверную может предоставлять ваш сайт. Примером такого подхода является входящий в поставку плагин ajax-responder – с его помощью реализованы блоки новостей на нашем сайте.

Итак, что же нужно сделать, чтобы получить мобильную версию сайта на Amiro.CMS?

По сути всего 3 вещи:

  1. Создать мобильный макет и указать его номер в настройке интерфейса;
  2. Выбрать в макетах место для ссылок переключения на мобильную и обычную версию на сайте и установить их коды.
  3. Адаптировать стили и верстку сайта настолько глубоко, насколько Вам это необходимо.

А теперь детальные инструкции по всем трем шагам.

Настройка мобильной версии

Макеты

  1. Необходимо создать новый макет для мобильной версии. Названия блоков мобильного макета должны отличаться от названия блоков обычного макета, например, «Шапка (моб.)», «Подвал (моб.)» .
  2. Для мобильного макета создается свой файл стилей mobile.css
  3. Создается новая страница, например “Мобильная версия”, ей назначается мобильный макет. Эта страница нужна для того, чтобы редактировать содержимое блоков макета.
  4. В мобильный макет следует добавить 2 признака: глобальную переменную для шаблонов и JavaScript-переменную для JS-функции определения версии макета. Глобальную переменную можно называть как угодно – она может использоваться в шаблонах на Ваше усмотрение, JavaScript-переменную необходимо назвать bMobileLayout, она используется системным JavaScript кодом.

Итого в макет мобильной версии вставляется следующий код:

##setglobalvar l_mobile="1"## ##--признак для шаблонов --##
<script> var bMobileLayout = true; ##-- признак для функции определения версии макета --##
</script>

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

<script>
checkDeviceAndLoadVersion();
</script>

Настройка параметров

Необходимо задать ID мобильного макета в параметре “Менеджер сайта – Макеты страниц – ID макета для мобильной версии сайта” .

Финальные штрихи

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

Макеты

1. В поле “код для HEAD” мобильного макета нужно добавить следующий метатег:

<meta name="viewport" content="width=device-width" />

Что это значит? Поскольку мобильные браузеры не знают, под какой размер экрана адаптирован сайт, и делают это на свой выбор, таким образом мы сообщаем им, что наш сайт адаптирован под размер экрана их устройства.

2. Стоит добавить ссылки ручного переключателя версий – обычная/мобильная. Он вставляется в верх или низ страницы.

На страницу мобильной версии:

<a href="javascript:loadDesktopVersion()">Полная версия</a>

На страницу полной версии:

<a href="javascript:loadMobileVersion()">Мобильная версия</a>

Все указанные функции JavaScript уже есть в системном коде.

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

CSS

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

Например, в обычной версии блоки на главной странице выстроены в два столбца с отступами:

.right_area_down{
     padding:0 0 0 50px;
     position:relative;
     float:left;
     display:block;
     margin-top:43px;
}

тогда в mobile.css достаточно добавить код:

.right_area_down{
     float: none;
     padding:0px;
}

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

Шаблоны

Если адаптировать страницу без изменения HTML не получается, то есть еще два варианта:

  1. Оптимизировать HTML код, так чтобы он работал и в полной и мобильной версии с минимальными изменениями только в CSS
  2. Там где это сделать невозможно или достаточно сложно, можно внести в шаблоны условные конструкции:
##if(l_mobile=='1')##
##-- HTML код для мобильной версии --##
##else
##-- HTML код для обычной версии --##
##endif##
Если стандартный механизм определения устройства и перенаправления Вам по какой-либо причине не подходит, то JavaScript этой функции можно переопределить. Для этого следует cкопировать перечисленные под спойлером функции в common.js и внести необходимые изменения.
function loadMobileVersion(){
AMI.Cookie.set('forceMobile', '1', 3600, '\\');
AMI.Cookie.del('forceDesktop');
window.location.reload();
}

function loadDesktopVersion(){
if(isMobileDevice()){
AMI.Cookie.set('forceDesktop', '1', 3600, '\\');
}else{
AMI.Cookie.del('forceDesktop');
}
AMI.Cookie.del('forceMobile');
window.location.reload();
}

function isMobileLayout(){
return (typeof(bMobileLayout)=='undefined')? false : bMobileLayout;
}

function isMobileDevice(){
return ((screen.width <= 480) || (document.body.clientWidth <= 480));
}

function checkDeviceAndLoadVersion(){

var forceMobile = AMI.Cookie.get('forceMobile');
var forceDesktop = AMI.Cookie.get('forceDesktop');
var bMobileLayout = isMobileLayout();
var bMobileDevice = isMobileDevice();

if((forceMobile=='1') && !bMobileLayout){
loadMobileVersion();
return;
}

if((forceDesktop=='1') && bMobileLayout){
loadDesktopVersion();
return;
}

if(bMobileDevice && !bMobileLayout && (forceDesktop==null) && (forceMobile==null)){
loadMobileVersion();
return;
}
}

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


[14.10.11]  
Рейтинг: 4.5 (голосов: 20)
Комментировать

Теги: интеграцияинструкциямобильная версия
 
Вернуться к списку
Комментарии (2)

   03.11.16 02:20
0

Сделал все в точности как описано. В итоге при заходе с мобильного - циклическая перезагрузка страницы. Начал дебажить - обнаружилось что в скрипте bMobileLayout всегда не установлен. Тоесть почему-то cms упорно берет не созданный мобильный макет, а обычный макет.
Подскажете, что может быть не так?

 (Амиро)  03.11.16 05:43
0

Обратитесь в поддержку http://help.amiro.ru
Cкорее всего не выполнен какой-либо пункт инструкции.

Ваш комментарий