Design responsivo: como fazer isso da primeira vez

Divulgação: Seu suporte ajuda a manter o site funcionando! Ganhamos uma taxa de indicação por alguns dos serviços que recomendamos nesta página.


Em suas memórias de 1939, Vento, Areia e Estrelas, O autor e aristocrata francês Antoine de Saint-Exupery opinou: “Um designer sabe que alcançou a perfeição não quando não há mais nada a acrescentar, mas quando não há mais nada a ser levado”. O renomado aviador e autor do Pequeno Príncipe não viveu para ver a Era da Informação, mas suas palavras continuam ressoando em um mundo onde o ciberespaço substituiu os céus como a fronteira da inovação.

De fato, com a atenção se contraindo, mesmo que a riqueza do conteúdo disponível se expanda exponencialmente, a abordagem “menos é mais” da Saint-Exupery é mais relevante do que nunca. As empresas não têm mais o luxo de contornar o proverbial arbusto quando a janela média para envolver um visitante móvel em seu site é inferior a cinco segundos. Considerando que mais de cinco centavos de cada dólar agora são gastos on-line, convém fazer com que cada um desses segundos conte.

É muito mais do que simplesmente encontrar um provedor de hospedagem respeitável e fazer o upload de um site básico. Você deve criar um site que responda às necessidades de todos os visitantes. (Se você precisar de ajuda para entender como funcionam os sites e a hospedagem, consulte nosso guia ilustrado de hospedagem).

A chave para chamar a atenção do visitante e manter a janela aberta (e apontada para a sua página) está em design responsivo. O mercado está rapidamente se tornando uma parte muito significativa do mundo pós-PC, e à medida que mais usuários obtêm suas notícias, desfrutam de entretenimento e fazem compras com tablets e smartphones, é necessário garantir que seu site seja projetado para atender às necessidades em constante evolução. crítico. Trata-se de manter os recursos que os visitantes desejam e nenhuma das coisas que eles não desejam.

Não há espaço para gráficos desajeitados, navegação confusa ou páginas bloqueadas em resoluções apenas para computadores. Os usuários móveis desejam que a Internet seja enxuta, limpa e dimensionada para a tela – escolha um host (e plataforma) que ofereça suporte a um design verdadeiramente responsivo.

As recompensas potenciais para ganhar mais com menos são substanciais. Com mais de 2,1 bilhões de assinantes de banda larga móvel como clientes em potencial, economia de expressão e interatividade máxima são fundamentais; o melhor design pode ser aquele com maior interatividade e o menor número de “toques de designer”.

Design vencedor

Design responsivo: acertando

No ambiente inovador de hoje, o número de dispositivos usados ​​para navegar na Web continua a crescer sem sinais de desaceleração. O design responsivo cria uma experiência ideal para o usuário em todos os dispositivos, de um desktop a um smartphone, facilitando aos consumidores a tomada de decisões de compra rápidas e educadas.

Por que o design responsivo é tão importante?

Existem 2,1 bilhões de assinaturas de banda larga móvel.

87% dos adultos americanos têm telefone celular.

55% usam seus telefones celulares para ficar on-line, 31% dos quais ficam on-line principalmente usando telefone, em vez de um computador ou outro dispositivo.

45% dos adultos americanos têm um smartphone, 90% usam o telefone para ficar on-line.

Os consumidores americanos passam em média 1,4 horas por dia navegando na Web em um dispositivo móvel.

37% dos proprietários de telefones celulares e 64% dos proprietários de smartphones usam seus telefones para obter notícias on-line.

60% dos usuários de tablets preferem ler notícias na Web para celular do que em um aplicativo.

79% dos usuários de smartphones usam seus telefones para ajudar nas compras.

71% dos usuários esperam que sites para celular sejam carregados tão rápido quanto não mais que os sites.

74% dos visitantes móveis abandonarão um site se levar mais de 5 segundos para baixar.

A anatomia de um site responsivo

