Web sites para pessoas, em qualquer lugar ou dispositivo.
Web sites para pessoas, em qualquer lugar ou dispositivo.
Na minha visão, não, ou depende. O tipo de conteúdo + público alvo + necessidades do cliente + requisitos tecnológicos é que darão as pistas para a correta abordagem e por consequência a resposta correta.
Independente destes fatores muito se tem dito sobre as técnicas usando as media queries, como por exemplo, quando escondemos partes da interface com display: none, pois seu uso indiscriminado torna o site mais pesado sem acrescentar na experiência do usuário já que existem formas melhores de obtermos o mesmo resultado sem nenhuma penalidade para os usuários.
Outro ponto polêmico a respeito das media queries é que ao criarmos nossa hierarquia de queries, nós estamos sobrescrevendo regras que tinham sido declaradas anteriormente e isso seria um “desperdício” de recursos. Nesse ponto não acho que é problema tão grande, pois com boas práticas conseguimos reduzir bastante o tamanho da folha de estilo (ver Object Oriented CSS), além disso, os frameworks destinados a igualar a estilização nos diversos navegadores fazem exatamente isso e são usados em larga escala (CSS reset).
O terceiro ponto de discussão, este sim pode representar um grande transtorno para conexões lentas, é que ao criarmos pontos de adaptação com as media queries todas as imagens referenciadas anteriormente pelos pontos de adaptação serão baixadas e descartadas em seguida, caso sejam sobrescritas. Principalmente para dispositivos móveis que, em geral, tem conexões mais lentas, representa um enorme desperdício de recursos (tempo e dinheiro). Por isso você não pode deixar de ver o vídeo abaixo onde demonstro os problemas mais comuns e proponho algumas soluções.
Ao desenvolvermos o site para dispositivos móveis e só então utilizarmos as técnicas de adaptação na medida em que os dispositivos aumentam sua resolução faz com que utilizemos os recursos dos usuários de forma muito mais racional. Para demonstrar o impacto na velocidade de carregamento do site veja na íntegra o benchmark no vídeo abaixo.
Sumário
00:00 min – Introdução
04:30 min – Desktop first
11:30 min – Mobile first
25:20 min – Imagens via CSS (desktop vs mobile)
42:00 min – Imagens do lado do servidor
Assista ao vídeo na íntegra “Mobile first vs desktop first”.
Tela de comparação no processamento da página entre as abordagens Mobile e Desktop first
Exemplo imagem via CSS desktop first
Exemplo imagem via CSS mobile first
Exemplo imagens do lado do servidor – para tablets – para smartphones
Script em PHP para detecção de dispositivo.
Meu novo artigo no designadaptavel.com.br em vídeo >> Mobile first vs desktop first http://t.co/6IFLnma via @designAdaptavel
Cara, PARABENS, tutoriais excelentes, OTIMOS videos…por favor continue, salvou minha vida, entro frequentemente, e ja vi todos os posts =D
Ôpa, todos os posts! Isso me lembra que tenho que publicar mais! haha
Juan, não deixe de compartilhar suas experiências com o Design Adaptável.
Abraços, Bruno Barros.
Mobile first vs desktop first | Design Adaptável http://j.mp/pwJiM7
Mobile first vs desktop first | Design Adaptável http://j.mp/pwJiM7
Meu, to colado no teu blog, mas por favor, me diz se tem tema wp, gratuito ou comprado, que seja como o seu blog, é exatamente o que quero.
Mauricio, exatamento como este site não há, pois é um template construído para este fim. Se você pesquisar por "responsive wp themes" acho que você encontrará vários temas.
Abs.
Mto bom… realmente bastate esclarecedor… Por favor continue com as vídeos aulas… Sempre estou visitando e aprendendo.
Artigo excelente, vídeo espetacular, como disse em outro post não sou web design aí te pergunto esses links abaixo são apenas para word Press ou servem para sites institucionais também?
Mais um vez parabéns.
Screencast muito bom! Com certeza vou referenciá-lo na série sobre design responsivo que estou fazendo!
Abraços!
Olá Bruno, muito bom o artigo!
Design responsive é a grande sacada para evoluir nossos sites e quem nao entrar no barco vai pro abate, rss
Abraço.
Funcionou! Ma-ra-vi-lho-so!
Bruno, eu no artigo sobre Media Queries (aqui ó: http://is.gd/BuPaM6)
eu tinha postado dizendo que não havia conseguido vc até respondeu, coisa e tal… daí tentei esta técnica Mobile-First lado servidor, com o PHP… deu certo..hihihihi feliz…
Vou divulgar MUITO, acredito que este é o caminho.
Valeu!
Beleza Glaucia! Só tenha certeza de dominar as técnicas de adaptação com as media queries, pois será o trabalho mais difícil.
As adaptações começam no servidor, mas em seguida você terá que fazer o trabalho mais pesado no navegador do usuário.
Abraços, Bruno Barros
Existe algum CMS preparado pra mobile first atualmente?
Lucas,
não conheço nenhum CMS com este foco. O WordPress tem plugins que fazem o conteúdo ser bem visualizado em smartphones, mas os plugins que já tive a oportunidade de ver não respeitam o tema principal, ou seja, é uma identidade visual completamente nova. Isso não é Design Adaptável, pois ele serve um HTML e CSS completamente diferente… mas nem por isso deve ser descartado.
Já existem muitos frameworks com a filosofia do Design Adaptável, mas poucos tem a "pegada" Mobile First. Estou estudando este aqui: http://twitter.github.com/bootstrap, mas ele faz os estilos para desktop primeiro. De qualquer maneira é um baita de um framework.
Eu estou participando de uma lista do W3C sobre adaptação de imagens. Tem umas discussões bem legais sobre novos padrões para tratar imagens em diferentes contextos. Quem puder entre e dê uma boa lida: http://www.w3.org/community/respimg/
Abs.