RSS-стрічка усіх новин
rss_other
Twitter
Twitter

Як створити мобільну версію сайту на Joomla!

joomla-mobile-versionЗ поширенням смартфонів та розвитком безпровідного інтернету, користувачів що можуть відвідувати Ваш сайт з мобільних пристроїв стає дедалі більше.

Крім різних iPhone/Android -телефонів, у світі триває бум планшетів. Починаючи від законодавця "моди" iPad від Apple і закінчуючи різнобарв’ям Android-планшетів, а також різних електронних "читалок" на кшталт Kindle від Amazon.

Звичайно, ні адміністратори сайтів ні їх замовники не можуть бути осторонь цього процесу і повинні готувати мобільні версії сторінок на Joomla! .

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

Особливості мобільної версії

Хтось може сказати: "а для чого окрему версію?".

Справді, багато телефонів чи планшетів, зараз, мають великі роздільні здатності та великі екрани.

Але:

  • Інтерфейс звичайного сайту пристосований для мишки, а не для керування пальцями.
  • Навіть з високою роздільною здатністю, але фізичні розміри більшості смартфонів (3-4'') є малими для нормальної роботи з усією сторінкою.
  • Портативні пристрої, як правило, мають не дуже швидкі процесори. Віддак їм може бути важко зображати "важкі" сторінки, перенасичені скриптами і графікою.
  • Портативні пристрої можуть не підтримувати деяких технологій (Flash, "важкі" Javascript бібліотеки). В таких випадках  медіа (відео тощо) можуть видаватися в спеціальних форматах.
  • Мобільні версії сторінок можуть пропонувати портативним пристроям додаткові функції (інтеграція з закладками в телефоні, швидкий доступ до контактів на сайті тощо).
  • Користуючись 3G-зв’язком, портативні пристрої,як правило, мають меншу швидкість доступу до Вашого сайту ніж користувачі з стаціонарних точок підключення.
  • Знаючи, що Ваш сайт дружній для мобільних пристроїв, Ви можете використовувати це в рекламі чи маркетингових акціях. Наприклад розташовуючи QR-коди для сканування на соціальних сайтах, візитках, товарах.

Таким чином, створюючи мобільну верcії веб-сторінки Ви надаєте можливість своїм відвідувачам швидко та легко читати сайт, де б вони не знаходились: на роботі, в дорозі, чи вдома на канапі.

Чи потрібна Вам мобільна версія?

В загальному, створення мобільної версії Joomla!-сайту не вимагатиме надзвичайних витрат коштів, чи ресурсів.

Але, якщо Ви не знаєте чи справді це Вам потрібно — спочатку проведіть елементарний аналіз.

Можна в загальному оцінити, чи є потреба заходити на Ваш сайт з мобільного, яка Ваша аудиторія?

А можна скористатися статистикою, наприклад, Google Analytics. У розділі "Відвідувачі -> Мобільні пристрої" є статистика відвідуваності з телефонів/планшетів:

GA

Якщо бачите, що таких відвідувачів стає більше (хоча вони "мучаться" на звичайній версії сайту) — робіть висновки.

Там само можна бачити тип пристроїв, якими користуються відвідувачі. Це може впливати на оптимізацію сторінок (наприклад більше під дизайн та технології Apple, чи підлашування під Symbian ;) ).

Замість прологу

Перш за все, треба зазначити, що у версіях Joomla! 1.6.x, завдяки новій системі шаблонів, робота з шаблонами стала значно зручнішою.

Хоча і для Joomla! 1.5 існує можливість створити спеціальні шаблони, для мобільних пристроїв. А спеціальні додатки (плагіни) вирішують який шаблон полказувати відвідувачеві.

Крім того, існують сторонні сервіси, не пов’язані напряму з Joomla!, які дозволяють перетворити Вас сайт на мобільний.

Звичайно, найкращим варіантом є створення спеціального, окремого, шаблону для мобільноїх версії.

Але якщо дизайнер з Вас ніякий а програміст посередній, то краще скористатися готовими рішеннями — спеціальними додатками, що пропонують стандартні дизайни під найпропулярніші пристрої.

Якщо ситуація дуже особлива, можна доручити перетворення вигляду сайту у мобільний спеціальним системам, які не працюють у Joomla! а просто пропускають Ваш сайт через себе, викидаючи з нього усе "зайве".

 

Додатки + шаблони Joomla!

Це спеціальні розширення, які визначають який шаблон потрібно показувати відвідувачеві та відповідні "мобільні" шаблони.

Mobile Joomla

mobile-joomla-logo

MJ

  • Розробник: http://mobilejoomla.com
  • Вартість: безкоштовно
  • Сумісніть: Joomla! 1.5

Mobile Joomla — швидкий і надійний метод "мобілізувати" Ваш сайт.

Встановили, включили, насолоджуєтеся. ;) Поки що, працює лише для Joomla! 1.5.

Mobile Joomla! автоматично впізнає мобільного відвідувача використовуючи декілька методів: WURFL, User-agent тощо. Або можна задати спеціальну адресу, яка буде мобільною версією (наприклад http://m.example.com)

Додаток автоматично пропонує відвідувачеві потрібну версію сайту (потрібний шаблон): iPhone, смартфон чи версія для старих телефонів (наприклад прості Nokia).

Усі шаблони постачаються разом з розширенням. Кожен шаблон має спеціальні контейнери для модулів. В них можна розташувати меню для мобільної версії, чи рекламу чи мобільний пошук.

Ви можете вибирати який тип шаблону показувати дял певних типів пристроїв (наприклад для Android-пристроїв показувати iPhone-версію).

Mobile Joomla

Mobile Joomla! має свою систему розширень. Наприклад можна встановити спеціальний модуль для входу в систему, чи додаток, що впізнаю ролики YouTube і автоматично перетворює їх адресу на мобілну версію відео YouTube.

Звичайно, в налаштуваннях, можна задавати малюнок для "логотипу". А всі інші малюнки (у статтях тощо) можуть атвоматично звужуватись, щоб ідеально пасувати під розміри екрану.

Самі мобільні шаблони можна редагувати як звичайні шаблони Joomla! (HTML/CSS).

Остання версія Mobile Joomla отримала функцію автооновлення — тепер перейти на свіжий випуск можна просто з панелі адміністратора, однією кнопкою.

Tap Theme

TapTheme

  • Розробник: http://taptheme.com/
  • Вартість: 29$ за кожну з доступних версій (iPhone, iPad, Android)
  • Сумісніть: Joomla! 1.5

Шаблони від Tap Theme розроблені спеціально і тільки для мобільних пристроїв. Спеціальний додаток включає потрібний шаблон, коли відвідувач заходить з мобільного.

Цікаво, що крім стандарнтих мобільних шаблонів, є можливість показувати Ваш сайт як набір піктограмок (значечків) що посилаються на розділи сайту. Так сайт ніби виглядає природньо, як набір програмок з телефону.

TapTheme-2_thumb TapTheme-3_thumb

 

Шаблонні системи (фреймворки)

Фреймоврки для шаблонів Joomla! — спеціальні системи, які відповідають за дизайн та зображення наповнення.

Вони допомагають веб-розробникам створювати складні сторінки, використовуючи прості методи, бо за все дбає сам фреймворк.

Такі системи не тільки керують дизайном, але можуть змінювати і самі матеріали, які виводяться на сторінці.

RocketTheme, фреймворк Gantry

RocketTheme

  • Розробник: http://rockettheme.com
  • Фреймворк: http://gantry-framework.org
  • Вартість: фреймворк Gantry розповсюджується безкоштовно. Шаблони доступні лише для членів платного клубу (50$), але є і безкоштовні.
  • Сумісніть: Joomla! 1.5 (1.6 в розробці)

RocketTheme давно відомі своїми професійними шаблонами. Завдяки створеному ними фреймворку Gantry, шаблони стали ще потужніші.

Майже усі налаштування поведінки шаблону здійснюються з панелі адміністратора.

Gantry-3

Шаблон що використовує Gantry атвоматично визначає мобільних користувачів і пропонує для них спеціальну версію сторінки. Для iPhone пропонується "рідна" для MacOS версія.

Gantry-0Gantry-1

На разі, доступно два безкоштовних шаблони для Joomla! 1.5 що використовують цю систему: Grunge та Quasar.

Фреймворк Gantry встановлюється окремо, як додаток Joomla! і поки що розповсюджується вільно (GPL-ліцензія).

Я не знаю чому, але жоден з шаблонів RocketTheme що працює на Gantry, не показав для мого Android мобільної версії сайту (використовую ілюстрації з демо-сайту). ;) Чи він любить лише iPhone? ;)

