Design Responsivo: como surgiu, simplicidade, breakpoints e vantagens
Em 25 de maio de 2010, com o intuito de aprimorar a sua experiência de navegação, o Web Designer independente Ethan Marcotte escreveu o artigo Responsive Web Design para o blog A List Apart, que depois deu origem a seu livro “Responsive Web Design“, editado pela A Book Apart.
No artigo ele comenta sobre o arquiteto inglês Christopher Wren, que disse certa vez que sua área de atuação “direciona para a eternidade” (referindo-se ao fato da arquitetura ser uma disciplina bem definida), e que os projetos arquitetônicos são caracterizados por seu longo tempo de duração.
Lamentavelmente, o Web Design não possui a durabilidade da arquitetura. Na realidade, o que foi desenvolvido para a internet hoje, já estará obsoleto daqui a duas semanas.
Simplicidade no gerenciamento (desenvolvimento responsivo Vs. desenvolvimento em versões distintas)
O desenvolvimento responsivo proporciona que o trabalho seja centralizado em um único site (dependendo do nível de complexidade do projeto, uma ou duas folhas de estilo já são suficientes). De outro lado, o desenvolvimento em versões distintas para dispositivos diferentes acarreta uma carga de trabalho consideravelmente superior (claramente que: o custo também é maior), podendo exigir uma qualificação específica para cada tipo de dispositivo selecionado.
O que são breakpoints
Breakpoints são pontos de interrupção (ou pontos de quebra), onde são estabelecidas as larguras que serão consultadas através das medias queries. Para esse fim, é necessário que o Web Designer identifique a resolução do(s) dispositivo(s) que pretende atender com sua interface responsiva e forneça seus pontos nas larguras exatas. Com a utilização de breakpoints podemos exibir a melhor versão do nosso layout ao usuário final.
Com Twitter Bootstrap utilizamos as seguintes media queries para criar os principais breakpoints:
/* Telefones com menos de 768px */
/* Padrão no Bootstrap (inicialmente não necessita de consulta) */
/* Dispositivos pequenos (tablets, 768px e acima) */
@media (min-width: 768px) { ... }
/* Dispositivos médios (desktops, 992px e acima) */
@media (min-width: 992px) { ... }
/* Dispositivos grandes (desktops grandes, 1200px e acima) */
@media (min-width: 1200px) { ... }
Vantagens do Design Responsivo
- 88% dos usuários utilizam seus smartphones para buscar informações sobre empresas locais.
- 13% dos consumidores no Brasil usam comparadores de preço no celular.
- 30% dos brasileiros efetuam suas compras via dispositivos móveis.
- 34% dos usuários ficam desapontados quando um site não pode ser visualizado corretamente em um dispositivo mobile.
Profissional com mais de 12 anos de experiência em desenvolvimento de sistemas, apis, aplicativos, lojas virtuais, blogs, web design, marketing digital, módulos e-commerce, seo otimização de sites, links patrocinados, templates, plataformas e cms, crm, marketplace, suporte e manutenção, interface responsiva, mídias digitais e integrações diversas, consultoria online, hospedagem.
Localização: Brasil
