Design Responsivo

No contexto da tecnologia móvel e portabilidade de conteúdo para diversas plataformas de consumo, o design de sites teve que se adaptar para apresentar o mesmo conteúdo em diferentes dispositivos e resoluções de tela. Isso foi possível através de técnicas como Design Responsivo que segundo Marcos: objetiva garantir a acessibilidade do conteúdo independente do meio que o usuário utilizar para acessá-lo. Representando a adaptação de uma interface a qualquer resolução de tela, adaptando a experiência de navegação de acordo com as necessidades dos usuários e também de cada tipo de mídia. Completando essa ideia:

Páginas web devem ser fáceis de usar, independentemente do dispositivo, e não devem excluir informações para caberem em dispositivos menores, mas adaptar seu conteúdo para caberem em qualquer dispositivo.” (W3schools, 2016)

Essa e outras técnicas já são amplamente utilizadas na Web, principalmente pelos grandes portais de notícias e entretenimento que são acessados diariamente por uma variedade de dispositivos, de celulares a relógios. Por exemplo, o site da Rede Globo (www.globo.com) que foi projetado com layout responsivo e analisaremos nas suas características adaptativas.

Analisando o layout responsivo do site http://www.globo.com

Segundo Pacheco, o Design Responsivo não é simplesmente encolher o conteúdo, mas adaptar os elementos a fim de entregar ao usuário o melhor conteúdo e navegação para aquele cenário. Ou seja, organizar logicamente os elementos (textos, imagens, publicidade, vídeos) a serem expostos de maneira flexível em uma página. Isso pode ser conseguido através de técnicas como: layout fluído (grid); media queries (css3) e imagens flexíveis (vetor).

Por exemplo, no layout desktop visualizado na Figura 1 podemos constatar a divisão de elementos com o uso de grids, facilitando a distribuição de conteúdo em linhas e colunas. No cabeçalho do site, “colunas invisíveis” separam o logotipo das opções do menu que estão agrupadas horizontalmente. Enquanto que no layout smartphone visualizado na Figura 2, o mesmo menu está disposto abaixo do logotipo separados por uma “linha invisível”.

globo-desktop.png
Figura 1 – Layout do site no desktop (GLOBO, 2016)

Continuar lendo