Entretanto, como estamos aqui aprendendo a pensar em design responsivo, temos que também pensar nas pessoas que acessarão nosso site em dispositivos móveis, certo? Exato!
Primeiro, vamos considerar o código abaixo:
HTML:
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed accumsan justo. Mauris non pellentesque leo. Nulla orci ipsum, posuere a euismod ut, auctor eu mauris. Suspendisse facilisis ipsum ex, quis ultricies arcu hendrerit eget. Aenean eget placerat eros. Praesent rutrum tincidunt velit, nec posuere urna lobortis sit amet. Cras metus erat, pellentesque vitae eleifend non, gravida eu urna. Nulla dictum vel nunc in ullamcorper. Mauris a odio est. Maecenas dictum orci massa, in dictum neque feugiat sed. Ut ut arcu dictum odio fermentum sagittis.
</div>
</body>
CSS:
div {
border: 1px solid #000000;
padding: 25px;
}
O resultado fica desalinhado ou desregulado nos dispositivos móveis? Na verdade não, tudo está até que bem no lugar. Entretanto, quando pensamos em design responsivo, é sempre bom aproveitarmos ao máximo o tamanho da tela para darmos o máximo de informação ao usuário na tela sem que ele precise rolar o site (SEMPRE NA VERTICAL, sempre temos que evitar a existência de qualquer barra horizontal nos nossos sites.)
Vamos analisar o código abaixo:
CSS:
div {
border: 1px solid #000000;
padding: 25px;
}
@media screen and (max-width: 640px) {
div {
padding: 20px 10px;
}
}
@media screen and (max-width: 360px) {
div {
padding: 15px 0px;
}
}
E o resultado que isso gera:
Sutil, certo? Sim, a diferença parece pouca, mas às vezes, dependendo do conteúdo ou do texto que temos num bloco, essa diferença pode fazer com que todo o nosso conteúdo seja apresentado de uma vez, facilitando a leitura e diminuindo a necessidade de o usuário rolar o site, o que facilita a navegação.
Essa diminuição de distanciamento nem sempre precisa existir, ou ser tão diminuída a ponto do texto quase tocar as bordas, tudo é relativo e depende de como você quer que seu site seja apresentando, o que queremos reforçar aqui é a ideia de que, se queremos fazer um site que possa ser acessado mais facilmente de qualquer lugar, temos que pensar nos diferentes dispositivos que podem ser usados para acessá-los, e como facilitar o acesso ao seu conteúdo.
Nenhum comentário:
Postar um comentário