Bitrix mobile version template. BitrixMobile technology

In Bitrix24 you can work not only on a computer in the office, but also outside the office - from the airport, a cafe, from anywhere where there is Internet. The Bitrix24 mobile application will help you with this.

Mobile application Bitrix24 is free application, works with iPhone, iPad and Android devices.

Now I will tell you what this application can do.

Communication

Firstly, it is primarily about communication – chats with colleagues and chats with clients (open lines):

You can create a new chat from the mobile app, just like in the browser or desktop app!

To do this you just need to click on the icon + in the right corner, select the chat type (open or closed chat) and invite employees to it.

In the list of chats, it is now possible to pin and unpin dialogs at the top of the list - option Pin/Unpin, and also hide dialogs – option Delete:

In group chats, you can also turn notifications off and on using the option Don't follow/Follow in the chat list. The same option is available in the group chat itself:

You can invite either one employee at a time or an entire department or division to the chat. And if you are the owner of the chat, then you can assign a new owner to it, as well as exclude users from the chat.

To do this, open the chat participants section and swipe from right to left (swipe) over the participant and select the desired item.

View the Live Feed, comment and like your colleagues' posts. Send photos from your phone directly to your feed. Message creation forms are specially adapted for iOS and Android:

Contacts

You always have a complete and up-to-date list of colleagues' contacts at your fingertips. IN mobile version Bitrix24 is as easy to find information about the desired employee as on the portal - just go to the section in the main menu Employees:

You can synchronize your phone and portal contacts in the section Settings > Synchronization applications.

Settings

You will find all application settings in one place. To do this, go to the tab More and at the top call up the settings menu.

The mobile application settings are divided into several groups:

    Chapter

    Receive notifications– enables or disables the ability to receive push notifications.

    Smart filtering– if this option is enabled, while you are working in the desktop application, notifications will not be sent to the mobile application. Useful for saving battery.

    Application counter– This setting determines which tool counters (for example Live Feed or Chat counters) will affect the overall application counter on the desktop icon.

    Also in this section you can disable unnecessary types of mobile application notifications in Messages, Calendars, Chats, Tasks and Telephony.

    Chapter .

    Here you can create synchronization profiles for contacts and calendars.

    On Android devices this is part system settings, there you can additionally configure synchronization in more detail.

Device Settings

    Bitrix24 settings:

    – disable or enable vibration in the application.

    Use light theme– change the color theme of the application.

    Memory– in this section you can clear the cache of the application and downloaded documents.

    Files– here you select the size and quality of video files sent to Live Feed or chats.

    Sound– you can customize the notification sound.

    Permissions– in this section you can manage access rights to the photo, camera, microphone and geolocation.

    Application version– information about the application version number.


Now you can start and end your working day, as well as set a break, directly from your mobile phone:

Task management

In the mobile application, you can create tasks, monitor their completion, and monitor their statuses. In mobile tasks, any actions with tasks that are available in Bitrix24 are available. If tasks have files attached, you can also open them on your mobile device:

Working with files

The mobile application allows you to view documents, presentations and images. Everything that is available to you according to your rights on the portal: your personal files, public company files, files of colleagues and your groups. Popular formats and documents are supported: TXT, PNG, PDF, JPG, XLS, XLSX, DOC, DOCX, PPT, PPTX. There is also a built-in search - in the current folder by headers and file names:

Files can be downloaded from a mobile phone as in My disk and then attach it from Disk to a task, to a message in the Live Feed or in a chat, or directly:

Attention! There is a feature for loading image or video files:

    If you upload pictures or videos first to My disk, then such files are not compressed, i.e. loaded as the original.

    If you upload pictures or videos directly to Live Feed, comments, tasks, or chats, then such files will be compressed. This should have a big impact on your download speed. The quality of the downloaded video can be adjusted in the section Settings > Files applications.

You can choose up to 10 different different files, and during downloading you can cancel the file transfer.

Calendar

The mobile Calendar displays an up-to-date list of appointments, planning sessions, meetings and other events. Also, from your mobile device, you can accept invitations or decline to participate in meetings, create new events and invite your colleagues to them:

You can synchronize phone and portal calendar events in the section Settings > Synchronization applications.

Mobile CRM

The application allows you to work with such CRM elements as Cases, Contacts, Companies, Transactions, Accounts, Offers, Leads, Products. You can create a new lead or change the status of a deal while directly in negotiations with a client:

In the section Contacts you can quickly create a new contact in CRM - all fields of the business card are automatically recognized and entered into CRM, as new Contact or Company:

Audio and Video calls

