A IMPORTÂNCIA DO DESIGN RESPONSIVO

(1)

VII JIC – Jornada Integrada de Cursos do CTESOP

15 a 19/09/2014 ISBN: 978-85-60266-10-4

A IMPORTÂNCIA DO DESIGN RESPONSIVO

LIMA, Lucas Miguel de

Graduando em Sistemas de Informação, UNIPAR, [email protected]

LIMA, Leandro Clementino de

Professor Orientador, UNIPAR / CTESOP, e-mail: [email protected]

Resumo: Este trabalho trata da utilização de Design Responsivo no desenvolvimento de sites, objetiva demonstrar como a prática se tornou necessária, bem como abordar o avanço da tecnologia móvel, técnicas de desenvolvimento para projetos já em andamento ou finalizados, a utilização de frameworks que agilizam o desenvolvimento de aplicações na metodologia do Design Responsivo, vantagens e desvantagens que essa prática traz ao projeto, testes de desempenho para analisar a performance de um projeto com Design Responsivo aplicado e com isso conscientizar os desenvolvedores na utilização dessa metodologia.

Palavras-chave: HTML5. CSS3. Media Queries.

1 INTRODUÇÃO

A forma com que as pessoas acessam à internet não é mais a mesma, a cada dia novos dispositivos com acesso à internet vem sendo criados e com características cada vez mais próxima aos desktops, com isso houve a necessidade dos desenvolvedores web criarem uma metodologia que facilitasse seu trabalho para dar suporte a vários dispositivos sem que houvesse a necessidade de criar uma versão especial de sua aplicação para cada um, foi então que em 2010 o Web Designer Ethan Marcotte criou o termo “Responsive Web Design”, o autor cita o

(2)

15 a 19/09/2014 ISBN: 978-85-60266-10-4

avanço da tecnologia móvel em que, segundo as pesquisas, a preferência dos usuários em acessar a internet através de um dispositivo móvel iria superar os desktops entre 3 à 5 anos, o que realmente vem acontecendo, conforme publicado em seu artigo “Responsive Web Design”, disponível no blog A List Apart.

Hoje é possível desenvolver um site que se adapte a vários dispositivos como, netbooks, notebooks, smartphones, tvs entre outros com o acesso à internet sem que altere sua estrutura principal, esses sites possuem o “Design Responsivo”, ou seja eles conseguem se adaptar à várias resoluções de telas e ainda continuar com a estrutura do código fonte de um site que é acessado através do desktop.

A Figura 1- Apresenta um exemplo de site responsivo:

Fonte - http://blog.liip.ch/

A Figura 2 - Apresenta um exemplo de site não responsivo:

Fonte - http://blog.liip.ch/

(3)

15 a 19/09/2014 ISBN: 978-85-60266-10-4

Além do design responsivo deixar o site melhor apresentável em múltiplos dispositivos, através dele pode-se controlar o que quer que apareça ou não em determinados dispositivos, aumentando ainda mais as possibilidades de criar sites mais “inteligentes” e dinâmicos, um exemplo a ser dado pode ser o site da rede social Twitter, percebe-se que ao entrar no site através de um smartphone todas as suas características de site desktop são alteradas, deixando-o melhor apresentável, onde pode ser notadas mudanças nos tamanhos de fontes, posição dos botões e também nota-se que a versão mobile do site não tem o background que você utiliza em uma versão desktop, tudo isso para melhorar ainda mais a experiência do usuário ao acessar o site.

Figura 1 - Twitter em vários dispositivos Fonte: https://www.twitter.com

2 O AVANÇO DA TECNOLOGIA MÓVEL

Nos últimos anos a evolução tecnológica lançou um novo desafio para desenvolvedores web e designers, a missão de alcançar o maior número de usuários com o mercado mobile se expandindo a cada dia no mundo inteiro no Brasil isso não é diferente.

(4)

15 a 19/09/2014 ISBN: 978-85-60266-10-4

“A base de Smartphones no final de 2013 já representava 58%

