320, 768 e 1024. Esses números significam alguma coisa para você?
Não, não é o código Da Vinci, eles são as larguras em pixels que muitos designers associam a largura de tela móvel, tablet e desktop.
O problema que tenho com isso é que meu celular não tem 320 pixels de largura, meu tablet não tem 768 pixels de largura e minha tela de desktop certamente não tem 1024 pixels de largura. Existem centenas de diferentes tamanhos de tela em vários dispositivos diferentes e ainda assim pensamos em web design responsivo como 320, 768 e 1024.
Eu tenho visto muitos sites que usam esses três pontos de interrupção para seus projetos e simplesmente criam três layouts estáticos que se centralizam na largura mais próxima.
Isso é melhor do que ter um site antiquado, estático, somente para desktop, pois eles servem pelo menos uma coluna, versão simplificada para dispositivos móveis e uma versão sensível ao toque para tablet, mas por que você alienaria todos os outros tamanhos de tela não levando-os consideração?
Claro que o design ainda funcionará nos outros tamanhos, mas o que acontece quando você tem um tablet menor que 768? Eles vão ter a experiência móvel em um tablet! E quando visualizá-lo em uma tela de laptop menor que 1024? Nós vamos apenas enviar-lhes o layout do tablet e rir deles por não ter um dos três tamanhos de tela que consideramos dignos.
Ao criar seus layouts responsivos, você deve sempre tentar definir o máximo possível de dimensões em porcentagens. Isso ajuda a garantir que seu conteúdo cresça e diminua uniformemente em diferentes tamanhos de tela e o fará proporcionalmente ao dispositivo em que está sendo exibido. Essa abordagem também garantirá que seu conteúdo esteja sempre preenchendo 90% (ou o quanto você determinar) da tela, em vez de possivelmente 50% da tela, pois o conteúdo é centralizado em um tamanho de tela que é alguns pixels menor do que o próximo ponto de interrupção disponível.
Ao escolher seus pontos de interrupção, você deve sempre tomar suas decisões com base em onde o conteúdo é interrompido e não nas larguras de tela do dispositivo. Em vez de criar um design e depois modificá-lo para caber confortavelmente na tela do iPad, você deve descobrir em que largura seu conteúdo começa a se debater.
Eu costumo começar com um design de 1400 de largura e lentamente diminuo o tamanho do navegador até que um conteúdo interrompa o layout ou fique próximo de fazê-lo. Isso então determina meu próximo ponto de interrupção. Não importa se é em 1200, 800 ou 673, se o conteúdo ainda funciona, então por que mudar o layout?
Você descobrirá que acabará com pontos de interrupção estranhos, como 477 ou 982, e poderá ter 2, 6 ou 10 pontos de interrupção diferentes. O ponto é que o conteúdo decidirá em vez dos tamanhos de tela pretendidos que você deseja ver.
Com a variedade de diferentes dispositivos e tamanhos de tela sendo lançados todos os meses, é impossível determinar um conjunto de pontos de interrupção definidos para nossos projetos responsivos. A verdade é que, enquanto estivermos usando uma variável como a largura da tela para determinar nossos layouts responsivos, teremos dificuldade em oferecer um layout perfeito para cada tamanho diferente, mas seguindo algumas das dicas acima, podemos pelo menos garantir que o conteúdo é sempre exibido da melhor forma possível.
Quais pontos de interrupção você costuma usar? Você evita pontos de interrupção completamente? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem de carga larga via Shutterstock.