Abordagem web design responsivo para desenvolver aplicações web que se adaptam a qualquer dispositivo

Transcrição

1 Abordagem web design responsivo para desenvolver aplicações web que se adaptam a qualquer dispositivo Márcio Koch 1, Isabela Gasparini 2 1 Centro de Ciências Tecnológicas Universidade do Estado de Santa Catarina (UDESC) Joinville SC Brasil 2 Centro de Ciências Tecnológicas Universidade do Estado de Santa Catarina (UDESC) Joinville SC Brasil lobokoch@gmail.com, isabela.gasparini@udesc.br Abstract. This research work discusses the key concepts of responsive web design and technologies as media queries to develop web applications so that its layout adapts to any device and offer a good level of accessibility to the needs of users. This is possible using the HTML5 resources, CSS3 and JavaScript. We present techniques such as mobile first and also some frameworks that assist in this work as PhoneGap and jquery Mobile. Resumo. Esse trabalho de pesquisa aborda os principais conceitos de web design responsivo e tecnologias como media queries para desenvolver aplicativos web de forma que seu leiaute se adapte a qualquer dispositivo e ofereça um bom nível de acessibilidade às necessidades dos usuários. Isso é possível utilizando os recursos do HTML5, das CSS3 e JavaScript. Apresentamos técnicas como o mobile first e também algumas frameworks que auxiliam nesse trabalho como o PhoneGap e o jquery Mobile. 1. Introdução Devido à evolução tecnológica dos dispositivos de comunicação e entretenimento, qualquer pessoa pode navegar na web facilmente usando um computador pessoal, laptop, smartphone, tablet, smart tv ou console de jogo [Subić et al. 2014]. [Klein e Gubic 2014] destacam que com a popularização das tecnologias 3G e Wi-Fi o desempenho e tamanho dos dispositivos móveis melhoraram muito ficando mais parecidas com as dos desktops e laptops, bem como houve melhoria dos navegadores para mobile. Porém todos estes dispositivos possuem dimensões, resolução de tela, capacidade de armazenamento e processamento diferentes. Uns mais e outros menos, dependendo da marca e modelo. Essas características diferentes dos dispositivos tornaram-se um verdadeiro desafio para web designers construírem aplicações web que se adaptem a todos eles de maneira a oferecer um nível de usabilidade admissível aos usuários que estão cada vez mais exigentes.

2 [Lestari et al. 2014] afirmam que muitas empresas criam versões diferentes do seu web site para dispositivos móveis com resoluções diferentes. Porém isso baixa a produtividade das equipes e exige um aumento no orçamento da empresa. [Kimura et al. 2012] também advertem que construir outra versão do site para atender dispositivos móveis exige a necessidade de manutenção em dois sites diferentes para um mesmo sistema. A fim de solucionar as situações descritas anteriormente pode-se aplicar a abordagem para desenvolvimento de aplicações web denominada web design responsivo. Essa abordagem é baseada principalmente nas tecnologias Hypertext Markup Language versão 5 - HTML5, Cascading Style Sheets versão 3 - CSS3 e JavaScript. O órgão que regulamenta a evolução dessas tecnologias e recomendações é a W3C (World Wide Web Consortium). 1.2 Web Design Responsivo [Silva 2014] que o termo Web Design Responsivo surgiu em 2010 com o post no blog A List Apart, onde Ethan Marcotte retrata a mudança de comportamento e crescimento dos usuários mobile, e que, várias empresas já estavam sendo afetadas por desejar disponibilizar seus sites de forma aderente a esses novos dispositivos. Deve-se utilizar um modelo responsivo para criar uma interface sensível às características do dispositivo, ao tamanho e a orientação da tela, à capacidade de cores a luminosidade do ambiente, aos leitores de tela e a muitas outras variáveis da relação homem-interface. Um projeto responsivo deveria ser em sua concepção natural, independente do navegador, atuar com fluidez, trabalhar com porcentagem e se adequar com qualquer resolução permanentemente. 1.3 Princípios do Design Responsivo O design responsivo ou leiaute responsivo expande-se e contrai com a finalidade de se acomodar de maneira usável e acessível à área onde é visualizado, seja um smartphone, um tablet, um desktop ou um leitor de tela. [Silva 2014] e [Kimura et al. 2012] expõem que as três principais tecnologias para o desenvolvimento de um leiaute responsivo são: a) grid fluído: técnica onde as medidas CSS são definidas em unidades relativas, tais como porcentagem e ems, e não em medias absolutas como o pixel e mm; b) imagens e mídias flexíveis: são aquelas capazes de contrair ou expandir suas dimensões ou ter suas dimensões alteradas por scripts dependendo do contexto onde são renderizadas; c) media queries: é uma tecnologia CSS que permite ao autor servir folhas de estilos baseadas em determinadas características do dispositivo ao qual o leiaute será servido. Trabalhos recentes abordam os princípios de web design responsivo como [Lestari et al. 2014] que avaliam a experiência do usuário em cenários de web design responsivo em dispositivos móveis e em desktop e design não responsivo em dispositivos móveis. Concluíram que web design responsivo mantém a qualidade da informação, legibilidade, gosto de uso e reduz em mais de 74% a utilização de rolagem. Porém web design não responsivo melhorou em 26% a rolagem e 55% o total de cliques