Bitrix24 telephony also works in the mobile application! If you need to communicate with a colleague in person and by voice, you can simply call him. And when you call with a client, you can immediately see information about the transaction from the CRM. Bitrix24 records conversations, redirects calls to another employee (redirecting to a mobile phone only works from the portal; it is not yet possible to redirect a call from a mobile application), automatically routes the call to the person in charge, and much more:

Audio and Video calls work via Wi-Fi, LTE, 3G, with support for HD 16:9.

Mobile traffic

Meeting mobile traffic

If Google doesn't mark your site with a "Mobile Friendly" label, it will disappear from the view of users who access the Internet from mobile devices. Because when searching on mobile Google devices takes into account the presence of appropriate optimization when ranking results. Mobile traffic is cut off, sales are falling, and the business is suffering losses.
Check - is your site mobile-friendly?


How to pass the Google Speed ​​Test?

Required components:

Mobile traffic is gaining momentum!

Meet mobile clients correctly with the 1C-Bitrix platform!



Think you don't have mobile data?
Check it out. Mobile traffic now prevails on many sites, even those that are not intended for mobile viewing and do not have mobile versions. For example, flower growers, book lovers and other members of various communities are increasingly accessing the Internet from mobile devices.

We meet mobile clients


Your website should be mobile-friendly!

Your site will disappear from the first pages of Google search results if it is not easily viewable on mobile devices.

Google has sent out warnings to sites that are poorly optimized for the mobile platform that as of April 21, 2015, these sites will be relegated to search results.

Why is it so important to be mobile-friendly?

Surely many people switched from Google search results to sites that were not optimized for viewing on smartphones. Pages with tiny links and hard-to-read text that also don't fit on your device's screen create a bad impression.

Google will tag mobile sites in search results
“To help prevent mobile users from experiencing inconvenience while browsing, we will begin highlighting pages that are optimized for smartphones and tablets in our search results.”

Pessimization...

What if Google doesn't label your site as "Mobile Friendly"? Essentially, the site will disappear from the view of users accessing the Internet from mobile devices. Because when searching on mobile devices, Google takes into account the presence of appropriate optimization when ranking results. Mobile traffic is cut off, sales are falling, and the business is suffering losses.

How to meet new requirements?

What needs to be done?
  • Pass the test and get a report
  • Explore all recommendations
  • Eliminate problems and shortcomings
  • Get Google's Mobile Friendly Label
It's easy to check - take the test

To find out if your pages meet the new requirements, just go through verification procedure for optimization for mobile devices.



Not optimized for mobile devices!

Difficult to fix unless you are a webmaster

To eliminate all identified problems when viewing from smartphones and tablets, and not just one page, but your entire site, you need to do a lot. In particular, you need to study the guides for webmasters on creating and optimizing mobile versions of sites, documentation on setting up a content management system and site templates. Only specialists can do this.

Adaptive layout

Adapting the site to the mobile market

Ready to receive mobile visitors

Each page of your website, if it is on the 1C-Bitrix platform, is instantly rebuilt for any device. Your website is initially ready for mobile, tablet and desktop versions. In addition, the Touch interface is supported in all components of the online store.



Online stores on the 1C-Bitrix platform - with an adaptive template


The core of the 1C-Bitrix: Site Management product has a built-in Framework with usefull layout (Bootstrap 3). The universal Framework for layout makes it easier and faster to create any type of website that is adaptive for mobile devices (mobile-friendly).

The first thing you need to start with is to change the principles of website layout.



When designing a structure, you must immediately take into account the requirements for adaptive layout.



You must make this part of your production cycle!




Universal Framework

Modern technology of adaptive layout

Your site is initially mobile-friendly

Your website is initially ready to be viewed on any device, including mobile devices. The product core of version 15.5 has a built-in universal Framework for layout, which facilitates and speeds up the creation of mobile-friendly (adapted for mobile devices) websites of any type.



Adaptable for everything!
  • Universal Framework for layout (Bootstrap 3)
  • High speed of production of adaptive websites
  • Native readiness for mobile, tablet and desktop versions
  • Touch interface support in all online store components
New adaptive online store template

The ready-made “Online Store” solution included in the product delivery has received a new beautiful template. Framework with usefull layout (Bootstrap 3) allows you to use the template for any online store scheme. Every page of your store now instantly adapts to any device.

Answer: needed.

According to statistics, users are increasingly visiting websites through mobile devices - smartphones and tablets.

If a user enters a query from a mobile device in the search bar, then search engines in the search results give preference to sites that have a mobile version.

Yandex requirements for the mobile version of the site

This picture shows a site check in Yandex. You can go to Yandex webmaster and see if the mobile version of your site meets Yandex requirements. The analysis can be done by going to the desired section:

  1. Go to webmaster Yandex
  2. Go to the "Tools" section
  3. Go to the "Check" subsection mobile pages"
  4. Enter the name of the site, click the "check" button