Na fase de desenvolvimento, existem três ingredientes técnicos para o design de sites responsivos:

  1. Grelhas de Fluidos – Um design baseado em porcentagem que se adapta ao tamanho da tela de acordo.
  2. Imagens flexíveis – Imagens dimensionadas em unidades relativas para impedir que sejam exibidas fora do elemento que as contém.
  3. Consultas de mídia – Uma maneira de aplicar regras CSS à página com base no tamanho do navegador exibido.

5 principais elementos de design de um e-commerce responsivo garante a melhor experiência possível ao usuário.

O Masthead

Cabeçalho

Deve ser pequeno e simples para manter o foco no conteúdo principal, mas fácil de ver.

Tente usar um gradiente linear de CSS em vez de uma imagem de plano de fundo para oferecer maior flexibilidade de design e reduzir solicitações de HTTP.

O logotipo

Deve ser maior e reduzido às dimensões finais.

Navegação Primária

Ou o menu principal pode ser complicado quando se trabalha com design responsivo devido ao espaço limitado fornecido por telas pequenas de telefone.

Existem muitas opções para superar isso, dependendo do número de opções de menu preferidas, incluindo:

  • Uma âncora de menu simples no cabeçalho que alterna a navegação principal em telas pequenas.
  • Uma âncora de cabeçalho que pula os usuários para a navegação que é colocada no rodapé.
  • Uma navegação de slides esquerda (como o Facebook) acessada por um ícone de menu, revelando uma bandeja que desliza da esquerda e move o conteúdo principal para a direita.
  • Uma navegação que sobrepõe o conteúdo principal da página.

Caixa de pesquisa

Uma caixa de pesquisa permite que os visitantes pulem diretamente para o que estão procurando.

A Galeria de Imagens

Navegação de imagem

Em vez de navegação de imagem baseada em texto, mostre uma visualização de diferentes visualizações do produto.

As imagens devem estar vinculadas às contrapartes maiores.

Imagem do Produto

Faça da imagem do seu produto o ponto focal da página.

Experimente o script leve chamado Swipe.js para criar um carrossel de imagens com toque, permitindo que os usuários deslizem entre as fotos do produto de uma maneira com toque.

A descrição do produto

Visão geral do produto

Deve aparecer acima da imagem (na marcação antes do contêiner da imagem), fornecendo ao visitante o nome do produto, preço e popularidade ou classificação.

Dessa forma, eles podem determinar se é o produto que estão procurando, sem precisar esperar o resto da página carregar.

Contagem de comentários

A contagem de revisões salta para as revisões abaixo dos detalhes do produto.

Esse pequeno detalhe pode ser muito valioso para os 79% dos consumidores de smartphones que usam seu telefone para ajudar nas compras e talvez até fazer ou quebrar uma venda.

Campo Quantidade, menu suspenso Tamanho e botão Adicionar ao carrinho

Botão Compartilhar

Compartilhar conteúdo e produtos nas redes sociais pode ser uma ótima maneira de aumentar a exposição. Basta mantê-lo simples com um botão.

O rodapé

Navegação no rodapé

Fornecer acesso à navegação do site principal é uma boa maneira de o usuário pular para outra seção e evitar deixá-los em um beco sem saída.

Número e Email do Atendimento ao Cliente

Lembre-se, os telefones fazem chamadas! O visitante pode ter uma pergunta sobre o produto e ter a capacidade de entrar em contato rapidamente com um representante de atendimento ao cliente pode ser exatamente o que ele precisa para tomar uma decisão de compra.

Voltar ao Topo Link

Novamente, trata-se de experiência e conveniência do usuário!

Fontes

  • Ficha técnica de tecnologia móvel – pewinternet.org
  • Tendências da utilização da Internet móvel e do comportamento do usuário – madmobilenews.com
  • MobiForge – mobithinking.com
  • Por que 2013 é o ano do design responsivo da Web – mashable.com
  • Anatomia de um Web Design Responsivo Móvel – bradfrostweb.com
  • Como as redes fluidas funcionam no design responsivo da Web – 1stwebdesigner.com
  • Além das consultas na mídia: anatomia de um design adaptável da Web – slideshare.net
  • O que diabos é responsivo Web Design? – johnpolacek.github.io
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map