Web Design Responsivo no desenvolvimento de aplicações multi-dispositivos.

Transcrição

1 Web Design Responsivo no desenvolvimento de aplicações multi-dispositivos. Saulo Campos Nunes de Souza¹, Wagner Igarashi¹ ¹Departamento de Informática - Univesidade Estadual de Maringá (UEM) - Av. Colombo, Bloco C56 - Maringá - PR - Brasil {scnsouza@gmail.com, wigarash@gmail.com} Abstract. The use of websites through mobile devices has become increasingly common in Brazilians daily life. With the growing number of devices on the market realizes the difficulty in adjusting the website viewing in different screen sizes and resolutions, which makes it a exhausting and limited navigation. The use of new technological concepts in web development makes it possible to deliver an enjoyable navigation without consuming too many resources on the device or on the server where the website is hosted and with easier maintenance compared to applications installed on the device. Given the current importance of responsive web design against the context of the various types of information visualization devices such as smartphones, tablets, computers; this paper aims to conduct a systematic review of responsive web design, seeking to verify the current context of publication and direction for future research. As a result it was found that the number of publications began to grow substantially in the last two year, indicating that there is still room for growth in this area of research. Keywords. Responsive web design, systematic review, mobile devices, web development. Resumo. A utilização de websites por meio de dispositivos móveis tem se tornado cada vez mais comum no dia a dia dos brasileiros. Com o crescimento do número de dispositivos no mercado nota-se a dificuldade em se adequar a visualização do site nos diversos tamanhos de tela e resoluções, o que torna a navegação desgastante e limitada. A utilização de novos conceitos tecnológicos no desenvolvimento web torna possível disponibilizar uma navegação agradável sem consumir muitos recursos do dispositivo ou do servidor em que o website está hospedado e com facilidade de manutenção maior que comparado a aplicações instaladas no dispositivo. Dada a importância atual do responsive web design frente ao contexto dos diversos tipos de dispositivos de visualização de informações como smartphones, tablets, computadores; o presente trabalho tem como objetivo realizar uma revisão sistemática sobre responsive web design, buscando verificar o contexto atual de publicação e direcionamento para futuras pesquisas. Como resultado verificou-se que a quantidade de publicações praticamente começou a crescer nos últimos dois anos, indicando que ainda há espaço para o crescimento de pesquisas nesta área. Palavras-chave. Responsive web design, revisão sistemática, dispositivos móveis, desenvolvimento web. 1

2 1. Introdução A utilização de dispositivos móveis para acesso a internet tem crescido consideravelmente. Segundo pesquisa do Cetic.br [3], em 2012 houve crescimento da porcentagem de usuários de internet via dispositivos móveis, saltando de 18% para 24%, considerando que no Brasil existem 139,8 milhões de usuários de celular. Ainda segundo os dados desta pesquisa 40% dos domicílios brasileiros possuem acesso a Internet. Com a asensão da utilização de Internet, sobretudo em dispositivos móveis nos deparamos com diversos problemas de cunho técnico, tais como a dificuldade na navegação e o redimensionamento do website para resoluções menores, o que acaba gerando desconforto aos utlizadores e a eventual necessidade de desenvolvimento de aplicações específicas para os diversos tipos de sistema operacional dos dispositivos, o que dificulta a manutenção visto a necessidade de se haver uma aplicação para cada dispositivo. A navegação de websites por dispositivos móveis geralmente se vê prejudicada graças a dimensão do visor dos dispositivos, que são bem inferiores aos monitores nos quais os sites estão acostumados a serem apresentados. Deste modo, se faz necessária uma adaptação deste website a dimensões menores, de modo que não prejudique a navegação e ainda facilite a visualização do conteúdo publicado. Ao invés de desenvolver e gerenciar o conteúdo de vários websites, a utilização de sites responsivos gera uma abordagem unificada para gerenciamento de conteúdo, porque eles têm apenas um site para gerenciar, ao invés de uma versão mobile e outra tradicional [7]. Não só em questão de manutenção e gerenciamento de conteúdo, mas também sites responsivos são mais fáceis para os consumidores encontrar do que sites tradicionais ou móveis, porque eles têm valor mais alto no ranking de motores de busca. O mais famoso website de busca da atualidade, o Google, recomenda a utilização de responsive web design e ainda afirma que além de economizar recursos, sua utilização facilita e aumenta a indexação dos conteúdos do website.[8]

