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

Published on Неділя, 10 квітня 2011 13:00
Автор Юрій Сметана

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

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

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

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

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

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

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

Але:

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

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

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

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

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

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

GA

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

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

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

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

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

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

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

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

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

 

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

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

Mobile Joomla

mobile-joomla-logo

MJ

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

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

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

TapTheme-2_thumb TapTheme-3_thumb

 

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

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

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

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

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

RocketTheme

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

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

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

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

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

JoomlArt-4

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

joomlajunkie

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

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

joomlajunkie-1

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

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

joomlajunkie-2

 

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

Mobify

Mobify-1

Сервіс 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.

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

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

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

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