Como fazer uma versão móvel do seu site

ter uma versão móvel do seu site é uma obrigação hoje em dia e a única maneira infalível de tornar seu projeto da web acessível a partir de dispositivos móveis. Portanto, se você está certo em lançar um site, você deve levar esse problema em consideração para torná-lo um sucesso. Já tem um site e deseja atualizá-lo para torná-lo compatível com dispositivos móveis? As informações fornecidas abaixo também serão úteis para você.

existem várias maneiras de iniciar um site móvel hoje. A escolha da solução mais adequada depende de vários fatores, como tipo de site, idade e características, seus próprios objetivos de web design, habilidades e requisitos. As soluções mais difundidas são as seguintes:

• criação de design responsivo, quando um usuário visita o mesmo site (que exibe de forma diferente no que diz respeito a regras especiais relacionadas a CSS) de dispositivos móveis e de desktop;
• website para dispositivos móveis Separado versão baseada no móvel, abordagem, quando você tem duas interfaces que funcionam de forma consistente e pode até mesmo ser hospedados em diferentes domínios/subdomínios;
• Completo aplicativo móvel, que pode ser um produto stand-alone com um pré-concebido arquitetura desenvolvida para uma determinada plataforma ou de uma ferramenta de pré-visualização (como um navegador da web) que é aplicável a um site só.

qualquer uma dessas opções funciona muito bem para a criação de sites móveis. Cabe ao proprietário apenas escolher a solução mais adequada. Vamos dar uma olhada nas formas mais difundidas (e mais convenientes) de desenvolvimento de projetos móveis agora.

como fazer uma versão móvel de um site (construtor de sites)

se você ainda não tem um site, faz sentido escolher um serviço que vem com suporte de design responsivo e/ou tem um editor móvel integrado separado. Um construtor de sites funcionará melhor para esse fim, pois essas plataformas são criadas principalmente para o desenvolvimento de sites compatíveis com dispositivos móveis e, portanto, inicialmente tornam todos os seus blocos, widgets e elementos de interface responsivos por padrão. Como resultado, os projetos construídos com eles, exibir grande em telas de desktop e móveis sem a necessidade de criar uma versão móvel separada. Vamos rever esta opção através do uso do construtor de sites Wix.

Wix é o mundo-popular all-in-one Saas website builder que permite iniciar / gerenciar qualquer tipo de projeto web, seja um blog, um portfólio, uma página de destino, um site de negócios ou até mesmo uma loja web. Todos os modelos disponíveis em sua extensa galeria (existem mais de 550 deles aqui até agora), bem como páginas da web que os usuários criam do zero são adaptados automaticamente para navegação móvel.

é possível configurar separadamente uma versão de site para desktop e celular aqui, mas ainda não há opção de visualização de tablet. O que você pode fazer aqui é ocultar os blocos e elementos de interface selecionados e modificar/configurar fundos exclusivos aqui. Além disso, o Wix possui recursos específicos relacionados a dispositivos móveis, como:

• Exibição Do Painel de Inicialização Rápida (você pode adicionar um botão de chamada telefônica, links para redes sociais/mensageiros etc. aqui);
• o botão” Up”;
• ecrã de boas-Vindas (um tipo de animação de carregamento de tela que permite visualizar emocional saudações ou a introdução de uma marca/marca antes de acessar um site da web);
• esquema de cores Personalizado para o navegador google Chrome painel;
• O serviço automatizado de conteúdo e o layout da página web otimização para dispositivos móveis (esta é uma opção conveniente para páginas da web criadas por inexperientes designers).

o Wix também possui um aplicativo móvel que permite gerenciar um site, se você receber uma assinatura que inclui acesso a ferramentas profissionais de negócios.

Como Fazer uma Versão Móvel do Site CMS (WordPress)

Como qualquer outro CMS, WordPress não prestar atenção a um dispositivo usado para acessar um site. A plataforma apenas fornece a variante de design especificada nas configurações padrão.

ainda faz sentido destacar os serviços de desenvolvedores da web aqui como o WordPress é um dos CMS, o design do painel administrativo de que pode se adaptar aos dispositivos móveis (isto significa que um site será conveniente não só para os visitantes, mas também para o seu proprietário, que será capaz de editar, configurar e preenchê-lo com conteúdo a partir de um dispositivo móvel). Além disso, existem aplicativos para smartphones que são aplicáveis não apenas para um CMS clássico, mas para uma nuvem WordPress.com plataforma também.

como resultado, uma versão de site móvel prova ser um mérito de um próprio modelo em 99% dos casos. A única exceção são plugins ou scripts especiais que podem redirecionar os usuários para um tema móvel separado (com base na resolução da tela ou no modelo do dispositivo, por exemplo).

como criar uma versão de site móvel com WordPress do zero

