Комп'ютери та сучасні гаджети


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

Адаптивний дизайн чи мобільна версія шаблону сайту?

Для відображення контенту в цьому немає великої різниці. Але щоб показати цей контент на дисплеї вашого девайса, його потрібно попередньо завантажити. Добре, якщо користувач підключений до високошвидкісної точки доступу в інтернет. В ідеалі це ноутбук, що виконав вхід у всесвітню павутину через wi-fi точку доступу. Але скільки ж нервів і часу ми витрачаємо в тих випадках, коли у нас в руці мобільний телефон, а з'єднання навіть не 3G, а звичайний GPRS.

А тепер уявіть, що на потрібному сайті є тільки повна оригінальна версія шаблону сайту. Ця версія гарна: з анімацією, зображеннями, стилями, скриптами та ще купою рядків різного роду коду. І ось, ви зайшли на цей сайт... 10 секунд, 20... А ми на все чекаємо. У найгірших умовах час від кліка за посиланням, до завантаження контенту та видачі його вам на дисплей може затягнутися і до хвилини. Бувають випадки і важче... Як же бути? Адже у нас адаптивний дизайн, він повинен красиво відображатися на мобільних телефонах, без анімацій і великих зображень.

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

Мобільний шаблон сайту Бітрікс

Псевдонім домену

Отже, панове! Перше, що нам потрібно зробити, це піддомен для нашого основного домену. Найкраще не винаходити велосипед, а створити піддомен типу . На просторах інтернету я бачив, що хлопці описують підключення різних шаблонів без створення псевдоніма домену для мобільної версії. Все добре, але ж ми користувачі Бітрікса, і використовуємо технологію "Композитний сайт". А якщо різні шаблони виводитимуться на однакових адресах, то й зміст композиту загубиться, оскільки кеш постійно перезаписуватиметься. Я вже через це пройшов. Тому нам потрібний додатковий псевдонім домену.

Полегшений шаблон

Тепер нам потрібно створити, а краще підготувати наперед окремий шаблон для мобільних пристроїв. Наскільки він буде полегшений – це залежатиме від розробника. Але краще забрати всі непотрібні файли 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. І пишемо наступний код:

Відповідь: потрібна.

За статистикою користувачі все частіше відвідують сайти через мобільні пристрої – смартфони та планшети.

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

Вимоги Яндекса до мобільної версії сайту

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

  1. Заходимо у вебмайстер яндекс
  2. Переходимо до розділу "Інструменти"
  3. Переходимо до підрозділу "Перевірка мобільних сторінок"
  4. Вводимо назву сайту, натискаємо кнопку "перевірити"

Якщо мобільна версія сайту відповідає очікуванням Яндекса, то Яндекс так і напише "Все в порядку!"

Вимоги Google до мобільної версії сайту

На другому малюнку - аналогічна перевірка в Google. Онлайн перевірку може зробити будь-який користувач інтернету,не потрібно ніде реєструватися. Заходимо за посиланням, вводимо адресу сайту та натискаємо кнопку "Аналізувати". Тут можна перевірити як Google оцінює не тільки мобільну версію сайту, але і звичайну комп'ютерну. Оцінка проставляється у відсотках від 0 до 100%.

  • Червона зона від 0 - 40% говорить про те, що Google дуже не подобається сторінка і потрібно виконати роботи з покращення швидкодії та якості.
  • Жовта зона від 40 - 85% говорить про те, що сайт налаштований більш-менш, але все одно потрібні доопрацювання.
  • Зелена зона від 85 - 100% говорить про те, що сайт налаштований майже ідеально. подобається пошуковій системі Google.

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

Шаблон мобільної версії сайту Бітрікс

Своїм клієнтам я пропоную мобільну версію сайту з таким дизайном. Приклади наведені нижче:

Макет має керуючі елементи:

  1. Посилання на головну сторінку
  2. Кнопка викликає функцію дзвінка на вказаний номер
  3. Відкривається форма зворотного зв'язку
  4. Кнопка 4 відкриває вертикальне меню
  5. Кнопка 5 відкриває вертикальне меню
  6. Зелена кнопка відкриває чат, через який користувач може задати питання, що його цікавлять.

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

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

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

Якщо користувач заходить з мобільного пристрою (смартфону чи планшета), то система автоматичноце визначає і видає мобільний шаблон сайту. Перенаправлення на мобільну версію сайту здійснюється на основі назви браузера пристрою користувача. Рядок браузера телефону зазвичай містить такі слова як: iPhone, Android, webOS, BlackBerry, iPod, iPad. При перенаправленні на мобільну версію сайту URL-адреса сторінки не змінюється.

