a partir de 2020, existem 3,5 bilhões de Usuários de smartphones no mundo. Isto representa 45% da população mundial. A partir de 2019, as pessoas acessaram a internet com 9000 + dispositivos distintos. Todos os usuários esperam que cada site a que acessam irá ficar perfeitamente em seu dispositivo móvel. Isso significa que os desenvolvedores de sites têm que projetar sites que são exibidos em uma infinidade de tamanhos de tela em todo o mundo.em outras palavras, eles precisam de um design responsivo.,
mas como todo designer sabe, a execução do design responsivo tem de começar por saber quais os tamanhos de tela para projetar. Este artigo explora esta questão e discute os melhores tamanhos de grito para o design responsivo.
o que é o Design sensível?
Web design responsivo refere-se a uma estratégia de design que cria sites que funcionam bem para dispositivos móveis, tablet e desktop. Sites sem o risco de design responsivo alienar um número significativo de usuários – 80% dos usuários afirmaram que eles vão rejeitar sites que não funcionam bem em seu dispositivo.,além disso, o Google olha para a “facilidade móvel” como um parâmetro de classificação. Para citar o Google Webmaster Central Blog,
” a partir de 21 de abril de 2015, vamos expandir o nosso uso da facilidade móvel como um sinal de ranking. Esta mudança afetará as pesquisas móveis em todas as línguas do mundo e terá um impacto significativo em nossos resultados de pesquisa. Consequentemente, os usuários acharão mais fácil obter resultados de pesquisa relevantes e de alta qualidade que são otimizados para seus dispositivos.”
então, como se encontra o tamanho ideal da tela sensível?,
Nota: para entender por que o design responsivo é parte integrante do sucesso do site, é preciso entender a natureza vasta e cada vez maior da fragmentação do dispositivo. Faça o Download do nosso E-Book sobre a fragmentação do dispositivo para obter as últimas informações sobre este fenómeno.,
Fonte da Imagem
de Acordo com o Mundial Resolução de Tela de Estatísticas (Novembro De 2018 – Novembro de 2019), o mais comumente usado resoluções são:
Livre Ágil Teste Comumente Usado Resoluções
testar a capacidade de resposta do seu site nos dispositivos reais.
é claro que a ênfase na convivialidade móvel não significa que se abandone os dispositivos de secretária. Como o gráfico abaixo irá demonstrar, os dispositivos de desktop ainda compõem uma parte considerável do uso da internet.,
Fonte da Imagem
- Móvel – 52.03%
- área de Trabalho – 45.17%
- Tablet – 2.,8%
de Acordo com a documentação da Microsoft,
Com um grande número de dispositivo de metas e tamanhos de tela através do Windows 10 ecossistema, ao invés de otimizar a INTERFACE para cada dispositivo, recomenda-se projetar para alguns largura da chave categorias (também chamado de “breakpoints”):
- Pequeno (menor que 640 px)
- Médio (641px para 1007px)
- Grande (1008px e maior)
Apesar desta informação, lembre-se que não existe um padrão de tamanho de tela para web design., Dependendo da natureza do site, os usuários podem usar certos dispositivos que não oferecem os tamanhos de tela e resoluções mencionadas acima. Para identificar os tamanhos de tela certos para o design web, invista em analytics. Descubra o que o seu público-alvo é mais provável de usar. Se esses dispositivos não aderem à resolução acima mencionada, então incluí-los na mistura.,
1-Clique em Acesso Ágil Ferramenta Verificador
as Melhores Práticas para a Implementação de Responsive Design
por Isso, torna-se muito mais fácil criar um site para vários tamanhos de tela, com as seguintes diretrizes:
- Saber os pontos de interrupção: resposta Em termos de design, um ponto de interrupção é o “ponto” em que o conteúdo de um site e o design vai se adaptar de uma determinada maneira, a fim de fornecer a melhor experiência do utilizador possível. Para fazer um site responsivo, os designers devem adicionar um ponto de paragem quando o conteúdo parece desalinhado., Dependendo do número de dispositivos em que o site está sendo alinhado, múltiplos pontos de paragem devem ser definidos para garantir a sua capacidade de resposta. Consulte este artigo sobre breakpoints responsivos para saber sobre eles e sua eficácia em detalhes.
- Criar Design de fluidos: Design de fluidos refere-se a um layout de design que pode mudar (expandir e contrair) para caber no visor do dispositivo em que está a correr. Um layout de design fixo irá distorcer indesejavelmente em todos os portais de visualização que não estão alinhados., Trabalhe nos layouts de design usando % units, bem como Max-widths para garantir que o layout se encaixa visor de dispositivo móvel sem se tornar muito largo em Visor de dispositivo desktop.
- diminui o atrito: isto significa basicamente que o design deve ser fácil de usar em vários dispositivos. Design responsivo não inclui apenas o que um site se parece, mas também como ele funciona em termos de acessibilidade e usabilidade. Foco particularmente na fricção de tela pequena, porque à medida que os tamanhos de tela diminuem, os elementos da web têm menos espaço para renderizar e se tornam mais propensos a baralhar e distorcer.,
- Design Mobile-First: Since friction is more likely to occur on smaller screens, design with a mobile-first approach. É mais difícil estreitar um layout desktop para um visor móvel enquanto fazer o inverso é mais fácil. Ao projetar mobile-em primeiro lugar, o designer inclui o que é absolutamente necessário para proporcionar a melhor experiência do Usuário.,
Aqui estão algumas maneiras de ir sobre com móveis de design:
- Priorizar importante opções de menu
- Remova todas as distrações visuais
- Otimize o design para tapability – tornar tudo fácil de toque
- Eliminar desnecessário de formulários e campos de informação
- Destacar os principais CTA
- Destaque oferecer funções de busca e filtro
- Mais funcionalidade, menos de digitação: Obviamente, escrever é mais difícil em dispositivos móveis do que no desktop dispositivos. Portanto, faz sentido minimizar a necessidade de digitar em versões móveis de sites., Substituir a datilografia por funções de dispositivos de alavanca consciente, tais como GPS, leitura de código QR, ID biométrico, e afins. Torne mais fácil para os usuários compartilhar, e-mail, ou ligar números relevantes, colocando links que lançam as funções necessárias. Tenha em mente que o melhor design responsivo envolve simplificar e eliminar interações móveis inconvenientes.
- teste, teste, teste: uma vez que um desenvolvedor ou designer conhece os melhores tamanhos de tela para o design responsivo, eles fazem o trabalho e criam um site responsivo., No entanto, para garantir que o site realmente rende o modo que está destinado nos dispositivos para os quais foi construído, ele precisa ser testado exatamente para isso. Uma maneira fácil de fazer isso é usar um verificador de design responsivo. Em vez de executar o site através de dispositivos individuais com diferentes viewports, digite o URL no Verificador e veja como ele aparece em uma variedade de dispositivos mais recentes em resolução de dispositivos diferentes, frequentemente usados. O checker conectado acima oferece verificação responsiva sobre os mais recentes dispositivos móveis, tais como iPhone X, Galaxy Note 10, iPhone 8 Plus, e muito mais.,
embora o design responsivo possa parecer difícil de executar, a informação neste artigo procura simplificar este processo para desenvolvedores e designers. Ao fazer o que é descrito acima, torna-se muito mais fácil criar sites que agradam o seu público, independentemente do dispositivo que eles usam para acessar esse site.
tente Checker responsivo para livre