se você está apenas planejando lançar um site, então o problema não é tão agudo – você só precisa escolher o modelo certo. A variedade de temas responsivos é mais do que suficiente, mesmo no catálogo oficial do CMS. Você deve se certificar de que o design selecionado adere absolutamente às funções declaradas. O mesmo é sobre plataformas alternativas como ThemeForest ou TemplateMonster.

Se a velocidade de carregamento e a alta PageSpeed Insights parâmetros realmente importa para você, então existem modelos especiais que garante até 100 pontos em testes de perfil, como a Neve tema, por exemplo. No entanto, os designs que não podem se adaptar às telas dos smartphones não são muito difundidos nos dias de hoje.

Como substituir um modelo WordPress por um responsivo

se você já possui um site por um longo período de tempo e seu modelo está desatualizado sendo criado inicialmente para combinar formatos de tela em grande escala, então você deve considerar a possibilidade de substituir um design de site antigo por um novo. Tal abordagem tem várias vantagens, a saber:

• a versão para Desktop e site móvel terá o mesmo estilo;
• A necessidade de gerenciar dois tipos de interface serão eliminados;
• Você não tem que escrever o complexo de funções e algoritmos para definir a resolução do ecrã e o tipo de dispositivo de um utilizador para o redireciona para o projeto separado;
• Comercial temas freqüentemente vêm com suporte técnico e, assim, você será capaz de obter respostas a todas suas perguntas e para colocar um novo tema não é pior do que o anterior.

desvantagens também estão disponíveis aqui. Os modelos geralmente vêm com códigos escritos de análises, contadores, blocos de anúncios, etc. Alguns deles até introduzem tipos de material separados, o que desencadeia a necessidade de transferir todos esses elementos para um novo modelo. Todos os possíveis erros podem ter impacto negativo nos resultados do mecanismo de pesquisa. Se você tem usuários regulares, eles podem não gostar da ideia e podem até se recusar a visitar seu site. Assim, você precisa analisar completamente a próxima mudança de design para considerar todas as nuances possíveis.

como fazer um modelo desatualizado responsivo

a ideia de fazer um modelo desatualizado responsivo não é tão complicada quanto pode parecer inicialmente. No entanto, realmente não faz sentido experimentá-lo, se você não tiver habilidades de nicho ou pelo menos noções básicas de web design. De qualquer forma, há sempre a possibilidade de contratar um web designer para ajudá-lo com isso.

a ideia principal é adicionar consultas de mídia CSS, com base em quais estilos em cascata serão adicionados especialmente para as resoluções de tela necessárias. Dê uma olhada no exemplo agora:

@media screen and (max-width: 479px) {...These are style sheets that will be applied exclusively for screens,the width of which does not exceed 479 pixels, that is, for smartphonesin the portrait format... }@media screen and (min-width:480px) and (max-width:800px) {...CSS styles here will be developed for screens with the width from480 up to 800 pixels, for example, on smartphones with horizontal screen position...}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {...These are styles for tablets in vertical and horizontal positions...}

por exemplo, se sua grade principal fosse assim:

ele terá a seguinte aparência em HTML:

<div class="main page box"> <div class="profile box">Guest profile</div> <div class="article box">Main article</div> <div class="sidebar box">Sidebar</div></div>

Estilos para essas caixas são colocadas em CSS arquivos de modelo com o ponto de pé no início, o que significa que esta é a classe CSS:

.main web page box {width: 1280px; (or any other meaning, which can be provided in percentage form - width: 100%;)}.profile box {width: 280px; (the width may also be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}.article box {width: 600px; (the width may be provided in percentage form - width: 50%;)float: left; (left-edge wrap) }.sidebar box {width: 400px; (the width may be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}

Se substituirmos o fixo ou parente de largura com 100% para a sugestão de resolução de tela, em seguida, a grade vai olhar como se segue:

Para chegar a tal resultado, é o suficiente para acrescentar a consulta de mídia para as folhas de estilo (o exemplo abaixo é aplicável para todos os dispositivos com a largura de tela de 1024 pixels e abaixo):

@media only screen and (max-device-width: 1024px) {.main web page box {width: 100%; (full width)}.profile box {width: 100%; (full width)float: left; (right-edge wrap)}.article box {width: 100%; (full width)float: left; (right-edge wrap)}.sidebar box {width: 100%; (full width)float: left; (right-edge wrap)}}

lembre-se de que os comentários fornecidos entre parênteses são mencionados exclusivamente como uma amostra, eles não podem ser transferidos para o código CSS real.

que armadilhas podem surgir com essa realização de design responsivo? Infelizmente, existem muitos deles:

• todo o layout da página da web pode ser violado, pois não apenas os blocos de teclas disponíveis em uma página podem ter Largura Fixa. Também podem ser imagens, blocos de notícias em uma página inicial/em uma categoria, blocos de descrição do autor e outros elementos. É impossível identificar todos eles de uma só vez. Cada um deles terá que ser editado assim que for identificado.
• o volume da página da web não mudará, o que terá impacto negativo na velocidade de download com conexão lenta à Internet (nenhuma otimização será possível sob tais condições).
• de acordo com as recomendações do mecanismo de pesquisa, as fontes em dispositivos móveis devem ser facilmente legíveis sem diminuir o zoom. Isso acionará a necessidade de Redefinir Todos os tamanhos de fonte para títulos, textos corporais, citações, listas (numeradas e não numeradas) etc.
• um cabeçalho e um menu complexo devem ser completamente refeitos. Faz sentido deixar apenas um pequeno logotipo do site, um ícone de pesquisa (Se você tiver essa opção) e um ícone de perfil (se um sistema de autorização for usado). Um menu da área de trabalho deve ser oculto e substituído por um ícone “sanduíche” (ícone do menu). Na maioria dos modelos responsivos populares, isso é implementado por dois menus paralelos: o primeiro é destinado a telas de desktop e é exibido apenas no PC, enquanto o segundo é destinado apenas a dispositivos móveis (é exibido com base nas mesmas consultas de mídia apenas em dispositivos móveis).
• se a estrutura das Caixas Principais for diferente, por exemplo, a barra lateral é exibida à esquerda, mas não à direita, enquanto todos os widgets serão exibidos na frente do conteúdo principal, embora seja mais lógico colocá-los abaixo.
• além dos arquivos CSS, os estilos do site podem ser substituídos por scripts JS, será mais difícil encontrá-los e editá-los.

estas são apenas algumas das armadilhas potenciais. Assim, faz sentido contratar um especialista em web design para concluir a tarefa.

as vantagens das consultas de mídia permitem excluir o código incorreto a qualquer momento. Esses estilos não são exibidos no site principal.

como adicionar uma versão responsiva do site com Plugins

alguns CMS usam seus próprios conjuntos de extensão, enquanto outros não os possuem. WordPress coed com os plugins mais notáveis para a criação de sites responsivos, a saber:

• Jetpack – o recurso de criação de versão móvel automatizada foi descontinuado desde Março de 2020;
• WPtouch-está disponível em versões gratuitas e pagas, a extensão tem seus próprios plug-ins e temas como plug-in de organização de cache separado, plug-in de criação de aplicativos da web, Plug-in de otimização de imagem, plug-in de criação de AMP etc. O processo de mudança do desktop para o tema móvel com o WPtouch é concluído sem alterar os URLs das páginas da web, o que é muito importante para SEO;
• WP Móvel Menu sensível ao menu para dispositivos móveis (ele vai vir a calhar para você, se você precisa substituir um volumoso e complexo menu do site de desktop versão com um ágil e compacto menu para dispositivos móveis);
• WP Móvel Detectar – o plugin inicialmente, define-se que uma pessoa usa um dispositivo móvel e fornece o resultado como um valor true/false. Isso o torna aplicável para a implementação da opção de troca de modelo ou para a exibição de certos blocos de interface;
• WP Mobile Edition – o plugin pode converter sites WordPress em aplicativos da web completos. Os usuários podem adicionar um ícone de site aos seus desktops de smartphone / tablet para usá – lo no formato de tela cheia (sem quadros e guias do navegador);
• Mobile Smart-um plugin identifica que o dispositivo se refere à classe móvel e, em seguida, alterna os temas para o alternativo, que é compatível com dispositivos móveis. Uma versão Pro vem com suporte integrado de menus móveis, widgets especiais, opção de gerenciamento de plug-ins (um conjunto separado pode ser fornecido para dispositivos móveis), switch de domínio (para a implementação do trabalho correto de duas versões independentes do site) etc.

os desenvolvedores da Web garantiram que as extensões permanecessem não reclamadas, pois muitos proprietários de sites decidiram mudar para versões de modelo responsivas. Assim, a maioria desses plugins não foi atualizada por um longo período de tempo, o que pode resultar na incompatibilidade com a versão atual da plataforma. A única exceção é o WPtouch.

trabalhar com cada plugin terá suas próprias peculiaridades. Alguns deles oferecem modelos móveis prontos, enquanto outros recomendam baixar extensões de terceiros ou criar as próprias.

se você der preferência a trabalhar com uma versão do site móvel no subdomínio / endereço alternativo, Aqui estão as nuances que você deve estar ciente:

• esses são sites diferentes para os mecanismos de pesquisa e é muito ruim que seu conteúdo não seja único;
• Para tornar os motores de busca “cola” a URL e entender que esse é o mesmo site, todos os atributos de ligação deve ser devidamente organizado:
• • Atributo link … rel=”alternate” href=”URL-página móvel” – para as versões desktop;
  • Atributo link … rel=”canonical” href=”URL-páginas da web da área de trabalho” – para mobile modelos.
• se o conteúdo em diferentes versões de página da web for diferente, você corre o risco de obter sanções por camuflagem (para substituição de conteúdo).

como fazer a versão móvel do site HTML

na medida em que os sites HTML não têm funções dinâmicas, você não poderá analisar uma resolução de tela de um dispositivo e alternar de um modelo de desktop para o tema móvel com base no resultado. Tudo que você precisa é redesenhar completamente a grade de layout e os estilos dos elementos problemáticos.

já analisamos como fazer isso-isso é feito por meio de consultas de mídia. Os layouts mais difíceis de adaptar são aqueles com largura fixa e posição dos elementos.

nada funcionará sem habilidades de nicho especializadas e imersão em código CSS/HTML. Faz sentido contratar um profissional de web design desde o início ou mudar o design para outro que você possa comprar ou encomendar, ou simplesmente desenvolver uma nova página da web do zero, por exemplo, usando o Mobirise offline Website builder, por exemplo. Finalmente, pode ser hora de mudar para a infraestrutura de nuvem e escolher um dos criadores de sites on-line.

sites separados para celular e Desktop ou um site: o que é melhor?

como mencionado acima, ter um site móvel é uma obrigação para qualquer empresário. Esta é uma maneira infalível de garantir uma apresentação de negócios de qualidade na web, gerar tráfego e garantir a experiência insuperável do Usuário. A questão é: faz sentido criar duas versões separadas de sites para telas móveis e de desktop ou construir um site responsivo que exibirá muito bem em ambos os tipos de dispositivos?

geralmente, iniciar um site responsivo é uma solução mais eficaz e prática. Elimina a necessidade de criar dois sites diferentes com diversos domínios/subdomínios, URLs e estrutura interna. Esses sites costumam confundir os visitantes e podem desencadear problemas, quando se trata de otimização de SEO, marketing na internet e outros métodos de promoção relacionados. Em vez disso, você obtém um projeto que será exibido igualmente bem em telas de desktop e móveis.

quanto custa uma versão móvel do site?

o custo de uma versão móvel do site geralmente depende de uma plataforma com a qual você a inicia. Se você escolher um construtor de sites on-line como o Wix, ele pode ser totalmente gratuito, pois o sistema permite que você crie sites prontos para dispositivos móveis por padrão. No entanto, o plano Wix gratuito não permite que você conecte seu próprio nome de domínio, o que tornará impossível tirar o máximo proveito do desempenho do seu projeto.

na medida em que o Wix tem uma política de preços bastante distinta e versátil, você pode escolher qualquer um de seus planos para lançar um site. Basta considerar seus objetivos de Web design, tipo de projeto e especialização, bem como orçamento que você está pronto para investir nele, ao escolher a Assinatura mais preferível. Cada plano Wix vem com uma ampla gama de recursos e termos especiais que afetam o custo final. A assinatura de site mais barata custará US $13/mês, enquanto o preço do Plano Básico de negócios mais acessível começa em US $23/mês.

você decidiu usar o WordPress para criar um site responsivo? Em seguida, o custo do projeto acabará por depender do preço dos plugins que você irá para. As extensões do WordPress geralmente são posicionadas como gratuitas, mas uma parte de seus recursos ainda fica disponível após a atualização para a versão Pro. Por exemplo, o custo do WPtouch Pro varia de US $79 a US $359 por ano. É exatamente por isso que parece razoável mudar para um modelo responsivo pronto. Tais temas são comprados uma vez, enquanto seu custo constitui cerca de US $40-80. Caso você ainda decida contratar um desenvolvedor web Profissional para redesenhar um tema desatualizado para você, o custo será discutido individualmente, dependendo da complexidade do projeto.

Bottom Line

não é segredo que qualquer site deve ter uma versão móvel para ficar em demanda com o público-alvo hoje. Há quase pessoas que não usam seus dispositivos móveis para navegar na web, procurando os serviços e produtos de que precisam. Assim, o processo de otimização móvel do seu site acabará por depender da plataforma selecionada.

se você está apenas planejando lançar um site, faz sentido dar preferência a um dos construtores de sites on-line mais populares. O Wix funcionará melhor para esse fim. Caso você já execute um site desenvolvido pelo CMS como o WordPress, é melhor substituí-lo por um tema responsivo. Plugins que oferecem suporte móvel, no entanto, podem ser muito caros, enquanto um redesenho completo do modelo será um verdadeiro desafio, especialmente se você pretende lidar com a tarefa de forma independente.

de qualquer forma, não faz sentido criar uma versão móvel separada do seu site. Você enfrentará problemas relacionados ao desenvolvimento do projeto e seu suporte adicional. Uma solução muito mais simples e razoável é tornar seu site móvel-responsivo desde o início.