Introdução ao Design Responsivo
Publicado em 03 de fevereiro de 2015 por Jhorranis Brunetti dos Santos
Introdução ao Design Responsivo
A importância do design responsivo nas páginas web
Hoje, com a introdução de muitos aparelhos eletrônicos no mercado, temos uma gama muito ampla de maneiras de apresentar uma página web, como um site, nestes dispositivos. É neste contexto que introduzimos um assunto, por hora desconhecido pela maioria dos usuários e até mesmo desenvolvedores web, o design responsivo.
Como já mencionado, o design responsivo, trata exatamente como um website vai se apresentar em um dispositivo, e como sabemos, existem muito destes, como : smartphones, tablets, computadores, televisões, etc. Visto que temos uma página, que pode ser apresentada em qualquer desses dispositivos citados, como fazer para que ela, a página web, se comporte de maneira única através destes?
Você já deve ter entrado em um mesmo site, tanto de seu computador ou de seu smartphone não é mesmo, e como ele se comportou? No caso do smartphone, as imagens ficaram “estouradas”, o layout ficou todo embaralhado? Isso acontece em muitos sites hoje em dia, pois muitos sites ainda estão estruturados de maneira antiga, com aquelas velhas tabelas por todos os lados. Mas não quero me referir aos sites realmente antigos, pois em até sites mais recentes encontramos esses problemas de visualização em plataformas diferentes.
Desenvolvedores web, buscam uma forma de acabar com esses problemas, por utilizarem técnicas que faz com que uma página se comporte de forma semelhante em diferentes dispositivos.
Até mesmo as linguagens para web evoluíram de certa forma, para tentar acabar com esse problema, como:
- HTML5: a tag <source> que foi incorporada a tag <figure> que pode chamar uma imagem dependendo da resolução trabalhada.
- CSS3: as famosas medias queries, que possibilita que mudamos os comportamento dos elementos, também dependendo da resolução desejada.
- Pré-processadores: Se você se interessa por construção de sites, e já tem uma noção básica de html e css, se você procurar um pouco mais, vai ouvir falar dos pré-processadores de estilos, como o SASS e o LESS, apenas dois dentre tantos. Neles é possível criar variáveis, atribuir cores as, tamanhos, enfim, fazer realmente mágica, como as grid system(sistema de grades) um dos pilares de um layout bem construído. Frameworks famosos como o Bootstrap e o semantic grid, são feitos com base nesses pré-processadores, é por isso que são reconhecidos e muito usados, pois agilizam o processo de criação de um web site.
Todos estes contribuem para a web que temos hoje, melhor, mais ainda um pouco distante da ideal.
Se você gostou deste artigo, não deixe de visitar nosso site, que deixarei logo no final. Visite-o e entre em contato para tirar suas dúvidas. Obrigado.