Como organizar uma versão mobile no Bitrix. Versão móvel do modelo Bitrix com detecção automática do Mobile Detect. Tecnologia moderna de layout adaptativo

No Bitrix24 você pode trabalhar não apenas em um computador no escritório, mas também fora dele - no aeroporto, em um café, em qualquer lugar onde haja Internet. O aplicativo móvel Bitrix24 irá ajudá-lo com isso.

O aplicativo móvel Bitrix24 é um aplicativo gratuito que funciona com dispositivos iPhone, iPad e Android.

Agora vou lhe contar o que esse aplicativo pode fazer.

Comunicação

Em primeiro lugar, trata-se principalmente de comunicação – conversas com colegas e conversas com clientes (linhas abertas):

Você pode criar um novo bate-papo no aplicativo móvel, assim como no navegador ou no aplicativo desktop!

Para fazer isso você só precisa clicar no ícone + no canto direito, selecione o tipo de chat (chat aberto ou fechado) e convide os funcionários para ele.

Na lista de chats, agora é possível fixar e desafixar diálogos no topo da lista – opção Fixar/desafixar e também ocultar caixas de diálogo – opção Excluir:

Em bate-papos em grupo, você também pode ativar e desativar notificações usando a opção Não siga/seguir na lista de bate-papo. A mesma opção está disponível no próprio chat em grupo:

Você pode convidar um funcionário por vez ou um departamento ou divisão inteira para o chat. E se você for o proprietário do chat, poderá atribuir um novo proprietário a ele, bem como excluir usuários do chat.

Para fazer isso, abra a seção de participantes do chat e deslize da direita para a esquerda (swipe) sobre o participante e selecione o item desejado.

Veja o Live Feed, comente e curta as postagens de seus colegas. Envie fotos do seu telefone diretamente para o seu feed. Os formulários de criação de mensagens são especialmente adaptados para iOS e Android:

Contatos

Você sempre tem uma lista completa e atualizada de contatos de colegas ao seu alcance. Na versão mobile do Bitrix24, encontrar informações sobre o funcionário desejado é tão fácil quanto no portal - basta acessar a seção do menu principal Funcionários:

Você pode sincronizar seus contatos do telefone e do portal na seção Configurações > Sincronização formulários.

Configurações

Você encontrará todas as configurações do aplicativo em um só lugar. Para fazer isso, vá para a guia Mais e na parte superior acesse o menu de configurações.

As configurações do aplicativo móvel estão divididas em vários grupos:

    Capítulo

    Receber notificações– ativa ou desativa a capacidade de receber notificações push.

    Filtragem inteligente– se esta opção estiver habilitada, enquanto você estiver trabalhando no aplicativo desktop, as notificações não serão enviadas para o aplicativo móvel. Útil para economizar bateria.

    Contador de aplicativos– Esta configuração determina quais contadores de ferramentas (como contadores de feed ao vivo ou de bate-papo) afetarão o contador geral do aplicativo no ícone da área de trabalho.

    Também nesta seção você pode desabilitar tipos desnecessários de notificações de aplicativos móveis em Mensagens, Calendários, Bate-papos, Tarefas e Telefonia.

    Capítulo .

    Aqui você pode criar perfis de sincronização para contatos e calendários.

    Em dispositivos Android, isso faz parte das configurações do sistema, onde você também pode configurar a sincronização com mais detalhes.

Configurações do dispositivo

    Configurações do Bitrix24:

    – desabilitar ou habilitar vibração no aplicativo.

    Use tema claro– altere o tema de cores do aplicativo.

    Memória– nesta seção você pode limpar o cache do aplicativo e dos documentos baixados.

    arquivos– aqui você seleciona o tamanho e a qualidade dos arquivos de vídeo enviados para o feed ao vivo ou bate-papos.

    Som– você pode personalizar o som de notificação.

    Permissões– nesta seção você pode gerenciar os direitos de acesso à foto, câmera, microfone e geolocalização.

    Versão do aplicativo– informações sobre o número da versão do aplicativo.


