Post on 12-Apr-2017
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. PALAVRASCHAVE: 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. Keywords: 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ósGraduaçã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 maxwidht e o minwidth, 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 adaptese 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 ( maxwidht: 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
backgroundimage: url(bannermobile.jpg);
@media (minwidth: 550px)
.banner
backgroundimage: url(bannermedio.jpg);
@media (minwidth: 1000px)
.banner
backgroundimage: url(bannergrande.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 "clienteservidor", 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/ptbr/noticias/paginas/52milhoesdepessoastemacessoawebpelo
celularapontaibopemedia.aspx
Acessado 07/09/2015 as 12:28
Sridhar Ramaswamy. A Revolução dos MicroMomentos: como eles estão mudando as regras.
Disponível em:
https://www.thinkwithgoogle.com/intl/ptbr/articles/howmicromomentsarechangingrules.html
Acessado 07/09/2015 as 14:43
Takaki Makino. Finding more mobilefriendly search results.
Disponível em:
http://googlewebmastercentral.blogspot.com.br/2015/02/findingmoremobilefriendlysearch.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.