Antes de podermos entrar em nossa lista de verificação de web design responsivo, é importante falar sobre design responsivo.
O design responsivo, ou design otimizado para dispositivos móveis, garante que os visitantes do seu site tenham uma experiência fantástica, independentemente do dispositivo usado.
Isso significa que, independentemente de usarem um computador desktop, um smartphone ou um tablet, seu site terá a mesma aparência e agirá da mesma maneira. Se você visitar um site em seu smartphone e ele tiver as seguintes características, provavelmente não será responsivo:
- O texto é tão pequeno que é quase ilegível
- Se você tentar preencher um formulário, ele fica pequeno e você deve aumentar o zoom para preenchê-lo
- É difícil clicar nos elementos da barra de navegação
- As fotos aparecem desalinhadas
- Você pode rolar da esquerda para a direita em uma página
Como você pode ver no exemplo abaixo, você deve rolar da esquerda para a direita na tela do seu smartphone para ver toda a página inicial do site deste salão. Dito isto, este site seria considerado sem resposta. Por outro lado, se você visitar um site em seu smartphone com as seguintes características, provavelmente ele será responsivo:
- Seções de texto preenchem a página
- Os módulos de design são alinhados e fáceis de digerir
- Você não precisa aumentar o zoom para ler o menu
- As barras de navegação geralmente assumem a forma de um menu de hambúrguer até serem expandidas
- Os formulários se expandem para preencher a página, facilitando o preenchimento em telas pequenas
No exemplo abaixo, você pode ver que o chocolate quente Swiss Miss tem um site responsivo. Quando você muda de olhar para o URL em seu computador desktop para seu smartphone, o site ainda oferece a mesma ótima experiência. Agora que analisamos a diferença entre sites responsivos e não responsivos, é hora de mergulhar direto na nossa lista de verificação de design responsivo !
Sua lista de verificação completa de design responsivo
Se você não deseja que seus clientes (e o Google) o considerem uma autoridade em seu setor, é importante ter um site profissional e responsivo. Veja como:
Item 1 da lista de verificação responsiva: teste seu site atual
Se você não tem certeza se seu site atual é responsivo, você vai querer testá-lo para descobrir. Você pode usar uma variedade de ferramentas de teste de design responsivo, incluindo:
- Ferramenta otimizada para dispositivos móveis do Google
- CrossBrowser Testing
- Redimensionador do Google
- Sou responsivo
Essas ferramentas fornecerão informações sobre a aparência do seu site em diferentes dispositivos. Lembre-se, se seu site não for responsivo, ele não terá a mesma aparência que sua versão para desktop em dispositivos menores. Ao testar seu site atual em uma variedade de ferramentas de teste de design responsivo, você também desejará testá-las em vários dispositivos.
Muitas ferramentas de teste de web design responsivo permitem que você veja como seu site será exibido para usuários em diferentes dispositivos. Por exemplo, usando a ferramenta Resizer do Google, você pode alternar entre as versões para smartphone e tablet do seu site para ver como elas são vistas pelos usuários.
Item 2 da lista de verificação responsiva: determine quais elementos não são responsivos e corrija-os
Depois de usar as ferramentas de teste de web design responsivas mencionadas acima, você terá uma boa ideia de quais elementos do site são responsivos e quais não são. Por exemplo, todo o seu site pode ficar ótimo em dispositivos móveis, exceto suas imagens. Depois de tomar nota dos elementos responsivos e não responsivos, você pode começar a investigar como corrigi-los.
Alguns itens do site para verificar a capacidade de resposta incluem:
- Barra de navegação
- Imagens
- Fontes
- Formulários
- Botões
Estes são alguns dos elementos de web design mais importantes que são extremamente importantes para uma ótima experiência do usuário.
Item 3 da lista de verificação responsiva: Testar a velocidade do site em diferentes dispositivos
A velocidade da página é uma parte crucial para fornecer uma experiência fantástica para os usuários . Seu site deve carregar rapidamente em todos os dispositivos, ou você corre o risco de os usuários saírem do seu site, e é por isso que a velocidade do site é o item três em nossa lista de verificação para design responsivo. Oitenta e três por cento dos usuários esperam que um site seja carregado em apenas três segundos ou menos, portanto, independentemente do dispositivo usado, você deve garantir que seu site seja carregado rapidamente.
Seu site pode carregar lentamente por vários motivos, incluindo:
- As imagens não são condensadas
- Os elementos do site não são responsivos
- Código confuso
- Muitos elementos pesados como vídeo