Agora você pode iniciar e encerrar sua jornada de trabalho, bem como definir um intervalo, diretamente do seu celular:

Gerenciamento de tarefas

No aplicativo móvel, você pode criar tarefas, monitorar sua conclusão e monitorar seus status. Nas tarefas móveis, todas as ações com tarefas disponíveis no Bitrix24 estão disponíveis. Se as tarefas tiverem arquivos anexados, você também poderá abri-los no seu dispositivo móvel:

Trabalhando com arquivos

O aplicativo móvel permite visualizar documentos, apresentações e imagens. Tudo o que está à sua disposição de acordo com os seus direitos no portal: seus arquivos pessoais, arquivos públicos da empresa, arquivos de colegas e seus grupos. Formatos e documentos populares são suportados: TXT, PNG, PDF, JPG, XLS, XLSX, DOC, DOCX, PPT, PPTX. Há também uma pesquisa integrada - na pasta atual por cabeçalhos e nomes de arquivos:

Os arquivos podem ser baixados de um telefone celular como em Minha unidade e, em seguida, anexe-o do Disco a uma tarefa, a uma mensagem no Live Feed ou em um bate-papo, ou diretamente:

Atenção! Existe um recurso para carregar arquivos de imagem ou vídeo:

    Se você enviar fotos ou vídeos primeiro para Minha unidade, esses arquivos não serão compactados, ou seja, carregados como o original.

    Se você enviar fotos ou vídeos diretamente para o Live Feed, comentários, tarefas ou bate-papos, esses arquivos serão compactados. Isso deve ter um grande impacto na velocidade de download. A qualidade do vídeo baixado pode ser ajustada na seção Configurações > Arquivos formulários.

Você pode selecionar até 10 arquivos diferentes e, durante o download, pode cancelar a transferência do arquivo.

Calendário

O Calendário móvel exibe uma lista atualizada de reuniões, sessões de planejamento, reuniões e outros eventos. Além disso, a partir do seu dispositivo móvel, você pode aceitar convites ou recusar participar de reuniões, criar novos eventos e convidar seus colegas para eles:

Você pode sincronizar eventos de calendário do telefone e do portal na seção Configurações > Sincronização formulários.

CRM móvel

O aplicativo permite que você trabalhe com elementos de CRM como Casos, Contatos, Empresas, Transações, Contas, Ofertas, Leads, Produtos. Você pode criar um novo lead ou alterar o status de um negócio diretamente durante as negociações com um cliente:

No capítulo Contatos você pode criar rapidamente um novo contato no CRM - todos os campos do cartão de visita são automaticamente reconhecidos e inseridos no CRM como um novo Contato ou Empresa:

Chamadas de áudio e vídeo

A telefonia Bitrix24 também funciona no aplicativo mobile! Se precisar se comunicar com um colega pessoalmente e por voz, basta ligar para ele. E ao ligar para um cliente, você pode ver imediatamente as informações sobre a transação no CRM. Bitrix24 grava conversas, redireciona chamadas para outro funcionário (o redirecionamento para celular só funciona a partir do portal; ainda não é possível redirecionar uma chamada de um aplicativo móvel), encaminha automaticamente a chamada para o responsável e muito mais:

As chamadas de áudio e vídeo funcionam via Wi-Fi, LTE, 3G, com suporte para HD 16:9.


Gostaria de expressar imediatamente a minha gratidão a Mikhail Bazarov pelo artigo em seu blog, que me inspirou a ir mais longe e implementar uma versão mais modernizada de detecção automática da versão mobile do site. Além disso, muito obrigado a Stanislav Sazonov por suas dicas e por me apresentar a tecnologia Bootstrap.

Design responsivo ou versão móvel de um modelo de site?

