Hoje, a maioria das pessoas fica online por meio de dispositivos móveis - tablets, telefones; nesse aspecto, a otimização de sites também está atingindo um novo nível. Se um usuário chega e vê que o site não está otimizado para dispositivos móveis: a imagem não pode ser visualizada, os botões foram movidos para fora, as fontes são pequenas e ilegíveis, o design está distorcido - 99 de 100%, que ele vai saia e comece a procurar outro mais conveniente. E marcará a caixa que o recurso é irrelevante, ou seja, não corresponde à consulta de pesquisa. Portanto, o design da página deve necessariamente ser adaptado para vários dispositivos móveis. O que versão móvel site, como fazer e qual a melhor maneira de aplicá-lo? Leia mais neste artigo.

Portanto, existem quatro maneiras principais de tornar seu site móvel.

Método um - design responsivo

Os modelos responsivos envolvem a alteração da imagem do site dependendo do tamanho da tela. Normalmente, eles são definidos para o padrão 1600, 1500, 1280, 1100, 1024 e 980 pixels. Queries é usado para implementação. Ao mesmo tempo, ele não muda a si mesmo.

As vantagens deste método incluem:

• desenvolvimento conveniente, já que a própria estrutura se ajusta aos parâmetros da tela, e qualquer atualização não requer o desenvolvimento do design do zero, basta corrigir o CSS e o HTML;
• 1 endereço url- o usuário não precisa memorizar vários nomes, não há necessidade de redirecionamento (redirecionamento de um endereço para outro), o que pode complicar o trabalho de um webmaster, e é mais fácil para um mecanismo de pesquisa classificar e classificar um recurso com um único endereço.

Claro, modelos responsivos têm suas próprias desvantagens, que, aliás, são mais do que vantagens. No entanto, muitos desenvolvedores aderem a este mesmo conceito, por exemplo, a corporação Google, cuja versão móvel do site tem design adaptativo... Portanto, as desvantagens:

• O design responsivo não suporta as mesmas tarefas em um dispositivo móvel e em um PC. Se se trata, por exemplo, de uma versão mobile do site do banco, onde o usuário tem maior probabilidade de se interessar por informações sobre a taxa de câmbio ou os caixas eletrônicos mais próximos, então este desenho é suficiente. Mas se este for um recurso estruturado complexo com muitas seções e subseções, é improvável que os visitantes gostem dele.
• O carregamento lento transforma seu site favorito em um site odiado. Isso é especialmente verdadeiro para recursos em que animação, vídeos, pop-ups e outros elementos ativos estão presentes em abundância. Devido ao grande peso, a página irá simplesmente "desacelerar", o usuário ficará irritado e sairá, e as posições de busca do site cairão.
• A incapacidade de desativar a versão móvel é outra desvantagem significativa. Se um elemento estiver oculto por esse layout, você não poderá fazer nada para abri-lo, ao contrário de sites onde você pode desativá-lo e ir para um domínio normal.

No entanto, essa versão móvel do site de forma rápida, sem habilidades e custos especiais, permite que você adapte o recurso a quaisquer gadgets. Mas, devido às desvantagens listadas, é adequado para recursos pequenos e simples com um mínimo de informação e multimídia, sem navegação e animação complexas. Para um site complexo, 2 outros métodos são adequados.

Método dois - uma versão separada do site

Esse método é muito comum e muitas vezes facilita a leitura de um site em um dispositivo móvel. Sua essência é criar uma versão separada da página, desenhada para o aplicativo e localizada em um URL ou subdomínio separado, por exemplo, m.vk.com. Ao mesmo tempo, a funcionalidade principal é preservada, o design do site parece diferente. As vantagens deste método são óbvias:

• interface amigável;
• fácil de alterar e fazer edições, já que a versão existe separadamente do recurso principal;
• devido ao baixo peso, uma versão separada do site funciona muito mais rápido do que o template responsivo;
• na maioria das vezes, é possível mudar para a versão principal da página a partir do celular.

Mas aqui também havia algumas desvantagens:

