Адаптивний дизайн чи мобільна версія шаблону сайту?
Для відображення контенту в цьому немає великої різниці. Але для того щоб показати цей контент на дисплеї вашого девайса, його потрібно попередньо завантажити. Добре, якщо користувач підключений до високошвидкісної точки доступу в інтернет. Але скільки ж нервів і часу ми витрачаємо в тих випадках, коли у нас в руці мобільний телефон а з'єднання навіть не 3G а звичайний GPRS.
А тепер уявіть, що на потрібному сайті є тільки повна оригінальна версія шаблону сайту. Ця версія гарна: з анімацією, зображеннями, стилями, скриптами та ще купою рядків різного роду коду. І ось, ви зайшли на цей сайт... 10 секунд, 20... А ми на все чекаємо. У найгірших умовах час від кліка за посиланням, до завантаження контенту та видачі його вам на дисплей може затягнутися і до хвилини. Бувають випадки і важче... Як же бути? Адже у нас адаптивний дизайн, він повинен красиво відображатися на мобільних телефонах, без анімацій і великих зображень.
Відображатися він буде, але під час завантаження він підтягує весь контент, навіть той, який не відображає. Що ж робити? Все дуже просто - потрібен окремий і теж адаптивний шаблон сайту.
m.proger.com.ua. На просторах інтернету я бачив що хлопці описують підключення різних шаблонів без створення домену для мобільної версії. Все добре, але ж ми користувачі Бітрікса, і використовуємо технологію "Композитний сайт". А якщо різні шаблони виводитимуться на однакових адресах, то й зміст композиту загубиться, оскільки кеш постійно перезаписуватиметься. Я вже через це пройшов. Тому нам потрібний додатковий псевдонім домену.
Полегшений шаблон
Тепер нам потрібно створити, а краще підготувати наперед окремий шаблон для мобільних пристроїв. Наскільки він буде полегшений – це залежатиме від розробника. Але краще забрати всі непотрібні файли js, css або мінімізувати їхній код. Наприклад прибрати всі стилі, що не використовуються. Забрати зайві анімації, слайдери. Звичайно ж зовсім неприйнятно на мобільній версії залишати flash. Також полегшити код PHP. Вимкнути виведення непотрібних компонентів на мобільні версії. Це може бути фільтр у списку товарів. Як я помітив з ним, генерація сторінки на першому хіті відбувається довше.Mobile Detect
Mobile Detect є легким PHP класом для виявлення мобільних пристроїв (у тому числі планшети). Він використовує рядок User-Agent у поєднанні з конкретними заголовками HTTP для виявлення мобільного середовища. Завантажуємо свіжий файл Mobile_Detect.php прямо із сайту розробника mobiledetect.net. Встановлюємо цей файл на сервер прямо в директорію шаблону "поряд" з файлом header.php. В обох шаблонах в header.php підключаємо цей файл і ставимо умову для redirect.Написання коду
Ну що ж, приступимо до написання самого коду. Щоб обійти технологію композитного сайту, і не переривати створення композитного кешу, нам знадобиться файл header.php, який підключається ще до підключення файлу header.php самого шаблону сайту. Цей файл знаходиться на адресі /bitrix/header.php. І пишемо наступний код:20 січня 2017 (Boudybuilder) Виталий Фантич