O design responsivo cria páginas web capazes de serem executadas em quaisquer dispositivos que possam acessar um navegador web. Isso acontece graças ao ajuste de layout e funcionalidades dos conteúdos dispostos na tela e também pela alteração da estética e legibilidade dos elementos que são redimensionados para condizer com a proporção da tela em que a página está sendo visualizada. O design responsivo segue 3 elementos chaves que podem ajudar na hora de imaginar como devemos criar uma página responsiva: fluid grids, flexible images e media queries. Claro que existem diversos outros padrões que devemos seguir na hora de construir nossa página responsiva, mas vamos dar maior ênfase para os mais difundidos no mercado.
Design Responsivo ou Design Adaptativo?
Para além do responsivo existe também o adaptativo que consiste em gerar templates que podem ser otimizados e são únicos para cada dispositivo, ao contrário do responsivo que assume um design universal e se reajusta em cada tipo de display. Estes são dois padrões cruciais para a web e ajudam a dominar a forma como determinamos o visual do nosso site utilizando abordagens diferentes. Em resumo o design responsivo vai sempre apresentar o mesmo conteúdo porém com uma renderização específica para o tamanho da tela identificado e o Adaptativo vai rodar um script capaz de checar o tamanho da tela do usuário e então o template desenhado especificamente para aquele tamanho será acessado.
Por que devemos fazer sites responsivos?
Desde o surgimento da web moderna é notável o número de acessos através de dispositivos móveis e outros tipos de dispositivos menos convencionais como televisores e até smatwatches, esses novos acessos outrora não representavam números tão expressivos em relação aos acessos convencionais em desktops, mas hoje podemos ver que a história é outra, o que os dados indicam é uma reviravolta enorme na quantidade de usuários de dispositivos mobile e uma diminuição crescente na quantidade de usuários de desktop.
Então se mais de metade dos seus usuários estão utilizando um dispositivo mobile para visualizar sua página você irá apresentar a eles uma página pensada para dispositivos desktop? Espero que não. E isso define a iminente necessidade da criação de mais páginas responsivas, afinal uma corrente já vem se formando em prol da responsividade e para além disso, da priorização do desenvolvimento pensado para tela menores que é chamado de Mobile First.
No link a seguir você pode ter uma ideia sobre os 5 padrões a serem seguidos na hora de criar um site responsivo nele você vai encontrar uma ótima variedade de informações e mais detalhes sobre CSS e HTML, Media Queries, Fluid Layouts, Responsive Images e Speed. Clique aqui!
Finalizando o artigo deixo aqui registrados os principais tamanhos de tela trabalhados nas media queries:
Mobile: 360 x 640
Mobile: 375 x 667
Mobile: 360 x 720
iPhone X: 375 x 812
Pixel 2: 411 x 731
Tablet: 768 x 1024
Laptop: 1366 x 768
Desktop: 1920 x 1080