JoomlArt, фреймворк T3

JoomlaArt

  • Розробник:http://joomlart.com/
  • Фреймворк:http://wiki.joomlart.com
  • Вартість: фреймворк T3 розповсюджується безкоштовно. Шаблони доступні лише для членів платного клубу (59$).
  • Сумісніть: Joomla! 1.5/1.6

JoomlArt створили свій власний фреймворк — T3. Він підтримує силу-силенну різних налаштувань, в тому числі профілі дизайну, компресію даних, AJAX і т.п.

JoomlArt-T3-1_thumb JoomlArt-T3-2_thumb

Остання версія T3 (T32) підтримує і Joomla! 1.6.

Для розробників, JoomArt пропонує "чистий" шаблон для T3, на основі якого можна створити свій власний.

JoomlArt-4

Joomla!Junkie, фреймворк Morph

joomlajunkie

  • Розробник: http://joomlajunkie.com/
  • Фреймворк: http://prothemer.com/morph/
  • Вартість: як фреймворк Morph, так і шаблони доступні лише для членів платного клубу (49$)
  • Сумісніть: Joomla! 1.5 (1.6 в розробці)

Фреймворк Morph контролює усі аспекти дизайну. З ним шаблон — як дитяча іграшка, де кожен елемент, як кубик, що кладеться у своє місце.

Створення Вашого дизайну відбувається через конфігуратор, де все під контролем.

joomlajunkie-1

Демонстраційні сторінки ніяк не реагували на Android (показували повну версію).

В конфігураторі передбачено режими роботи з мобільними пристроями, але, здається, мається на увазі лише iPhone.

joomlajunkie-2

 

Сторонні системи

Mobify

Mobify-1

  • Розробник: http://mobify.me
  • Вартість: безкоштовно, з певними обмеженнями (5000 переглядів та інше)

Сервіс Mobify ніяк напряму не пов’язаний з Joomla!. Але його завдання — створити з Вашого сайту мобільну версію.

Mobify розглядає сайт за структурними блоками, та у візуальному редакторі дозволяє вибрати які з них потрібно показувати, а які ні.

Можна створити набір "правил" для конкретних сторінок (адрес) Вашого сайту.

Віооролики з популярних сервісів автоматично замінюються на відповідні скріншоти-посилання, що ведуть на мобільні версії відео.

Можна інтегрувати Google Analytics, Google Adsense, Google Maps.

Після швидкої реєстрації Вам надається власне ім’я SITE.mobify.com, або можна прив’язати своє власне.

Я користувався цим сервісом раніше. Але зараз, їх сторінка змінилася, і я не можу знайти згадку про додаток для Joomla!, що скеровує мобільних користувачів на mobify-версію.

Google Mobile Optimizer

google-mobile

Напевне найпростіший метод. Зайдіть на http://google.com/gwt/n , вкажіть адресу сайту і отримаєте дівочо-чисту версію свого сайту, яка напевне буде нормально читатися на мобільному пристрої.

Проте ніяких налаштувань чи оптимізації. Зате швидко і без зусиль.

Висновки

Звичайно, розглянуто не усі можливі системі які допоможуть зробити сайт на Joomla! мобільним.

Я намагався розповісти лише про ті, якими сам користувався чи багато чув. Вам треба самому вибрати метод, яким скористатись.

В загальному, для швидкого старту мобільного сайту я б радив Mobile Joomla.

Якщо Ви розробник, або купуєте шаблон у професійної студії що використовує свій веб-фреймворк — звичайно краще скористатися вбудованими в шаблон можливостями мобільної версії.

Якщо у Вас нестандартний сайт, який погано вписується у звичайні методи — спробуйте сторонні системи, які розглядаються сайт загалом і їм нема великої різниці на чому він працює.

Буду радий відповісти на Ваші питання, якщо вони виникнуть. Якщо маєте власний досвід зі створення мобільних версій — будь ласка, поділіться в коментарях.

Думаю всім буде цікаво! ;)