Sites Responsivos com HTML5 e CSS3
A moderna era tecnológica de dispositivos móveis transfigurou o desenvolvimento de aplicativos WEB em algo mais árduo e difícil no sentido de adaptar os sites e satisfazer os distintos moldes de telas encontrados nos mais diversificados modelos de dispositivos lançados no mercado a todo o momento. Por não existir um aprimoramento nativo antecipado pelos fornecedores para a resolução dessa adversidade, a prática utilitária de sites responsivos se tornou excessivamente e/ou indefinidamente primordial para que os usuários disponham de uma melhor experiência em sua navegação, independente do dispositivo manuseado.
O uso do HTML5 e CSS3 na criação de sites responsivos que se ajustam a cada dimensão de tela de modo a redimensionar o conteúdo sem arruína-lo e sem dificultar a compreensão do usuário, vem aumentando fortemente.
Mesmo o HTML5 sendo uma ferramenta até este momento, em fase de desenvolvimento, devido à carência de um amparo total dos navegadores a seus elementos e de usuários que ainda usam softwares obsoletos, ancestrais e arcaicos(Também não é pra tanto rsrsr…) de acesso à WEB, assim também como o CSS3, os desenvolvedores já usufruem do manuseio dessas ferramentas, para desenvolverem seus aplicativos responsivos e assim, socorrer à necessidade sufocante e à crescente demanda dos usuários que desfrutam de dispositivos móveis para navegarem na Internet.
Calma, amiguinho(a). Ainda falta muito pra você se tornar um expert em sites responsivos e se gabar pros seus amigos te acharem o “Super Homem” do mundo WEB. Só faça isso depois de ler o artigo abaixo que visa mostrar como é possível a viabilização de aplicativos WEB responsivos construídos com a utilização das “novas” linguagens HTML5 e CSS3. Visto que, se você quer se gabar pra galera, nada melhor que realmente aprender a fazer acontecer, pois nada mais feio que só falar, e nunca saber executar as técnicas de responsividade na hora que alguém te pedir né, moral?!
Então vamos! Mãos à obra!
Iniciação à Responsividade
São várias as formas de especificarmos responsividade à aplicativos WEB, mas nosso foco é o uso das linguagens HTML5 e CSS3, focaremos inicialmente em um recurso conhecido como “Media Queries”.
Antes de aprendermos sobre as Media Queries, necessitamos conhecer as “Media Types”.
Existe a possibilidade de definirmos com o CSS, o jeito em que o mesmo modelará a página que está sendo exibida nos mais variados dispositivos, seja este um celular, um desktop, etc… Temos 10 maneiras de definirmos Media Types no CSS2.1, são elas:
Existem 5 formas de uso das especificações das Media Types. Onde cada forma terá o único intuito, que é o de especificarmos o tipo de estilo CSS que queremos adotar ao nosso aplicativo WEB para um determinado tipo de dispositivo final. Aqui estão as formas mais populares:
1° Dentro do HTML.
2º @import dentro do CSS.
3º @media dentro do CSS.
Todas essas formas vistas acima(e algumas outras) eram capazes de dar-nos o poder para estilizarmos distintos tipos de mídia usando CSS. Mas, com o avanço do CSS3, essas Media Types foram amplificadas, nos proporcionando novas explanações artísticas. E esse avanço deu lugar as aclamadas Media Queries.
Media Query, em tradução livre, significa “consulta ao tipo de mídia”. O objetivo é servir o estilo específico para um tipo estabelecido de mídia mediante uma consulta ao modelo de mídia ao qual o estilo será servido. As formas de se vincular as folhas CSS perante dependência de mídia continuam bastante parecidas àquelas recomendadas pelas especificações das media types para o CSS2.1. O que mudou foi a sintaxe para definição da mídia, que atualmente assumiu o modelo de consulta. O exemplo a seguir é destinado a vinculação de uma folha de estilo para determinado tipo de mídia:
A media query é uma expressão lógica que retorna TRUE ou FALSE. No momento em que uma media query for verídica, a página de estilos preconizada será aplicada conforme o padrão das regras de cascatas. Páginas de estilos com media queries ligadas a tag <link> irão efetuar o download mesmo se suas medias queries retornarem falso (entretanto, elas não se aplicam).
Também temos os operadores lógicos e seus significados, cada um com suas especificações presumidas para uso em media query, onde temos o AND, que é o nosso operador de concatenação e nos retorna TRUE se as condições à esquerda e à direita do operador são ambas verdadeiras.
Operador NOT, que nos retorna TRUE caso a funcionalidade não exista.
E temos o operador ONLY, que é usado para esconder folhas de estilo de navegadores antigos que não suportam media query.
No guia do desenvolvedor Web da MDN, encontramos um acervo explicativo e aprofundado sobre as Media Queries, segue o link abaixo:
https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries .
Página Responsiva
Para resolvermos o problema de um layout fixo, precisamos primeiramente trocar todas as unidades de medidas absolutas por relativas. Nesse caso, utilizaremos a unidade de porcentagem(%) para os elementos da página e a unidade EM(em) para as fontes. Para a realização dessa conversão, devemos utilizar a fórmula(sim, fórmula) ALVO / CONTEXTO = RESULTADO, onde o alvo é o elemento que queremos trabalhar com suas medidas atuais e o contexto onde o elemento-alvo está baseado no elemento-pai.
Consideremos a fonte padrão para o <body> de um arquivo HTML sendo de 16px, a unidade relativa “em” do cabeçalho <h1> do arquivo será de 1,6em (25/16 = 1,5625).
Essa mesma fórmula pode ser aplicada para as conversões envolvendo elementos com unidades de medidas em porcentagens. Consequentemente, após mudarmos todos os valores absolutos para relativos, o resultado do nosso layout ao ser redimensionado para uma janela menor, já será diferente e será possível notar um ajuste mais confortável que o “ajuste” de um layout fixo.
Segue um possível exemplo abaixo:
Podemos ver na imagem que, apesar das unidades relativas terem sido aplicadas, isso não foi o suficiente para que o layout se tornasse 100% responsivo e adaptável ao dispositivo móvel.
Para completarmos a criação do layout responsivo, necessitamos do uso das Media Queries da CSS3.
Teremos aqui como exemplo, duas regras de Medias Queries para o nosso aprendizado de layouts responsivos.
Regra 1: Essa entrará em ação quando o dispositivo possuir largura máxima de 900px.
Regra 2: Já essa, quando o dispositivo possuir largura máxima de 640px.
Exemplo:
Obs.: As alterações no layout da página são inseridas no interior de cada uma das regras no momento do desenvolvimento(dependendo do objetivo almejado, o exemplo a seguir pode não ser parecido com o seu, cada layout terá regras e arquivos estruturais diferentes).
O exemplo a seguir mostra a responsividade em um dispositivo com resolução máxima de 640px. Nele, as notícias são passadas uma por linha, estando o rodapé, logo após as notícias.
Para saber mais e ficar ainda mais craque em sites responsivos com HTML5 e CSS3: http://www.carloshps.com.br/blog/criar-um-site-responsivo-com-html5-e-css3-parte-3-de-3/
Chegou até aqui? Palmas, agora é que vai se gabar mesmo em, amiguinho(a)?! Neste momento tu és um(a) possuidor(a) de que AGORA, tu sabe o BÁSICO sobre responsividade de layouts WEB, hehehehehe. Mas ainda não acabou, amiguinho(a). Ao trabalho…
ALGUMAS CONSIDERAÇÕES ACERCA DA RESPONSIVIDADE
A responsividade, assim como tudo na vida, também tem seus prós e contras. Claro que atualmente temos bem mais motivos e razões pra usarmos e abusarmos dela, e considerarmos como algo bom e produtivo no ramo de desenvolvimento Web. Mas destacaremos aqui alguns motivos sobre essa “dualidade” no mundo responsivo.
No lado “bom”, ganhamos a batalha da necessidade, pois o desenvolvedor precisará criar somente uma única versão do site, pois só será necessário manter 1 e somente 1 site. Também temos a consistência, onde o conteúdo do site será o mesmo, independente da plataforma, oferecendo assim, um experimento consistente para todos os usuários finais.
Outro ponto é o carregamento de dados mais eficaz. Estudiosos apontam os sites responsivos como os que carregam as informações com maior rapidez que os outros. Não poderíamos deixar de falar dos indexadores, que atualmente estão dando prioridades para sites responsivos serem achados com mais facilidade nas pesquisas dos usuários, e sendo assim, esse um dos pontos mais importantes no mundo WEB, principalmente no ramo comercial.
Mas nem tudo são flores, no lado “ruim”, temos o desempenho do site, que com o uso da responsividade tende a ser mais lento, caso o mesmo não tenha sido bem construído, pois o navegador carrega todo o conteúdo de um só arquivo, mesmo que ele não seja exibido. As imagens também poderão ser um problema, onde um trabalho mal realizado no processo de tratamento de imagens, arruinará a experiência do usuário final ao usar o site.
Preparem os bolsos, haha. Ele não poderia ficar de fora, né?! O custo, é, isso mesmo. Sites responsivos tem uma certa tendência ao custo mais elevado, já que exigem uma série de adaptações em seu layout. E claro; ele, sempre em nossas vidas: O tempo. Sabendo que a responsividade é um obstáculo a mais na criação de um layout responsivo, consequentemente assim, gerando bem mais tempo para ser desenvolvido, esse quesito é só mais um somador advindo das pequenas(mas existentes) fatalidades do uso da responsividade em aplicativos Web.
CONCLUSÃO
O desenvolvimento de designs responsivos para sites, requer um certo conhecimento do desenvolvedor quanto às tecnologias HTML5, CSS3 e JavaScript(Sim, amiguinho. JavaScript rsrsr). Quando os objetivos almejados são alcançados, as páginas ficam mais interessantes pro usuário final independente de qual dispositivo o mesmo esteja usando para navegar no conteúdo.
O web design responsivo ainda está ganhando forma nos moldes tecnológicos e muita coisa pode(e vai…) ser modificada, excluída ou adicionada nos conceitos atualmente usados. Acho que o que pode ser dito com fato, é que hoje em dia, não se tem mais como criar sites com layouts completamente “absolutos”. Atualmente temos variados dispositivos que se conectam na WEB e isso aumentará daqui pra frente.
Por consequência, podemos concluir que usar o “design responsivo” será uma tendência cada vez mais constante e natural, proporcionando aos usuários uma experiência mais homogênea durante a navegação aos conteúdos, independente do dispositivo que esteja sendo utilizado.
REFERÊNCIAS
