7 passos para criar um site responsivo: guia completo

Você está lendo este artigo no seu smartphone? Se você é, não seria surpreendente – considerando apenas em 2019, havia 3,9 bilhões de usuários exclusivos da Internet móvel ( eram 4,9 bilhões de usuários exclusivos da Internet móvel) É por isso que, em julho de 2019, o Google lançou a Indexação Mobile-First-forçando os proprietários a considerar a capacidade de resposta de seus sites. Então, o seu site é responsivo?

Nesta página, analisaremos sua extensa lista de verificação de design responsivo para garantir que você forneça a melhor experiência possível do site a todos os usuários – independentemente do dispositivo que eles usem. Vamos até cobrir algumas ferramentas que você pode usar para determinar a capacidade de resposta do seu site. Se você quiser se manter atualizado com as últimas tendências e dicas de design, exatamente como as nesta página, assine a Revenue Weekly E -mails!

O que é design responsivo?

Antes que possamos entrar em nossa lista de verificação responsiva da web design, é importante falar sobre design responsivo.

O design responsivo, ou design para dispositivos móveis, garante que os visitantes do seu site tenham uma experiência fantástica, independentemente do dispositivo que eles usem.

Isso significa se eles usam um computador de mesa, um smartphone ou um tablet, seu site parecerá e agirá da mesma maneira.

Se você visitar um site no seu smartphone e ele tiver as seguintes características, provavelmente não é responsivo:

• O texto é tão pequeno que é quase ilegível
• Se você tentar preencher um formulário, ele permanece pequeno e você deve aumentar o zoom para preenchê -lo
• É difícil clicar em elementos da barra de navegação
• As fotos aparecem fora do alinhamento
• Você pode rolar para a 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 no seu smartphone com as seguintes características, provavelmente é responsivo:

• As seções de texto preenchem a página
• Os módulos de design estão alinhados e fáceis de digerir
• Você não precisa aumentar o zoom para ler o menu
• As barras de navegação normalmente assumem a forma de um menu de hambúrguer até a expansão
• Os formulários se expandem para preencher a página, facilitando o preenchimento de telas pequenas

No exemplo abaixo, você pode ver que Chocolate quente da senhorita suíça tem um site responsivo. Quando você muda de olhar para o URL no seu computador de mesa para o seu smartphone, o site ainda oferece a mesma excelente experiência. Agora que analisamos a diferença entre sites responsivos e que não respondem, é hora de mergulhar na nossa lista de verificação de design responsivo!

Sua lista de verificação de design responsivo completo

Se você não deseja que seus clientes (e Google) te separem como autoridade em seu setor, é importante ter um site profissional e responsivo.

Aqui está como:

Lista de verificação responsiva Item 1: Teste seu site atual

Se você não tem certeza se o seu site atual é responsivo, você deve testá -lo para descobrir. Você pode usar uma variedade de ferramentas de teste de design responsivas, incluindo:

Essas ferramentas fornecerão informações sobre a aparência do seu site em diferentes dispositivos. Lembre -se de que, se o seu site não for responsivo, não parecerá o mesmo que a versão de desktop em dispositivos menores. Ao testar seu site atual em uma variedade de ferramentas de teste de design responsivo, você também deseja testá -las em uma variedade de dispositivos.

Muitas ferramentas de teste de design da web responsivas permitem que você veja como será o seu site para os usuários em diferentes dispositivos. Por exemplo, usando a ferramenta de resizador do Google, você pode alternar entre as versões do telefone e do tablet do seu site para ver como elas são para os usuários.

Lista de verificação responsiva Item 2: Determine quais elementos não são responsivos e corrigi -los

Depois de usar as ferramentas de teste de design da web responsivas mencionadas acima, você terá uma boa idéia de quais elementos do site respondem e quais não são.

Por exemplo, todo o seu site pode ficar ótimo no celular, exceto por suas imagens. Depois de anotar elementos responsivos e não responsivos, você pode começar a cavar como corrigi-los. Alguns itens do site para verificar a capacidade de resposta incluem:

• Barra de navegação
• Imagens
• Fontes
• Formas
• Botões

Esses são alguns dos elementos de design da web mais importantes que são extremamente importantes para uma ótima experiência do usuário.

Lista de verificação responsiva Item 3: Velocidade do local de teste em diferentes dispositivos

A velocidade da página é uma parte crucial do fornecimento de uma experiência fantástica do usuário para os usuários. Seu site deve carregar rapidamente em todos os dispositivos ou você corre o risco de os usuários pularem do seu site – e é por isso que a velocidade do site é o item três em nossa lista de verificação para um 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 que eles usam, 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 desordenado
• Muitos elementos pesados, como vídeo

Você pode usar Ferramenta de insights do Google PageSpeed Para saber mais sobre o que está desacelerando seu site. Se você está insatisfeito com sua pontuação, sempre pode recorrer a uma agência de design e desenvolvimento responsiva como o MidiaPro, que oferece serviços de otimização de velocidade da página!

Lista de verificação responsiva Item 4: Considere torneiras

Quando os usuários olham para o seu site em diferentes dispositivos, eles podem estar usando itens diferentes para tocar nos elementos do seu site. Por exemplo, com smartphones, os usuários provavelmente estão tocando em elementos do site com os dedos, mas quando se trata de tablets, eles podem estar usando uma caneta.

