Pesquisar na Comunidade

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 responsivoDesign 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 RESPONSIVOA 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 PICTUREPor 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.Obrigado.