Como garantir que seu site fique bem em todos os dispositivos

Há apenas 10 anos, os webmasters não precisavam se preocupar em criar várias versões de um site para visualização em diferentes plataformas. O consumidor usava computadores de mesa ou laptops em casa ou no escritório para pesquisar produtos, reservar férias e ler as últimas notícias. As telas, embora diferentes em tamanho, apresentavam informações para os consumidores nos mesmos padrões de design, e havia uma sensação de previsibilidade que tornava o trabalho um pouco mais fácil.

Hoje, os consumidores acessam a web a partir de desktops, laptops, smartphones, tablets, e-Readers e consoles de jogos. Esses dispositivos usam várias velocidades de conexão, vêm em vários tamanhos de tela, resolução variável e oferecem velocidades de processamento que variam de tartaruga a lebre em termos de tempo de reação. Com os consumidores navegando em sua página em vários dispositivos diferentes, como você pode garantir que seu site tenha uma boa aparência, independentemente do dispositivo que eles usam para interagir com sua marca?

Nesta postagem, discutiremos os fatores que você precisa ter em mente e ofereceremos algumas dicas úteis para orientá-lo na otimização de sua página da Web para visualização em vários dispositivos.

Como ver seu site em diferentes dispositivos

Se você é como a maioria dos americanos, provavelmente tem um smartphone ou tablet, ou ambos. No entanto, é improvável que você tenha esses dispositivos equipados com todos os diferentes tamanhos de tela, processadores e sistemas operacionais existentes no mercado hoje. Felizmente, o pessoal da HubSpot criou uma ferramenta que permite visualizar seu site em vários dispositivos sem precisar testá-lo em cada dispositivo. O Device Lab deles foi lançado em 2013 e permite que você simplesmente insira a URL do seu site.

O Device Lab não apenas mostrará a aparência da sua página em diferentes dispositivos e sistemas operacionais, mas também gerará relatórios rápidos sobre a porcentagem de visitantes móveis das várias plataformas. Você verá relatórios para iPhone 4/4S, iPhone 5 e iPhone 6/6 Plus, bem como dispositivos Samsung Galaxy S3/S4/S5 e os tablets mais populares da atualidade.

Como criar um site compatível com dispositivos móveis

O Device Lab ajudará você a visualizar seu site em várias plataformas. Você verá se sua página está sendo cortada em tablets ou requer muita ação de zoom e rolagem dos visitantes, mas não informará como fazer as alterações necessárias para desenvolver uma plataforma compatível com dispositivos móveis. Você deseja garantir que seus consumidores encontrem um site atraente e amigável, independentemente do dispositivo em que acessam seu site.

O Entrepreneur oferece alguns pontos de partida básicos para webmasters que desejam criar um site com ótima aparência em qualquer dispositivo. Para começar, você deve reservar um tempo para examinar seu site atual e garantir que ele corresponda ao usuário da web de hoje. Mais de um bilhão de pessoas usam smartphones em todo o mundo, e muitos os usam como principal ponto de acesso à Internet.

Comece simplificando o design geral do seu site. Você precisa considerar designs de página mais simples e tamanhos de fonte maiores para tempos de carregamento mais rápidos e visualização mais fácil em dispositivos móveis. O antigo termo de jornal “acima da dobra” é importante no web design moderno. Se seus espectadores tiverem que rolar a página para baixo em um dispositivo móvel, eles desistirão rapidamente em favor de um site bem projetado. Certifique-se de que suas informações críticas estejam acima da dobra (ou seja, sem rolagem para encontrá-las) e use botões grandes e palpáveis. A discagem direta é coisa do passado, mas dedos gordos levam a pressionamentos acidentais de botões em smartphones diariamente.

Se você não quiser mexer na adaptação do seu site atual, também tem a opção de criar um site para celular. Desenvolver um site móvel para sua empresa estabelece um site paralelo que existe separado, mas conectado ao seu site tradicional. Os processadores determinam se os visitantes são originários de desktops/laptops ou smartphones/tablets e os redirecionam para seu site móvel imediatamente quando eles inserem seu URL.

Existem compensações que vêm com um site móvel. Ao criar um site para celular que use um segundo URL, principalmente o subdomínio .m, sua visibilidade nos mecanismos de pesquisa será prejudicada. O Google e o Bing não são encontrados no subdomínio .m e pressionam os webmasters a usar um URL para maior visibilidade e otimização do mecanismo de pesquisa.

Com isso dito, seu orçamento pode forçar você a criar um site móvel separado em vez de reconstruir seu site principal. Um site móvel menos visível é melhor do que perder completamente o público móvel. Apenas certifique-se de vincular seu site móvel ao seu site principal e você poderá preencher parte da lacuna.

A melhor opção

Claro, você sempre pode fazer um investimento significativo em seus negócios e reconstruir um site que funcione em qualquer dispositivo a qualquer momento. Por meio de um design adaptável e responsivo, você pode criar um site que comprovadamente é exibido corretamente sempre que os visitantes clicam em sua página, independentemente do dispositivo que estão usando. Aqui está uma breve introdução a ambos os conceitos:

• Design Adaptativo: Grandes empresas investem pesadamente em design adaptativo. Um site adaptável detecta e identifica o dispositivo de cada usuário em segundos e gera uma página correspondente aos recursos desse dispositivo específico.
• Design responsivo: usando a tecnologia Cascading Style Sheets (CSS), o design responsivo cria uma única versão do seu site que se ajusta automaticamente para ser exibida corretamente na maioria dos dispositivos, com exceção de telefones celulares mais antigos. Os designs responsivos são flexíveis o suficiente para garantir que seu site tenha uma boa aparência, independentemente do tamanho da tela ou da velocidade do processador em um dispositivo.

Existem desvantagens nessas abordagens. O design adaptativo representa o auge do design de sites hoje, mas sua implementação e suporte são incrivelmente caros. O design responsivo é mais acessível, mas não exatamente no nível do design adaptativo. Ainda assim, comparado a outras opções, o responsivo está muito acima da construção de um site móvel simples.

Ao considerar um redesenho da web, lembre-se dos fatores mencionados neste post. Não importa qual seja o seu orçamento, você precisa reservar fundos para criar um site que seja visível e fácil de usar em qualquer dispositivo. Hoje são smartphones, tablets e um número crescente de Smart TVs. Amanhã, os consumidores poderão estar visualizando sua página na cozinha em portas de geladeira ou no banheiro em espelhos. Prepare seu site hoje para os desafios.