Design responsivo - Parte1

Você já parou para olhar ao seu redor, e ver que as pessoas estão cada vez mais conectadas a internet? basta ir a um restaurante, e ver os olhares fixos nas telinhas. No segundo trimestre de 2013, foram vendidos 8,3 milhões de smartphones no Brasil, um aumento de 110% da comercialização desses equipamentos em relação ao mesmo período em 2012. Um dia, dispositivos mobile serão muito mais utilizados do que desktops. Isso é um fato. Os sites no intuito de oferecer uma melhor navegação, tendem a se adaptar as diversas telas, assim surge o design responsivo.

O que é design responsivo?

Design Responsivo é uma técnica de estruturação HTML e CSS, em que o site se adapta ao browser do usuário sem precisar definir diversas folhas de estilos para cada resolução. O site responsivo se ajusta  à qualquer resolução existente, melhorando a acessibilidade e ergonomia. Então, se o usuário possui uma tela pequena, automaticamente os elementos do site irão se redimensionar, reagrupar e até mesmo serão substituídos por outros mais adequados ao tamanho de tela.


Utilizamos como exemplo o portal da Globo.
O site da globo.com possui um conteúdo para todos os públicos (noticias, esportes, politica, novelas, tecnologia, games, culinária e outros). Na imagem vemos como o site se adapta a alguns dos dispositivos.


Smartphone
O site fica estruturado em uma coluna, as cores ajudam a distinguir as categorias, e o conteúdo é apenas um resumo dos fatos mais importantes.
nota-se que algumas das matérias são de blogs e revistas associadas ao site, não sendo adaptadas ao design responsivo, nestas há um ícone de um computador indicando a versão clássica. No canto superior esquerdo fica o menu oculto que aparece ao ser clicado

Tablet
Dependendo da resolução do tablet, o site perde uma de suas colunas, nos textos existem quebras para adaptar-se ao tamanho. 

Desktop
Para monitores maiores é oferecido uma versão completa, com videos e slides.

O nosso blog também é responsivo, confira pelo seu smartphone.

Neste post abordamos uma visão superficial do que é o Design Responsivo, no próximo iremos usar uma linguagem mais técnicas para os que desejam aprender mais sobre assunto.