Implemente Design Responsivo com jQuery Mobile e CSS3

Crie layouts de página da web que se adaptem à resolução da tela de cada usuário

Por si só, a estrutura do jQuery Mobile é uma ótima solução para criar rapidamente um website remoto acessível, baseado em marcação HTML5. Ao combiná-lo com o CSS3, tudo fica ainda mais interessante, pois isso possibilita a criação de layouts de páginas da web que respondam ao dispositivo do usuário com base na resolução da tela. Este artigo mostra como usar a estrutura do jQuery Mobile e as consultas de mídia do CSS3 para implementar um design responsivo em suas páginas da web.

Kris Hadlock, Web Developer/Designer, Studio Sedition

Photo of Kris HadlockKris Hadlock é desenvolvedor da web e designer por contrato desde 1996. Ele trabalhou em projetos para empresas como SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software e Fire Mountain Gems. Ele é autor de Ajax for Web Application Developers (Sams) e The ActionScript Migration Guide (New Riders), bem como um colunista de destaque e escritor de vários websites e revistas de design, incluindo Peachpit.com, InformIT.com e a revista Practical Web Design . Kris também é o fundador do www.studiosedition.com, um estúdio de desenvolvimento de software e design da web especializado na fusão de forma e função.



10/Ago/2012

A estrutura do jQuery Mobile é uma biblioteca JavaScript que pode ser usada para facilmente criar uma versão para dispositivo móvel de um website, convertendo as páginas da web existentes em websites e aplicativos fáceis e simples de usar com toque na tela. A estrutura do jQuery Mobile provavelmente vai mudar a forma de acessar e distribuir os aplicativos remotos em dispositivos móveis e tablets, permitindo que os usuários se conectem diretamente a aplicativos de toque por um navegador da web. Há outras opções para desenvolvimento remoto, mas a diferença da abordagem do jQuery Mobile é que ele se concentra em uma grande variedade de plataformas.

A adesão aos smartphones e tablets disparou e a estrutura do jQuery Mobile está ajudando os desenvolvedores a atender a demanda cada vez maior por experiências remotas na web. Proporcionar essas experiências na web requer um novo conjunto de habilidades por parte de desenvolvedores e designers. Em 2010, a Nielsen estimou que um em cada dois norte-americanos teria um smartphone (consulte Recursos para acessar o link do blog). Esse é um aumento imenso se comparado à taxa de apenas 1 em cada 10, em 2008. Em junho de 2011, a AMI-Partners estimou que a "adoção de tablets pelas empresas com 1 a 1.000 funcionários cresceria mil por cento até 2015". (Consulte Recursos para acessar o link da previsão completa). Com esses aumentos nos níveis de adesão, haverá uma forte demanda por desenvolvedores e designers que possam criar experiências remotas na web. A estrutura do jQuery Mobile é uma ótima solução para criar essas experiências, pois aumenta a velocidade em que os websites remotos podem ser produzidos e suporta uma grande variedade de plataformas móveis.

Pitfalls e soluções

A estrutura do jQuery Mobile é uma ótima solução para criar versões remotas ou para tablet de suas páginas da web, mas se baseia totalmente no conteúdo de um website para se vincular a determinados atributos de função de dados. Em raros casos, talvez não seja possível anexar esses atributos à sua marcação HTML, e pode ser exigida a criação de um website remoto separado. No entanto, este artigo mostra como, com um pouco de precaução e planejamento, é possível usar uma combinação da estrutura do jQuery Mobile com as consultas de mídia do Cascading Style Sheets versão 3 (CSS3) para criar um design responsivo e determinar como o layout reage ao dispositivo de um usuário. O propósito é criar um único website que possa responder, de modo dinâmico, aos dispositivos dos usuários exibindo um layout apropriado à resolução da tela deles.

Um design responsivo é aquele que responde ao dispositivo do usuário com base na resolução da tela. Isso significa que, se o usuário estiver visualizar uma página da web em um dispositivo móvel, tablet ou desktop, o design vai responder ao dispositivo de forma apropriada, exibido um layout específico com base na resolução da tela daquele dispositivo. Apesar de a estrutura do jQuery Mobile oferecer uma forma rápida e fácil de criar uma versão remota de um website, atualmente ela não oferece (e provavelmente nunca vai oferecer) uma forma inerente de responder, de modo dinâmico, ao dispositivo do usuário com base na resolução da tela. Na realidade, o website do jQuery Mobile declara que o recurso preexistente de Classe auxiliar de consultas de mídia foi descontinuado em beta e removido da versão mais recente. Os criadores da estrutura estão recomendando o uso das consultas de mídia do CSS3 em seu lugar. Através da combinação das consultas de mídia do CSS3 com a estrutura do jQuery Mobile, é possível conseguir um design responsivo que acomoda os ambientes remotos, de tablet e desktop. Na realidade, a documentação usa uma combinação da estrutura do jQuery Mobile e das consultas de mídia do CSS3 para obter seu próprio design responsivo. A documentação é bem semelhante ao exemplo que será criado neste artigo, na maneira em que reage às diferentes resoluções de tela.