3 Sendo assim, este artigo tem como objetivo verificar, por meio de uma revisão sistemática, o que vem sendo empregado sobre essa tecnologia promissora no que diz respeito a inter-relação entre web design e dispositivos móveis. 2. Elementos Teóricos 2.1. Responsive Web Design O termo "Responsive Web Design" (RWD) foi utilizado e explicado pela primeira vez em 2010 por Ethan Marcotte em seu artigo de mesmo nome publicado no site A List Apart.[1]. "Responsive web design é a abordagem que sugere que o design e desenvolvimento devem responder ao comportamento do usuário e do ambiente baseando-se no tamanho da tela, plataforma e orientação" [4]. Em outras palavras é o desenvolvimento de uma página web que altera a forma como apresenta suas informações conforme as configurações do dispositivo em que está sendo visualizada. Na Figura é mostrado um exemplo de layout responsivo apresentado em diversos dispositivos como: celular, tablet (posição vertical e horizontal) e notebook. Figura 1 - Exemplo de layout responsivo em diferentes resoluções para diferentes dispositivos [12]. Para tornar possível este tipo de desenvolvimento, três tecnologias foram essenciais, e são conhecidas por "Trinca tecnológica do design responsivo" e são elas: Layout Fluído - este conceito deve vir desde a concepção do projeto onde primase pela não utilização de medidas fixas no projeto, fazendo com que haja uma adaptação "natural" e automática do que se apresenta na tela [2].

4 Imagens e recursos flexíveis - imagens e outros recursos (assets) serão redimensionados e movidos de acordo com os containers (delimitadores de recursos) em que estão posicionados dependendo do tamanho da tela. Também é uma opção utilizar múltiplas versões das imagens de acordo com a resolução da tela em que serão apresentadas [4]. Media Queries - Este conceito torna possível ocultar, exibir e reposicionar elementos e interações conforme a resolução atual que esteja sendo usada no momento da visitação[2]. A partir dessa trinca tecnológica é possível criar designs que atenderão de formas diferentes a visualização em smartphones, tablets ou monitores de alta resolução. 2.2 Revisão Sistemática Uma revisão sistemática da literatura é um meio de identificar, avaliar e interpretar todas as pesquisas disponíveis relevantes para uma questão de pesquisa específica, área temática ou fenômeno de interesse [13]. As razões mais comuns para realizar uma revisão sistemática são: Resumir a evidência existente sobre um tratamento ou tecnologia. Por exemplo, para resumir a evidência empírica dos benefícios e limitações de um determinado método ágil; Para identificar eventuais lacunas na pesquisa atual, a fim de sugerir áreas para maiores investigações; Para fornecer uma estrutura a fim de posicionar adequadamente as novas atividades de pesquisa [13]. Uma revisão sistemática sintetiza o trabalho já existente de acordo com uma estratégia de busca predefinida. A estratégia de busca deve preservar a integridade da pesquisa a ser avaliada [13]. 3. Realização da Revisão Sistemática Para atingir o objetivo de verificar o contexto atual de publicação e direcionamento para futuras pesquisas envolvendo o tema responsive web design foi realizada uma revisão sistemática para responder a seguinte pergunta: o que vem sendo