3 na exploração da arquitetura dos sites. Já [Klein and Gubic 2014] reestruturaram o site de uma instituição de ensino superior para leiaute responsivo a fim de aumentar o interesse de uso pelos alunos e professores. Concluem que houve aumento considerável de uso devido as novas possibilidades disponíveis através de dispositivos móveis. A analise de 470 sites é realizada por [Subić et al. 2014]. O trabalho deles conclui que a grande maioria dos sites são semi-responsivos, não responsivos e o menor percentual são os responsivos. E em [Sindh 2012] os autores avaliam a qualidade e o custo de aplicações web para smartphones. O custo é comparado entre um aplicativo desenvolvido com HTML5, CSS3 e JavaScript e um desenvolvido de forma nativa ao dispositivo. Os autores concluem que o desenvolvimento usando HTML5 atende aos padrões de qualidade de forma satisfatória e o custo efetivo fica em torno de 67%. 2. HTML5 O uso do HTML5 no desenvolvimento web proporciona um código semântico, mais bem estruturado, facilitando sua manutenção e leitura. O HTML5 devido a possuir uma semântica bem estruturada com elementos apropriados para marcar um conteúdo, melhora a performance dos navegadores, scripts de execução e leitores de tela. Uma página HTML5 inicia com o elemento doctype html conforme pode ser visto no Quadro 1. <!doctype html> <html lang="pt-br"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>leiaute mínimo para design responsivo</title> </head> <body> </body> </html> Quadro 1 Leiaute para design responsivo Outra metatag essencial para desenvolver um leiaute responsivo é a viewport conforme apresentado no Quadro 1. Ela provê ao navegador informações que permitem que ele escale de modo apropriado o conteúdo em telas de viewport variadas. A Tabela 1 contém alguns atributos essenciais para um leiaute responsivo. Tabela 1. Alguns atributos importantes da metatag viewport Atributo Valores possíveis Descrição width height 1 a pixels ou device-width 1 a pixels ou device-height Define a largura da viewport em pixels. O valor device-width especifica que a largura da viewport deverá ser igual à largura da tela do dispositivo. Define a altura da viewport em pixels. O valor device-height especifica que a altura da viewport deverá ser igual à altura da tela do dispositivo. initial-scale 0.1 a 10 A escala inicial ou o fator de zoom usado quando a página for visualizada pela primeira vez. Valores mais altos causam aumento do zoom e mais baixos diminuem o zoom.

