Web Design Responsivo: Solução para múltiplos dispositivos¹

João Rafael Mendes Nogueira ²

Natanael Oliveira Filho ³

RESUMO O presente artigo tem por objetivo apresentar a importância de se conhecer e aplicar as técnicas de design responsivo em sistemas para web, afim de construir sistemas adaptáveis a todos os tipos de telas existentes no mercado, contribuindo para uma web acessível a todos. Inicialmente fazemos uma apresentação do atual estágio em que a web se encontra e da sua necessidade de ser acessível para os mais variados dispositivos, em seguida apresentamos a tríade responsável por permitir a criação de layouts responsivos que sejam acessíveis a varias resoluções de tela. PALAVRAS­CHAVE: design responsivo, Layout fluido, Web móvel. ABSTRACT This article aims to present the importance of knowing and applying the responsive design techniques in systems for web, in order to build systems adaptable to all types of screens on the market, thereby contributing to an affordable web at all. Initially we make a presentation of the current stage in which the web is and your need to be accessible to a wide variety of devices, then present the triad responsible for allowing the creation of responsive layouts that are accessible to various screen resolutions. Key­words: responsive design, fluid layout, mobile Web.

INTRODUÇÃO

O presente trabalho aborda o tema Web design Responsivo e mostrará como esta

técnica esta sendo fundamental para o desenvolvimento de aplicações web focadas no

atual cenário da web, que esta muito diferente do que era 10 anos atrás, pois hoje a _________________________ ¹ Artigo Cientifico produzido na União das Escolas Superiores de Cacoal ­ UNESC entregue à coordenação de Pós­Graduação com a finalidade de comprimento de etapa para obtenção do título de especialista em Desenvolvimento de Sistemas Para Web e Mobile. ² Graduado em analise e desenvolvimento de sistemas pelo CLARETIANO. ³ Master of Business Administration (MBA), Gerencia de projetos.

web não é mais acessível apenas através de um computador com monitor, teclado e

mouse, hoje ela esta acessível através de diversos dispositivos com as mais variadas

resoluções de telas, como Smartphones, tablets, TV, relógios, carros, óculos e muitos

outros dispositivos que estão surgindo rapidamente no mercado.

Segundo o Tácio Zamel (2013), é percebível que diante do cenário atual da web, o

design responsivo tem se tornado tema de estudo de muitos desenvolvedores pois

através dele tem se tornado possível adaptar de forma fácil as interfaces dos

aplicativos para os diversos dispositivos existentes, e sem esta técnica se tornaria

improdutivo e impossível para qualquer desenvolvedor dar suporte da sua aplicação

para todas as resoluções de telas existentes.

Essa mudança da forma de acessar a web pode ser confirmada em estudo realizado

pelo IBOPE Media que revela que 134 milhões de pessoas, com 10 anos e mais, têm

um telefone móvel no Brasil. Destas, 52 milhões têm acesso à internet pelo celular.

Neste universo, ainda é possível distinguir a quantidade de smartphones conectados à

internet, que hoje é de aproximadamente 20 milhões.

Este mesmo estudo realizado pelo IBOPE Media mostra que a conexão móvel já está

consolidada na rotina do brasileiro, que usa seus aparelhos nas mais variadas

situações. Informação e socialização são marcas registradas nesse novo cenário,

motivo pelo qual os smartphones são usados para conversar com amigos (76%), ler e

enviar emails (75%), se inteirar das últimas notícias (64%), saber as novidades do

cenário musical (47%) ou assistir vídeos (44%), conforme estudo realizado em março

pelo IBOPE Media.

Conhecer profundamente os hábitos da população e analisar como a utilização do

aparelho móvel está incorporado ao dia a dia é essencial para prover uma visão 360°

do consumo dos meios nas diferentes telas e plataformas, avalia Janette Shigenawa,

diretora do IBOPE Nielsen Online. ”Além do impacto das novas tecnologias, estamos

engajados em compreender as práticas culturais emergentes que, de fato, contribuem

para a construção dos novos cenários de mídia”, avalia a executiva.

O ATUAL CENÁRIO DA WEB

Desde que a web surgiu a 26 anos atrás para o mundo, o seu uso pelos usuários

mudou muito como aponta um estudo recente realizado pela Google, no qual mostra

uma mudança no habito dos consumidores de serviços web graças à massificação do

smartphone, no mundo e no Brasil. Por aqui, a internet já ultrapassou todas as outras