5 estudado sobre o tema responsive web design? Devido a sua relevância no contexto computacional, foram realizadas pesquisas em bases de artigos consagradas na área de tecnologia da informação, tanto internacionais como a base do Institute of Electrical and Electronics Engineers (IEEE) [17] e a base da Association for Computing Machinery (ACM) [18], quanto nacionais como a biblioteca digital da Sociedade Brasileira de Computação (SBC) [19]. As pesquisas realizadas nas respectivas bases continham o termo Responsive Web Design envolvido por aspas (" "), o que força a busca ao texto completo no título ou no conteúdo dos artigos. Como critério de inclusão foi avaliada a relevância do artigo em relação ao tema, onde foi realizada a leitura e análise do artigo quanto a sua proximidade ao tema, buscando a maior aplicabilidade do tema ao contexto do artigo. Na busca as bases da IEEE e ACM houveram ocorrências, contudo a consulta a base da SBC não trouxe resultado. Sendo assim a base SBC foi descartada da lista de bases consultadas. Devido ao número de resultados obtidos nas buscas realizadas nas bases selecionados não ter sido grande, foi incluido como fonte de artigos o Google Acadêmico [20]. A utilização do Google Acadêmico possibilitou encontrar um número maior de resultados a pesquisa, contudo devido ao buscador incluir referências em livros e artigos de outras áreas, acabou tornando o processo de busca a artigos relevantes ao contexto mais complexo e trabalhoso. Sobre os resultados obtidos nas buscas foram realizadas as análises quantitativa, que tem por objetivo interpretar os dados coletados de modo a prover indicadores, e análise vertical, que tem como objetivo descrever as principais características dos artigos encontrados. As duas próximas seções exibem os resultados obtidos pelas consultas bem como a análise destes resultados Análise Quantitativa Este tipo de análise utiliza os resultados das buscas para prover indicadores relevantes ao objetivo, afim de construir fatos sobre os dados coletados.

6 Nesta etapa da pesquisa foram analisados 11 artigos, selecionados de acordo com os critérios de inclusão da revisão sistemática e foco na pergunta de pesquisa que guia o estudo, o que vem sendo estudado sobre o tema responsive web design?. Utilizando o conteúdo obtido foi possível construir as Tabelas 1 e 2, que relacionam os autores a dados relevantes com ano de publicação, país, periódico e instituição de publicação. Tabela 1 - Relação de autores por ano e local. Autor Ano País Marcotte, E EUA Knight, K Alemanha Gardner, B. S EUA Alston, P Reino Unido Young, J Reino Unido Mohorovicic, S Croacia Nebeling, M. Speicher, M. Norrie, M. C Suíça Johansen, R. D. Britto, T. C. P. Cusin, C. A Brasil Seipp, K. Devlin, K Inglaterra Tzoc, E EUA Schneider, R. McCown, F EUA Tabela 2 - Relação de autores por periódicos e instituições de publicação. Autor Periódico Instituição Marcotte, E. A List Apart Magazine A List Apart Knight, K Smashing Magazine Smashing Magazine Gardner, B. S. Sigma Magazine Noblis Alston, P. Proceedings of the 13th ACM annual conference on Information technology education Young, J. Net Magazine Creative Bloq Mohorovicic, S. Nebeling, M. Speicher, M. 36th International Convention on Information & Communication Proceedings of the 5th ACM SIGCHI symposium Technology Electronics & Microelectronics (MIPRO) ACM

7 Norrie, M. C. on Engineering interactive computing systems Johansen, R. D. Britto, T. Proceedings of the 22nd International World Wide C. P. Cusin, C. A. international conference on Web Conferences Steering World Wide Web Committee companion Seipp, K. Devlin, K. CHI '13 Extended Abstracts ACM on Human Factors in Computing Systems Tzoc, E. D-Lib Magazine Digital Library Research Schneider, R. McCown, F. Proceedings of the 13th ACM/IEEE-CS joint conference on Digital libraries ACM A partir dos dados observados nas Tabelas 1 e 2, verifica-se que o primeiro autor a publicar sobre o tema é Marcotte no ano de 2010, confirmando que esta área de pesquisa é recente. Nota-se que em 2013 houve um crescimento em relação à pesquisas na área e que a maior parte destas foram publicadas em periódicos da Association for Computing Machinery. É evidenciado pelos resultados obtidos que um dos principais tipos de periódicos utilizados em publicações deste tema é revista, devido ao grande interesse sobre essa tecnologia fora do meio acadêmico. Também observa-se a diversidade de países realizando pesquisas nesta área, mesmo com a dominância de autores americanos mas ressaltando a participação de autores brasileiros nas publicações internacionais Análise Vertical Na realização desta pesquisa, verificou-se a existência de diversas informações na internet sobre responsive web design, seja em artigos não acadêmicos, em sites e blogs de desenvolvimento, além da menção de websites e frameworks que já implementam essa tecnologia, tal qual o famoso Bootstrap do Twitter. [11]. Contudo quanto a artigos acadêmicos relativos a este tema, talvez por ser recente, não é tão abordado. Nas bases consultadas, IEEE e ACM, foram encontrados poucos artigos