4 2.1. CSS Reset Caso uma página web não possua um CSS associado, o próprio navegador possui um arquivo CSS interno com configurações de inicialização. Porém os navegadores não seguem um padrão entre si, o que pode ser um problema para um leiaute responsivo. [Mayer 2015] desenvolveu uma folha de estilo contendo os valores iniciais para vários elementos de marcação HTML a qual chamou de CSS Reset. Ele foi radical e zerou a maioria desses valores, deixando a cargo do desenvolvedor ajustá-los conforme a necessidade de cada projeto. Posteriormente [Gallagher and Neal 2015] criaram uma folha de estilo alternativa a de Meyer a qual denominaram de normalize.css. Essa folha de estilos tem como diferencial preservar os estilos nativos considerados úteis em lugar de simplesmente zerá-los, como faz o CSS Reset. A folha de estilo normalize é amplamente usada por muitos frameworks de desenvolvimento, como [Bootstrap 2015] e templates para desenvolvimento responsivo Elementos do HTML Os principais elementos do HTML5 empregados no design responsivo para a construção de leiaute são: a) article: destina-se a marcar um conteúdo completo e independente, como por exemplo, um post em um fórum; b) section: serve para marcar um conteúdo genérico em um documento, como por exemplo, os capítulos de uma matéria; c) header: empregado a marcar conteúdos introdutórios ao conteúdo do seu elemento ancestral mais próximo, normalmente possui um ou mais elementos de cabeçalho (h1-h6); d) footer: usado para marcar conteúdo com informações sobre o seu elemento ancestral mais próximo como: article, section, aside e nav. Normalmente é posicionado no final da seção; e) aside: destina-se a marcar conteúdos que sejam relacionados e separados do conteúdo posicionado junto ou envolta dele mesmo; f) nav: usado para marcar seções de navegação como listas de links; g) figure e figcaption: marca uma unidade de conteúdo, opcionalmente contendo um rótulo ou uma legenda marcados com o elemento figcaption; h) main: marca o conteúdo principal de uma página, usado para fins de acessibilidade. Deve ter apenas um elemento main na página. 3. CSS Segundo [Silva 2014] folhas de estilo em cascata é um mecanismo simples para adicionar estilos, por exemplo: fontes, cores, espaçamentos, etc. aos documentos web. Uma estrutura CSS pode ser vista na Figura 1.

5 Figura 1. Estrutura da regra CSS Uma regra CSS é composta de duas partes: um seletor e uma declaração. A declaração CSS é composta de uma propriedade seguida por um valor e separado dele por dois-pontos :. Uma regra CSS pode conter mais de uma declaração CSS as quais devem ser separadas por ponto e vírgula ; conforme exibo no Quadro 2. p{ color: red; font-family: sans-serif; width: 50%; } 3.1. Medidas CSS Quadro 2. Regra CSS para um elemento HTML de parágrafo <p> [Silva 2014] descreve que a maioria dos sites até pouco tempo atrás usavam largura fixa com o uso da unidade de media pixel, o que é inviável para construção de leiautes responsivos. Atualmente com os leiautes fluídos passou-se a usar as medidas CSS relativas, porcentagem e em. A unidade de medida porcentagem define a dimensão de um elemento como uma porcentagem da dimensão do seu elemento pai. Um box tem sua largura inicial (width) definida com o valor auto, que por padrão é a largura da viewport. Quando a janela de um navegador é redimensionada, a largura da viewport também é, e em consequência a largura auto do box é igual a da viewport. Assim um box com width: 50% que seja filho de um container com width: 200px tem sua largura igual a 50% de 200px = 100px. A unidade de medida CSS relativa em, se baseia no tamanho da fonte (fontsize) do elemento onde estiver sendo declarado. A declaração do Quadro 3 mostra a aplicação de uma media em pixel para a fonte de um elemento div com a classe pai e em seguida a aplicação da unidade de medida CSS em para uma classe chamada filho. div.pai{ font-size: 10px; }.filho{ font-size: 3em; } Quadro 3. Regras CSS com uso da medida em O Quadro 4 exibe código HTML usando as regras CSS acima. A linha destacada em amarelo usa a classe filho que está definida como 3em, ou seja, três vezes maior do que a fonte de seu elemento ancestral (div com a classe pai) que está definido com 10 pixels. Isso significa que 1em = 10px nesse exemplo. <div class="pai"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> <span class="exemplo">quisque imperdiet rutrum ipsum.</span><br> </div> Quadro 4. Código HTML usando a classe pai e filho com a unidade de medida CSS em

