Vamos pensar assim: geralmente, por questões de estética, colocamos no site algumas imagens, banners, textos destacados, entre outros elementos que tem o objetivo de deixar o site mais dinâmico, e preencher possíveis espaços que ficariam em branco numa tela grande para chamar um pouco mais de atenção de quem acessa. Entretanto, quando acessados de algum dispositivo móvel, mesmo que os elementos tenham sido bem organizados para caber na tela, podem ficar fora do contexto que eles apresentam na tela maior, e darem a impressão de estarem desconexos. Pensando nisso, é necessário pensar no quanto aquele elemento é relevante para quem vai acessar o site de uma tela menor.
Por exemplo: acessando do notebook, o site tem um espaço para banner grande, talvez até com mais de uma imagem sendo mostrada alternadamente. Será que no tablet ou no celular ele é tão importante, ou será que não vai ocupar um espaço na tela onde eu já poderia mostrar algum texto que seja mais importante? Pois é.
Para exemplificar, vamos ao código abaixo:
HTML:
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ex elit, pulvinar ut mattis a, feugiat sit amet lorem. Ut nisi arcu, cursus vel est id, pulvinar laoreet nulla. Sed egestas fringilla tellus, vel fermentum ex feugiat id. Donec vel porta arcu. Praesent eget sollicitudin eros. Aenean vitae erat nec massa aliquet tempor.
</div>
<img class='imgOpcional' src='imagens/tcc.jpg' />
<div>
Quisque consectetur felis vel est ultricies tristique. Vestibulum finibus dignissim cursus. Nam efficitur dapibus dictum. Mauris nec orci nec mauris pulvinar rutrum. Vestibulum interdum, diam ut lobortis ultrices, orci erat accumsan diam, quis accumsan ante augue rhoncus orci.
</div>
</body>
CSS:
.imgOpcional {
height: 500px;
}
div {
border: 1px solid #000000;
}
Como resultado nas diferentes telas temos o seguinte:
Como podemos ver o resultado fica desastroso, para falar no mínimo. A imagem fica grande, gera barra de rolagem, o texto abaixo da imagem fica escondido até rolarmos a página para baixo, e por aí vai.
Como vimos em posts anteriores, nós poderíamos tratar essa imagem de diferentes formas, talvez a primeira ideia que vem à cabeça de muitos é redimensionar a imagem, o que é uma possibilidade.
Agora vamos nos questionar: essa imagem realmente é necessária? Pois é, talvez não seja tanto. Ela dá uma beleza para o site, mas não é realmente relevante para a mensagem que queremos passar. Assim sendo, podemos fazer o seguinte:
CSS:
div {
border: 1px solid #000000;
}
.imgOpcional {
max-width: 50%;
}
@media screen and (max-width: 640px) {
.imgOpcional {
display: none;
}
}
Agora temos uma eficiência melhor no que se trata de passar uma informação e "despoluir" um pouco o site num celular, por exemplo.
Alguns podem pensar: poxa, mas sem imagem o site fica tão feio.
Talvez, mas como queremos reforçar sempre, a ideia não é definir padrões nem regras de layout, mas sim mostrar possibilidades e como o conceito de design responsivo pode nos ajudar. Nós podemos dar uma infimidade de tratamentos diferentes para esse caso: mostrar a imagem em 100% na tela na vertical e sumir com ela na horizontal, diminuir a altura dela em um ou nos dois casos, fazer a imagem grande ficar oculta e mostrar uma imagem menor que fique oculta em telas maiores, e por aí vai. O que importa é ter em mente a ideia de como deixar nosso site o mais acessível possível para nosso público, independente do lugar de onde ele nos acesse.
Como vimos em posts anteriores, nós poderíamos tratar essa imagem de diferentes formas, talvez a primeira ideia que vem à cabeça de muitos é redimensionar a imagem, o que é uma possibilidade.
Agora vamos nos questionar: essa imagem realmente é necessária? Pois é, talvez não seja tanto. Ela dá uma beleza para o site, mas não é realmente relevante para a mensagem que queremos passar. Assim sendo, podemos fazer o seguinte:
CSS:
div {
border: 1px solid #000000;
}
.imgOpcional {
max-width: 50%;
}
@media screen and (max-width: 640px) {
.imgOpcional {
display: none;
}
}
Agora, ao abrir o site, vamos ver o seguinte:
Alguns podem pensar: poxa, mas sem imagem o site fica tão feio.
Talvez, mas como queremos reforçar sempre, a ideia não é definir padrões nem regras de layout, mas sim mostrar possibilidades e como o conceito de design responsivo pode nos ajudar. Nós podemos dar uma infimidade de tratamentos diferentes para esse caso: mostrar a imagem em 100% na tela na vertical e sumir com ela na horizontal, diminuir a altura dela em um ou nos dois casos, fazer a imagem grande ficar oculta e mostrar uma imagem menor que fique oculta em telas maiores, e por aí vai. O que importa é ter em mente a ideia de como deixar nosso site o mais acessível possível para nosso público, independente do lugar de onde ele nos acesse.
Nenhum comentário:
Postar um comentário