O CSS incluiu medidas de codificação relacionadas ao dispositivo desde a versão 2.1, com o uso de tipos de mídia. Uma maneira comum de usar os tipos de mídia é definir uma folha de estilo separada para uma tela de computador desktop versus uma folha de estilo para uma versão impressa da página da web. O CSS3 avançou ainda mais no conceito das medidas de codificação relacionadas ao dispositivo com a introdução das consultas de mídia. As consultas de mídia podem ser usadas para determinar o tipo de dispositivo que está interagindo com a página da web, além de permitir que os desenvolvedores identifiquem suas as propriedades físicas. Nem é preciso dizer que as consultas de mídia se tornaram uma forma comum de fornecer folha de estilo específica por dispositivo, como é possível ver na Listagem 1, que fornece uma folha de estilo específica para dispositivos móveis e tablets com base na resolução da tela.

Listagem 1. Usando consultas de mídia para fornecer folhas de estilo específicas por dispositivo
<link 
  rel="stylesheet" 
  type="text/css" 
  media="screen and (max-device-width: 799px)" 
  href="mobile-tablet.css" />

O atributo de mídia neste exemplo contém um valor de tipo de mídia definido como screen e uma consulta de mídia (entre parênteses). Esta consulta de mídia específica verifica se a resolução da tela do dispositivo atual do usuário é menor ou igual a 799 px. Se for, esta folha de estilo móvel/de tablet é fornecida. Caso contrário, ela não é fornecida. É possível incluir vários links de folha de estilo em uma única página da web, cada uma com sua própria consulta de mídia para renderizar a sua página de modo diferente, com base na quantidade de resoluções desejada. Com base na resolução, o mais comum é possuir três folhas de estilo: —uma para dispositivos móveis e tablets, uma para monitores de desktop de baixa resolução e uma para os de alta resolução. Se fôssemos usar o código da Listagem 1, todos os dispositivos com resolução inferior a 799 px usariam esta folha de estilo, então, este é o exemplo ideal de como abordar os dispositivos móveis e tablets com uma folha de estilo e os computadores desktop com outra.

Também é possível usar várias consultas de mídia diretamente no CSS de uma única folha de estilo. A Listagem 2 mostra um exemplo de classe CSS usada para um conjunto de itens de navegação, que serão criados mais adiante neste artigo. Se a resolução da tela do dispositivo tiver largura de 800 px ou mais, a largura da navegação será configurada para 300 px. Se a resolução for 799 px ou menor, a largura da navegação será configurada para 100%.

Listagem 2. Usando consultas de mídia para fornecer CSS específico por dispositivo
@media all and (min-width: 800px) {
  #nav {
    width: 300px;
  }
}

@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
}

Outro detalhe interessante sobre as consultas de mídia é que, se você visualizar uma página da web em um navegador moderno, que inclua o CSS da Listagem 2 combinado ao elemento HTML associado, a página da web também reagirá ao tamanho do navegador. Portanto, se o navegador estiver configurado para uma largura de 799 px ou menos, a navegação terá 100% da largura. Se ele estiver dimensionado para 800 px ou mais, a navegação será dimensionada para uma largura de 300 px.


Tornando-se responsivo

As consultas de mídia são uma espécie de instrução condicional que determina qual CSS se aplica a uma página da web. Junto com a estrutura do jQuery Mobile, é possível criar alguns websites remotos eficientes ao mesmo tempo que se mantém um layout independente. Por si só, a estrutura do jQuery Mobile pode ser usada para criar, de forma rápida e simples, websites com comandos de toque. A estrutura tem uma grande quantidade de componentes que facilitam a inclusão de botões, barras de ferramentas, caixas de diálogo, visualização de listas e muito mais. Entretanto, o CSS continua sendo a linguagem preferencial para manipular layout de página da web. Felizmente, conforme abordado no início deste artigo, o CSS3 introduziu as consultas de mídia, que proporcionam aos desenvolvedores a habilidade de mudar o layout de página da web com base na resolução do dispositivo.

Em combinação com a estrutura do jQuery Mobile, é possível criar alguns layouts responsivos. Para a finalidade deste artigo, usamos um exemplo simples que inclui um conjunto de itens de navegação e uma grade. Os itens de navegação e a grade serão dispostos de forma diferente, com base na resolução da tela. Antes de a estrutura do jQuery Mobile funcionar em sua página da web, é necessário incorporar os arquivos JavaScript e CSS associados à estrutura do jQuery Mobile (consulte a Listagem 3).