6 Conforme a [W3C 2015a] a propriedade CSS font-size é transmitida por herança e os elementos de uma página são descendentes do elemento body. Caso um elemento não tenha essa propriedade definida ou não esteja definida em um de seus elementos ancestrais, herdará o valor do elemento body. Embora não esteja na especificação, os navegadores foram unanimes em adotar 16 pixels para a propriedade font-size o que corresponde a 1em = 16px. Isso deve ser considerado no desenvolvimento de um leiaute responsivo para evitar problemas com o tamanho da fonte. 4. Media Queries Com as CSS3 foi estendido o mecanismo destinado a servir folhas de estilos dependentes de mídia e criaram um conceito totalmente novo para essa funcionalidade, denominado media queries. O mecanismo de media query consulta à mídia onde vai ser aplicada e identificada as suas características, como o tipo da tela e tamanho. A especificação da [W3C 2015b] define media query como sendo uma sentença formada por um tipo de mídia e zero ou mais expressões destinadas a verificar as condições de ocorrência de uma determinada característica naquele tipo de mídia. Uma media query é uma expressão lógica que retorna os valores true ou false se a característica ou as características de mídia expressas em uma media query forem características da mídia na qual a aplicação está rodando, ou seja, se todas as condições da media query forem verdadeiras, então a media query retornará true e a folha de estilo específica será aplicada ao documento. No Quadro 5, a media query retornará true e será aplicada (fundo do documento vermelho) caso o documento tiver uma tela com largura mínima de 480 screen and (min-width: 480px){ body{ background: red; }} Operador and only not Quadro 5. Exemplo de uso de media query A Tabela 2 mostra os operadores media queries especificados. Tabela 2. Operadores media query Descrição Operador de concatenação retorna true se as condições à esquerda e à direita do operador forem ambas verdadeiras. Palavra-chave usada para esconder folhas de estilos de navegadores antigos que não suportam media query. Operador de negação. Retorna true se a condição não for satisfeita. Na sintaxe para media query é obrigatório definir a media, enquanto o operador e a expressão são facultativos, e quando usados podem ser declarados em cadeia (dois ou mais), conforme exemplos do Quadro screen and (min-width: 400px) and (max-width: only print and (min-width: 25cm) and (color){...} Quadro 6. Exemplos de media query

7 4.1. Mobile First O termo mobile first surgiu a partir de um artigo publicado por [Wroblewski 2009] com o título Mobile First. Neste artigo o autor defende a necessidade de começar o leiaute de um projeto web a partir de sua apresentação em dispositivos móveis e a partir daí o leiaute para desktop. Ao iniciar primeiro pela versão mobile, é dada maior importância no que realmente é indispensável para os usuários. Assim é evitada a remoção de itens necessários e a inclusão de elementos supérfluos. A aplicação dessa técnica não só melhora a qualidade dos sites acessados por dispositivos móveis, como quando acessado pelo desktop. Porque se a equipe mantiver o mesmo foco e as mesmas prioridades, o resultado será uma solução desktop mais simples e com objetivos claros Breakpoints [Klein and Gubic 2014] descreve que criar um breakpoint em design responsivo significa estabelecer um tratamento para um ponto de quebra no leiaute de uma página de forma que ela se readapte a uma nova media da janela, ou seja, uma nova medida da viewport. Para exemplificar, digamos que para larguras da janela do navegador até 300px, a cor de fundo de uma página deva ser vermelha (red), entre 300px e 900px, a cor deverá ser verde (green), e acima de 900px, azul (blue). Para solucionar o problema servimos uma folha de estilo inicial para dispositivos móveis (mobile first) e media queries para navegadores de dispositivos maiores. O Quadro 7 demonstra o CSS para solucionar esse exemplo. body{ background: red; } /* mobile first screen and (min-width: 300px){ /* viewport com largura maior que 300px*/ body{ background: green; } screen and (min-width: 900px){ /* viewport com largura maior que 900px*/ body{ background: blue; } } Quadro 7. Exemplo prático do uso de media query É possível notar que para dispositivos de viewport com largura maior do que 900px as duas regras de media query do Quadro 7 se aplicam, pois viewpor maior que 900px também é maior que 300px. Assim as duas regras entram em conflito e vence a que for mais especifica, e em caso de empate, o conflito será resolvido pelo efeito cascata, ou seja, vence a regra declarada por último. 5. Imagens flexíveis Conforme explica [Silva 2014], é muito fácil criar uma imagem flexível para um projeto de design responsivo, basta usar um código CSS conforme exibido no Quadro 8 que ela se ajustará de forma adequada ao dispositivo em que for visualizada. Porém apenas isso está longe de ser a solução ideal. img{ max-width: 100%; } Quadro 8. Exemplo de uma definição para imagem flexível

8 Uma página com uma imagem de 1 megabyte apresentada em um desktop, não deveria ser apresentada com o mesmo peso para um dispositivo móvel. Imagens flexíveis não significa apenas ajustar as dimensões das imagens de forma que se adaptem adequadamente aos diferentes dispositivos, mas elas devem ser oferecidas mais leves para os dispositivos móveis a fim de serem carregadas mais rápidas e consumirem menos banda de internet nestes dispositivos. Uma opção para diminuir o peso das imagens é reduzir a sua resolução ou a quantidade de pixels em uma determinada área da imagem, normalmente é adotado pixels por polegada. Outra técnica conhecida como art direction (direção de arte) consiste em servir diferentes versões de uma mesma imagem. A imagem é cortada permanecendo a porção da imagem que melhor transmite a informação que se quer mostrar em diferentes dimensões de acordo com as características do dispositivo do usuário. Assim em um desktop serve-se a imagem de maior peso e para smartphone a de menor peso de carregamento. O HTML5 possui um novo atributo para o elemento img denominado srcset que permite oferecer um conjunto de imagens em vez de apenas uma. O navegador escolherá apenas a imagem que for mais apropriada para ser exibida na largura da viewport ou a densidade em pixels da tela do dispositivo do usuário, otimizando dessa forma o carregamento da imagem e sua exibição. Conforme especificação da [W3C 2015c] o valor do atributo srcset deve ser uma lista de image candidate strings separadas por vírgula declaradas na seguinte ordem: a) URL apontando para uma imagem; b) número inteiro não negativo descrevendo a largura em pixel seguido da letra w; c) número de ponto flutuante maior do que zero descrevendo a largura em pixel seguido da letra x. O Quadro 9 apresenta um exemplo do uso do atributo srcset.. <img alt="descrição da imagem" src="imagem.jpeg" srcset="imagem-hd.jpeg 2x, imagem-phone.jpeg 100w, imagem-phone-hd.jpeg 100w 2x"> Quadro 9. Exemplo do uso do atributo srcset O novo elemento picture do HTML5 também é um método de controle para servir imagens responsivas, sendo baseado em media query e suporte para um formato particular de imagem. O elemento picture possui como finalidade completar as funcionalidades do atributo srcset. O Quadro 10 mostra um exemplo do uso. <picture> <source media="(min-width: 45em)" srcset="large1.jpeg, large2.jpeg 2x"> <source srcset="small1.jpeg, small2.jpeg 2x"> </picture> Quadro 10. Exemplo de uso do elemento picture juntamente com os atributos media e srcset.

