Все современные редакции «1С-Битрикс: Управление сайтом» изначально содержат в себе исчерпывающий набор инструментов и функций адаптации к мобильным устройствам. Поэтому если вы выбрали для своего интернет-ресурса CMS Bitrix - вы приняли верное решение и сэкономили не только на разработке дополнительной версии, но и на продвижении вашего проекта в поисковиках.

Google и Яндекс уважают мобильность

В алгоритмах крупнейшей поисковой системы Google есть специальный ярлычок «Для мобильных». И если вы не получили такую отметку, то о мобильном трафике можно забыть - система автоматически убирает из поисковой выдачи на смартфонах и планшетах сайты, непрошедшие соответствующий тест.

Не отстаёт и Яндекс. Отечественный поисковый лидер также давно учитывает адаптивность к мобильным устройствам как важный фактор ранжирования поисковых результатов. А в Яндекс.Вебмастере даже есть специальная функция для диагностики этого параметра.

С учётом того, какую роль играют сегодня в нашей жизни гаджеты и смартфоны, становится очевидным, что мобильная версия сайта - обязательный элемент для любого продающего лендинга, информационного портала и, тем более, интернет-магазина.

Инструментарий сайта
на Битрикс

Ваши действия

Остаться в стороне, конечно, не получится. Чтобы ваш мобильный сайт оставался в почёте у поисковых роботов, был удобен пользователям и приносил хорошую прибыль, нужен грамотный и качественный контент.

Выбирайте Bitrix , и получайте не только удовольствие от работы, но и максимальную экономическую выгоду. А менеджеры интернет-агентства Dextra всегда с радостью ответят на ваши вопросы и помогут правильно сформулировать задачи, будь то: запуск нового проекта, адаптация, редактирование вёрстки или подготовка качественного контента.

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

Встречаем мобильный трафик

Если 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. Онлайн проверку может сделать любой пользователь интернета, не нужно нигде регистрироваться. Заходим по ссылке , вводим адрес сайта и нажимаем кнопку "Анализировать". Здесь можно проверить как гугл оценивает не только мобильную версию сайта, но и обычную компьютерную. Оценка проставляется в процентах от 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 рублей. Если на сайте есть какой то большой раздел (например каталог товаров, новости, статьи и прочее), то стоимость адаптации такого раздела под мобильные устройства оговаривается отдельно, и зависит от объёма работы.

Если нужна разработка с другим дизайном, или у вас есть какие-то идеи - сделаю мобильную версию по Вашему желанию.

Нужна мобильная версия сайта? - Обращайтесь, настроим!

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

В Битрикс24 можно работать не только на компьютере в офисе, но и вне офиса – из аэропорта, кафе, из любой точки, где есть Интернет. В этом вам поможет мобильное приложение Битрикс24.

Мобильное приложение Битрикс24 – это бесплатное приложение, работающее с iPhone, iPad и Android-устройствами.

Сейчас я вам расскажу, что же это приложение умеет.

Общение

Во-первых, это прежде всего о бщение – чаты с коллегами и чаты с клиентами (открытые линии):

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

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

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

В групповых чатах можно еще выключать и включать уведомления с помощью опции Не следить/Следить в списке чатов. Такая же опция есть и в самом групповом чате:

В чат можно приглашать как по одному сотруднику, так и целый отдел или подразделение. А если вы владелец чата, то в нем можете назначить нового владельца, а так же исключить пользователей из чата.

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

Просматривайте Живую ленту, комментируйте и лайкайте сообщения коллег. Отправляйте фотографии с телефона прямо в ленту. Формы создания сообщений специально адаптированы под iOS и Android:

Контакты

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

Синхронизировать контакты телефона и портала можно в разделе Настройки > Синхронизация приложения.

Настройки

Все настройки приложения вы найдете в одном месте. Для этого перейдите на вкладку Еще и вверху вызовите меню настроек.

Настройки мобильного приложения разделены на несколько групп:

Раздел

Получать уведомления – включает или выключает возможность получения push-уведомлений.

Интеллектуальная фильтрация – при включенной опции, пока вы работаете в десктопном приложении, в мобильное приложение не будут приходить уведомления. Полезно для экономии батареи.

Cчетчик приложения – эта настройка определяет, какие счетчики инструментов (например счетчики Живой ленты или Чатов) будут влиять на общий счетчик приложения на иконке рабочего стола.

Также в этом разделе вы можете отключить ненужные типы уведомлений мобильного приложения в Сообщениях, Календарях, Чатах, Задачах и Телефонии.

Раздел .

Здесь можно создать профили синхронизации контактов и календарей.

На 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.