If the mobile version of the site meets Yandex's expectations, then Yandex will write “Everything is fine!”

Google requirements for the mobile version of the site

The second picture shows a similar check in Google. Online check anyone can do internet user, no need to register anywhere. Follow the link, enter the site address and click the "Analyze" button. Here you can check how Google evaluates not only the mobile version of the site, but also the regular desktop one. The score is given as a percentage from 0 to 100%.

  • The red zone from 0 - 40% indicates that Google really does not like the page and needs to do work to improve performance and quality.
  • The yellow zone from 40 - 85% indicates that the site is more or less configured, but improvements are still required.
  • The green zone from 85 - 100% indicates that the site is configured almost perfectly and Google search engine likes it.

Thus, search engines set a number of requirements for the mobile version of the site. So that it loads quickly, there is no horizontal scrolling, there are large links (which you can click on with your finger on a smartphone and not miss), so that the text is not too small and can be read comfortably. Everything is aimed at making it convenient for the user to view your site from a mobile device..

Template for the mobile version of the Bitrix website

I offer my clients a mobile version of the site with this design. Examples are presented below:

The layout has controls:

  1. Link to home page
  2. The button calls up the phone call function on specified number
  3. The feedback form opens
  4. Button 4 opens vertical menu
  5. Button 5 opens vertical menu
  6. The green button opens a chat through which the user can ask questions.

The menu shows the main sections of the site. If desired, some sections can be removed from the mobile version.

The template does not have horizontal scrolling, the template adapts to the device. Also the template has no extra java scripts, which slow down the display of the page to the user, or somehow slow it down. Java scripts are configured to a minimum and are only required for the mobile version to work.

The template uses adaptive layout. The minimum template width is 300 pixels. This number was selected based on observations of user devices. The upper limit of screen width that I usually target is 1199 pixels. Above this value is the normal version of the site.

If the user logs in from a mobile device (smartphone or tablet), then the system automatically this determines displays a mobile site template. Redirection to the mobile version of the site is carried out based on the name of the user’s device browser. The phone browser line usually contains words such as: iPhone, Android, webOS, BlackBerry, iPod, iPad. When redirected to the mobile version of the site The page URL does not change.

Search engines Google and Yandex consider this template ideal from the standpoint of speed and user friendliness.

Price for the mobile version of the Bitrix website

You can order a mobile version of the site from me. The cost of installing such a template on a website is 5,000 rubles. If the site has a large section (for example, a product catalog, news, articles, etc.), then the cost of adapting such a section for mobile devices is negotiated separately and depends on the amount of work.

If you need a development with a different design, or you have some ideas, I will make a mobile version according to your wishes.

Do you need a mobile version of the site? - Contact us, we’ll set it up!

Mobile traffic

Meeting mobile traffic

If Google doesn't label your site "Mobile Friendly", it will disappear from view for users accessing the Internet on mobile devices. Because when searching on mobile devices, Google takes into account the presence of appropriate optimization when ranking results. Mobile traffic is cut off, sales are falling, and the business is suffering losses.
Check - is your site mobile-friendly?


How to pass the Google Speed ​​Test?

Required components:

Mobile traffic is gaining momentum!

Meet mobile clients correctly with the 1C-Bitrix platform!



Think you don't have mobile data?
Check it out. Mobile traffic now prevails on many sites, even those that are not intended for mobile viewing and do not have mobile versions. For example, flower growers, book lovers and other members of various communities are increasingly accessing the Internet from mobile devices.

We meet mobile clients


Your website should be mobile-friendly!

Your site will disappear from the first pages of Google search results if it is not easily viewable on mobile devices.

Google has sent out warnings to sites that are poorly optimized for the mobile platform that as of April 21, 2015, these sites will be lowered in search results.

Why is it so important to be mobile-friendly?

Surely many people switched from Google search results to sites that were not optimized for viewing on smartphones. Pages with tiny links and hard-to-read text that also don't fit on your device's screen create a bad impression.

Google will tag mobile sites in search results
“To help prevent mobile users from experiencing inconvenience while browsing, we will begin highlighting pages that are optimized for smartphones and tablets in our search results.”

Pessimization...

What if Google doesn't label your site as "Mobile Friendly"? Essentially, the site will disappear from the view of users accessing the Internet from mobile devices. Because when searching on mobile devices, Google takes into account the presence of appropriate optimization when ranking results. Mobile traffic is cut off, sales are falling, and the business is suffering losses.

How to meet new requirements?

What needs to be done?
  • Pass the test and get a report
  • Explore all recommendations
  • Eliminate problems and shortcomings
  • Get Google's Mobile Friendly Label
