A IMPORTÂNCIA DO DESIGN RESPONSIVO

Transcrição

1 A IMPORTÂNCIA DO DESIGN RESPONSIVO LIMA, Lucas Miguel de Graduando em Sistemas de Informação, UNIPAR, LIMA, Leandro Clementino de Professor Orientador, UNIPAR / CTESOP, leandroclementino@gmail.com 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 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 - A Figura 2 - Apresenta um exemplo de site não responsivo: Fonte -

3 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: 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 A base de Smartphones no final de 2013 já representava 58% de todos os celulares em funcionamento, fatia que era apenas 27% em 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 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 Exemplo de uma linha definindo para que tipo de dispositivo será determinado essa folha de estilo, no caso desse exemplo handheld. <link rel="stylesheet" href="estilo.css" type="text/css" media="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. 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 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 (min-width: 37em) {... }/* 592px (min-width: 68em) {... }/* 1088px (min-width: 100em) {... }/* 1600px */ 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 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 interpretar que o site tem um layout responsivo do que o ou é 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 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 é 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 desativadas Resultado de desempenho do site com algumas media queries do bootstrap 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 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: < Acesso em 12 de Julho de Google Webmasters. Criação de websites otimizados para smartphones. Disponível em: < Acesso em 04 de Agosto de LOPES, Sérgio. Design Responsivo por uma web única. Disponível em: < Acesso em 12 de Julho de MARCOTTE, Ethan. Responsive Web Design. Disponível em: < Acesso em 6 de Junho de MAURITY, Lucia; Nouira. Vantagens, Desvantagens e SEO. Disponível em: < Acesso em 8 de Julho de 2014.

13