9 6. Mídias flexíveis Um dos tipos de mídia mais utilizadas na web são os vídeos. Uma das técnicas para adicionar um vídeo de forma responsiva consiste em criar um container para o vídeo cujas dimensões mantenham a mesma razão de aspecto (proporção da largura dividido pela altura) do vídeo, que normalmente é 16:9. Para criar um container responsivo sua largura e altura, propriedades CSS width e height respectivamente, devem ser declaradas em unidade de medida relativa, e para que se expanda e contraia com o redimensionamento da janela do navegador, devem ser declaradas em porcentagem. Ao declarar a propriedade CSS height em porcentagem, ela é calculada em relação à altura do elemento ancestral mais próximo que tenha altura declarada, porém esse comportamento é indesejado para tornar o vídeo responsivo. De acordo com o box model CSS, a propriedade padding de um container é computada como integrante das dimensões do box. Quando declarada em porcentagem, seu valor é calculado em relação à largura do próprio container, inclusive os valores definidos para padding-top e padding-bottom (dimensões verticais). Assim em vez de declarar uma altura para o container, se declara o padding-bottom em porcentagem e a altura do container será flexível. Considerando um vídeo com proporção de largura pela altura igual a 16:9. Dividindo 9 por 16 se obtêm a porcentagem da altura em relação à largura igual a 0,5625 que equivale a 56,25%. Esse é o valor a ser declarado para padding-bottom de um container responsivo para fazê-lo expandir e contrair mantendo constante a sua razão de aspecto em 16:9. Outra técnica é o uso do elemento video disponível no HTML5. A utilização desse elemento é muito mais simples do que a abordagem anterior, porém muitos fornecedores de vídeos esternos, como o YouTube por exemplo, exigem que a primeira técnica seja aplicada para tornar o leiaute responsivo. A simples declaração de 100% para a largura do elemento vídeo o torna responsivo, semelhante como para as imagens. 7. Acessibilidade na web com design responsivo Acessibilidade na web possibilita que pessoas com certas difiências, como a falta de visão, consigam acessar o conteúdo de uma página com a ajuda de um software leitor de tela. Porém uma página com boa acessibilidade beneficia também idosos, pessoas com deficiências temporárias ou com pouca habilidade com o computador e os usuários de dispositivos móveis. A [W3C 2015d] publica através da Web Accessibility Initiative (WAI) diretrizes de acessibilidade que informam como tornar o site mais acessível para pessoas com deficiências. Essas diretrizes de acessibilidade são recomendações da W3C para tornar a web mais acessível, inclusive para dispositivos móveis. Pois considera o princípio de uma web acessível em qualquer dispositivo. Abaixo são listadas algumas das principais recomendações para desenvolver conteúdo acessível:

10 a) não utilizar somente cores para transmitir informações: utilizar um rótulo informativo junto com a cor indicativa; b) tornar as imagens acessíveis: preencher o atributo alt com um texto adequado; c) definir campos input com tipo adequado para formulários e associar a cada um deles um elemento label; d) não disponibilizar atividades que só funcionem com o uso do mouse, pois ele pode não estar presente; e) identificar cada página web informando o título da página de forma adequada através do elemento title; f) Declarar o idioma da página no elemento html e em qualquer elemento que possua conteúdo em outro idioma utilizando o atributo lang; g) Para links que abrem uma página em uma nova janela, deve ter algum indicativo que avise isso ao usuário; h) Deve ser evitado o recarregamento automático da página; i) Respeitar a semântica do HTML. O HTML5 trouxe vários novos elementos para melhorar a semântica de uma página como header, footer, section, nav, article, aside, etc; j) Utilizar landmarks como o atributo role para marcar regiões de acesso rápido; k) Simplificar as tabelas apenas com dados tabulares; l) Submeter as páginas para validadores HTML da W3C; m) Testar o site com alguns softwares de tecnologias assistivas como softwares de leitores de tela. 8. PhoneGap Conforme [PhoneGap 2015], o PhoneGap é uma tecnologia de código fonte aberto e grátis, desenvolvida a partir do projeto Apache Cordova, que permite desenvolver aplicativos web que rodam na maioria dos dispositivos móveis, como iphone e Androide. Esses aplicativos podem rodar tanto on-line como off-line e acessar certos recursos do dispositivo em que for executado. Para ser compatível com a plataforma de cada dispositivo móvel, as aplicações são desenvolvidas utilizando HTML5, CSS3 e JavaScript. A interface é baseada em telas HTML e CSS, e sua lógica de programação e acesso a recursos do dispositivo é através do JavaScript. Isso significa que a aplicação não é verdadeiramente nativa para o dispositivo, porque é renderizada em visões web em vez dos componentes de interface de usuário nativos do framework do dispositivo e também não é uma aplicação puramente web, porque é empacotada como aplicação para distribuição e possui acesso a framework nativa do dispositivo. Para problemas de compatibilidade com dispositivos móveis que possuem navegadores web mais antigos, o PhoneGap embarca uma versão de HTML5 e uma WebView (janela especial de navegação). Também possui suporte a extensibilidade, ou