Para exibição de conteúdo não há muita diferença. Mas para mostrar esse conteúdo no display do seu aparelho, primeiro ele deve ser baixado. É bom que o usuário esteja conectado a um ponto de acesso à Internet de alta velocidade. Idealmente, este é um laptop conectado à World Wide Web por meio de um ponto de acesso Wi-Fi. Mas quantos nervos e tempo perdemos nos casos em que temos um telemóvel na mão e a ligação nem é 3G mas sim GPRS normal.

Agora imagine que o site que você precisa possui apenas a versão original completa do modelo de site. Esta versão é linda: com animações, imagens, estilos, scripts e um monte de outras linhas de diferentes tipos de código. E então você veio até esse site... 10 segundos, 20... E ainda estamos esperando. Nas piores condições, o tempo desde clicar em um link até carregar o conteúdo e entregá-lo ao seu display pode levar até um minuto. Existem casos ainda piores... O que podemos fazer? Mas temos um design responsivo, deve ser exibido lindamente em celulares, sem animações ou imagens grandes.

Ele será exibido, mas durante o carregamento puxa todo o conteúdo, mesmo aqueles que não são exibidos. O que fazer? Tudo é muito simples - você precisa de um modelo de site separado e também responsivo.

Modelo de site móvel Bitrix

Alias ​​de domínio

Então, senhores! A primeira coisa que precisamos fazer é criar um subdomínio para nosso domínio principal. É melhor não reinventar a roda, mas criar um subdomínio como . Na Internet, vi que caras descrevem a conexão de diferentes modelos sem criar um alias de domínio para a versão mobile. Está tudo bem, mas somos usuários Bitrix e usamos a tecnologia “Composite Site”. E se diferentes modelos forem exibidos nos mesmos endereços, o significado do composto será perdido, pois o cache será constantemente sobrescrito. Eu já passei por isso. Portanto, precisamos de um alias de domínio adicional.

Modelo leve

Agora precisamos criar, ou melhor ainda, preparar um modelo separado para dispositivos móveis com antecedência. Quão leve será dependerá do desenvolvedor. Mas é melhor remover todos os arquivos js e css desnecessários ou minimizar seu código. Por exemplo, remova todos os estilos não utilizados. Remova animações e controles deslizantes desnecessários. Claro, é totalmente inaceitável deixar o flash na versão móvel. Também torne o código PHP mais fácil. Desative a exibição de componentes desnecessários nas versões móveis. Este pode ser um filtro na lista de produtos. Como percebi, a geração da página no primeiro hit demora mais.

Detecção de celular

Detecção de celularé uma classe PHP leve para detecção de dispositivos móveis (incluindo tablets). Ele usa a string User-Agent em combinação com cabeçalhos HTTP específicos para detectar o ambiente móvel. Baixe o arquivo mais recente Mobile_Detect.php diretamente do site do desenvolvedor mobiledetect.net. Instalamos este arquivo no servidor, diretamente no diretório do template “ao lado” do arquivo header.php. Em ambos os templates, em header.php incluímos este arquivo e definimos a condição para redirecionamento.

Escrevendo código

Bem, vamos começar a escrever o código em si. Para contornar a tecnologia de site composto e não interromper a criação do cache composto, precisamos do arquivo header.php, que é conectado antes mesmo de conectar o arquivo header.php do próprio modelo de site. Este arquivo está localizado em /bitrix/header.php. E escreva o seguinte código:

Tráfego móvel

Atendendo ao tráfego móvel

Se o Google não rotular seu site como "Otimizado para dispositivos móveis", ele desaparecerá da visualização dos usuários que acessam a Internet em dispositivos móveis. Porque ao pesquisar em dispositivos móveis, o Google leva em consideração a presença de otimização adequada na classificação dos resultados. O tráfego móvel está cortado, as vendas estão caindo e o negócio está sofrendo perdas.
Verifique - o seu site é compatível com dispositivos móveis?


Como passar no teste de velocidade do Google?

Componentes necessários:

O tráfego móvel está ganhando impulso!

Atenda clientes móveis corretamente com a plataforma 1C-Bitrix!