mídias em termo de quantidade de tempo que os brasileiros gastam por dia. Os

acessos são feitos em laptops, celulares, tablets, desktops, relógios, TVs com internet

e, muitas vezes, todas essas experiências ocorrem em um mesmo dia. O tempo de

navegação, no entanto, tem crescido nos dispositivos móveis. Com dados coletados do

Google Analytics, percebemos que, entre os meses de maio de 2014 e 2015, houve um

aumento de 112% na participação do smartphone no acesso à internet.

Podemos ver claramente que os consumidores estão abrindo mão de acessar serviços

web através de computadores para acessá­los utilizando seus aparelhos moveis,

principalmente seus smartphones, como mostra os dados da pesquisa realizada pela

Google, que revelam que Até o final de 2015, mais de 53% das buscas no Brasil, feitas

no Google Search, virão dos dispositivos móveis, segundo análise interna, baseada no

crescimento mensal de celulares e tablets entre o primeiro semestre de 2014 e 2015.

Sridhar Ramaswamy (SVP de comercio da Google) diz que nesse novo contexto da web, as

decisões passaram a ser tomadas em instantes de impulso, gerados a partir de uma

necessidade que não tem mais hora marcada para se manifestar. Tudo está

acontecendo ao mesmo tempo. Vivemos na era do imediatismo. Estamos checando a

hora, mandando mensagens, assistindo a vídeos, conversando com amigos e

compartilhando conteúdos nas redes sociais, a qualquer momento; seja em casa, no

trabalho, no ônibus, na rua, no shopping center, em qualquer lugar. Os usuários de

smartphone no Brasil, por exemplo, olham, em média, mais de 86 vezes por dia para os

seus telefones.

O varejo é um bom exemplo de setor que tem passado por uma grande mudança por

causa dos dispositivos móveis, como mostram as pesquisas da Google realizados no

primeiro semestre de 2015. Um em cada três consumidores prefere consultar seu

celular dentro da loja a pedir informações a um atendente. Dos usuários de

smartphones, 74% consultam seus telefones enquanto estão em pé numa loja

decidindo qual produto comprar. em contrapartida, 79% dos anunciantes ainda não têm

um site otimizado para mobile, isso mostra como muitos anunciantes estão demorando

para acompanhar as novas tendencias de seus consumidores e com esta atitude estão

perdendo mercado na web, pois a Google chegou a conclusão de que para oferecer

qualidade de acesso a seus usuários ela deve dar prioridade a sites compatíveis com

os diferentes dispositivos presentes no mercado, por este motivo em 21 de abril de

2015 a Google realizou uma mudança em seus algoritmos de busca para que os sites

que estão dentro do padrão responsivo tenham prioridade no ranking de pesquisa, a

empresa publicou a seguinte nota em seu blog:

“A partir de 21 de abril, estaremos ampliando a nossa prioridade para sites moveis no

ranking de pesquisa. Esta alteração irá afetar buscas móveis em todas as línguas em

todo o mundo e terá um impacto significativo em nossos resultados de pesquisa.

Conseqüentemente, os usuários terão mais facilidade para obter resultados relevantes,

de alta qualidade de pesquisa que são otimizados para os seus dispositivos.”

Com esta mudança no algoritmo de busca da Google tornasse essencial para os

anunciantes possuir sites responsivos pois em outro estudo realizado pela Google em

2013, mostra que 47% dos usuários de smatphones analisam somente a primeira

página dos resultados ao realizarem

uma pesquisa em seus smartphones.

Portanto, nesse novo e definitivo

cenário, vemos a necessidade real

dos desenvolvedores de sistemas

para web tomarem conhecimentos da

técnicas do design responsivos para

poderem criar soluções compatíveis com a real necessidade dos consumidores que é a

acessibilidade de sistemas web através de quais quer dispositivos com as mais

diferentes resoluções de telas.

Como Tarcil Zamel (2013) diz em seu livro: “Até ontem, Web significava um navegador

instalado num desktop controlado por mouse e teclado numa tela de tamanho

confortável. Nossos sites foram construídos pensando nesse cenário. Mas,agora,temos

telas pequenas, touchscreen,redes móveis e muitas outras diferenças. Precisamos de

uma nova Web. Uma Web que suporte essa explosão de dispositivos e, mais ainda,

esteja preparada para o futuro de dispositivos que ainda nem conseguimos antever.”

DESIGN RESPONSIVO

Web design responsivo é descrito por muitos altores como um novo conceito de