• Vários endereços - versões do site para desktop e celular. Como faço o usuário lembrar as duas opções? Os webmasters geralmente prescrevem da versão desktop para a versão móvel, mas ao mesmo tempo, se esta página não existir na versão móvel, o usuário receberá um erro. Aqui, surgem dificuldades com os motores de busca, que acham difícil classificar 2 recursos idênticos, e isso afeta diretamente a promoção.
• A versão móvel do site a partir de um computador, se um usuário entrar acidentalmente, ficará ridícula, o que também pode afetar o tráfego.
• Esta versão costuma ser bastante reduzida para desktop, de modo que o usuário receberá uma funcionalidade muito limitada. Mas, ao mesmo tempo, se faltar alguma coisa, o visitante pode ir para versão completa Páginas.

Em geral, um site móvel separado se justifica e é a forma mais comum de adaptar um recurso para dispositivos móveis. É popular entre grandes varejistas online como a Amazon.

A terceira maneira é o design RESS

O mecanismo de busca do Google apóia ativamente essa direção do design móvel. Este é o método mais difícil, caro, mas eficaz de adaptar um site a um telefone ou tablet. É denominado RESS. O objetivo é um recurso em um aplicativo móvel, que pode ser baixado para cada dispositivo separadamente. Para Android - com GooglePlay, e para Apple - com iTunes.

Esses aplicativos são rápidos, gratuitos, convenientes, têm a capacidade de colocar vários tipos de informações, enquanto a memória do telefone e o tráfego da Internet não são consumidos como ao visitar o site por meio de um navegador. São de fácil acesso, pois o link estará sempre à mão na tela, não sendo necessário inserir um nome complexo na barra de endereços do navegador.

Claro, também existem desvantagens aqui, como a complexidade do desenvolvimento, o alto custo da mão de obra de um grande número de programadores, a necessidade de fazer várias opções de layout. Às vezes, o dispositivo móvel não é reconhecido pelo aplicativo. Regular suporte técnico, correção de deficiências. No entanto, esta opção é considerada a melhor das três propostas devido ao seu funcionamento produtivo e sem problemas.

A maneira mais barata de fazer um site para celular

Todos os métodos acima envolvem, embora nem sempre seja longo e difícil, mas ainda assim, trabalho remunerado de um webmaster. Se você não vê uma necessidade urgente de tal desenvolvimento, uma versão móvel simples e gratuita do site será adequada para você. Qual é a maneira mais fácil de fazer isso?

Baixe modelos especiais (plug-ins) para design responsivo. Por exemplo, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile e outros. Eles o ajudarão a visualizar o site de forma mais correta no celular, enquanto você receberá várias dicas que deverão ser corrigidas para melhor adequar a página à versão mobile.

Claro, esse método dificilmente é adequado para recursos sérios. Em vez disso, é oportunidade livre destinado a sites pequenos e simples, blogs, feeds de notícias. Deve-se lembrar também que o mecanismo de busca Google, assim como o Yandex, hoje impõe sérios requisitos às versões mobile, portanto, há uma grande chance de rebaixamento de posições por meio deste método.

Com este método, provavelmente, os anúncios e banners pop-up serão cortados, mas a página carregará rapidamente e sem atrasos.

Princípios de criação de versões para celular

Não importa se a versão mobile do site foi criada gratuitamente ou com a ajuda de uma equipe de webmasters, foi feita no sistema RESS ou usando um template adaptável. Mais importante ainda, requer a adesão a vários princípios críticos para ser eficaz. Então, qual deve ser a versão mobile do site? Como você o torna produtivo, eficiente e produtivo?

Nós removemos todos os desnecessários

Minimalismo é o que o desenvolvedor da versão móvel do site deve buscar. Imagine como é difícil perceber informações repletas de flores, botões, banners, e que você tem que percorrer sem parar em busca do material necessário. Design móvel deve ser simples e limpo. Escolha 2-3 cores para separar o espaço (por exemplo, marca). Melhor se um deles for branco. Divida o pequeno espaço da tela em áreas claras e legíveis. Chaves virtuais deve estar visível para que o utilizador saiba bem onde clicar e ver - aqui está o produto, aqui está o formulário de preenchimento dos dados, aqui está a informação de entrega e pagamento.

