Як ефективно верстати шаблони під мобільні пристрої на OkayCMS

Категорії

На даний момент в OkayCMS використовується поки дві функції:

  • is_mobile - функція для визначення мобільного пристрою клієнта, при заході на сайт;
  • is_tablet - функція для визначення планшетного пристрою клієнта, при заході на сайт;

Ці функції доступні у всіх tpl-файлах клієнтського шаблону і представляються в останніх в якості булевої змінної і .

Всі знають, що адаптивні шаблони мають таким недоліком як "приховування" непотрібних частин на мобільних пристроях за рахунок властивості display: none, але це все одно не полегшує сторінку при її завантаженні на мобільному пристрої.

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

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

Наприклад, що б приховати банера з мобільних, тепер достатньо написати ось так:

 {If! $ Is_mobile}
{Get_banner var = banner_group1 group = 'group1'}
{If $ banner_group1-> items}
<Div class = "container hidden-md-down">
<Div class = "fn-slick-banner_group1 okaycms slick-banner">
{Foreach $ banner_group1-> items as $ bi}
<Div>
{If $ bi-> url}
<a href="
{If $ bi-> image}
<Img src = " " alt = "" title = "
<Span class = "slick-name">

</ Span>
{If $ bi-> description}
<Span class = "slick-description">

{If $ bi-> url}
</a>
{/ If}
</ Div>
{/ Foreach}
</ Div>
</ Div>
{/ If}
{/ If}


Так як змінна is_mobile, при заході з мобільного, поверне значення TRUE, то дана умова {if! $ Is_mobile} не пройде і код з банером не завантажили на нашій сторінці, що дасть вже хороший приріст швидкості при її завантаженні.

Це лише найпростіший приклад того, як можна полегшити собі шаблон. У більш глобальних масштабах можна робити окремі зручні меню для мобільних або планшетів. Я часто в практиці зустрічав ситуацію, коли на сторінці є мінімум 2 меню, тільки одне приховано на пристроях від 480 px, а друге використовується як десктопних. Що в принципі створює більшу кількість коду на сторінці.

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

Коментарі 3
Виталий
31.07.2017, 23:57
Возможность переключать шаблон - не самый главный плюс подхода с отдельным мобильным и десктопным шаблоном.
Mavr
07.06.2017, 14:05
Виталий, извините, а зачем на мобильном устройстве нужна возможность принудительного включения шаблона для десктопа?
Виталий
27.10.2016, 13:07
Лично мне больше нравится идея автосмены шаблона при заходе с разных устройств, который я выложил на форуме. Плюс этого метода в том, что есть возможность принудительно переключать шаблон. И второе, что код отдельных шаблонов более простой и понятный, лишенный всяких ограничений. Минус - что надо разрабатывать и вносить правки в два шаблона. Но несомненно, то что появилась функция определения устройства, это полезно. Это не исключает даже использования её при моем подходе.
Написати коментар
увійдіть в особистий кабінет
Завантажити OkayCMS
version 4.5.0
Підписатися на розсилку
Ви будете отримувати добірку корисних статей по роботі з сайтом на OkayCMS, знижки на модулі і шаблони