Движок для мобильного сайта

Простое решение для простых сайтов без использования MySQL

Для новичков

Посетите сайт для новичков с подробными инструкциями.

Сообщество

Учавствуйте в развитии движка, общайтесь в сообществе.

Расширения

Расширяйте возможности движка с помошью расширений.

Демо сайт

Попробуйте движок в действии на нашем демо сайте.

MyEngine CMS — Система управления сайтом, написанная на языке программирования PHP. Наша CMS не использует никаких дополнительных баз данных для хранения информации, вся нужная информация хранится в текстовых файлах.

Ранней осенью этого года мы с коллегами из CMS Magazine провели опрос, в котором приняли участие и поделились своим опытом и мнением всего более 500 веб-студий и агентств, за что им огромное спасибо.
Часть результатов мы публикуем здесь, надеясь на то, что многие из вас заинтересуются этими данными и оставят свои комментарии или будут использовать их по необходимости в докладах/на встречах и так далее.
И да, внимание: под катом много картинок!

Спрос и предложение

За год (с середины 2011 по середину 2012 года) каждая компания разработала в среднем 25 сайтов. При этом, лишь 16% выпускаемых сайтов были адаптированы под мобильные устройства (то есть имели адаптивную верстку или мобильную версию). И лишь половина из мобильных сайтов обладала какой-либо расширенной функциональностью (личный кабинет, онлайн-заказ и пр.).

«Сколько сайтов было разработано вашей компанией за последний год?»

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

«Есть ли спрос на адаптацию сайта под мобильные устройства?»

Интересно, что московские и петербургские заказчики игнорируют мобильные устройства точно так же, как и в регионах: спрос ощущают лишь 17% агентств.

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

Между тем, согласно данным Liveinternet.ru, в Рунете более 20% трафика приходится на мобильные операционные системы Android, iOS и Symbian. Очевидно, что такое количество потенциальных посетителей нельзя игнорировать. Поэтому скепсис заказчиков относительно востребованности мобильного представления сайта отчасти инерционный.

Как указано выше, только 16% созданных за год сайтов было адаптировано для мобильных устройств. Сами же руководители агентств считают, что это количество должно быть значительно больше: 37% опрошенных считают, что почти все выпускаемые их агентством сайты должны быть адаптированы для мобильных устройств; еще 36% — что примерно каждый второй. С определенными допущениями эти данные можно считать экспертным мнением сообщества веб-разработчиков.

«Сколько из разработанных вами за последний год сайтов объективно надо было снабдить мобильной версией или сделать адаптивными?»

Целесообразность поддержки мобильных устройств

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

«Для каких типов сайтов в общем случае целесообразно создавать полнофункционалные мобильные версии?»

Ответ на вопрос «нужно ли адаптировать сайт для мобильных устройств» должен базироваться на сценариях потребления контента сайта. В общем случае, мобильным вебом люди пользуются с целью «уточнить информацию/контакты», «быстро заказать», «узнать расписание», «посмотреть новости», то есть ситуационно. Для детального изучения информации (в т.ч. ассортимента продукции) мобильные устройства, особенно телефоны, не так удобны. Исходя из сценариев использования сайта, можно определять, нужно ли поддерживать мобильные устройства, в каком объеме представлять мобильный контент, какой функциональностью снабжать мобильный сайт.

Говоря о функциональности систем управления сайтами (CMS) в контексте мобильных сайтов, очевидно, что CMS должны поддерживать основные функции работы с мобильными сайтами:

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

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

«Какие из перечисленных модулей/функционалов наиболее востребованы на мобильных сайтах?»

Существует два способа адаптации сайта для мобильных устройств: создание мобильного сайта «рядом» с основным, а также создание единого сайта для всех типов устройств (сайт с адаптивной версткой). Третий способ (единый сайт для всех типов устройств; шаблон оформления меняется в зависимости от типа устройства) мы не рассматривали ввиду недостаточной универсальности, т. к. он подходит для небольшого количества моделей сайтов, например, СМИ, блоги.

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

  • снабдить основной сайт мобильной версией
  • разработать адаптивный сайт (корректно работающий под любым типом устройств)

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

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

Отдельный важный вопрос, который встает при разработке мобильного сайта — дизайн. В России в заказной веб-разработке сравнительно мало используются готовые шаблоны дизайна (например, templatemonster.com): как правило, для каждого нового «полноформатного» сайта разрабатывается индивидуальный шаблон. Мобильные же сайты ввиду небольшого рабочего пространства (экрана) дают проектировщику и дизайнеру гораздо меньше возможности для оформления и украшения, вывода больших меню, рекламных баннеров, виджетов. К тому же, существует мнение, согласно которому интерфейс мобильного сайта должен напоминать скорее интерфейс операционной системы телефона, нежели корпоративный стиль компании-владельца сайта. Поэтому веб-агентства более терпимо относятся к типовым макетам дизайна: 71% опрошенных допускают использование готовых шаблонов мобильного сайта (13% в каждом проекте, 58% — по ситуации).

«Считаете ли вы (и ваши заказчики), что мобильная версия сайта должна иметь уникальный, разработанный специально для заказчика, дизайн?»

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

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

  • В настоящее время спрос среди заказчиков на адаптацию сайтов под мобильные устройства крайне мал, несмотря на ощутимую долю мобильного трафика в Рунете.
  • Показатели спроса примерно равны в обеих столицах и в целом по России.
  • Разработчики сайтов не поддерживают этот скепсис заказчиков, но им лишь редко удается преодолеть его.
  • Значительный процент разработчиков считает важной адаптацию под мобильные устройства для информационных и сервисных проектов, а также для интернет-магазинов; другие, более распространенные модели сайтов (корпоративные, личные, промо-сайты) — гораздо реже.
  • Наиболее важные функциональные модули для мобильного сайта (помимо само собой разумеещихся): базовые возможности интернет-магазина, поиск, интеграция с социальными сетями, инструменты общения, личный кабинет.
  • Адаптация сайта под мобильные устройства чаще всего увеличит бюджет проекта на 20-50%, при этом, адаптивные сайты скорее будут дешевле, чем создание мобильной версии.
  • Большинство разработчиков допускают возможность использования стандартных шаблонов дизайна мобильного сайта.
  • По мнению профессионального сообщества, будущее веба — за адаптивными сайтами.

Полная версия исследования с комментариями NetCat и CMS Magazine, а также исходные данные, которые можно использовать даже для создания собственных графиков — по ссылке.

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

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

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

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

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

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

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

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

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

Мобильное приложение, устанавливаемое на телефон/смартфон из 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.

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

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

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

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

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

Макеты

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

В /_local/common_functions.php необходимо добавить функцию установки глобальной переменной l_mobile (переменную можно называть как угодно – она может использоваться в шаблонах на Ваше усмотрение).
AMI_Event::addHandler(‘custom_on_request_init’, ‘handleOnRequestInit’, AMI_Event::MOD_ANY);
function handleOnRequestInit($name, array $aEvent, $handlerModId, $srcModId) <
if (AMI::getSingleton(‘env/request’)->getCookie(‘forceMobile’, false)) <
AMI_Registry::get(‘oGUI’)->AddGlobalVars(Array(‘l_mobile’ => ‘1’));
>
return $aEvent;
>

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

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

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

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

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

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

Макеты

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

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

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

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

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

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

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

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

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

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

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

Шаблоны

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

  1. Оптимизировать HTML код, так чтобы он работал и в полной и мобильной версии с минимальными изменениями только в CSS
  2. Там где это сделать невозможно или достаточно сложно, можно внести в шаблоны условные конструкции:

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


[an error occurred while processing the directive]
Карта сайта