Web design responsivo com Bootstrap e JSF 2

Artigo no estilo Mentoring

Segundo relatório do Google Analytics, do total de acessos ao seu sistema de busca, 60% são feitos através de telefones celulares. Demonstrando essa mesma tendência, em um levantamento realizado pelo IBGE (Instituto Brasileiro de Geografia e Estatística) em 2013, verificou-se que 57,3% das residências no Brasil acessam a internet através de dispositivos móveis. Foi observado, também pelo IBGE, que nas navegações pela rede somente por esses equipamentos, houve, em 2014, um acréscimo de 7,2 milhões de usuários se comparado ao ano anterior, e tudo indica que em 2015 esse percentual deverá aumentar.

Além disso, dados divulgados pela FGV (Fundação Getúlio Vargas) em 2015 apontaram a existência de 306 milhões de dispositivos conectados à internet no Brasil. A maioria deles, cerca de 154 milhões, são smartphones, ou seja, temos uma média três dispositivos para cada dois habitantes. Somente no segmento de celulares, também chamado de feature phone, a penetração desses equipamentos no mercado brasileiro foi de 162%, ou seja, 1,62% aparelho por habitante. Esse índice supera a média mundial, que é de 117%, e até o percentual verificado nos Estados Unidos, de 148%.

Dessa forma, verificamos que esses novos dispositivos chegaram para ficar e tudo indica que por causa deles os computadores (Desktops e Notebooks) se tornarão obsoletos no sentido que os conhecemos hoje, isto é, para o acesso à internet, leitura de documentos ou a execução de aplicativos. Tal fato pode ser observado no dia a dia, quando notamos que em diversos lugares nos deparamos com pessoas com seus smartphones e tablets realizando ações que até pouco tempo eram disponíveis apenas aos computadores.

Diante desse cenário surge a necessidade de desenvolver sites que sejam capazes de atender às características desses novos equipamentos quanto ao tamanho da tela e à forma como o conteúdo deve ser apresentado ao visitante. É certo que a forma como as informações são apresentadas a quem utiliza um smartphone deve ser diferente daquela apresentada a quem utiliza um computador, visto que são equipamentos completamente diferentes quanto ao tamanho e resolução da tela, modo de interação e capacidade de processamento. Por exemplo, determinado conteúdo pode ficar pequeno e centralizado quando visualizado com um computador ou ficar muito grande e descentralizado quando visualizado por meio de um smartphone. Além disso, a forma que a informação é exibida para o visitante pode ser crucial para o sucesso do site, pois uma navegação mais confortável pode significar a permanência ou retorno ao mesmo. Por exemplo, uma boa navegação de consumidores em uma loja virtual pode significar uma compra e a aceitação da loja pelo cliente para compras futuras.

Portanto, o desenvolvimento de sites deve possuir uma abordagem bem elaborada em sua concepção e codificação, de modo a garantir aos visitantes a capacidade de terem uma experiência visualmente rica e funcional. Com base nisso, surgiu a necessidade de uma web que suporte esses novos dispositivos, pois o cenário dominante até então, onde há um navegador instalado em um computador controlado por mouse e teclado em uma tela confortável, não atende mais à nova realidade de telas pequenas, sensíveis ao toque, redes móveis e muitas outras diferenças.

Assim, surge uma nova maneira de pensar a web, a qual visa a adaptação das páginas a todo tipo de dispositivo, abandonando as telas de tamanhos previsíveis e pensando em sites flexíveis, que suportem os mais diferentes tipos de interação e ferramentas de acesso. Nesse contexto, passa a ter destaque o Design Responsivo, a “chave” para essa nova web e solução que define um conjunto de técnicas com o intuito de melhorar a experiência do usuário na navegação independentemente do dispositivo utilizado.

Design Responsivo

Diante do crescimento do número de dispositivos móveis através dos quais a maioria dos acessos à internet são realizados, é natural que todas as empresas co ...