de todos os celulares em funcionamento, fatia que era apenas 27% em 2012. São mais de 40 milhões de aparelhos (dados de novembro/2013 do IDC) nas mãos dos brasileiros e este número tende a crescer ainda mais neste ano que estamos iniciando. A expectativa é que as vendas aumentem em 35%

em todo o mundo, e em países emergentes (nosso caso) esta taxa deve ultrapassar os 45%” (Site IABBRASIL apud GFK’S DIGITAL WORLD, 2014).

com isso o mercado de dispositivos móveis tende a se tornar o padrão de acesso à web, substituindo a preferência pelos desktops.

A web deve seguir o avanço das novas tecnologias e se adaptar a esses dispositivos, é isso que o Design Responsivo propõe sites e aplicativos visualmente agradáveis, dinâmicos e de fácil otimização, capazes de passar a mesma experiência ao usuário de qualquer dispositivo logo o objetivo geral desse artigo é incentivar aos desenvolvedores a adotar o Design Responsivo em seus projetos, para isso mostraremos algumas técnicas utilizadas, onde serão abordados media queries, layouts responsivos, frameworks e testes de desempenho.

3 A EVOLUÇÃO DO MEDIA TYPE

Iremos apresentar algumas técnicas utilizadas na prática do Design Responsivo.

Quando se fala em design responsivo pode se pensar em três conceitos que seu projeto deve ter, que são: grid fluído, imagens e mídias flexíveis e as media queries, ela é uma extensão do media type que é uma tag de identificação onde

(5)

15 a 19/09/2014 ISBN: 978-85-60266-10-4

você pode declarar o tipo de dispositivo que será aplicado à folha de estilo, ela pode ser definida como:

all

Para todos os dispositivos.

braille

Para dispositivos táteis.

embossed

Para dispositivos que “imprimem” em braille.

handheld

Para dispositivos de mão. Normalmente com telas pequenas e banda limitada.

print

Para impressão em papel.

projection

Para apresentações, como PowerPoint.

screen

Para monitores ou outros dispositivos com telas coloridas e com resolução adequada.

speech

Para sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural que podemos “formatar” a voz dos sintetizadores.

tty

Para dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado.

tv

Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.

(6)

15 a 19/09/2014 ISBN: 978-85-60266-10-4

Exemplo de uma linha definindo para que tipo de dispositivo será determinado essa folha de estilo, no caso desse exemplo “handheld”.

Contudo isso não é mais viável pelo fato de que a cada dia os dispositivos móveis terem suas características mais próximas aos desktops como a velocidade de processamento e qualidade de imagem, com isso houve a necessidade de fazer uma melhor definição na hora de direcionar uma folha de estilo á um determinado dispositivo, as media queries, com elas você pode definir para qual dispositivo será direcionado um determinado estilo através de sua resolução mínima ou máxima.

Exemplo:

@media screen and (max-device-width: 480px) { .slide{

display:none;

} }

O código acima está definindo que para dispositivos com resolução máxima de 480px, todo o conteúdo que estiver dentro da tag definida com a class “slide” não será mostrado, porém como Lopes (2012) cita “Só media queries não bastam. Seria impraticável criar uma media querie para cada resolução existente — seriam milhares! Devemos usar poucas media queries e fazer o layout fluir entre os breakpoints”, breakpoints são os pontos em que seu layout precisa ser ajustado, para isso deve-se analisar os breakpoints de cada projeto, pois cada layout se comporta de maneiras diferentes em variáveis dimensões, onde se consegue verificar os breakpoints de seu layout simplesmente redimensionando através da lateral da janela do navegador e verificando como seu projeto se comporta conforme vai diminuindo as dimensões, além disso, o uso da unidade de medida em ao invés

(7)

15 a 19/09/2014 ISBN: 978-85-60266-10-4

de px também ajuda a conseguir media queries de qualidade ao seu projeto, em é a unidade de medida tipográfica onde 1em equivale a 16px (por padrão) ela é representada pela seguinte formula (target / context = result) onde target representa o elemento que queremos modificar e context será o nosso body pois é ele que contem os demais elementos do nosso documento, então se definimos nosso body com um font-size padrão de 16px, e queremos transformar um determinado target, ex: h1 de 20px para em basta fazermos o seguinte calculo:

20 / 16 = 1.25 = 1.25em

Com isso é possível obter media queries parecidos com o exemplo abaixo:

@media (min-width: 37em) { ... } /* 592px */

Para Lopes (2012) “ O segredo é não usar pixels nas medidas, mas priorizar um layout mais fluído e flexível baseado em porcentagens e ems. ”

Além de tudo se deve preocupar-se com o que é importante para ser mostrado em uma versão reduzida do seu projeto (mobile) e o que pode ser descartado, pois a internet móvel em alguns lugares do Brasil ainda não é tão rápida por isso devemos otimizar nossos sites pensando em todo o tipo de público.

(8)

15 a 19/09/2014 ISBN: 978-85-60266-10-4

4 AVALIANDO O WEB DESIGN RESPONSIVE

O Design responsivo traz diversas vantagens para quem o pratica, uma delas é para quem desenvolve a pratica do SEO, o design responsivo pode ser de grande ajuda na hora de organizar e tabular os resultados de sua campanha, pois com um site que se adapta a diversos dispositivos a URL se torna única pois não será preciso criar uma para cada campanha de um determinado dispositivo. Outra grande vantagem é que com um site fluído a manutenção é bem mais fácil e rápida, caso tenha que ser feita uma alteração no site, ela será aplicada para todas as resoluções e consequentemente para todos os dispositivos.

Apesar das inúmeras vantagens que o Design Responsivo traz, também surge algumas desvantagens, como o tempo de carregamento do site, como o CSS é escrito em somente um arquivo, boa parte do código é inútil para determinado dispositivo que está acessando esse arquivo, por isso quando se pensa em um projeto grande, ainda é preciso analisar se o Design responsivo irá lhe servir de forma correta, um exemplo que pode ser dado são os sites Facebook.com e Youtube.com onde parte de seu layout é responsivo porem eles possuem a versão mobile de seu site pela necessidade de otimizar e atender variáveis tipos de usuários, além de tudo o tempo para se projetar e desenvolver um site responsivo é muito maior que um site que tenha tamanho fixo, porem isso pode ser revertido no futuro caso você tenha que criar o site para a versão mobile, onde você terá que repensar todo o seu projeto novamente.

Além da prática do design responsivo está se tornando essencial para todos os sites, o próprio Google recomenda que os desenvolvedores se utilizem da prática, pois isso ajuda na indexação e no posicionamento nos buscadores, onde na área de SEO o Design Responsivo é o mais indicado, para o Google é mais fácil ele

(9)

15 a 19/09/2014 ISBN: 978-85-60266-10-4

interpretar que o site www.exemplo.com.br tem um layout responsivo do que o www.m.exemplo.com.br ou www.tablet.exemplo.com.br é o mesmo site porem com uma formatação diferente.

Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device. If responsive design is not the best option to serve your users, Google supports having your content being served using different HTML. The different HTML can be on the same URL or on different URLs, and Googlebot can handle both setups appropriately if you follow our recommendations. (GOOGLE WEBMASTERS, 2014)

5 MIGRANDO PROJETOS EM ANDAMENTO OU FINALIZADOS PARA WEB DESIGN RESPONSIVE

Infelizmente o Design Responsivo não pode ser aplicado a qualquer site que já tenha sido finalizado, provavelmente o seu site com largura fixa, terá que ser refeito, porem muitos desenvolvedores preocupados e defensores de uma Web Única, criam a cada dia novas ferramentas que auxiliam no desenvolvimento de um site responsivo, são os famosos frameworks, há milhares deles espalhados por toda web, um dos mais famosos e utilizados é o Bootstrap, ele é uma biblioteca que já contem boa parte de uma estrutura de site já programada e com o design responsivo aplicada em sua metodologia além de tudo ela está toda documentada, isso ajuda o desenvolvedor a migrar seu antigo site ou aplicação web para os novos padrões da web, também temos o Foundation, Initializr entre vários outros frameworks que auxiliam no desenvolvimento, você também pode usar um layout fluído, onde o site