Acha que não tem dados móveis?
Confira. O tráfego móvel agora prevalece em muitos sites, mesmo aqueles que não são destinados à visualização móvel e não possuem versões móveis. Por exemplo, os produtores de flores, os amantes de livros e outros membros de diversas comunidades acedem cada vez mais à Internet a partir de dispositivos móveis.

Atendemos clientes móveis


Seu site deve ser compatível com dispositivos móveis!

Seu site desaparecerá das primeiras páginas dos resultados de pesquisa do Google se não for facilmente visualizado em dispositivos móveis.

O Google enviou avisos a sites mal otimizados para a plataforma móvel de que, a partir de 21 de abril de 2015, esses sites serão rebaixados nos resultados de pesquisa.

Por que é tão importante ser compatível com dispositivos móveis?

Certamente muitas pessoas mudaram dos resultados de pesquisa do Google para sites que não eram otimizados para visualização em smartphones. Páginas com links minúsculos e textos difíceis de ler e que também não cabem na tela do seu dispositivo causam uma má impressão.

O Google marcará sites para celular nos resultados de pesquisa
“Para ajudar a evitar que os usuários móveis tenham problemas durante a navegação, começaremos a destacar páginas otimizadas para smartphones e tablets em nossos resultados de pesquisa.”

Pessimização...

E se o Google não rotular seu site como “Otimizado para dispositivos móveis”? Em essência, o site desaparecerá da vista dos usuários que acessam a Internet a partir de dispositivos móveis. Porque ao pesquisar em dispositivos móveis, o Google leva em consideração a presença de otimização adequada na classificação dos resultados. O tráfego móvel está cortado, as vendas estão caindo e o negócio está sofrendo perdas.

Como atender aos novos requisitos?

O que deveria ser feito?
  • Passe no teste e receba um relatório
  • Explore todas as recomendações
  • Elimine problemas e deficiências
  • Obtenha o rótulo de compatibilidade com dispositivos móveis do Google
É fácil verificar - faça o teste

Para saber se suas páginas atendem aos novos requisitos, basta acessar procedimento de verificação para otimização para dispositivos móveis.



Não otimizado para dispositivos móveis!

Difícil de corrigir, a menos que você seja um webmaster

Para eliminar todos os problemas identificados na visualização em smartphones e tablets, e não apenas em uma página, mas em todo o site, é preciso fazer muito. Em particular, você precisa estudar os guias para webmasters sobre como criar e otimizar versões móveis de sites, documentação sobre como configurar um sistema de gerenciamento de conteúdo e modelos de sites. Somente especialistas podem fazer isso.

Layout adaptativo

Adaptando o site ao mercado mobile

Pronto para receber visitantes móveis

Cada página do seu site, se estiver na plataforma 1C-Bitrix, é reconstruída instantaneamente para qualquer dispositivo. Seu site está inicialmente pronto para versões mobile, tablet e desktop. Além disso, a interface Touch é suportada em todos os componentes da loja online.



Lojas online na plataforma 1C-Bitrix - com modelo responsivo


O núcleo do produto 1C-Bitrix: Site Management possui uma estrutura integrada com layout útil (Bootstrap 3). A estrutura universal para layout torna mais fácil e rápida a criação de qualquer tipo de site adaptável a dispositivos móveis (mobile-friendly).

A primeira coisa que você precisa para começar é mudar os princípios do layout do site.



Ao projetar uma estrutura, é necessário levar imediatamente em consideração os requisitos de layout adaptativo.



Você deve fazer disso parte do seu ciclo de produção!




Quadro Universal

Tecnologia moderna de layout adaptativo

Seu site é inicialmente compatível com dispositivos móveis

Seu site está inicialmente pronto para ser visualizado em qualquer dispositivo, inclusive dispositivos móveis. O núcleo do produto, versão 15.5, possui um Framework universal integrado para layout, que facilita e agiliza a criação de sites mobile-friendly (adaptados para dispositivos móveis) de qualquer tipo.