Todas as opções adicionais que seriam úteis na versão desktop e facilitariam a vida do usuário só trariam dificuldades aqui. Deixe apenas os elementos mais importantes. Animação, banners publicitários, multimídia, provavelmente, apenas tornará o trabalho do site ou aplicativo mais lento e desviará a atenção do principal.

Alinhamento

A questão do alinhamento não é menos aguda, pois se feito de maneira incorreta, o usuário receberá apenas as terminações de palavras importantes. O alinhamento à esquerda e vertical é geralmente aceito. Imagine folhear o feed de notícias em seu telefone. Você faz isso de cima para baixo, mas não para a esquerda ou direita.

União

Quando não houver possibilidade de uma longa cadeia de transições, tente combinar várias etapas em uma. Por exemplo, o site exige a entrada de dados em vários estágios - o nome, depois o endereço, onde em cada célula separada há casas, ruas, apartamentos, etc., nome e endereço separados.

E desconexão

Às vezes, ao contrário, você também precisa se desconectar um grande número de em formação. Por exemplo, no menu suspenso, você tem uma lista de mais de 80 cidades onde a entrega é realizada. Agrupe-os por região para que o usuário não precise rolar por essa lista enorme. Quando ele passa o mouse sobre o centro regional ou região, outra lista de cidades desaparece.

Listas

A propósito, sobre as listas. Existem dois deles - fixados em ordem alfabética ou outra ordem e com substituição. Sua escolha depende do que será listado.

Fixed é útil se o usuário sabe exatamente o que está procurando. Por exemplo, cidade, número ou data. A segunda opção é adequada para nomes longos e complexos ou para casos em que há muitas variações do mesmo nome, e cada uma traz o usuário um passo mais perto da meta. A opção de preenchimento automático é mais comumente usada quando um visitante precisa de ajuda. Por exemplo, um site de tricô oferece a compra de agulhas de tricô. O usuário insere a consulta de pesquisa “Agulhas de tricô de metal” e na dica ele vê “agulhas de tricô de 5 mm”, “agulhas de tricô de 4,5 mm”, etc.

autocompletar

Este ponto se aplica especialmente a sites onde vendem algo online, e você tem que preencher formas padrão de pagamento, entrega, etc. as compras devem ser feitas o mais rápido e convenientemente possível.

Para isso, os formulários podem conter dados já preenchidos, você pode recorrer às respostas mais populares. Por exemplo, insira a data de hoje, forma de pagamento à vista, cidade se você trabalha na mesma região. Eles podem ser alterados, mas se você acertar o alvo, o tempo do usuário será economizado.

Tudo é legível, tudo é visível

Ao projetar a versão móvel do site, lembre-se de que cada pessoa tem telefones diferentes, assim como sua visão. Talvez o seu site seja visto em uma tela pequena, então as fontes devem ser simples e legíveis, os botões devem ser grandes o suficiente para que você possa clicar neles sem ir para outra página e as imagens devem abrir separadamente, grandes, especialmente quando trata-se da Internet. -store.

Algumas estatísticas

Falando sobre a adaptação de um site para dispositivos móveis, não se pode deixar de recorrer às estatísticas para compreender a importância deste processo para a promoção online.

Os números são os seguintes. Hoje 87% da população usa gadgets, aparentemente, exceto para as crianças menores e alguns idosos. Os economistas preveem um crescimento de 100 vezes no comércio móvel nos próximos 5 anos. Ao mesmo tempo, apenas 21% dos sites estão adaptados para funcionar com dispositivos móveis. Isso significa que o tráfego da Internet e o mercado de comércio eletrônico são ocupados por apenas uma pequena 5ª parte.

Pense nesses números. Faz sentido adaptar seu recurso? Claro que sim. Além disso, enquanto houver tanto espaço livre neste mercado, você pode levar seu próprio segmento nele.

Onde você precisa de uma versão móvel?

O uso da versão mobile é aconselhável para qualquer plataforma que pretenda obter uma classificação elevada. Afinal, esse é um impacto direto no usuário, criando condições confortáveis ​​para ele permanecer no seu site.

Sem uma versão móvel, o seguinte não pode existir:

• portais de notícias, já que a maioria deles os acessa pelo telefone no caminho para o trabalho ou estudo;
• redes sociais - pelo mesmo motivo, mais existe um fator de comunicação online, o que significa que para isso deve ser criado um chat conveniente e compreensível;
• sites de ajuda, sites com navegação, etc., aos quais as pessoas recorrem quando procuram algo;
• lojas online - uma oportunidade de atrair compradores que não perdem tempo com viagens de compras, mas compram tudo através Internet móvel.

Em vez de uma conclusão

Hoje, as tecnologias móveis estão em fase de crescimento e desenvolvimento ativo, portanto, na busca pela liderança de mercado, qualquer empresa deve garantir que seu recurso de Internet atenda aos requisitos. Devido às crescentes solicitações dos usuários, os sites precisam ser constantemente modernizados e adaptados para vários dispositivos. É claro que se uma pessoa tem inconveniente em estar neste ou naquele recurso, ela não pode obter informações sobre um produto ou preço ali, fazer um pedido, saber como fazer a entrega, então ela encontrará o site onde tudo isso se torna possível. Portanto, para vencer a competição, é importante ter um recurso flexível, conveniente, funcional e interessante.

A versão móvel do site Android ou Ios ajudará nisso. Para fazer isso, você precisa escolher um dos métodos de redesenho acima - um modelo adaptável, criando um novo site em um subdomínio e acessando-o por redirecionamento, usando modelos grátis ou a criação de um aplicativo móvel com o qual o usuário pode entrar e estar na página de forma mais conveniente.

Todos nós já ouvimos as estatísticas: 2014 é o ano em que mais pessoas usam smartphones para acessar a Internet do que computadores ou laptops. ... Você não quer que seu site fique para trás, mas como exatamente você programa seu site para esta web móvel? Existem três opções principais, cada uma com suas próprias vantagens e desvantagens. Neste artigo, veremos os prós e os contras de cada um para escolher o melhor caminho para desenvolver seu site.

Opção 1: Design responsivo

O design responsivo determina a resolução da tela na qual as páginas são visualizadas usando consultas de mídia e, em seguida, ajusta o tamanho da página e o layout de acordo. Google afirmou que prefere web design responsivo, o que o torna um peso pesado nesta discussão.

prós :

1. Apenas uma versão de cada página. A página se adapta ao tipo de dispositivo para exibir o conteúdo (o tipo de dispositivo é determinado e, em seguida, conteúdo diferente é exibido).
2. Essa abordagem simplifica muito a manutenção do site.
3. O design responsivo não depende da detecção do agente do usuário como os outros dois. Detecção Agente de usuário(ou seja, detectar qual navegador ou dispositivo está solicitando uma página da web) não é ruim em si, mas não é perfeito, e se houver uma falha no processo, os usuários podem obter Versão errada seu site. Além disso, ele libera os spiders de pesquisa de rastrear seu site em vários Agente de usuário- isso significa que seu site será melhor indexado.
4. Projetos de sites responsivos tendem a carregar mais rápido nos navegadores. Como todos os dispositivos recebem o mesmo conteúdo, não há processo para detectar possível redirecionamento de uma solicitação devido a um agente do usuário. Todo mundo sabe que a velocidade é importante.

Desvantagens:

1. Levará algum tempo e esforço para redesenhar um site existente. Portanto, se você tem um site grande, mudar para um design responsivo pode não ser a melhor escolha.
2. Dependendo de onde seu site está localizado, pode ser difícil espremer conteúdo na tela de um telefone celular.
3. Os itens de navegação nem sempre são exibidos no tamanho correto e, ao passar o mouse, os recursos de superfície não funcionam telas de toque... Isso pode causar mudanças na navegação.
4. Há momentos em que páginas responsivas com grande quantia as imagens carregam mais lentamente com resposta de design mais rápida.

Se você decidir ir para um site responsivo, lembre-se de que você definitivamente deve testar seu site em diferentes navegadores e dispositivos (ou usar um bom Agente de usuário emulador) antes de lançar o site.

Um bom exemplo de design responsivo é um site local :

A versão móvel muda o site muito bem.

Opção 2: exibição dinâmica