8 acadêmicos que abordam o assunto. Com base neste cenário, foram lidos e selecionados 4 artigos cujo foco era a tecnologia RWD, os quais são descritos na sequência 1. No artigo intitulado Implementing Responsive Web Design for Enhanced Web, Mohorovici (2013) aborda os conceitos de responsive web design, exibindo projeções do mercado de dispositivos de acordo com suas categorias, desde 2012 até Neste periodo de 5 anos é possível notar um grande crescimento em vendas de smartphones e tablets e uma leve diminuição na venda de notebooks. O artigo segue frisando os ganhos da abordagem "Mobile-Friendly" para criação de websites destacando a os ganhos do desenvolvimento centralizado sobre multiplas versões do site e contextualizando a tecnologia e seus principais benefícios categorizando em benefícios para webmasters, para desenvolvedores e usuários finais. O autor também cita os pontos falhos e potenciais problemas tais como incompatibilidade com media queries de alguns browsers e dispositivos, problemas relacionados a imagens responsivas e dificuldade em resolvê-los e o alto tempo de carga do website em dispositivos móveis. Como conclusão o autor retoma as vantagens sobre a utilização de responsive web design enfatizando sua importância sobretudo no fato de ser uma tecnologia preparada para futuros dispositivos, mas mantém cautela explicando que muito precisa ser feito nas questões de padronização e boas práticas na tecnologia, apesar de existirem diversos exemplos de sucesso na implementação de RWD[4]. Já o artigo CSS browser selector plus: a JavaScript library to support crossbrowser responsive design, Johansen, Britto e Cusin (2013), teve como objetivo a proposição de uma solução para o problema de incompatibilidade dos navegadores com as media queries. Este artigo começa contextualizando o conceito de media query incorporado ao CSS3, exibindo suas principais características através de exemplos de queries. Em seguida o artigo passa a apontar pontos falhos das media queries tal qual o fato de não serem suportadas por navegadores legados e apresenta algumas bibliotecas que emulam a funcionalidade em navegadores que não suportam a tecnologia nativamente. 1 *O artigo de Ethan Marcotte não foi analisado a fundo na seção 3.1 devido ao conceito ter sido introduzido na seção 2.1

9 Em seguida o autor propõe como solução uma biblioteca javascript que tem por função obter as informações de orientação, largura mínima e máxima do dispositivo sem a utilização do CSS3, que pode ser incompatível com alguns browsers. São apresentados exemplos de utilização da biblioteca e os seus principais aspectos. Na conclusão o autor defende a solução proposta como sendo leve e de sintaxe simples, e defende que a alternativa proposta pode ser utilizada como substituta as media queries, ao contrário de outras soluções que pretendem emular o suporte às mesmas [6]. No artigo intitulado CrowdAdapt: Enabling Crowdsourced Web Page Adaptation for Individual Viewing Conditions and Preferences, os autores Nebeling e Speicher (2013), apresentam uma ferramenta de webdesign sensível ao contexto que auxilia os desenvolvedores na criação de layouts adaptativos específicos para condições e preferências individuais. A ideia central do CrowdAdapt é permitir que os usuários adaptem a interface para seu uso específico em um contexto onde o design original pode não ser suportado, como a exibição em navegadores em dispositivos móveis, por exemplo. Neste artigo é apresentado também um experimento realizado sob um site de notícias onde alternativas de layouts foram criadas pela "multidão" de leitores, informações sobre diferentes situações de visualização foram coletadas e avaliada a qualidade dos layouts criados em relação ao conforto para leitura e eficiência. A partir dos dados coletados foi possível obter informações sobre as preferências de visualização dos leitores, o que possibilita uma tomada de decisão mais acertiva na escolha do layout padrão do site. Na conclusão o autor sugere linhas de pesquisa futuras sobre o tema, tal qual a utilização de agrupamentos por perfis de usuário, de modo a incentivar o desenvolvimento de novas propostas nos moldes especificados no artigo [5]. O artigo The top responsive web design problems and how to avoid them, Young, J. (2012) traz a tona 8 dos principais problemas envolvendo a tecnologia e como evitá-los. Para a criação deste artigo foi realizada uma pesquisa entre designers sobre os problemas que eles encontravam na criação de sites totalmente responsivos. A partir dos dados relatados o autor criou a lista dos principais problemas e sugestões de como evitá-los. Os problemas citados vão desde explicar a tecnologia aos clientes até restrições técnicas em navegadores antigos, incluindo tempo de teste e custo, conversão