11 seja, suporta plug-ins para oferecer mais funcionalidades de acesso nativo aos recursos dos dispositivos aos desenvolvedores de aplicativos. 9. jquery Mobile Conforme [JQurey Mobile 2015] a framework jquery Mobile é baseada no jquery (framework amplamente utilizada para simplificar a programação JavaScript) para desenvolver interface de usuário sensível ao toque que roda nos mais populares smartphones, tablets, e-readers e desktop. Foi desenvolvida com acessibilidade e acesso universal em mente. Segue os princípios de otimização progressiva e web design responsivo. Desde seu início, o jquery Mobile foi desenhado para trabalhar dentro de um contexto de web design responsivo. Seus documentos e formulários tem uma série de elementos responsivos. Todos os seus widgets são construídos para serem 100% flexíveis em largura para caberem facilmente dentro de qualquer sistema de leiaute responsivo que se queira construir. 10. Conclusão Desenvolver um site ou uma aplicação web utilizando a abordagem de web design responsivo, traz inúmeros benefícios tanto para acessibilidade quanto para a organização do próprio projeto e dos conteúdos das páginas. Fica evidente que informações importantes não podem ser removidas como tampouco informações desnecessárias devam ser mantidas. Inúmeras tecnologias e frameworks estão disponíveis para auxiliar na construção do leiaute responsivo, como o PhoneGap e o jquery Mobile. Porém os componentes principais continuam sendo o HTML5 o CSS3 e o JavaScript. Não existe uma formulação específica para desenvolver um projeto responsivo, além de várias recomendações, como as da W3C de acessibilidade. Iniciar utilizando a abordagem mobile first e depois seguir para o desktop parece ser uma boa estratégia. Também temos que convir que com a explosão dos dispositivos mobiles, não é mais conveniente desenvolver uma aplicação web sem aplicar a abordagem de design responsivo. Conforme anunciado por [Makino et al. 2015], o Google a partir do dia 21 de abril de 2015 ajusta seus mecanismos de busca para favorecer nos resultados os sites que estiverem otimizados para o dispositivo que o usuário estiver usando, isso impactará consideravelmente os resultados do Google e ajudará os usuários a ter uma melhor experiência de uso dos sites resultantes. Isso praticamente obriga os sites que ainda não se adequaram a abordagem responsiva, que o façam o quanto antes, caso queiram manter-se competitivos e acessados pelos usuários que utilizam dispositivos móveis. Referências Bootstrap (2015). CSS Bootstrap. Disponível em: < Acesso em: 27 jun Gallagher, N. and Neal, J. (2015). Normalize.css: Make browsers render all elements more consistently. Disponível em: < Acesso em: 27 jun

12 JQurey Mobile (2015). jquery Mobile. Disponível em: < Acesso em: 27 jun Kimura, M. H., Kemczinski, A., Gasparini, I., et al. (2012). Aumentando a Flexibilidade de um Sistema e-learning Adaptativo através da Abordagem Responsive Webdesign. Aumentando a Flexibilidade de um Sistema e-learning Adaptativo através da Abordagem Responsive Webdesign, v. 7, n. 4, p Klein, D. and Gubic, A. (2014). Responsive website design for higher education utilizing mobile centric features. v. 2, n. 1, p Lestari, D. M., Hardianto, D. and Hidayanto, A. N. (2014). Analysis of user experience quality on responsive web design from its informative perspective. Interntional Journal of Software Engineering and its Applications. Science and Engineering Research Support Society, v. 8, n. 5, p Makino, T., Jung, C. and Phan, D. (2015). Official Google Webmaster Central Blog: Finding more mobile-friendly search results. Disponível em: < Acesso em: 27 jun Mayer, E. (2015). CSS Tools: Reset CSS. Disponível em: < Acesso em: 27 jun PhoneGap (2015). PhoneGap. Disponível em: < Acesso em: 27 jun Silva, M. S. (2014). Web Design Responsivo. Sindh, K. (2012). Smart Phones Application development using HTML5 and related technologies: A tradeoff between cost and quality. v. 9, n. 3, p Subić, N., Krunić, T. and Gemović, B. (2014). Responsive web design Are we ready for the new age? v. 2, n. 1, p W3C (2015a). CSS Fonts Module Level 3. Disponível em: < Acesso em: 27 jun W3C (2015b). Media Queries Level 4. Disponível em: < Acesso em: 27 jun W3C (2015c). srcset attribute. Disponível em: < Acesso em: 27 jun W3C (2015d). Web Accessibility Initiative (WAI). Disponível em: < Acesso em: 27 jun Wroblewski, L. (2009). Mobile First. Disponível em: < Acesso em: 27 jun