Adaptável para tudo!
  • Estrutura Universal para layout (Bootstrap 3)
  • Alta velocidade de produção de sites adaptativos
  • Preparação nativa para versões para celular, tablet e desktop
  • Suporte para interface de toque em todos os componentes da loja online
Novo modelo de loja online adaptável

A solução pronta “Loja Online” incluída na entrega do produto recebeu um novo e lindo template. Framework com layout útil (Bootstrap 3) permite usar o template para qualquer esquema de loja online. Cada página da sua loja agora se adapta instantaneamente a qualquer dispositivo.

Responder: necessário.

Segundo as estatísticas, os utilizadores visitam cada vez mais websites através de dispositivos móveis - smartphones e tablets.

Se um usuário inserir uma consulta de um dispositivo móvel na barra de pesquisa, os mecanismos de pesquisa nos resultados da pesquisa dê preferência a sites que tenham versão mobile.

Requisitos Yandex para a versão móvel do site

Esta imagem mostra uma verificação do site no Yandex. Você pode acessar o Yandex Webmaster e ver se a versão móvel do seu site atende aos requisitos do Yandex. A análise pode ser feita acessando a seção desejada:

  1. Vá para o webmaster Yandex
  2. Vá para a seção "Ferramentas"
  3. Vá para a subseção "Verificando páginas para celular"
  4. Digite o nome do site, clique no botão "verificar"

Se a versão móvel do site atende às expectativas de Yandex, então Yandex escreverá “Está tudo bem!”

Requisitos do Google para a versão móvel do site

A segunda imagem mostra uma verificação semelhante no Google. Qualquer internauta pode fazer uma verificação online, não há necessidade de se registrar em qualquer lugar. Siga o link, insira o endereço do site e clique no botão “Analisar”. Aqui você pode conferir como o Google avalia não só a versão mobile do site, mas também a versão normal para desktop. A pontuação é dada como uma porcentagem de 0 a 100%.

  • A zona vermelha de 0 a 40% indica que o Google realmente não gosta da página e precisa trabalhar para melhorar o desempenho e a qualidade.
  • A zona amarela de 40 a 85% indica que o site está mais ou menos configurado, mas ainda são necessárias melhorias.
  • A zona verde de 85 a 100% indica que o site está configurado quase perfeitamente e O mecanismo de pesquisa Google gosta.

Assim, os motores de busca estabelecem uma série de requisitos para a versão mobile do site. Para que carregue rapidamente, não há rolagem horizontal, há links grandes (que você pode clicar com o dedo no smartphone e não perder), para que o texto não fique muito pequeno e possa ser lido com conforto. Tudo visa facilitar ao usuário a visualização do seu site a partir de um dispositivo móvel..

Modelo para a versão móvel do site Bitrix

Ofereço aos meus clientes uma versão mobile do site com este design. Exemplos são apresentados abaixo:

O layout possui controles:

  1. Link para a página inicial
  2. O botão chama a função de chamada telefônica para o número especificado
  3. O formulário de feedback é aberto
  4. O botão 4 abre o menu vertical
  5. O botão 5 abre o menu vertical
  6. O botão verde abre um chat por meio do qual o usuário pode tirar dúvidas.

O menu mostra as principais seções do site. Se desejar, algumas seções podem ser removidas da versão mobile.

O template não possui rolagem horizontal, o template se adapta ao dispositivo. Também o modelo não possui scripts java extras, o que retarda a exibição da página para o usuário ou de alguma forma a torna mais lenta. Os scripts Java são configurados no mínimo e são necessários apenas para que a versão móvel funcione.

O modelo usa layout adaptável. O tamanho mínimo da largura do modelo é 300 pixels. Este número foi selecionado com base em observações dos dispositivos dos usuários. O limite superior da largura da tela que normalmente almejo é 1199 pixels. Acima deste valor está a versão normal do site.