It's easy to check - take the test

To find out if your pages meet the new requirements, just go through verification procedure for optimization for mobile devices.



Not optimized for mobile devices!

Difficult to fix unless you are a webmaster

To eliminate all identified problems when viewing from smartphones and tablets, and not just one page, but your entire site, you need to do a lot. In particular, you need to study the guides for webmasters on creating and optimizing mobile versions of sites, documentation on setting up a content management system and site templates. Only specialists can do this.

Adaptive layout

Adapting the site to the mobile market

Ready to receive mobile visitors

Each page of your website, if it is on the 1C-Bitrix platform, is instantly rebuilt for any device. Your website is initially ready for mobile, tablet and desktop versions. In addition, the Touch interface is supported in all components of the online store.



Online stores on the 1C-Bitrix platform - with an adaptive template


The core of the 1C-Bitrix: Site Management product has a built-in Framework with usefull layout (Bootstrap 3). The universal Framework for layout makes it easier and faster to create any type of website that is adaptive for mobile devices (mobile-friendly).

The first thing you need to start with is to change the principles of website layout.



When designing a structure, you must immediately take into account the requirements for adaptive layout.



You must make this part of your production cycle!




Universal Framework

Modern technology of adaptive layout

Your site is initially mobile-friendly

Your website is initially ready to be viewed on any device, including mobile devices. The product core of version 15.5 has a built-in universal Framework for layout, which facilitates and speeds up the creation of mobile-friendly (adapted for mobile devices) websites of any type.



Adaptable for everything!
  • Universal Framework for layout (Bootstrap 3)
  • High speed of production of adaptive websites
  • Native readiness for mobile, tablet and desktop versions
  • Touch interface support in all online store components
New adaptive online store template

The ready-made “Online Store” solution included in the product delivery has received a new beautiful template. Framework with usefull layout (Bootstrap 3) allows you to use the template for any online store scheme. Every page of your store now instantly adapts to any device.


I would immediately like to express my gratitude to Mikhail Bazarov for the article on his blog, which inspired me to go further and implement a more modernized version of auto-detection of the mobile version of the site. Also, many thanks to Stanislav Sazonov for his tips and for introducing me to Bootstrap technology.

Responsive design or mobile version of a website template?

For displaying content there is not much difference. But in order to show this content on the display of your device, it must first be downloaded. It’s good if the user is connected to a high-speed Internet access point. Ideally, this is a laptop that has logged into the World Wide Web via wi-fi point access. But how much nerves and time do we waste in those cases when we have a mobile phone in our hand and the connection is not even 3G but regular GPRS.

Now imagine that the site you need only has the full original version of the site template. This version is beautiful: with animation, images, styles, scripts and a bunch of other lines of different kinds of code. And so, you came to this site... 10 seconds, 20... And we are still waiting. In the worst conditions, the time from clicking on a link to loading the content and delivering it to your display can take up to a minute. There are even worse cases... What can we do? But we have an adaptive design, it should be displayed beautifully on mobile phones, without animations and large images.

It will be displayed, but during loading it pulls up all the content, even those that are not displayed. What to do? Everything is very simple - you need a separate, and also adaptive website template.

Bitrix mobile website template

Domain alias

So, gentlemen! The first thing we need to do is create a subdomain for our main domain. It's best not to reinvent the wheel, but to create a subdomain like . On the Internet, I saw that guys describe connecting different templates without creating a domain alias for the mobile version. Everything is fine, but we are Bitrix users, and we use the “Composite Site” technology. And if different templates are displayed at the same addresses, then the meaning of the composite will be lost, since the cache will be constantly overwritten. I've already been through this. Therefore we need an additional domain alias.

Lightweight template

Now we need to create, or better yet, prepare in advance a separate template for mobile devices. How light it will be will depend on the developer. But it's better to remove everything unnecessary files js, css or minify their code. For example, remove all unused styles. Remove unnecessary animations and sliders. Of course, it is completely unacceptable to leave flash on the mobile version. Also make PHP code easier. Disable the display of unnecessary components on mobile versions. This could be a filter in the product list. As I noticed with it, page generation on the first hit takes longer.

Mobile Detect

Mobile Detect is a lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string in combination with specific HTTP headers to detect the mobile environment. Download the latest file Mobile_Detect.php directly from the developer's site mobiledetect.net. We install this file on the server, directly in the template directory “next to” the header.php file. In both templates, in header.php we include this file and set the condition for redirect.

Writing code

Well, let's start writing the code itself. To bypass the composite site technology and not interrupt the creation of the composite cache, we need the header.php file, which is connected even before connecting the header.php file of the site template itself. This file is located at /bitrix/header.php. And write the following code: