Bom dia pessoal, hoje vamos falar sobre um elemento importantíssimo para o design responsivo. Antes de mais nada vamos conceituar o que vem a ser webdesign responsivo.
Design responsivo
Design responsivo consiste numa série de técnicas de programação no intuito de fazer com que o website se acomode corretamente em todas os tipos de resolução de tela, seja smartphone, tablet, notebook ou PC. O sites devem ser projetados para 03 resoluções mínimas (480px, 768px e superior a 768px). Com isso conseguimos envolver a maior parte dos monitores existentes atualmente.
Diferença entre SITE MOBILE e SITE RESPONSIVO
A principal diferença entre um site mobile e um site responsivo é que o site mobile é uma versão a parte somente para dispositivos móveis, ou seja, no desenvolvimento são criados dois websites, um exclusivo para dispositivos móveis e outro exclusivo para desktop. Já o site responsivo consiste em um único site para atender a todas as resoluções. Em sua confecção o layout responsivo é mais trabalhoso de se programar, entretanto é de mais fácil manutenção e melhor indexação pelos mecanismos de busca.
E o elemento PICTURE do HTML5 nessa história?
É nesse contexto que se dá a importância do elemento PICTURE. Bem, não podemos imaginar um site responsivo sem imagens responsivas. Simplesmente definir a imagem com o atributo width: 100%; não basta para confeccionar um layout responsivo. No desenvolvimento de um site responsivo é necessário pensar no tamanho que essas imagens impactarão sobre a tão sofrida rede de dados dos nossos smartphones. Para tanto, definir o width: 100%; resolverá o problema do encaixe do design, entretanto não resolverá a questão do tamanho em kb das imagens e seus impactos sobre as lentas redes de dados brasileiras.
Utilizando o PICTURE
Por experiência, digo que há que se ter cuidado ao utilizar o elemento PICTURE, isso porque nem todos os navegadores reconhecem seu atributo SOURCE. Vejamos o exemplo abaixo da forma correta de se utilizar tal elemento:
1ª e 8ª Linhas: sempre é bom deixar o elemento PICTURE dentro de uma div. 2ª e 7ª Linhas: início da tag PICTURE. 3ª Linha: source da tag PICTURE específica para smartphone, alí conterá a imagem para celular. 4ª Linha: source da tag PICTURE específica para tablete. 5ª Linha: source da tag PICTURE específica para desktop. 6ª Linha: a sexta linha é importantíssima. Como já foi falado, diversos navegadores não reconhecem o SOURCE da tag PICTURE, logo devemos inserir a sexta linha, o clássico img para evitar esse problema.
Pergunta
Webdesignemfoco.Com
Bom dia pessoal,
hoje vamos falar sobre um elemento importantíssimo para o design responsivo. Antes de mais nada vamos conceituar o que vem a ser webdesign responsivo.
Design responsivo
Design responsivo consiste numa série de técnicas de programação no intuito de fazer com que o website se acomode corretamente em todas os tipos de resolução de tela, seja smartphone, tablet, notebook ou PC.
O sites devem ser projetados para 03 resoluções mínimas (480px, 768px e superior a 768px). Com isso conseguimos envolver a maior parte dos monitores existentes atualmente.
Diferença entre SITE MOBILE e SITE RESPONSIVO
A principal diferença entre um site mobile e um site responsivo é que o site mobile é uma versão a parte somente para dispositivos móveis, ou seja, no desenvolvimento são criados dois websites, um exclusivo para dispositivos móveis e outro exclusivo para desktop. Já o site responsivo consiste em um único site para atender a todas as resoluções. Em sua confecção o layout responsivo é mais trabalhoso de se programar, entretanto é de mais fácil manutenção e melhor indexação pelos mecanismos de busca.
E o elemento PICTURE do HTML5 nessa história?
É nesse contexto que se dá a importância do elemento PICTURE. Bem, não podemos imaginar um site responsivo sem imagens responsivas. Simplesmente definir a imagem com o atributo width: 100%; não basta para confeccionar um layout responsivo.
No desenvolvimento de um site responsivo é necessário pensar no tamanho que essas imagens impactarão sobre a tão sofrida rede de dados dos nossos smartphones. Para tanto, definir o width: 100%; resolverá o problema do encaixe do design, entretanto não resolverá a questão do tamanho em kb das imagens e seus impactos sobre as lentas redes de dados brasileiras.
Utilizando o PICTURE
Por experiência, digo que há que se ter cuidado ao utilizar o elemento PICTURE, isso porque nem todos os navegadores reconhecem seu atributo SOURCE. Vejamos o exemplo abaixo da forma correta de se utilizar tal elemento:
1ª e 8ª Linhas: sempre é bom deixar o elemento PICTURE dentro de uma div.
2ª e 7ª Linhas: início da tag PICTURE.
3ª Linha: source da tag PICTURE específica para smartphone, alí conterá a imagem para celular.
4ª Linha: source da tag PICTURE específica para tablete.
5ª Linha: source da tag PICTURE específica para desktop.
6ª Linha: a sexta linha é importantíssima. Como já foi falado, diversos navegadores não reconhecem o SOURCE da tag PICTURE, logo devemos inserir a sexta linha, o clássico img para evitar esse problema.
Pessoal, espero que tenham gostado.
Editado por Webdesignemfoco.ComObrigado.
Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.