A essência do serviço ou redirecionamento dinâmico é que ele primeiro define Agente de usuário visitante (ou seja, qual dispositivo ele usa para visualizar seu site) e, em seguida, um redirecionamento no nível do servidor para o URL desejado é executado. O encaminhamento dinâmico pode ser feito de várias maneiras.

Uma maneira de implementar o redirecionamento dinâmico é um redirecionamento unilateral, no qual os usuários móveis são redirecionados do site regular principal para sua versão móvel.

O segundo tipo, redirecionamento bidirecional, é quando os usuários são redirecionados da versão móvel para a versão normal também. As partes do código responsáveis ​​por tal redirecionamento às vezes são chamadas de tags de controle. Ao implementar isso, a tag é especificada rel = "alternativo" na versão normal, apontando para o site móvel; e no site para celular, a tag é colocada rel = "alternativo" indicando a versão completa principal do site.

Prós:

1. Uma vez que o redirecionamento é feito no nível do servidor, haverá apenas um Url para cada página.
2. O encaminhamento dinâmico de chamadas também funciona bem para telefones comuns - telefones celulares, que possuem um conjunto de recursos fixos, mas não são tão extensos quanto os smartphones. Por exemplo, os telefones celulares geralmente não podem baixar aplicativos, mas geralmente têm alguma experiência de navegação na web. A grande diferença é que os telefones celulares não suportam CSS então eles não podem fazer um design responsivo bem. Portanto, é importante conhecer seu público e que tipo de dispositivo móvel ele está usando.
3. Se você deseja tê-lo especificamente para seus usuários de celular, esta opção permitirá que você faça isso, uma vez que um código diferente é exibido para usuários de celular e usuários da versão regular Html.

Desvantagens:

1. Essa implementação dobra a quantidade de trabalho, porque você precisa fazer um site separado para dispositivos móveis, com um conjunto separado de Html exigindo um separado SEO.
2. A lista necessária de strings de valor de agente de usuário também requer manutenção contínua, pois novas strings devem ser adicionadas quando um novo dispositivo móvel é lançado.
3. Por fim, lembre-se de que você precisará usar " Variar cabeçalho HTTP“Se o seu site está servindo conteúdo dinamicamente. O título ajuda a obter o conteúdo da maneira certa e ajuda o mecanismo do site a armazená-lo em cache corretamente. O Google mostra detalhes sobre como adicionar este cabeçalho ( https://developers.google.com/webmasters/smartphone-sites/details#dynamicserving) .

Opção 3: site para celular

Esta opção, como o nome sugere, envolve a criação de um domínio separado especificamente para usuários móveis. Os exemplos mais comuns são m.domain.ru ou mobile.domain.ru... Esta é uma opção popular para grandes empresas. retalho... Este método envolve o desenvolvimento de conteúdo especificamente para visitantes que usam o celular (e não há redirecionamento no nível do servidor).

Prós:

1. Para sites grandes com centenas de milhares ou milhões de páginas, a implementação do design responsivo envolverá muito trabalho. No caso de um site móvel, será possível construir gradualmente a versão móvel do site (é como um site separado) e haverá muito menos trabalho.
2. Assim como acontece com os redirecionamentos dinâmicos, o site para celular fica melhor em celulares do que um site responsivo. Dependendo da demografia de seu site, isso pode não ser um critério; mas para algumas empresas, isso é importante.

Desvantagens:

1. Seu site para celular não se beneficiará de nenhum crescimento positivo em seu perfil de backlink para o site principal (a menos que você tenha implementado redirecionamentos bidirecionais). Portanto, se você deseja que seus usuários móveis possam encontrá-lo na pesquisa orgânica, este ponto pode ser especialmente negativo.
2. Seu site móvel exigirá alguns trabalho adicional em SEO. Você precisará enviar Sitemaps XML separados para Google e Yandex. Além disso, você precisará editar suas metatags. As metatags para celular devem ser mais curtas do que o site normal.

Aqui está um exemplo de quando um site para celular é bem feito. NYTimes.com tem um site principal para visitantes de desktop:

E mobile.nytimes.com para visitantes móveis:

Como você pode ver, o conteúdo foi reformatado significativamente e reduzido para torná-lo legível em um dispositivo móvel.

conclusões

Pendência escolha certa para o seu site, pergunte a si mesmo quantos visitantes estão usando dispositivos móveis para acessar o seu site. Confira. Se a porcentagem total tráfego móvel está próximo do nível de 5%, então provavelmente você pode levar o seu tempo para implementar o design para dispositivos móveis.

Se as previsões se concretizarem, o uso de dispositivos móveis continuará a aumentar. Então, aqueles cujos sites não serão exibidos corretamente em dispositivos móveis perderão uma parte significativa do tráfego de pesquisa e muito mais. Faça sites "para pessoas" e ficaremos felizes por você!

A cada ano, os visitantes acessam cada vez mais a Internet e fazem compras em dispositivos móveis. Destes, de acordo com dados da Yandex.Metrica da primavera de 2016, 29% de todas as visitas aos sites são feitas na Rússia, e esse número está em constante crescimento.

Os mecanismos de pesquisa, que sempre representam a conveniência do usuário final, recomendam tornar seus sites digeríveis para diferentes dispositivos. A classificação SERP móvel agora leva em consideração se a página é otimizada para smartphones / tablets ou não. Portanto, ao criar um site, é melhor pensar nisso imediatamente. Se o site já existe e funciona, é necessário otimizá-lo para acompanhar os tempos e não perder clientes em potencial com dispositivos móveis.

Existem duas opções para otimizar um site para smartphones e tablets: layout adaptável e versão móvel. Vamos considerar como esses métodos diferem, descubra seus prós e contras.

Design adaptativo

A principal característica é que todos os elementos da interface se ajustam automaticamente a diferentes tamanhos de tela. Devido a isso, esses sites são igualmente bem e convenientemente exibidos em computadores pessoais, laptops, smartphones e tablets.

Vantagens:

• o site sempre se ajusta à resolução de tela atual - ao alterar a orientação em um dispositivo móvel ou quando a janela do navegador em um desktop é reduzida;
• não há necessidade de configurar redirecionamentos;
• o site tem melhor classificação nos resultados de pesquisa para celular;
• facilidade de gerenciamento do site, pois o conteúdo se ajusta automaticamente a diferentes dispositivos;
• economia - um layout de site adaptável custará menos do que desenvolver um site separado para dispositivos móveis.

Desvantagens:

A principal desvantagem dessa opção é que ela não resolve o problema de velocidade de carregamento do site. Tanto em um computador quanto em um dispositivo móvel, quando você abre um site responsivo, a mesma quantidade de informações é carregada. Portanto, é importante considerar que um site que abre instantaneamente em um PC, em um smartphone ou tablet usando a Internet móvel abrirá lentamente.

versão móvel

A versão mobile pressupõe a criação de dois sites: o principal para visualização em computadores e o móvel para smartphones e tablets.

Vantagens:

• assim como o layout responsivo, a versão móvel se classifica melhor nos resultados da pesquisa móvel;
• a capacidade de postar no site apenas a funcionalidade e o conteúdo necessário para smartphones e tablets;
• menus, navegação e outros elementos de design podem ser totalmente personalizados para atender às necessidades dos usuários móveis;
• as versões principal (para computadores) e móveis podem ser alteradas independentemente uma da outra;
• tempos de carregamento rápidos.

Desvantagens:

• a necessidade de gastar recursos no suporte e na gestão de dois recursos ao mesmo tempo, para monitorar a relevância das informações sobre ambos;
• ao postar conteúdo, você deve primeiro adaptá-lo para dispositivos móveis e, em seguida, publicá-lo duas vezes: nas versões principal e móvel;
• a necessidade de configurar redirecionamentos;
• o problema com conteúdo duplicado - um artigo tem dois endereços diferentes, o que afeta negativamente o indicador de exclusividade e a eficiência de exibição nos motores de busca;
• a versão mobile do site requer grandes investimentos: é preciso levar em conta os custos de desenvolvimento, atualizar a versão mobile e comprar um domínio separado.

Resultados de comparação

Com base nas vantagens e desvantagens acima das duas opções para otimizar o site para dispositivos móveis, recomendamos mudar para um layout responsivo: esta opção não só é menos cara em termos de custo e tempo em comparação com a versão móvel, mas também permite que você para gerenciar convenientemente o site.