10 de sites antigos, tratamento de tabelas, imagens, navegação e a falta de uma fase de design estática. Para cada problema é oferecida uma solução, geralmente simples, que explora o potencial da tecnologia considerando as boas práticas de desenvolvimento web ou fornecendo alternativas plausíveis ao problema proposto. Na conclusão o autor resgata vantagens do responsive web design, reafirma que haverão problemas devido a ser uma tecnologia nova e que ainda necessita de maturidade, mas que é muito promissora para o desenvolvimento móvel. Complementando as informações apresentadas sobre os 4 artigos analisados, a Tabela 3 mostra uma síntese em relação aos artigos de outros autores encontrados na revisão, delineando o respectivo objetivo e uso de RWD. Tabela 3 - Relação de autores com o objetivo de seu artigo e a utilização de RWD. Autor Objetivo Uso do Responsive Web Design Marcotte, E. Apresentar o conceito Responsive Web Design ao Mundo. Este artigo introduziu o conceito, contextualizando e exibindo tecnicamente Knight, K. Gardner, B. S. Alston, P. Seipp, K. Devlin, K. Tzoc, E. Schneider, R. McCown, F. Apresentar um guia de utilização da tecnologia Responsive Web Design Apresentar a tecnologia do ponto de vista do usuário. Apresentar as experiências do autor em ensinar o desenvolvimento de aplicativos móveis. Apresentar uma maneira de melhorar a operação de um site com uma mão em um celular touchscreen. Apresentar uma interface para dispositivos moveis para a ferramenta D-Space Apresentar uma ferramenta para descoberta de websites suas características. Contextualiza e ensina técnicas para utilização do conceito por meio de imagens, trechos de código e dicas. Direciona o conceito à experiência do usuário, relacionando com os ganhos do usuário em relação a conforto e tempo de resposta da página. Uma das estratégias que o autor apresenta a seus alunos é o Responsive Web Design. Contextualiza o conceito, mesmo que propondo uma abordagem que não envolve-o diretamente. Considera a utilização do conceito para o desenvolvimento futuro da interface para a ferramenta. Contextualiza o conceito e considera-o em sua