Пошукові системи Google та Яндекс вважають такий шаблон ідеальнимз позиції швидкодії та зручності для користувача.

Ціна мобільної версії сайту Бітрікс

Замовити мобільну версію сайту можна у мене. Вартість встановлення такого шаблону на сайт – 5000 рублів.Якщо на сайті є якийсь великий розділ (наприклад, каталог товарів, новини, статті та інше), то вартість адаптації такого розділу під мобільні пристрої обумовлюється окремо, і залежить від обсягу роботи.

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

Потрібна мобільна версія сайту? - Звертайтесь, налаштуємо!

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

Підтримка не обмеженої кількості шаблонів у 1С-Бітрікс.

Всім, хто працює на 1С-Бітрікс, відомо, що CMS надає можливість підключати необмежену кількість шаблонів. Для тих хто не в курсі давайте розглянемо, як використовується реалізація багатошаблонності.
Для додавання шаблону необхідно перейти в розділ, в адміністративній частині сайту, "Налаштування" - "Налаштування продукту" - "Сайти" у меню, що випадає, в розділі "Сайти" є два підрозділи - "Шаблони сайтів" і "Список сайтів".

Копіюємо основний шаблон сайту.

Для початку скопіюємо шаблон сайту, для цього перейдемо в розділ "Шаблони сайтів" і скопіюємо шаблон, щоб працювати з ним. Натискаємо кнопку копіювати як показано на скріншоті:

Застосовуємо шаблон до сайту для редагування.

Нам залишилося застосувати шаблон до сайту, але так як сайт у нас робочий і на ньому можуть бути користувачі, і нам не потрібно щоб вони бачили зміни, що відбуваються на сайті, ми підключимо шаблон за умовою - "Параметр в URL". Давайте зробимо це - перейдемо до розділу "Список сайтів" і зайдемо до налаштувань сайту для якого потрібна зміна. У самому низу сторінки налаштування сайту є блок "Шаблон сайту". Вибираємо зі списку в колонці "Шаблон" копію нашого шаблону, встановлюємо умову "Параметр в URL" і додаємо будь-яку зручну вам умову, наприклад test=Y, як показано на скріншоті:

Тепер копія вашого шаблону буде відображатися, якщо ви передасте цей параметр в урл, наступним чином site.ru/?test=Y де site.ru домен вашого сайту. Ця умова буде працювати для всіх розділів і сторінок вашого сайту, наприклад, якщо вам необхідно подивитися як виглядатиме шаблон в певному розділі сайту, перейдіть в цей розділ і передайте ваш параметр, в даному випадку? test=Y і сторінка з'явиться з новим шаблоном.

Тепер ви можете редагувати новий шаблон, в той час як ваші відвідувачі будуть бачити сайт як завжди. Зверніть увагу, що всі зміни потрібно буде робити саме в папці нового шаблону, і якщо вам необхідно змінити шаблони компонентів яких немає в папці, вам потрібно буде скопіювати шаблон компонента в папку з новим шаблоном. У жодному разі не керуйте компонентами в папці /bitrix, це може призвести до критичних наслідків. І завжди робіть бекап у Хмарі 1С-Бітрікс.

Ну ось власне і вся методика, сподіваємось, що вона допоможе вам заощадити час.

У Бітрікс24 можна працювати не тільки на комп'ютері в офісі, а й поза офісом – з аеропорту, кафе, з будь-якої точки, де є Інтернет. У цьому вам допоможе мобільний додаток Бітрікс24.

Мобільний додаток Бітрікс24 - це безкоштовний додаток, що працює з iPhone, iPad та Android-пристроями.

Зараз я вам розповім, що ж ця програма вміє.

Спілкування

По-перше, це перш за все спілкування - чати з колегами і чати з клієнтами (відкриті лінії):

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

Для цього потрібно просто натиснути на іконку + у правому кутку, вибрати тип чату (відкритий або закритий чат) та запросити до нього співробітників.

У списку чатів з'явилася можливість закріплювати та відкріплювати діалоги вгорі списку – опція Закріпити/Відкріпити, а також приховувати діалоги – опція видалити:

У групових чатах можна ще вимикати та включати повідомлення за допомогою опції Не стежити/стежитиу списку чатів. Така ж опція є і в груповому чаті:

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

Для цього відкрийте розділ чату та проведіть праворуч на ліво (свайп) по учаснику та виберіть потрібний пункт.

Переглядайте Живу стрічку, коментуйте та лайкайте повідомлення колег. Надсилайте фотографії з телефону прямо у стрічку. Форми створення повідомлень спеціально адаптовані під iOS та Android:

Контакти

Під рукою у вас завжди є повний та актуальний список контактів колег. У мобільній версії Бітрікс24 знайти інформацію про потрібного співробітника так само просто, як і на порталі – просто перейдіть у головному меню до розділу Співробітники:

Синхронізувати контакти телефону та порталу можна у розділі Установки > Синхронізаціяпрограми.

Налаштування

Усі налаштування програми ви знайдете в одному місці. Для цього перейдіть на вкладку Щета вгорі викличте меню налаштувань.

Установки мобільної програми розділені на кілька груп:

    Розділ

    Отримувати повідомлення- Вмикає або вимикає можливість отримання push-повідомлень.

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

    Лічильник програми– це налаштування визначає, які лічильники інструментів (наприклад, лічильники Живої стрічки або Чатів) впливатимуть на загальний лічильник програми на іконці робочого столу.

    Також у цьому розділі ви можете вимкнути непотрібні типи повідомлень мобільного додатка у Повідомленнях, Календарях, Чатах, Завданнях та Телефонії.

    Розділ.

    Тут можна створити профілі синхронізації контактів та календарів.

    На Android-пристроях це частина системних налаштувань, там додатково можна налаштувати більш детально синхронізацію.

Налаштування пристрою

    Налаштування Бітрікс24:

    – вимкнення або увімкнення вібрації у програмі.

    Використовувати світлу тему– зміна колірної теми програми.

    Пам'ять– у цьому розділі можна очищати кеш програми та завантажених документів.

    Файли– тут вибирається розмір і якість відеофайлів, що відправляються в Живу стрічку або в чати.

    Звук– Ви можете настроїти звук сповіщень.

    Дозволи– у цьому розділі можна керувати правами доступу до фото, камери, мікрофона та геопозиції.

    Версія програми– інформація про номер версії програми.


Тепер ви можете починати та завершувати робочий день, а також ставити перерву прямо з мобільного телефону:

Управління завданнями

У мобільному додатку можна створювати завдання, контролювати їх виконання, стежити за статусами. У мобільних завданнях доступні будь-які дії із завданнями, які є у Бітрікс24. Якщо у задачах прикріплені файли, їх також можна відкрити на мобільному пристрої:

Робота з файлами

Мобільний додаток дозволяє переглядати документи, презентації та зображення. Все, що доступне вам з прав на порталі: особисті файли, загальнодоступні файли компанії, файли колег і ваших груп. Підтримуються популярні формати та документи: TXT, PNG, PDF, JPG, XLS, XLSX, DOC, DOCX, PPT, PPTX. Також є вбудований пошук – у поточній папці за заголовками та назвами файлів:

Файли можна завантажити з мобільного телефону як у Мій дискі потім прикріпити його з диска в завдання, в повідомлення в живій стрічці або в чаті, так і безпосередньо:

Увага!Є особливість завантаження файлів картинок або відео:

    Якщо ви завантажуєте зображення або відео спочатку в Мій диск, такі файли не стискаються, тобто завантажуються як оригінал.

    Якщо ви завантажуєте картинки або відео безпосередньо в Живу стрічку, коментарі, завдання, у чати, такі файли будуть стискатися. Це має сильно зашкодити швидкості завантаження. Якість відео можна регулювати в розділі Установки > Файлипрограми.

Можна вибрати до 10 різних файлів, а під час завантаження можна скасувати передачу файлів.

Календар

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

Синхронізувати події календаря телефону та порталу можна у розділі Установки > Синхронізаціяпрограми.

Мобільна CRM

Додаток дозволяє працювати з такими CRM-елементами як Справи, Контакти, Компанії, Угоди, Рахунки, Пропозиції, Ліди, Товари. Можна завести новий лід або змінити статус угоди, перебуваючи прямо на переговорах із клієнтом:

В розділі Контактиможна швидко та завести новий контакт у CRM – усі поля візитки автоматично розпізнаються та заносяться CRM, як новий Контакт або Компанія:

Аудіо- та Відеодзвінки

Телефонія Бітрікс24 працює і в мобільному додатку! Якщо вам потрібно особисто та голосом поспілкуватися з колегою, ви можете йому просто зателефонувати. А при дзвінку з клієнтом ви можете відразу побачити інформацію про угоду із CRM. У Бітрікс24 ведеться запис розмов, працює перенаправлення дзвінка на іншого співробітника (перенаправлення на мобільний телефон працює тільки з порталу, з мобільного додатка перенаправити дзвінок поки не можна), автоматичний напрямок дзвінка на відповідального та багато іншого:

Аудіо- та відеодзвінки працюють через Wi-Fi, LTE, 3G, з підтримкою HD 16:9.

Якщо помітили помилку, виділіть фрагмент тексту та натисніть Ctrl+Enter
ПОДІЛИТИСЯ:
Комп'ютери та сучасні гаджети