Experiência da plataforma para criação de sites Nethouse

Mais de 50.000 recursos ativos estão operando atualmente com base no Nethouse: lojas online, sites de empresas e especialistas, landing pages, portfólios e blogs. Em dezembro de 2016, lançamos novos modelos responsivos e oferecemos aos usuários a possibilidade de alternar para eles com alguns cliques do mouse, sem perder informações e totalmente gratuito.

Até o momento, cerca de 25% de nossos usuários mudaram para modelos responsivos. Vamos ver como isso afetou as estatísticas de seus sites.

1. Pesquise o tráfego.

Alguns de nossos usuários temem que a transição para o design responsivo possa afetar negativamente o tráfego, e eles terão que esperar a recuperação. Os gráficos abaixo mostram que isso não aconteceu.

2. Pesquise o tráfego móvel.

Os mecanismos de pesquisa classificam os sites responsivos em uma posição superior nos resultados de pesquisa para celular, e o Google, mesmo na versão para desktop dos resultados da pesquisa, marca os sites sem capacidade de resposta com a linha "Sua página não está otimizada para smartphones". Os gráficos abaixo mostram que, após a mudança para o layout adaptável, o tráfego de pesquisa de smartphones aumenta constantemente.

3. Fatores comportamentais.

O design responsivo não só parece ótimo e externamente atende a todos os requisitos das tendências modernas, mas também melhora os indicadores comportamentais dos sites, como taxa de rejeição, profundidade de navegação e tempo no site, o que é especialmente importante para o tráfego de dispositivos móveis. Os gráficos a seguir mostram as mudanças nas estatísticas dos fatores comportamentais em comparação aos períodos "antes" da mudança do template e "depois".

Para determinar o que é melhor - um design responsivo ou uma versão móvel do site, primeiro você precisa entender por que tudo isso é necessário.

De acordo com comscore.com, a porcentagem de usuários que navegam em sites de dispositivos móveis está aumentando a cada ano:

Base de assinantes ativos transmissão móvel dados, mundo, milhões de pessoas, 2007–2015

Nesse sentido, novos algoritmos foram desenvolvidos para os motores de busca, bem como fatores adicionais de classificação foram introduzidos: agora os resultados da pesquisa levam em consideração o quão amigável é o site (conveniente para visualização em dispositivos móveis). No Google, o algoritmo compatível com dispositivos móveis foi lançado em 21 de abril de 2015, em Yandex - “Vladivostok” em 2 de fevereiro de 2016.

Versão desktop do site e versão adaptada para dispositivos móveis

Como os mecanismos de pesquisa determinam se a página de um site é compatível com dispositivos móveis:

• as páginas devem conter conteúdo que não requeira rolagem horizontal ou dimensionamento para visualização;
• o site não deve conter elementos que não funcionam em muitos dispositivos móveis - Flash, miniaplicativos Java e plug-ins Silverlight;
• os textos nas páginas devem ser legíveis sem escala;
• Os links devem ser espaçados o suficiente para serem fáceis de clicar.

O mais importante é que os mecanismos de pesquisa classificam os sites de maneira inequívoca - compatíveis com dispositivos móveis ou não.