(10)

15 a 19/09/2014 ISBN: 978-85-60266-10-4

aumenta ou diminui conforme a resolução da tela, porem sem alterar sua forma original, contudo essa solução não é recomendada pelo fato de que a experiência do usuário pode ser frustrada de acordo com o tamanho de tela de seu dispositivo.

6 ANÁLISE DE SITE ESCRITO COM A METODOLOGIA WEB DESIGN REPONSIVE

Feito um simples teste de desempenho através do site http://tools.pingdom.com/fpt/ é uma ferramenta online que testa o desempenho do carregamento de todos os arquivos que são carregados ao entrar em seu site, onde obteve-se os seguintes resultados, para esse teste utilizou-se um layout responsivo desenvolvido com Bootstrap e fiz algumas alterações em suas stylesheets, lembrando que foi usado o arquivo extenso do Boostrap e não a versão reduzida (bootstrap.min) para conseguir desativar os media queries com mais facilidade, com isso obteve-se os seguintes resultados:

Resultado de desempenho do site com todas as media queries do bootstrap ativadas

(11)

15 a 19/09/2014 ISBN: 978-85-60266-10-4

Resultado de desempenho do site com algumas media queries do bootstrap desativadas

Nota-se que com algumas exclusões de media queries do arquivo stylesheet do Bootstrap obteve-se um aumento de desempenho de 1.56 segundos oque não é uma grande diferença porem para projetos maiores isso pode ter um impacto significativo, com isso conclui que os media queries devem ser explorados para cada tipo de projeto através da prática do breakpoints pois com isso não haverá media queries desnecessários e que não servirão para nenhum fim.

7 CONCLUSÃO

Viu-se que aos desenvolvedores que buscam dar a melhor experiência possível ao seu usuário o Design responsivo é a melhor escolha, contudo um levantamento deve ser feito para cada tipo de projeto, levando em consideração a quantidade de usuários, por quais tipos de dispositivo seu usuário acessa a internet entre outras informações que ajudam na tomada de decisões do seu projeto, pois além de poupar tempo de desenvolvimento há outras soluções mais simples de serem aplicadas e que podem atender seu publico final, contudo se o desenvolvedor

(12)

15 a 19/09/2014 ISBN: 978-85-60266-10-4

tiver a oportunidade e tempo hábil para desenvolver um projeto web na metodologia do Design Responsivo, isso pode poupar de muitos problemas no futuro.

Conforme o site Kioskea, “esta é uma grande evolução do web design convidando os desenvolvedores a participar de um novo desafio ergonômico e, assegurando aos usuários uma experiência mais rica. Quanto às desvantagens geradas por esta técnica, isso significa mais investimento em termos de criação e de desenvolvimento do site”.

8 REFERÊNCIA

BELLOTE, Vitor. 2014, o ano em que o Mobile deixará de ser apenas uma previsão.

Disponível em: <http://iabbrasil.net/portal/tag/copa/> Acesso em 12 de Julho de 2014.

Google Webmasters. Criação de websites otimizados para smartphones. Disponível em: <https://developers.google.com/webmasters/smartphone-sites/details> Acesso em 04 de Agosto de 2014.

LOPES, Sérgio. Design Responsivo por uma web única. Disponível em:

<http://sergiolopes.org/responsive-web-design/> Acesso em 12 de Julho de 2014.

MARCOTTE, Ethan. Responsive Web Design. Disponível em:

<http://alistapart.com/article/responsive-web-design/> Acesso em 6 de Junho de 2014.

MAURITY, Lucia; Nouira. Vantagens, Desvantagens e SEO. Disponível em:

<http://pt.kioskea.net/faq/13379-responsive-design-vantagens-desvantagens-e-seo>

Acesso em 8 de Julho de 2014.

(13)

15 a 19/09/2014 ISBN: 978-85-60266-10-4