Se o usuário fizer login a partir de um dispositivo móvel (smartphone ou tablet), o sistema automaticamente isso determina exibe um modelo de site para celular. O redirecionamento para a versão mobile do site é realizado com base no nome do navegador do dispositivo do usuário. A linha do navegador do telefone geralmente contém palavras como: iPhone, Android, webOS, BlackBerry, iPod, iPad. Quando redirecionado para a versão mobile do site O URL da página não muda.

Mecanismos de busca Google e Yandex consideram este modelo ideal do ponto de vista de velocidade e facilidade de uso.

Preço da versão mobile do site Bitrix

Você pode solicitar uma versão móvel do site comigo. O custo de instalação desse modelo em um site é de 5.000 rublos. Se o site tiver uma seção grande (por exemplo, catálogo de produtos, notícias, artigos, etc.), o custo de adaptação de tal seção para dispositivos móveis é negociado separadamente e depende da quantidade de trabalho.

Se precisar de um empreendimento com design diferenciado, ou tiver alguma ideia, farei uma versão mobile de acordo com sua vontade.

Você precisa de uma versão móvel do site? - Entre em contato conosco, nós configuramos!

Freqüentemente, você precisa alterar ou complementar alguns elementos do modelo ou refazê-lo completamente. Normalmente, para alterar completamente o design de um site, um site de teste é criado em um subdomínio e é feito um trabalho nele para adaptar o modelo. Esta abordagem não é das mais fáceis, pois pode causar problemas na portabilidade para o domínio principal. No momento, as versões mobile do site são exigidas não apenas pela comodidade do usuário, os buscadores estão cada vez mais dando preferência aos sites com versões mobile, usando este método você pode facilmente adaptar o template para versões mobile sem interromper um projeto já existente .

Suporte para um número ilimitado de modelos em 1C-Bitrix.

Todos que trabalham no 1C-Bitrix sabem que o CMS oferece a capacidade de conectar um número ilimitado de modelos. Para quem não sabe, vamos ver como é utilizada a implementação de multitemplates.
Para adicionar um modelo, você precisa ir para a seção na parte administrativa do site, "Configurações" - "Configurações do produto" - "Sites" no menu suspenso na seção "Sites" existem duas subseções - " Modelos de sites" e "Lista de sites".

Copie o modelo do site principal.

Primeiro vamos copiar o template do site, para isso vá até a seção "Modelos de Site" e copie o template para que você possa trabalhar com ele posteriormente. Clique no botão copiar conforme mostrado na captura de tela:

Aplique o modelo ao site para edição.

Tudo o que precisamos fazer é aplicar o modelo ao site, mas como nosso site está funcionando e os usuários podem estar nele, e não precisamos que eles vejam as alterações que estão sendo feitas no site, conectaremos o modelo de acordo com a condição - “Parâmetro na URL”. Vamos fazer isso - vá até a seção "Lista de sites" e vá até as configurações do site para o qual a alteração é necessária. Na parte inferior da página de configurações do site há um bloco “Modelo de site”. Selecione uma cópia do nosso modelo na lista da coluna “Modelo”, defina a condição “Parâmetro no URL” e adicione qualquer condição conveniente para você, por exemplo test=Y, conforme mostrado na captura de tela:

Agora uma cópia do seu modelo será exibida se você passar este parâmetro para a URL, como segue site.ru/?test=Y onde site.ru é o domínio do seu site. Esta condição funcionará para todas as seções e páginas do seu site. Por exemplo, se você precisar ver como será a aparência de um modelo em uma determinada seção do site, vá até esta seção e passe seu parâmetro, neste caso? test= Y, e a página será exibida com o novo modelo.

Agora você pode editar o novo modelo enquanto seus visitantes verão o site normalmente. Observe que todas as alterações precisarão ser feitas na nova pasta de modelos e, se precisar alterar os modelos de componentes que não estão na pasta, você precisará copiar o modelo de componente para a pasta com o novo modelo. Não edite componentes na pasta /bitrix sob nenhuma circunstância; isso pode levar a consequências críticas. E sempre faça backups na nuvem 1C-Bitrix.

Bem, essa é toda a técnica, esperamos que ajude você a economizar tempo.