Você deseja considerar os elementos do seu site em relação a essas diferentes opções para garantir que ele forneça uma ótima experiência para qualquer “dispositivo de tocar” que um visitante do site use. Você deve considerar coisas como:

• Os botões são grandes o suficiente para uma caneta em comprimidos?
• Os botões são grandes o suficiente para as pontas dos dedos dos smartphones?
• Os menus de hambúrguer da barra de navegação são fáceis de tocar em algum dispositivo?
• Os formulários são fáceis de preencher com torneiras de dedos ou canetas?

Lista de verificação responsiva Item 5: Teste sua navegação

Como mencionamos anteriormente, na maioria dos designs da web responsivos a dispositivos móveis, você encontrará a navegação como um menu de hambúrguer, em vez de abranger na parte superior da página. Isso impede que os usuários tenham que aumentar sua barra de navegação para ver as opções. Abaixo, você pode ver um exemplo do site Dunkin ‘Donuts Responsive e como o menu de navegação deles assume a forma de um menu de hambúrguer que se expande quando os usuários clicam.

Você deve garantir que seu menu de navegação funcione corretamente em todos os dispositivos e que nada seja cortado quando os usuários o abrirem. Seu menu de navegação é uma parte extremamente importante do seu site, pois fornece um roteiro para os usuários encontrarem exatamente o que desejam. Sem um que funcione corretamente, os usuários podem saltar do seu site.

Lista de verificação responsiva Item 5: Torne os pop -ups responsivos

O quinto item da nossa lista de verificação de design para dispositivos móveis é tornar seus pop-ups responsivos também.

Os pop -ups geralmente são desencadeados por uma ação específica. Por exemplo, você pode visitar um site que mostra um pop -up sempre que tentar deixar o site para encorajá -lo a permanecer por aí. Outras ações que podem desencadear um pop -up incluem:

• Chegando ao fundo de uma página
• Clicando em um link específico
• Ficar na página inicial por um certo período de tempo

Esses pop -ups podem fornecer uma oferta especial ou incentivar os usuários a se inscreverem em um boletim informativo. No exemplo abaixo, o Bones Coffee fornece um pop -up para os usuários que chegam ao fundo da página inicial. É uma oferta especial para 10% de desconto na sua primeira compra se você inserir um endereço de e -mail.

No entanto, se você olhar para o pop -up da perspectiva de um smartphone, o iPhone 6, 7 ou 8, para ser exato, poderá ver que o pop -up não é responsivo e dificulta a se inscrevendo para os usuários. É igualmente importante manter em mente a capacidade de resposta pop -up, pois elas oferecem enormes benefícios para o seu negócio.

Lista de verificação responsiva Item 6: Verifique se o seu site está visualmente atraente em todos os dispositivos

O número seis em nossa lista de verificação para design responsivo é garantir que seu site seja visualmente atraente em todos os dispositivos. Quando você projeta um site especificamente para o desktop, pode ser difícil fazer com que os elementos do seu site pareçam bem em outros dispositivos, como smartphones e tablets.

Mesmo se você tornar todos os elementos do seu site, ainda é crucial garantir que todos os elementos do seu site fiquem ótimos em todos os dispositivos. Você vai querer ter certeza disso:

• As imagens não ocupam a tela inteira
• Menus não são cortados
• As listas de bala são formatadas corretamente
• As tabelas parecem arrumadas e organizadas
• Listas de serviço renderizar corretamente
• Imagens e descrições do produto são formatadas corretamente
• Os formulários são esteticamente agradáveis ​​e eficazes
• Os carrinhos de compras são organizados e fáceis de usar

Já que leva apenas os usuários 50 milissegundos Para formar uma opinião sobre o seu site, é crucial garantir que seja esteticamente agradável em todos os dispositivos.

Lista de verificação responsiva Item 7: Faça o visitante do site

Agora que você seguiu cada etapa em nossa lista de verificação de design da web responsiva, é hora de auditar seus esforços, tornando -se o visitante do site. Leve algumas voltas ao seu site para garantir que você não tenha perdido nenhum elemento de design responsivo. Por exemplo, você vai querer:

• Teste cada etapa de enviar um formulário
• Teste cada etapa da compra de um produto
• Links de barra de navegação de teste
• Teste diferentes áreas do seu site, como o seu blog e suas páginas de produtos

Colocar -se no banco do motorista e dar algumas rodadas ao seu site garantirá que nada caiu nas rachaduras da sua lista de verificação de design da web.

Termine sua lista de verificação de design amigável para celular trabalhando com MidiaPro

Tornar seu site totalmente responsivo aos usuários é uma parte crucial da sua presença on -line e do sucesso da sua empresa online. Com os usuários móveis aumentando todos os dias, você não pode se dar ao luxo de ter um site que não responda a todos os dispositivos. Se você achar que ainda precisa de ajuda para criar um site responsivo, mesmo depois de seguir nossa lista de verificação de web design responsiva, o MidiaPro está aqui para ajudar.

Somos uma agência de marketing digital de serviço completo que oferece mais de 60 estratégias de marketing para clientes em vários setores e locais. Criamos mais de 1.058 sites responsivos em nossos mais de dez anos de negócios que ajudam empresas como o seu a ver mais tráfego do site, aumentar os leads e maximizar a receita. Se você estiver pronto para começar, entre em contato online para obter uma cotação gratuita ou ligue para nós 21-973221936!