Em Janeiro, eu e Zeno Rocha fomos convidados pelo grande amigo Edu Agni para palestrarmos na Campus Party sobre Layouts Responsivos. No começo ficamos pensando se seria uma boa ideia, visto que é um assunto que já foi bastante debatido nos últimos dois anos, mas ao mesmo tempo sabíamos que poderíamos fazer algo bacana em cima. A dificuldade inicial foi saber em que âmbito nós ficaríamos, como mesclaríamos desenvolvimento com design, atuaríamos em que nível, visto que não saberíamos o público que encontraríamos no evento.

Depois de muito rascunho, chegamos a um modelo divertido e ao mesmo tempo didático. Resumindo um pouco:

Responsive Webdesign derivou-se de Responsive Architecture cunhado por Nicholas Negroponte, um renomado arquiteto e cientista, formado pelo MIT e idealizador da fundação “One Laptop per Child” que visa disponibilizar computadores por 100 dolares para educação de jovens.

Responsive Architecture

Arquitetura responsiva é um campo que visa combinar a ciência da computação com a arquitetura, gerando ambientes inteligentes e sensíveis, que através de sensores, conseguem detectar variáveis como cores, temperatura, peso, entre outras, e adequar o ambiente de forma positiva. O mais interessante é que isso foi cunhado nos anos 60, embora pareça algo super inovador né?

Responsive Webdesign

O famoso RWD já veio recentemente. Tudo começou com um post no Blog A List Apart, onde Ethan Marcotte retrata a mudança de comportamento e crescimento de usuários mobile, e sinalizando que isso já estava afetando (em 2010) empresas que queriam seus websites disponíveis para esses novos dispositivos. O que eu chamo de felicidade do Ethan foi comparar isso ao trabalho de Negroponte, onde temos que adaptar de forma inteligente o ambiente às variáveis de interação do usuário, nascido para arquitetura e atualmente famoso na área de Webdesign.

Slides e Vídeo

Melhor do que repetir textualmente tudo que foi apresentado na palestra, melhor ver o vídeo gravado né? Segue então o vídeo completo do nosso bate-papo na Campus party e nossos slides.

Responsive Sanfona

O mais legal de tudo é criar algo divertido para as palestras que apresentamos juntos, sendo assim, não podíamos deixar de brincar um pouco com responsive né?

Criamos um mini projetinho divertidinho para apresentar no final da palestra e foi um sucesso, convidamos todos a conhecê-lo! Aumente o som e acesse http://html5-pro.com/sanfona!

Feedback Maravilhoso

O camarada João Stein nos abrilhantou com um email dando um feedback muito bacana sobre essa palestra, sugerindo uma série de coisas que poderíamos ter incluído no assunto. Não poderia deixar de agradecê-lo publicamente pelo carinho e por somar em tempo onde tantas pessoas preferem subtrair. Segue as sugestões maravilhosas dele:

• MOBILE FIRST – http://www.abookapart.com/products/mobile-first , inclusive a palestra do amigo e mestre Horácio Sorares foi sobre isso, veja aqui os caminhos do mobile
• Alternativas para implementações de imagens responsivas
  • https://github.com/scottjehl/picturefill
  • http://jquerypicture.com/
  • http://css-tricks.com/which-responsive-images-solution-should-you-use/
• Referências:
  • Brad Frost (https://twitter.com/brad_frost)
  • Luke Wroblewski (https://twitter.com/lukew)
  • Andy Clarke (https://twitter.com/Malarkey)
  • Chris Coyier (https://twitter.com/chriscoyier)
  • Dave Rupert (https://twitter.com/davatron5000)
  • Jeremy Keith (https://twitter.com/adactio)
• Livros:
  • MOBILE FIRST by LUKE WROBLEWSKI (http://www.abookapart.com/products/mobile-first)
  • RESPONSIVE WEB DESIGN by ETHAN MARCOTTE (http://www.abookapart.com/products/responsive-web-design)
  • THE MOBILE BOOK by SMASHING MAGAZINE (https://shop.smashingmagazine.com/the-mobile-book-deluxe-bundle.html)
  • WEB DESIGN RESPONSIVO by TÁRCIO ZEMEL (http://www.casadocodigo.com.br/products/livro-web-design-responsivo)
  • IMPLEMENTING RESPONSIVE DESIGN by TIM KADLEC (http://www.implementingresponsivedesign.com/)
• Fontes de conteúdo para pesquisa:
  • http://responsivedesignweekly.com/
  • http://bradfrost.github.com/this-is-responsive/
  • http://www.scoop.it/t/gonzodesign

Prenda sua respiração!

Para finalizar, o Sérgio Lopes disponibilizou um post de tirar o fôlego de qualquer um, com todos os tipos de links e assuntos relacionados. Puxe ar…… agora leia: http://sergiolopes.org/diretorio-design-responsivo/

Conclusão

Tem muita coisa bacana que dá para explorar né? E você, já experimentou algo de RWD para contar?