У Бітрікс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.

Відразу хочу висловити подяку Михайлу Базарову, за статтю в його блозі, яка надихнула мене піти далі і реалізувати більш модернізовану версію автовизначення мобільної версії сайту. Також велике спасибі Станіславу Сазонову за його підказки та за те, що познайомив мене з технологією 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. І пишемо наступний код:

Мобільний трафік

Зустрічаємо мобільний трафік

Якщо Google не позначить ваш сайт ярликом "Для мобільних", він зникне з поля зору користувачів, що зайшли до Інтернету з мобільних пристроїв. Тому що при пошуку на мобільних пристроях Google враховує наявність відповідної оптимізації під час ранжування результатів. Мобільний трафік «відрізається», падають продажі, бізнес зазнає збитків.
Перевірте ваш сайт mobile-friendly?

Як пройти Google Speed ​​Test?

Необхідні складові:

Мобільний трафік набирає обертів!

Зустрічайте правильно мобільних клієнтів із платформою «1С-Бітрікс»!

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

Зустрічаємо мобільних клієнтів

Ваш сайт має бути mobile-friendly!

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

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

Чому так важливо бути mobile-friendly?

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

Google відзначатиме мобільні сайти в результатах пошуку
«Щоб попередити можливі незручності користувачів мобільних пристроїв під час перегляду сайтів, ми відзначатимемо в результатах нашого пошуку сторінки, оптимізовані для смартфонів та планшетів».

Песимізація...

Якщо Google не позначить ваш сайт ярликом «Для мобільних»? По суті, сайт зникне з поля зору користувачів, що зайшли в Інтернет з мобільних пристроїв. Тому що при пошуку на мобільних пристроях Google враховує наявність відповідної оптимізації під час ранжування результатів. Мобільний трафік "відрізається", падають продажі, бізнес зазнає збитків.

Як відповідати новим вимогам?

Що потрібно зробити?

• Пройти перевірку та отримати звіт
• Вивчити всі рекомендації
• Усунути проблеми та недоліки
• Отримати позначку Google "Для мобільних"

Перевірити легко – пройти тест

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

Чи не оптимізовано для мобільних пристроїв!

Виправити важко, якщо ви не веб-майстер

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

Адаптивна верстка

Адаптуємо сайт до мобільного ринку

Готовий приймати мобільних відвідувачів

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

Інтернет-магазини на платформі «1С-Бітрікс» – з адаптивним шаблоном

У ядро ​​продукту "1С-Бітрікс: Управління сайтом" вбудований Framework з usefull-версткою (Bootstrap 3). Універсальний Framework для верстки полегшує та прискорює створення будь-якого типу сайтів, адаптивних під мобільні пристрої (mobile-friendly).

Перше, з чого потрібно почати, – змінити принципи верстки сайту.

При проектуванні структури необхідно одночасно враховувати вимоги до адаптивної верстки.

Ви повинні зробити це частиною вашого виробничого циклу!

Універсальний Framework

Сучасна технологія адаптивної верстки

Ваш сайт спочатку mobile-friendly

Ваш сайт спочатку готовий до перегляду на будь-якому пристрої, включаючи мобільні. У ядро ​​продукту 15.5 версії вбудований універсальний Framework для верстки, що полегшує та прискорює створення mobile-friendly (адаптивних під мобільні пристрої) будь-якого типу сайтів.

Адаптивно для всього!

• Універсальний Framework для верстки (Bootstrap 3)
• Висока швидкість виробництва адаптивних сайтів
• Початкова готовність до мобільних, планшетних та десктопних версій
• Підтримка Touch інтерфейсу у всіх компонентах інтернет-магазину

Новий адаптивний шаблон інтернет-магазину

Готове рішення «Інтернет-магазин», яке входить у постачання продукту, отримало новий гарний шаблон. Framework із usefull-версткою (Bootstrap 3) дозволяє використовувати шаблон під будь-яку схему інтернет-магазину. Кожна сторінка вашого магазину тепер вмить перебудовується під будь-який пристрій.

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

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

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

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

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

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С-Бітрікс.

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