Listagem 3. Incorporando a estrutura do jQuery Mobile
<link rel="stylesheet" 
  href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

A estrutura do jQuery Mobile inclui um componente listview usado para exibir seus itens de navegação. Para criar uma visualização de lista, basta incluir um atributo data-role para o elemento de sua lista de navegação ul com valor de listview. A estrutura do jQuery Mobile também inclui diversas ferramentas úteis que permitem a criação de layouts de grade com várias colunas. Na Listagem 4, incluímos uma grade de duas linhas com três colunas, construída usando uma combinação de ui-grid-b, ui-block-a e o ui-bar existentes. Para saber mais sobre os componentes disponíveis da estrutura do jQuery Mobile, consulte Recursos.

Listagem 4. Incluindo visualização de lista e grade na área de conteúdo
<div data-role="content">
    <ul id="nav" data-role="listview" data-inset="true">
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
    </ul>
    
    <div id="grid" class="ui-grid-b">
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
    </div>
</div>

As cartas são anexadas no final de alguns nomes de classe. Elas são relacionadas a temas usados pela estrutura do jQuery Mobile para determinar qual tema usar para renderizar o componente. Para saber mais sobre temas com a estrutura do jQuery Mobile, leia o artigo relacionado em Recursos.

Agora que criamos uma página da web, é possível usar o CSS3 para desenvolver um layout responsivo que se ajusta de modo dinâmico, com base na resolução da tela do usuário. Fazer isso é simples, basta usar as consultas de mídia que aprendemos no início deste artigo para determinar a resolução da tela e depois escrever o CSS que aborda especificamente os diferentes cenários. A Listagem 5 usa uma consulta de mídia que verifica uma resolução da tela de 800 px ou mais e outra que verifica uma resolução 799 px ou menos. A primeira consulta de mídia flutua a navegação e a grade para a esquerda, para que fiquem posicionadas uma ao lado da outra para preencher o espaço mais amplo disponível em telas de maior resolução. A segunda consulta de mídia não tem flutuação. Ela configura a largura da navegação e da grade para 100%, posicionando a navegação acima da grade para acomodar resoluções menores de tela para dispositivos como smartphones e tablets.

Listagem 5. Usando consultas de mídia para criar um layout responsivo
@media all and (min-width: 800px) {
  #nav {
    width: 300px;
    float: left;
    margin-right: 20px;
  }
  #grid {
    width: 450px;
    float: left;
  }
}

@media all and (max-width: 799px) {
  #nav {
    width: 100%;
  }
  #grid {
    width: 100%;
  }
}

Dispositivos com maior resolução de tela exibirão um layout lado a lado semelhante à Figura 1.

Figura 1. Como um dispositivo com maior resolução renderiza a página da web
Como um dispositivo com maior resolução renderiza a página da web

Dispositivos com menor resolução de tela exibem um layout lado a lado semelhante à Figura 2.

Figura 2. Como um dispositivo com menor resolução renderiza a página da web
Como um dispositivo com menor resolução renderiza a página da web

Obviamente, esse é um exemplo incrivelmente simples. Ele mostra como é fácil criar um layout responsivo usando a estrutura do jQuery Mobile e do CSS3. As possibilidades são animadoras, e esse é apenas o ponto de partida para apresentá-lo. Ao incluir alguns atributos data-role simples em seu HTML, é possível criar uma versão remota de suas páginas da web. Incluindo as consultas de mídia do CSS3, é possível permitir que o escopo responda ao dispositivo do usuário com base na resolução da tela. É possível até mesmo alterar o tema do jQuery Mobile quando alguém visualiza suas páginas da web em um computador desktop, para que não pareça uma página da web em resolução maior. Basta procurar uma resolução mais alta com uma consulta de mídia e depois alterar o CSS para aqueles componentes do jQuery Mobile para, basicamente, sobrescrever o estilo padrão que cria o tema.


Conclusão

O design responsivo tem o propósito de exibir seus dados no melhor layout possível para obter páginas da web que sejam fáceis de usar. A combinação da estrutura do jQuery Mobile e do CSS3 pode criar um conjunto eficiente de layouts que pode ser usado para responder a cada dispositivo do usuário.


Download

DescriçãoNomeTamanho
Sample jQuery Mobile and CSS3 web pagejquery-mobile-responsive-design.zip3KB

Recursos

Aprender

Obter produtos e tecnologias

Discutir

  • Participe da comunidade do developerWorks. Entre em contato com outros usuários do developerWorks, enquanto explora os blogs, fóruns, grupos e wikis orientados ao desenvolvedor.

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Desenvolvimento móvel
ArticleID=829651
ArticleTitle=Implemente Design Responsivo com jQuery Mobile e CSS3
publish-date=08102012