11 móveis. proposta. A partir dos dados apresentados na Tabela 3, percebe-se que a maioria dos artigos encontrados, apesar de abordar o tema não o trata como objetivo principal, tendo-o como meio ou apenas como referência ao que visa alcançar. 4. Considerações Finais Dada a importância atual do tema Responsive Web Design frente ao contexto dos diversos tipos de dispositivos de visualização de informações como smartphones, tablets e o crescimento que a utilização destes dispositivos vem apresentando, sobretudo no Brasil, o presente estudo teve como objetivo realizar uma revisão sistemática sobre responsive web design, buscando verificar o contexto atual de publicação e direcionamento para futuras pesquisas. Como resultado verificou-se o que vem sendo pesquisado e publicado academicamente em bases como IEEE, ACM e da SBC a respeito da tecnologia RWD. Este artigo mostrou por meio das análises quantitativa e vertical que o tema possui uma tendência de crescimento, comparativamente a 2010, 2011 e 2012, devido ao fato de a maior parte dos artigos encontrados terem sido publicados no ano de A partir dos artigos analisados constata-se que apesar de uma tecnologia recente, o RWD vem contribuindo para a melhoria do desenvolvimento web para dispositivos móveis e justamente por ser recente, esta tecnologia oferece diversas possibilidades de pesquisa e certamente trará melhorias de interação e responsividade no que diz respeito a visualização de sites em dispositivos móveis. Referências Bibliográficas [1] Marcotte, E. Responsive web design. A List Apart Magazine. Issue nº 306, Maio [2] Zemel, T. Web Design Responsivo: Páginas adaptáveis para todos os dispositivos. 1 ed. São Paulo: Casa do Código, [3] CETIC.BR. TIC Domicílios e Usuários Fevereiro Disponível em: - Acesso em: 02/10/2013.

12 [4] Mohorovicic, S. Implementing Responsive Web Design for Enhanced Web Presence IEEE. 36th International Convention on Information & Communication Technology Electronics & Microelectronics (MIPRO), p , [5] Nebeling, M. Speicher, M. Norrie, M. C. CrowdAdapt: Enabling Crowdsourced Web Page Adaptation for Individual Viewing Conditions and Preferences. Proceedings of the 5th ACM SIGCHI symposium on Engineering interactive computing systems, p , [6] Johansen, R. D. Britto, T. C. P. Cusin, C. A. CSS browser selector plus: a JavaScript library to support cross-browser responsive design. Proceedings of the 22nd international conference on World Wide Web companion, p , [7] Gunelius, S. Why You Need to Prioritize Responsive Design Right Now, Disponível em: - Acesso em: 14/10/2013. [8] Google Developers. Building Smartphone-Optimized Websites, Disponível em: - Acesso em: 14/10/2013. [9] W3.ORG. Media Queries, W3C Recommendation. Junho Disponível em: - Acesso em: 28/03/2013. [10] Cashmore, P. Why 2013 is the year of responsive web design, Dezembro Acesso em: 16/07/2013. [11] Bootstrap. Bootstrap, Disponível em: - Acesso em: 27/10/2013 [12] Gomoby. Wireframes for each device, Disponível em: - Acesso em 28/10/2013 [13] Kitchenham, B. Guidelines for performing Systematic Literature Reviews in Software Engineering. Department of Computer Science - University of Durham, Durham, [14] Schneider, R. McCown, F. First steps in archiving the mobile web: automated discovery of mobile websites. Proceedings of the 13th ACM/IEEE-CS joint conference on Digital libraries, p , [15] Alston, P. Teaching mobile web application development: challenges faced and lessons learned. Proceedings of the 13th annual conference on Information technology education, p , [16] Seipp, K. Devlin, K. Enhancing one-handed website operation on touchscreen mobile phones. CHI '13 Extended Abstracts on Human Factors in Computing Systems, p , 2013.

13 [17] IEEE.ORG. Institute of Electrical and Electronics Engineers, Disponível em: - Acesso em: 02/10/2013. [18] ACM.ORG. Association for Computing Machinery, Disponível em: - Acesso em: 02/10/2013. [19] SBC.ORG.BR Sociedade Brasileira de Computação, Disponível em: - Acesso em: 02/10/2013. [20] Google. Google Acadêmico, Disponível em: - Acesso em: 05/10/2013. [21] Knight, K. Responsive Web Design: What It Is and How To Use It. Smashing Magazine, p Janeiro 2011 [22] Gardner, B. S. Responsive Web Design: Enriching the User Experience. Sigma Magazine, v 11, n 1, p Novembro, [23] Young, J. The top responsive web design problems and how to avoid them. Net Magazine, p Agosto 2012 [24] Tzoc, E. A Mobile Interface for DSpace. D-Lib Magazine, v19 n3/4, Março/Abril 2013.