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

Acessibilidade na Web

A Internet tem como características o acesso irrestrito a conteúdo e o compartilhamento de informações entre seus usuários. Desta maneira, o desenvolvimento e lançamento de um website deve pensar nas diferentes pessoas que utilizarão diferentes maneiras para consumir o conteúdo disponibilizado.

“Esses conteúdos na Web devem estar disponíveis para todas as pessoas, independentemente do hardware, software, infraestrutura de rede, cultura, localização geográfica, habilidade física ou mental, condição socioeconômica ou de instrução de cada um.” (W3C)

Portanto um projeto de website acessível deve ser analisado pelos benefícios que apresentará quando finalizado, e não pelos seus possíveis custos. Para divulgar essa ideia, o projeto Acesso Digital produziu o seguinte vídeo.

Continuar lendo