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”.

Através da diminuição do número de colunas no grid, o conteúdo exibido (tamanho do logotipo e fonte do menu) se rearranja para caber numa estrutura menor: a tela de uma smartphone.

Podemos notar que o banner publicitário exibe imagens distintas quando visualizado em desktop ou smartphone. Demonstrando um dos fundamentos do design responsivo: layout com recursos flexíveis. Ou seja, uso de imagens em resoluções diferentes para cada contexto.

“Um layout verdadeiramente fluído precisa de imagens que se adaptem à todo tipo de resolução. Podemos usar porcentagens para dimensionar imagens, mas é preciso cuidado. Pois carregar uma imagem de alta resolução para depois diminuí-la via código vai deixar a página muito carregada.” (LOPES, 2016)

Outro fundamento do design responsivo presente nos layouts acima é o de objetos aninhados. Segundo Altermann, objetos aninhados são aqueles que estão dentro de um espaço determinado, como uma div. Caso os objetos não estejam aninhados, eles flutuam livremente dentro do seu layout. Analisando a notícia “Crivella promete cortar…” podemos notar o texto aninhado á imagem, lado a lado ou abaixo, dentro do elemento “div” no código HTML.

Segundo Marcos, o W3C regulamenta uma série de práticas para a construção de layouts e páginas com padrão responsivo. Dentre essas a denominada Media Queries (CSS3) e breakpoints que consistem no reposicionamento de elementos conforme a resolução da tela. Através da criação de regras na folha de estilo CSS do site é possível definir propriedades (ex: tamanho da fonte de um texto), para resolução de telas específicas como o da Figura 4.

“Há frameworks CSS que trazem valores pré-definidos para breakpoints, derivados de tamanhos do iPhone e iPad. Mas usar valores de dispositivos comuns pode levar o layout a quebrar em resoluções intermediárias.” (LOPES, 2016)

No layout desktop da Figura 1, existe um campo de pesquisa no canto superior direito que não aparece no layout para tablet da Figura 4. Esse campo pode ter sido ocultado através do uso de elementos section do HTML5 com media queries do CSS3 e breakpoints para tamanho.

Essa flexibilidade para determinar o que e onde serão exibidos os elementos de um site, bem como que recursos do dispositivo serão apresentados (ex: menu drop-down em smartphone), faz com que layouts responsivos sejam mais eficientes que desenvolver versões especificas para cada plataforma que acessará o conteúdo web.

Segundo Lopes, designs responsivos são o futuro. Pelo simples motivo de que a Web é única e criar sites separados para cada categoria de dispositivos é impossível.

Conclusão

O site http://www.globo.com é um bom exemplo de como o design responsivo é aplicado em seus conceitos, fundamentos e tecnologias. Acessando através de desktop, smartphone e tablet percebemos como o mesmo conteúdo se adapta ao dispositivo utilizado propiciando que o usuário tenha a melhor experiência em usabilidade. E analisando o código HTML do portal, comprovamos as técnicas e tecnologias estudadas aplicadas aos layouts responsivos na web.

Referências

MARCOS, Janaina Ramos. Web Design – Os desafios da mobile web. Disciplina do curso Tecnologias e Inovações Web. Disponível em: http://www.ead.senac.br/pos-graduacao/tecnologias-e-inovacoes-web. Acessado em: 31 out. 2016.

W3SCHOOLS. What is Responsive Web Design? Disponível em: http://www.w3schools.com/html/html_responsive.asp. Acesso em: 31 out. 2016.

PACHECO, Andrea. Um guia completo sobre grids para design responsivo. Disponível em: http://arquiteturadeinformacao.com/design-de-interacao/guia-completo-sobre-grids-para-design-responsivo. Acesso em: 31 out. 2016.

LOPES, Sergio. Design Responsivo por uma Web Única. Disponível em: http://sergiolopes.org/responsive-web-design. Acessado em: 31 out. 2016.

ALTERMANN, Dennis. Design Responsivo: Entenda o que é a técnica e como ela funciona. Disponível em: http://www.midiatismo.com.br/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funciona. Acessado em: 31 out. 2016.

GLOBO. Portal Disponível em: http://www.globo.com. Acesso em: 31 out. 2016.