Abordagem web design responsivo para desenvolver
aplicações web que se adaptam a qualquer dispositivo
Márcio Koch1, Isabela Gasparini2
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
[email protected], [email protected]
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.
[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
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
1 a 10.000 pixels ou
device-width
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.
height
1 a 10.000 pixels ou
device-height
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.
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.
2.2. 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.
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%;
}
Quadro 2. Regra CSS para um elemento HTML de parágrafo <p>
3.1. Medidas CSS
[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
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 pixels.
@media screen and (min-width: 480px){ body{ background: red; }}
Quadro 5. Exemplo de uso de media query
A Tabela 2 mostra os operadores media queries especificados.
Tabela 2. Operadores media query
Operador
Descrição
and
Operador de concatenação retorna true se as condições à esquerda e à direita do
operador forem ambas verdadeiras.
only
Palavra-chave usada para esconder folhas de estilos de navegadores antigos que
não suportam media query.
not
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 6.
@media screen and (min-width: 400px) and (max-width: 700px){...}
@media only print and (min-width: 25cm) and (color){...}
Quadro 6. Exemplos de media query
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.
4.2. 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 */
@media screen and (min-width: 300px){ /* viewport com largura maior que 300px*/
body{ background: green; }
}
@media 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
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.
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:
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
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: <http://getbootstrap.com/css>.
Acesso em: 27 jun. 2015.
Gallagher, N. and Neal, J. (2015). Normalize.css: Make browsers render all elements
more consistently. Disponível em: <http://necolas.github.io/normalize.css>. Acesso
em: 27 jun. 2015.
JQurey Mobile (2015). jQuery Mobile. Disponível em: <https://jquerymobile.com>.
Acesso em: 27 jun. 2015.
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. 203–210.
Klein, D. and Gubic, A. (2014). Responsive website design for higher education
utilizing mobile centric features. v. 2, n. 1, p. 69–81.
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. 53–62.
Makino, T., Jung, C. and Phan, D. (2015). Official Google Webmaster Central Blog:
Finding
more
mobile-friendly
search
results.
Disponível
em:
<http://googlewebmastercentral.blogspot.com.br/2015/02/finding-more-mobilefriendly-search.html>. Acesso em: 27 jun. 2015.
Mayer,
E.
(2015).
CSS
Tools:
Reset
CSS.
Disponível
<http://meyerweb.com/eric/tools/css/reset>. Acesso em: 27 jun. 2015
em:
PhoneGap (2015). PhoneGap. Disponível em: <http://phonegap.com>. Acesso em: 27
jun. 2015.
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. 455–461.
Subić, N., Krunić, T. and Gemović, B. (2014). Responsive web design–Are we ready for
the new age? v. 2, n. 1, p. 93–103.
W3C
(2015a).
CSS
Fonts
Module
Level
3.
Disponível
em:
<http://www.w3.org/TR/css3-fonts/#propdef-font-size>. Acesso em: 27 jun. 2015.
W3C
(2015b).
Media
Queries
Level
4.
Disponível
<http://www.w3.org/TR/mediaqueries-4>. Acesso em: 27 jun. 2015.
em:
W3C
(2015c).
srcset
attribute.
Disponível
em:
<http://www.w3.org/html/wg/drafts/html/master/semantics.html#attr-img-srcset>.
Acesso em: 27 jun. 2015.
W3C
(2015d).
Web Accessibility Initiative (WAI).
<http://www.w3.org/WAI>. Acesso em: 27 jun. 2015.
Disponível
Wroblewski,
L.
(2009).
Mobile
First.
Disponível
<http://www.lukew.com/ff/entry.asp?933>. Acesso em: 27 jun. 2015.
em:
em: