Як ефективно верстати шаблони під мобільні пристрої на 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, а друге використовується як десктопних. Що в принципі створює більшу кількість коду на сторінці.

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