Hoje, a maioria das pessoas acessa a internet por meio de dispositivos móveis - tablets, telefones, nesse sentido, a otimização de sites também está atingindo um novo nível. Se um usuário entrar e perceber que o site não está otimizado para dispositivos móveis: a imagem não pode ser visualizada, os botões foram movidos, as fontes são pequenas e ilegíveis, o design está distorcido - 99 em 100% que ele sairá e comece a procurar outro mais conveniente. E o robô de pesquisa irá marcar a caixa que o recurso é irrelevante, ou seja, não corresponde à consulta de pesquisa. Portanto, o design da página deve ser adaptado a vários dispositivos móveis. O que é uma versão mobile do site, como fazê-la e qual a melhor forma de aplicá-la? Leia mais neste artigo.
Portanto, há quatro maneiras principais de tornar seu site compatível com dispositivos móveis.
Método Um - Design Responsivo
Os modelos responsivos alteram a imagem do site dependendo do tamanho da tela. Como regra, eles são definidos para o padrão 1600, 1500, 1280, 1100, 1024 e 980 pixels. Para implementação, são usadas consultas de mídia CSS3. O design do site em si não muda.
As vantagens deste método incluem:
- desenvolvimento conveniente,como a própria estrutura se adapta aos parâmetros da tela, e qualquer atualização não requer desenvolvimento de design do zero, basta ajustar o CSS e o HTML;
- um URL – o usuário não precisa lembrar de 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, além de facilitar a busca mecanismo para classificar e classificar um recurso com um único endereço.
Claro que os templates adaptativos têm suas desvantagens, que, aliás, são mais do que vantagens. No entanto, muitos desenvolvedores aderem a esse conceito, por exemplo, a Google Corporation, cuja versão móvel do site possui um design adaptável. Então, desvantagens:
- O design responsivo não suporta as mesmas tarefas no celular que no PC. Se for, por exemplo, uma versão móvel do site de um banco, onde as informações sobre a taxa de câmbio ou os caixas eletrônicos mais próximos são mais importantes para o usuário, esse design é suficiente. Mas se este for um recurso estruturado complexo com muitas seções e subseções, os visitantes dificilmente gostarão do layout adaptável.
- Carregamento lento transforma um site favorito em um site odioso. Isso é especialmente verdadeiro para recursos em que animações, vídeos, pop-ups e outros elementos ativos são abundantes. Devido ao alto peso, a página simplesmente “desacelerará”, o usuário ficará com raiva e sairá, e as posições de busca do site cairão.
- A incapacidade de desligar a versão móvel é outra desvantagem significativa. Se algum elemento estiver oculto por tal layout, vocênão há nada que você possa fazer para abri-lo, ao contrário de sites onde você pode desativá-lo e mudar para um domínio normal.
No entanto, uma versão móvel tão rápida do site, sem habilidades e custos especiais, permite adaptar o recurso a qualquer gadget. Mas, tendo em conta as deficiências enumeradas, irá adequar-se a 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, dois outros métodos são adequados.
Segundo método - uma versão separada do site
Esse método é muito comum e geralmente é bem-sucedido em tornar o site mais legível em um dispositivo móvel. Sua essência é criar uma versão separada da página, desenhada para o aplicativo e localizada em uma 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 editar, pois 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 um modelo adaptável;
- na maioria das vezes é possível ir para a versão principal da página pelo celular.
Mas havia algumas desvantagens aqui também:
- Vários endereços - versão desktop e mobile do site. Como fazer o usuário lembrar de duas opções? Os webmasters geralmente prescrevem um redirecionamento (redirecionamento) da versão desktop para a versão móvel, mas, ao mesmo tempo, se esta página estiver no celularversão não existir, o usuário receberá um erro. Aqui, surgem dificuldades com os motores de busca, que têm dificuldade em 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 o usuário a visitar por engano, parecerá ridícula, o que também pode afetar o tráfego.
- Esta versão é muitas vezes fortemente reduzida, desktop, então o usuário terá uma funcionalidade muito limitada. Mas, ao mesmo tempo, se f altar algo, o visitante pode acessar a versão completa da página.
Em geral, um site móvel separado se justifica e é a maneira mais comum de adaptar um recurso para dispositivos móveis. É popular em grandes lojas online como a Amazon.
Terceira via - design RESS
O mecanismo de pesquisa do Google apoia ativamente essa direção do design móvel. Este é o método mais complexo, caro, mas eficaz para adaptar o site a um telefone ou tablet. Chama-se RESS. Isso está direcionando um recurso para um aplicativo móvel que pode ser baixado para cada dispositivo separadamente. Para Android - com GooglePlay e para Apple - com iTunes.
Tais aplicativos são rápidos, gratuitos, convenientes, têm a capacidade de acomodar 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 um site por meio de um navegador. Eles são de fácil acesso, pois o link estará sempre na tela à mão, e não há necessidade de digitar um nome complexo na barra de endereços do navegador.
Há, claro, aqui esuas deficiências, como a complexidade no 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. Suporte técnico regular, correção de deficiências é necessária. No entanto, esta opção é considerada a melhor das três propostas devido ao seu funcionamento produtivo e ininterrupto.
A maneira mais barata de criar um site para celular
Todos os métodos acima envolvem, embora nem sempre um trabalho longo e difícil, mas ainda 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 (plugins) para design responsivo. Por exemplo, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile e outros. Eles ajudarão a exibir o site de forma mais correta no celular, enquanto você receberá algumas dicas sobre o que deve ser corrigido para melhor adaptar a página à versão mobile.
Claro, este método dificilmente é adequado para recursos sérios. Em vez disso, esse recurso gratuito destina-se a sites, blogs e feeds de notícias pequenos e simples. Não se esqueça de que o mecanismo de busca do Google, assim como o Yandex, hoje exige muito das versões móveis, portanto, há uma grande chance de diminuir suas posições usando esse método.
Com este método, provavelmente, anúncios e pop-ups serão cortadosbanners, mas a página carregará rapidamente e sem “lags”.
Princípios para criar versões móveis
Não importa se a versão mobile do site foi criada gratuitamente ou com a ajuda de uma equipe de webmasters, ela foi feita no sistema RESS ou usando um template adaptável. Mais importante ainda, para sua operação eficaz, é necessário aderir a vários princípios extremamente importantes. Então, qual deve ser a versão mobile do site? Como torná-lo produtivo, eficiente e produtivo?
Retire tudo desnecessário
Minimalismo é o que o desenvolvedor da versão mobile do site deve buscar. Imagine como é difícil perceber informações repletas de cores, botões, banners e que você precisa percorrer sem parar em busca do material certo. O design móvel deve ser simples e limpo. Escolha 2-3 cores para dividir o espaço (por exemplo, com marca). Melhor se um deles for branco. Divida o espaço de uma pequena tela em zonas compreensíveis e legíveis. As chaves virtuais devem estar visíveis para que o usuário saiba claramente onde pressionar e veja - aqui está o produto, aqui está o formulário para preenchimento dos dados, aqui estão as informações sobre entrega e pagamento.
Todas as opções adicionais que seriam úteis na versão desktop e facilitariam a vida do usuário só trarão dificuldades aqui. Deixe apenas os elementos mais importantes. Animação, banners publicitários, multimídia, muito provavelmente, apenas retardarão o trabalho do site ou aplicativo e distrairãoprincipal.
Alinhamento
A questão do alinhamento não é menos aguda, pois se for feito incorretamente, o usuário obterá apenas as terminações de palavras importantes. O alinhamento à esquerda e o alinhamento vertical são geralmente aceitos. Imagine-se percorrendo o feed de notícias em seu telefone. Você faz isso de cima para baixo, não para a esquerda ou para a direita.
Unificação
Quando não houver possibilidade de uma longa cadeia de transições, tente combinar vários passos em um. Por exemplo, o site requer a entrada de dados em várias etapas - um nome, depois um endereço, onde em cada célula individual há uma casa, rua, apartamento etc., peça para ele preencher apenas 2 - nome e endereço.
E desconexão
Às vezes, ao contrário, é necessário separar muita informaçã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 percorrer essa lista enorme. Quando ele passar o mouse sobre o centro ou região regional, outra lista de cidades será removida.
Anúncios
A propósito, sobre as listas. Existem dois deles - fixados em ordem alfabética ou outra e com substituição. A escolha deles depende do que será listado.
Fixed é útil se o usuário souber 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 onde existem muitas variações de um mesmoo mesmo nome, e cada lista suspensa aproxima o usuário da meta. A opção de substituição automática é usada com mais frequência 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 de ferramenta ele vê “Agulhas de tricô 5 mm”, “Agulhas de tricô 4,5 mm”, etc.
Autopreenchimento
Este item é especialmente relevante para sites que vendem algo online, e você precisa preencher formulários padrão para pagamento, entrega, etc. Se uma pessoa faz uma compra pelo telefone, provavelmente não terá tempo para chegar a um computador, o que significa que o processo de compra deve ser feito o mais rápido e conveniente 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 é lido, tudo é visto
Ao projetar a versão móvel do site, lembre-se de que os telefones de todos são diferentes, assim como sua visão. Talvez seu site seja visualizado em uma tela pequena, então as fontes devem ser simples e legíveis, os botões devem ser grandes o suficiente para que possam ser clicados sem serem levados para outra página, e as imagens devem abrir separadamente, grandes, principalmente quando vem para a Internet. store.
Algumas estatísticas
Falando na adaptação do site para dispositivos móveis, não podemos deixar de recorrer a estatísticas para entender a importância desse processo parapromoção online.
Os números são os seguintes. Hoje, os gadgets são usados por 87% da população, aparentemente, exceto pelas crianças menores e alguns idosos. Economistas preveem que o comércio móvel crescerá 100 vezes nos próximos 5 anos. Ao mesmo tempo, apenas 21% dos sites estão adaptados para funcionar com dispositivos móveis. Isso significa que apenas uma pequena 5ª parte do tráfego da Internet e do mercado de comércio eletrônico está ocupada.
Pense nesses números. Faz sentido adaptar o seu recurso? Claro que sim. Além disso, embora haja tanto espaço nesse mercado, você pode criar seu próprio segmento nele.
Onde você precisa de uma versão móvel
Usar a versão móvel faz sentido para qualquer plataforma que pretenda obter uma classificação alta. Afinal, trata-se de um impacto direto no usuário, criando condições confortáveis para que ele permaneça em seu site.
Não pode existir sem a versão móvel:
- portais de notícias, pois a maioria é visualizada do celular a caminho do trabalho ou da escola;
- redes sociais - pelo mesmo motivo, além disso, há um fator de comunicação online, o que significa que um chat conveniente e compreensível deve ser criado para isso;
- referência, sites de navegação, etc., onde as pessoas vão quando procuram algo;
- lojas online - uma oportunidade de atrair clientes que não perdem tempo comprando, mas compram tudo pela internet móvel.
Em vez de uma conclusão
Hoje, as tecnologias móveis estão nocrescimento e desenvolvimento ativo, portanto, buscando a liderança no mercado, qualquer empresa deve garantir que seu recurso de Internet atenda aos requisitos. Devido às crescentes demandas do usuário, os sites precisam ser constantemente atualizados e adaptados a diferentes dispositivos. É claro que se uma pessoa é inconveniente para estar em um determinado recurso, ele não pode obter informações sobre um produto ou preço lá, fazer um pedido, saber sobre a entrega, então ele encontrará o site onde tudo isso se tornará 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á a fazer isso. 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 redirecionando para ele, usando modelos gratuitos ou criando um aplicativo móvel que facilitará a entrada do usuário e estar na página.
Esta abordagem não só ajudará a manter a fidelidade dos clientes existentes, mas também proporcionará uma oportunidade para atrair novos visitantes.