desenvolver layouts, permitindo que eles sejam fluidos se adaptando a diferentes

dispositivos de forma fácil.

Tácio Zamel(2013), descreve o design responsivo como aquele layout 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.

Imagem extraída do site (www.splicemarketing.co.uk)

A empresa Google também define de forma técnica o que é o design responsivo, veja

no trecho abaixo extraído do site de desenvolvedores da empresa:

“O Web design responsivo (RWD, na sigla em inglês) é uma configuração na qual o

servidor sempre envia o mesmo código HTML a todos os dispositivos, e o CSS é usado

para alterar o processamento da página no dispositivo.”

A W3C(Consórcio World Wide Web, responsável por definir os padrões de tudo referente a web.) deixa

claro a importância do design responsivo para a qualidade dos sistemas web, em seu

site, ela diz que “Web design responsivo e obrigação para dispositivos moveis.”

Tácio Zamel(2013), contribui afirmando que, Não se trata de uma “moda” ou um hype

de internet; não se trata de algo que chegou, vai angariar alguns fãs e sumir na próxima

estação. O web design responsivo é uma nova forma de pensar a web e, dentro de

pouco tempo, será tão vital e importante aos desenvolvedores e à experiência do

usuário quanto o próprio HTML ou CSS.

Hoje muitos desenvolvedores tentam resolver o problema do acesso de seus sites em

resoluções de tela diferentes, desenvolvendo varias versões de seus sites, cada uma

focada para um dispositivo especifico, mais como podemos ver no livro de Tácio Zamel

esta não é uma boa pratica pois a cada atualização do seu site essa mesma

modificação devera ser realizada nas diversas versões existentes do mesmo, se

tornando um processo árduo. Levando em conta também que novos dispositivos com

diferentes resoluções de telas são lançados no mercado constantemente.

Tácio Zamel(2013), ainda acrescenta: “Diga não a mais versões específicas para

celulares; basta de linguagens próprias para mobile; chega de subdomínios ou

diretórios específicos para atender ao “público móvel”! Não existe uma “web mobile”. A

web é única e web design responsivo é a resposta única para uma web única!”.

Como pode ser observado, o designe responsivo não é descrito como uma tecnologia,

mais sim como a utilização de tecnologias já existentes para se atingir o resultado da

responsividade, e entre essas tecnologias estão o Layout fluido, Imagens e recursos

flexíveis e Media queries. O domínio dessas técnicas por um design de sistemas para

web é vital para o desenvolvimento de uma aplicação para a web atual, e como aponta

uma pesquisa realizada no estado de Rondônia, não estamos tão longe de uma web

acessível para todos, já que a pesquisa aponta que 94.7% dos profissionáis da área

tem conhecimento do design responsivo e desses89.5% utilizam o designer responsivo

em seus projetos web.

