TÉCNICAS DE ESTRUTURAÇÃO PARA DESIGN
RESPONSIVO: AMPLIANDO A USABILIDADE NO
AMBIENTE WEB
Tiago Volpato1, Claudete Werner1
1
Universidade Paranaense (Unipar)
Paranavaí – PR – Brasil
[email protected], [email protected]
Resumo. Este artigo apresenta o resultado de uma investigação científica
sobre design responsivo, com o objetivo de apresentar as tecnologias que o
permeiam e como é possível desenvolver páginas que se adaptem
automaticamente a diferentes telas e resoluções. Para isso, uma página web foi
desenvolvida, utilizando recursos da linguagem HTML e a tecnologia CSS.
1. Introdução
As tecnologias de informação e comunicação vêm se desenvolvendo em ritmo acelerado
e, cada vez mais, se incorporam na vida das pessoas, seja no âmbito pessoal ou
profissional. Isso tem um impacto significativo na maneira como elas se relacionam, de
como consomem informações, nos processos de trabalho, e assim por diante. Deste
modo, trazendo esse cenário para o contexto do processo de desenvolvimento de
produtos de software, é de extrema importância dar atenção especial em como eles serão
utilizados. Isso está diretamente relacionado com a interface que estes apresentam, pois
de acordo com Moran [1981], é uma das partes mais importantes dos sistemas
computacionais.
Durante muito tempo, por exemplo, o desenvolvimento de interfaces web se
baseou no tamanho de grandes monitores, com resoluções quase que padronizadas em
960 pixels. No entanto, cada vez mais os usuários acessam a internet por meio de
dispositivos móveis, com diferentes tamanhos de telas, resoluções, sistemas
operacionais e navegadores. Com essa problemática, torna-se um desafio criar um
design que responda de maneira adaptável, de acordo com o dispositivo, formatando o
conteúdo conforme o tamanho e o tipo.
Assim, este artigo apresenta um estudo sobre as tecnologias utilizadas em design
responsivo como uma alternativa para minimizar esses problemas. Inicialmente,
contemplamos a metodologia utilizada neste trabalho. A subseção 3.1 contextualiza o
surgimento e a ideia de alguns autores sobre design responsivo. No restante do texto,
algumas técnicas de estruturação HTML e CSS serão descritas e utilizadas no
desenvolvimento de uma página web que seja capaz de reorganizar o conteúdo de
acordo com o tamanho e resolução da tela.
2. Metodologia
Para este estudo, foi realizada uma consulta bibliográfica em livros, artigos e sites. Em
uma fase mais prática, um protótipo foi desenvolvido, utilizando a ferramenta Brackets,
na sua versão 1.4.
3. Desenvolvimento
3.1. Design responsivo
Na visão de Marcotte [2010], a arquitetura é uma disciplina muito bem definida por sua
permanência, em que a fundação de um prédio define sua marca, que define sua
estrutura, que forma sua fachada. No entanto, segundo o autor, trabalhar na web é algo
totalmente diferente, uma vez que esse trabalho é caracterizado por sua transitoriedade,
muitas vezes refinada ou substituída em um ou dois anos. “Janelas com larguras
inconsistentes, resolução de tela, preferências de usuários e as fontes dos usuários
instaladas, são apenas alguns dos intangíveis fatos” [Marcotte, 2010].
Alban [et al., 2012] analisa que é quase impossível criar versões específicas de
cada website para computadores de mesa, tablets e smartphones e, por isso, é necessário
uma tecnologia que possibilite adaptar automaticamente, e da melhor forma possível,
diferentes conteúdos em diferentes plataformas.
No estudo de França [2015], o conceito de responsivo é discutido em um aspecto
mais amplo, onde várias áreas e indústrias demonstram interesse no desenvolvimento de
projetos com esse conceito: desde vidros inteligentes que se tornam opacos à superfícies
que reagem a voz com a música.
Assim, web design responsivo é aquele web design que responde a quaisquer
dispositivos/resoluções e, devido a uma série de características técnicas bem específicas,
é bem apresentado em qualquer um deles [Zemel, 2012]. Para Guerrato [2014], design
responsivo é um conjunto de técnicas para melhorar a experiência do usuário
independente do dispositivo que ele esteja utilizando, com um único conteúdo, em um
mesmo endereço e em um único código.
Complementando essa ideia, Garone [2012] descreve como uma técnica de
estruturação HTML e CSS onde o site se adapta ao browser do usuário, sem a
necessidade de definir diversas folhas de estilos para cada resolução.
3.2. Técnicas de Estruturação
O desenvolvimento de um design responsivo para web engloba três tecnologias
principais [Zemel, 2012]:

Layouts flexíveis – de acordo com o autor, desde a concepção do projeto, primar
pela não especificação de medidas fixas no layout do projeto, torna possível que haja
uma adaptação natural e automática do que se apresenta na tela. A Figura 1 exemplifica
a aplicação dessa ideia em um trecho de código HTML.
Observa-se neste exemplo que, antes, o tipo de medida utilizado para definir a
largura (width) da coluna era pixel (px), unidade de medida fixa mais usada em CSS
[Zemel, 2012].
Figura 1 - Antes com layout fixo e depois com layout flexível Fonte:
Zemel [2012]
Para que este elemento siga o conceito da responsividade de conteúdo, é preciso
adaptá-lo a uma unidade de medida que, segundo o autor, seja relativo, escalável e
adaptável. Neste caso, foi atribuído um valor em porcentagem (%).

Imagens e recursos flexíveis – através de técnicas variadas, é possível fazer com
que os recursos como imagens e vídeos, por exemplo, também sejam flexíveis para
garantir que a experiência do visitante prime pela excelência [Zemel, 2012]. Uma das
formas de alcançar esse objetivo é utilizando um recurso disponível em CSS, conforme
exemplifica o trecho de código a seguir, na Figura 2.
Figura 2 - Uso de CSS para imagens
adaptáveis. Fonte: Zemel [2012].
Segundo a documentação sobre max-width do W3C [2011, apud Zemel, 2012],
essa propriedade permite restringir larguras de conteúdo dentro de um determinado
intervalo, que neste caso, é de 100%. Ou seja, o tamanho final dessa imagem no
navegador nunca vai ultrapassar o tamanho original dela. No entanto, é válido ressaltar
que, de acordo com Guerrato [2014], é necessário envelopar as imagens em um
container, outra estrutura em HTML.

Media Queries – com esse recurso, é possível ocultar, fazer aparecer e
reposicionar elementos e interações conforme a resolução atual que esteja sendo usada
no momento de visitação. Segundo Marcotte [2010], um media querie permite atingir
não só algumas classes de dispositivo, mas inspecionar de fato as características físicas
do dispositivo que está sendo utilizado. Para o autor, isso é possível incorporando uma
consulta em uma folha de estilo (CSS) ligado a um tipo de mídia, conforme ilustra a
Figura 3.
Figura 3 - Consulta de mídia em CSS. Fonte: Marcotte [2010].
Neste exemplo, é possível observar dois componentes, (I) o tipo de mídia (media
= “screen”), e (II) a funcionalidade de uma mídia particular (max-device-width) para ser
pesquisada, seguido por um valor (480px). Em suma, isso quer dizer que essa consulta
de mídia está perguntando se o dispositivo de resolução horizontal é igual ou menor do
que 480px. Se sim, este dispositivo irá carregar o arquivo “shetland.css”. Caso
contrário, o link será totalmente ignorado [Marcotte, 2010].
Percebe-se, portanto, que o design responsivo se mostra como uma interessante
alternativa para ampliar a usabilidade no contexto da web para dispositivos móveis. A
Figura 4 contempla a página desenvolvida neste estudo, utilizando as estruturas
discutidas anteriormente para adaptar seu conteúdo automaticamente.
Desktop
Tablet
Smartphone
Figura 4 - Página com Design Responsivo
O conteúdo foi apresentado de diferentes maneiras, conforme indicado no
trabalho de Alban [et al., 2012]. Observa-se que, quando o site foi acessado por um
smartphone, dispositivo que apresenta tela mais estreita, as imagens mantiveram o seu
tamanho, sendo apresentadas em sequência. Isso permitiu que a experiência de uso fosse
aprimorada, não afetando na usabilidade durante a interação.
4. Considerações finais
O design responsivo tem contribuído significativamente para a comunidade web no que
diz respeito ao desenvolvimento de páginas adaptáveis, de acordo com o uso e o
contexto que estão inseridas.
Assim, dentre as contribuições desse trabalho, destacam-se (I) a identificação e o
uso de estruturas em HTML e CSS para o desenvolvimento de web sites responsivos, e
(II) a importância de prezar pela usabilidade e, consequentemente, a experiência de uso
na web quando acessada por dispositivos com características distintas.
5. Referências
Alban, A. et al. (2012) Ampliando a usabilidade de interfaces web para idosos em
dispositivos móveis: uma proposta utilizando design responsivo. Revista Renote
Novas Tecnologias na Educação, v. 10, n. 3, 2012.
França, F. S. (2015) Web Design Responsivo: caminhos para um site adaptável.
Interfaces Científicas – Exatas e Tecnológicas, v. 1, n. 2, p. 75 – 84, 2015.
Garone, E. (2012) O que é Design Responsivo? Categoria Frontend, Princiweb Blog,
2012. Disponível em <http://goo.gl/OL8afx> Acesso em 02/06/2015.
Guerrato, D. (2014) Design Responsivo na prática 2: do layout ao HTML. São Paulo,
28 Abr. 2014. Disponível em <http://goo.gl/RjDzVA> Acesso em 02/06/2015.
Marcotte, E. (2010) Responsive Web Design. A List Apart, 25 de Maio de 2010.
W3c, Consórcio World Wide Web. (2011) Padrões. 2011. Disponível em
<http://www.w3c.br/Padroes> Acesso em 02/05/2015.
Zemel, T. (2012) Web Design Responsivo Páginas Adaptáveis para todos os
dispositivos. 1. ed. Casa do Código, 2012.