Usando a ferramenta Google PageSpeed ​​Insights(https://developers.google.com/speed/pagespeed/) você pode determinar a velocidade de carregamento das páginas de seu site, bem como sua usabilidade. A velocidade de página pode variar de 0 a 100 para velocidade de página e experiência do usuário, por exemplo:

Resultados de 85 pontos e acima são considerados bons.

Caso a página do site não atenda aos requisitos do serviço, é emitido um relatório na forma de recomendações para a eliminação de problemas, por exemplo:

Este serviço pode ser utilizado para diagnósticos iniciais e identificação de problemas no site.

Quando é necessário desenvolver uma versão mobile ou responsiva para sites?

Para entender se vale a pena adaptar um site para um público "móvel", é necessário analisá-lo em sistemas de análise da web (Yandex.Metrica ou Analítica do Google) por atendimento no contexto de dispositivos a partir dos quais os usuários visitam o site. Caso mais de 15% da audiência use smartphones ou tablets, é recomendável desenvolver um layout responsivo ou versão mobile. É importante considerar o tráfego do site aqui também. Por exemplo, para sites com um grande número de visitantes (de 1.000.000 e acima), essa barra é reduzida, uma vez que um segmento tão grande do tráfego do site não pode ser negligenciado.

Versão móvel do site

versão móvel- uma versão separada ou um modelo separado adaptado para exibição em dispositivos móveis. Ele pode não exibir todos os blocos que estão na versão principal do site.

Um "recurso especial" da versão móvel: quando você muda para ele, o URL muda na barra de endereço do navegador - o prefixo "m" é adicionado a ele, por exemplo: m.example.ru.

Visualização em um monitor de computador e em um dispositivo móvel: a versão móvel é diferente da principal

Um exemplo de um site com uma versão móvel adaptada: http://www.lamoda.ru/ (m.lamoda.ru).

As principais vantagens da versão mobile do site

• Peso leve e, como resultado, alta velocidade de download. Isso é essencial para usuários que têm baixa velocidade Acesso à Internet (GPRS ou 3G fraco).
• A escolha do usuário de qual versão visualizar (móvel ou principal).
• Conformidade com os requisitos dos motores de busca para a comodidade de visualização do site em dispositivos móveis.

Desvantagens da versão móvel

• Se for necessário fazer alterações no site, elas deverão ser feitas na versão regular do site e na versão móvel, ou seja, o volume de trabalho dobra.
• Ao desenvolvê-lo, muitas vezes você precisa descartar parte do conteúdo.
• Como as versões principal e móvel do site estão em domínios diferentes, isso não melhora fatores comportamentais domínio principal, ou seja, será uma desvantagem para a otimização de SEO.

Este é um design especial de páginas da web em que os elementos do site mudam de tamanho e posição em diferentes resoluções de tela. O site se adapta automaticamente ao tamanho do dispositivo em que está aberto, seja um monitor de PC, smartphone ou tablet. Graças a este tipo de layout, o site será exibido de forma conveniente e clara em dispositivos diferentes... Com o uso de tecnologias de design adaptável, a funcionalidade do site não é afetada em nada.

Visualize em um monitor de computador e em um dispositivo móvel - a versão adaptativa é diferente da principal

Um exemplo de site com versão adaptável: http://www.mvideo.ru/.

Benefícios do design responsivo para celular

• Um URL para todo o conteúdo.
• Interface flexível - você pode personalizar a exibição confortável do site para qualquer largura de tela.
• O design responsivo atende aos requisitos dos mecanismos de pesquisa para a conveniência de visualização do site em dispositivos móveis.
• Se o site tiver uma versão responsiva, os fatores comportamentais tornam-se melhores em dispositivos móveis e, a partir disso, o desempenho geral do site melhora. Para a classificação nos resultados da pesquisa, isso será uma grande vantagem.

Desvantagens do design responsivo para dispositivos móveis

• A necessidade de criar layouts separados de páginas de site para cada resolução de exibição.
• A versão responsiva, ao contrário da versão móvel, não pode ser mudada para modo normal... Ou seja, o usuário não tem a opção de exibir o site. A desvantagem é relevante se houver erros na versão adaptativa - por exemplo, os elementos são exibidos incorretamente.
• A complexidade de adicionar um novo modelo de página, uma vez que eles precisarão ser configurados para exibição correta na versão adaptativa. Se você adicionar informações aos modelos de página existentes, não haverá problemas de exibição.

O que é melhor: layout responsivo para dispositivos móveis ou versão mobile do site?

A melhor solução para um site é usar um layout responsivo para dispositivos móveis. Apesar de uma série de deficiências, um site com um layout responsivo é mais funcional. Além disso, a presença de page templates implica na facilidade de adição de conteúdo ao site, ao contrário da versão mobile, em que o trabalho de adição de conteúdo é duplicado, pois na verdade existem dois sites diferentes. Uma grande vantagem é o fato de que a versão responsiva melhora os fatores comportamentais do site principal. Isso é útil em termos de promoção e usabilidade. Com base nisso, recomendamos fazer sua escolha em favor de um layout responsivo.