(Pesquisa disponível em:

https://docs.google.com/forms/d/1VnLPEaQLgU5_HA8rm5Ki1AuYEUdDEu3zQbln0w6knDI/viewanalytics) Acessado em 24/09/2015 as Hs 20:29.

3 TRÍADE PARA WEB DESIGN REPONSIVO

Tárcil Zamel (2013), diz que design responsivo não é uma tecnologia nova e sim um

conceito da junção de algumas técnica cujo as três principais são: Layout fluido,

Imagens e recursos flexíveis e Media queries.

3.1 LAYOUT FLUIDO

Segundo Lopes (2013) a grande estrela de um web design responsivo é o layout

fluído. Isso quer dizer não usar medidas fixas como pixels (ou pontos, centímetros,

milímetros etc.) pra programar o design. Não dá mais pra copiar as medidas no

Photoshop da imagem estática que o design criou com o layout do site. Layout fluído é

usar medidas flexíveis e é tão velho quanto o HTML em si.

Tárcil Zamel (2013) acrescentar, Um layout fluido é o primeiro passo para desvendar

os mistérios do web design responsivo. Para se conseguir um layout fluido num projeto

web, a principal medida a ser tomada é não usar medidas absolutas no CSS!

Podemos observar na internet que muitos sites que utilizam suas medidas fixas

enfrentam problemas na hora em que são acessados através de um dispositivo com

resolução de tela inferir ao que foi padronizado em seu layout, os componentes não se

adaptam a novas resoluções de tela e se torna até mesmo impossível de se navegar no

site através de um dispositivo mobile. E este tipo de problema que o layout fluido se

propõe a resolver, para isso, em layout fluidos não se trabalha com medidas fixas mais

sim com medidas flexíveis. Há varias, mais as que mais se destacam são as

porcentagem e em.

3.2 PORCENTAGEM

Ao se trabalhar com porcentagem para especificar as larguras de um layout, devemos

olhar para esta técnica com um olhar diferente do que tínhamos das medidas em pixel

dos layouts fixos.

No exemplo abaixo, temos um layout que foi dividido em porcentagens, cujo o body

principal (pai) tem 100% de largura, esse layout foi dividido em três tamanha iguais,

para determinar o tamanho deles, dividimos 100% por três. Assim, cada grid ficou com

a largura de 33,33%.

Fonte: Elaborada pelo autor

marcar unidades com porcento fornece uma exibição mais consistente e acessível para

os visitantes. Quando as configurações de exibição do cliente se alteram, as medidas

marcadas com % se alteram de maneira mais razoável, permitindo que a legibilidade

seja preservada, bem como a acessibilidade e o design visual.

3.3 EMS

Tárcil Zamel (2013), explica que o “em” é uma unidade escalável. Quando se trata do

tamanho da fonte, 1 em é igual ao tamanho atual da fonte do elemento pai. Por

exemplo, se o tamanho da fonte do elemento é 12pt, 1 em é igual a 12pt. Ems são

escaláveis por natureza. 2 em seria igual a 24pt, 0.5 seria 6pt e assim por diante.

LOPES (2013), diz que, fazer um design totalmente fluído é o único jeito de atacar os

múltiplos tamanhos de tela dos vários dispositivos diferentes de hoje. Mas, muitas

vezes, deixar a página toda ocupar 100% do navegador pode não atingir resultados tão

interessantes, principalmente nos extremos, em telas muito grandes ou pequenas.

Para contornar este problema e restringir o design fluído, podemos fazer uso de duas

propriedades do CSS, o max­widht e o min­width, essas duas propriedade irão impedir

que a pagina se redimensione para alem dos valores definidos. Veja a imagem abaixo

que ilustra essas propriedades definidas em um código CSS.

Fonte: Elaborada pelo autor

A solução mostrada acima é responsiva até certo ponto, pois assim que atinge seus

valores limites de flexibilidade, ela para de se ajustar, mesmo que a tela seja maior que

960px ou menor que 360px. Por isso que Tárcil Zamel (2013), diz que a melhor solução

para projetos que precisem/requeiram de largura total em quaisquer resoluções é

colocar width:100% no contêiner.

4 MEDIA QUERIES

As medidas flexíveis fazem com que o site adapte­se ao redimensionamento do

navegador. Mas há momentos, no redimensionamento da janela do navegador, em que

o nosso site não ficar bom. Este momento é chamado de breakpoint . Segundo Lopes

(2013) breakpoint “é o ponto de quebra do nosso layout fluído onde uma reestruturação

maior é necessária, [...] para ajustar o design e melhorar a experiência do usuário.”

Para ajustar o design nesses pontos precisamos das Media Queries. É com as Media

Queries que é possível ocultar, fazer aparecer e reposicionar elementos e interações

conforme a resolução atual que esteja sendo usada no momento da visitação do site.

Elas surgiram de um recurso já existente no CSS, as Media Types. Mas diferente das

Media Types, as Medias Queries não avalia o tipo de dispositivo (screen ou handheld),

mas sim a resolução da tela.

Um exemplo clássico do uso de Media Queries é a utilização para o menu responsivo.

Onde teremos o menu na versão mobile e outro na versão desktop , sendo definido por

media queries em um breakpoint definido.

@media ( max­widht: 320px)

CSS para o menu responsivo

Os valores max width e min witdh equivalem respectivamente a menor que ou igual a e

maior ou igua l. Logo o exemplo acima informa que, quando a tela (portview) for menor

que 320px ou igual,devem ser aplicadas as regras CSS que estão dentro deste bloco.

Media Queries é a solução para quando o layout fluido já não é suficiente. Esta

trabalha diretamente com o breakpoint . Muitos sites na web trazem breakpoints

definidos, mas cada site requer seu próprio breakpoint.

5 IMAGENS FLEXÍVEIS

Tárcio Zemel (2013), diz que, nada adiantaria se o conteúdo se adaptasse as mais

diferentes resoluções se as imagens (e outros recursos) do site, também, não se

adaptassem e não fossem flexíveis, Então, por meio de técnicas variadas, é possível

fazer com que as assets (recursos como imagens, vídeos etc.) do site, também, sejam

flexíveis para garantir que a experiência do visitante prime pela excelência,

independente do dispositivo que esteja usando.

Em alguns casos podemos evitar os pixels em imagens. Em logo marcar, por exemplo,

podemos optar por imagens vetoriais, pois se adaptarão ao layout do site responsivo

sem perder a qualidade. Mas em outros casos não temos como fugir daquelas imagens

compostas por pixels.

Para imagens de pixels em um design fluído sem que elas percam qualidade ou

desestruturar o layout , existe varias técnicas. Uma delas e a mais simples é utilizar

também o max width e min width nas imagens, o que chamamos de imagens fluídas.

Outra técnica é utilizar as Media Queries para carregar as imagens, dependendo do

tamanho da tela. Então, em um viewport menor que 320px carregaria uma imagem com

uma qualidade e tamanho menor, para telas maiores que 320px carregaria uma

imagem com outras propriedades que melhor serviria para o site.

banner

background­image: url(banner­mobile.jpg);

@media (min­width: 550px)

.banner

background­image: url(banner­medio.jpg);

@media (min­width: 1000px)

.banner

background­image: url(banner­grande.jpg);

Dessa forma, teremos imagens que se adaptaram as mais variadas resoluções de tela.

CONCLUSÃO

No presente artigo, foram compiladas as principais técnicas de design responsivo

existentes, que ao serem aplicadas em conjunto em um layout de uma aplicação web,

tornara o layout desta aplicação altamente adaptável para qualquer resolução de tela.

Neste artigo foi mostrado que as técnicas do design responsivo não é uma tecnologia

nova, mais sim um novo conceito que se utiliza de tecnologias já existentes como o

CSS para atingir o objetivo esperado. Foi mostrado também que apesar de termos que

aumentar o trabalho de desenvolvimento de um layout, já que passamos a digitar mais

códigos CSS, acabamos com um trabalho maior que seria desenvolver uma versão

específica da nossa aplicação para cada dispositivos diferente.

Portanto, hoje em dia, é fundamental para um web design conhecer e aplicar com exito

as técnicas do design responsivo, para que o mesmo tenha a capacidade de

desenvolver suas soluções focando na web atual, uma web de muitos dispositivos.

GLOSSÁRIO

Aplicações web ­ É uma aplicação "cliente­servidor", que reside num servidor, e que é acedida por um programa cliente, normalmente um browser. CSS ­ Cascading Style Sheets (CSS) é uma "folha de estilo" composta por “camadas” e utilizada para definir a apresentação (aparência) em páginas da internet. Google ­ É uma empresa multinacional americana de serviços online e software. HTML ­ É a sigla de HyperText Markup Language, expressão inglesa que significa "Linguagem de Marcação de Hipertexto". Consiste em uma linguagem de marcação utilizada para produção de páginas na web. Layout ­ Layout é uma palavra inglesa, muitas vezes usada na forma portuguesa "leiaute", que significa plano, arranjo, esquema, design, projeto. WEB ­ Rede que conecta computadores por todo mundo, a World Wide Web (WWW).

REFERÊNCIAS LOPES, Sérgio. A web mobile: programe para um mundo de muitos dispositivos. São Paulo:

Casa do Código, 2013.

ZEMEL, Tárcio. Web Design Responsivo: páginas adaptáveis para todos os dispositivos. São

Paulo: Casa do Código, 2013.

Universo de smartphones conectados à internet. Disponível em:

http://www.ibope.com.br/pt­br/noticias/paginas/52­milhoes­de­pessoas­tem­acesso­a­web­pelo­

celular­aponta­ibope­media.aspx

Acessado 07/09/2015 as 12:28

Sridhar Ramaswamy. A Revolução dos Micro­Momentos: como eles estão mudando as regras.

Disponível em:

https://www.thinkwithgoogle.com/intl/pt­br/articles/how­micromoments­are­changing­rules.html

Acessado 07/09/2015 as 14:43

Takaki Makino. Finding more mobile­friendly search results.

Disponível em:

http://googlewebmastercentral.blogspot.com.br/2015/02/finding­more­mobile­friendly­search.ht

ml

Acessado 02/07/2015 as 08:41

CSS Responsive Web Design. Disponível em:

http://www.w3schools.com/css/css_responsive_intro.asp

Acessado em 24/06/2015 as 23:00 Hs.