Palestra para iniciantes no desenvolvimento responsivo, onde são explicada algumas técnicas para dar maior orientação ao desenvolvedor de como se aprofundar posteriormente.

1. Sites Responsivos Como mostrar o mesmo conteúdo em diversos aparelhos
Feito por Gilberto Crespo
Abril/2014

2. Um pouco sobre mim:
= Autor de livro estrangeiro:
- Responsive Web Design with jQuery
= Trabalho na área há 10 anos:
- sendo 2 anos só com Responsive
= Atualmente fui contratado pela UPPERCASE:
- Atuando mais em melhorar a experiência do usuário na navegação dos sites e sistemas.

3. Tópicos:
= Evolução da tecnologia móvel
= Diferenças entre os termos:
- Site Fluído
- Site Adaptativo
- Site Responsivo
= Principais técnicas do site Responsivo:
- Estrutura flexível
- Mídia flexível
- MediaQueries

4. Como era o cenário antes...
Até pouco tempo atrás, site mobile significava :
- Aparelhos pequenos, tela pequena
- Recursos limitados
- Banda extremamente limitada
- Visando somente consultas rápidas ao site
E as orientações eram:
- Criar um tema separado para mobile
- Com conteúdo limitado/resumido
- Layout simplificado
Solução: Sites ou Temas distintos para Web e Mobile

5. Isso é da época de vocês?
Como era o cenário antes...

6. Cenário atual
Com a evolução dos dispositivos, a tendência atual é:
- Telas com maior dimensão e resolução
- Hardware dos aparelhos estão mais potentes
- Tags HTML5 com recursos de video
- Banda limitada
- Usuário deseja ver todo conteúdo/funcionalidades do site
Isso faz a gente seguir outra direção no desenvolvimento:
- Manter o mesmo conteúdo do site WEB
- Layout que se adapta no momento em que é visualizado
Solução: “Praticamente” mesmo site, usando Design Responsivo

7. Conceitos:
Fluído X Adaptativo X Responsivo
Nosso objetivo é acabar com a frase:
“Melhor visualizado em 1024px/768px”

8. Seu foco é na adaptação da estrutura.
Em outras palavras, uso de porcentagem nas medidas.
Site Fluído
http://matthewjamestaylor.com/

9. Seu foco é na adaptação da estrutura.
Em outras palavras, uso de porcentagem nas medidas.
Site Fluído
http://gmail.com/
780px
1600px

10. Site Adaptativo

11. Seu foco é específico na experiência do usuário.
Exemplo: Desenvolver dois sites dedicados, sendo um para cada aparelho
Site Adaptativo
Conteúdo é o mais importante
Apresentação visual
Scripts no lado do cliente
Melhoria progressiva:

12. É a combinação entre sites fluído + adaptativo.
Onde, existe somente uma única estrutura HTML (com navegação) seja onde ele estiver sendo visualizado (telas grandes ou pequenas).
O uso de breakpoint é o diferencial e as adaptações serão baseadas no tamanho da área disponível para mostrar o conteúdo, e não por tipo do dispositivo (celular, tablet, desktop).
O cache é outra vantagem em relação ao Adaptativo.
Exemplos:
http://mediaqueri.es/
http://worldwildlife.org/
http://www.time.com/time/
Site Responsivo - (termo criado por Ethan Marcotte)

13. Site Responsivo - exemplos

14. Site Responsivo - exemplos

15. Site Responsivo - exemplos

16. <link rel="stylesheet" href="large.css" media="only screen and (min-width:1024px)" />
<link rel="stylesheet" href="medium.css" media="only screen and (min-width:641px) and (max-width:1024px)" />
<link rel="stylesheet" href="small.css" media="only screen and (max-width:640px)" />
- Este código define os Breakpoints usados no site
- MediaQueries é o “motor” que checa qual breakpoint executar.
- Os CSS são carregados de acordo com o breakpoint
- É só CSS. Não tem nada de JavaScript aqui
Site Responsivo - MediaQueries

17. <link rel="stylesheet" href="small.css" />
<link rel="stylesheet" href="medium.css" media="only screen and (min-width:640px)" />
<link rel="stylesheet" href="large.css" media="only screen and (min-width:1024px)" />
<link rel="stylesheet" href="televisao.css" media="only screen and (min-width:1280px)" />
Site Responsivo - como reaproveitar código
MOBILE first (termo criado por Luke Wroblewski):
primeiro se desenvolve para telas menores (onde a complexidade dos elementos são menores) e depois,
para as telas maiores (onde tem mais elementos com float, mais recursos visuais, mais animações)

18. Site Responsivo – É somente a ponta do iceberg 

19. Evitar carregamento extra
dos recursos (imagens, CSS, JS)
Site Responsivo – Carregamento condicional
Site responsivo != (desktop + mobile)

20. Enfim finalizamos a parte conceitual!
Está com dúvida? Quer fazer algum comentário?

21. Estrutura Flexível

22. Estrutura Flexível (porcentagem)
Fórmula mágica: elemento alvo / contexto = dimensão

23. Estrutura Flexível (CSS Grid)
Foundation4 Grid ou Bootstrap Fluid Grid

24. Estrutura Flexível (CSS Grid) - exemplos

25. Estrutura Flexível (CSS Grid) - código
<div class="row">
<div class="small-2 large-4 columns">...</div>
<div class="small-4 large-4 columns">...</div>
<div class="small-6 large-4 columns">...</div>
</div>
Small:
Large:

26. Imagem e Vídeo
Responsivos
Não, não é isso

27. Imagens Flexíveis
Redimensionamento proporcional (automático)
Sugerido somente dentro dos limites do mesmo breakpoint
img {max-width:100%; height:auto;}

28. Imagens Flexíveis
Diferentes imagens (e tamanhos) para cada breakpoint:

29. Imagens Flexíveis
Sabe de naaada, inocente!

30. Imagens Flexíveis
Diferentes imagens (e tamanhos) para cada breakpoint:
Imagem vale mais que 1000 palavras, mas se não focarmos no principal da imagem, o siginificado real da imagem desaparece.

31. Imagens Flexíveis
Diferentes imagens (e tamanhos) para cada breakpoint
•Imagens inseridas por nós
•Responsive-Images ou PictureFill
•Tem detector de devices que aceita imagens com alta definição

32. <picture width="500" height="500">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x,
large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x,
med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
</picture>
Exemplo <picture>: proposta da W3C em aprovação
Imagens Flexíveis
Lembrando que em é uma unidade de medida e que cada em representa 16px

33. Imagens Flexíveis
Redimensionamento proporcional (com foco) - FocalPoint CSS para recortes inteligentes para imagens responsivas

34. Vídeos Flexíveis
FitVids.js atualmente suporta os players:
YouTube, Vimeo, Blip.tv e Viddler
Existe uma opção para usar um player próprio
customizado também.
https://github.com/davatron5000/FitVids.js

35. Texto Flexível

36. Texto Flexível - em e rem
Fórmula mágica: elemento alvo / contexto = tamanho Site muito útil para conversão: http://pxtoem.com/
Normal =30px e Negrito =40px
HTML = <h1>Título desse slide <strong>Incrível</strong></h1>
Certo .. mas e esse tal de REM? Como funciona?

37. "Imagens" Flexíveis - Títulos destacados e ícones
Não transforme títulos com fonts diferentes em imagens plugins úteis: Lettering.js + Kern.js
Técnica de sprites = dimensão fixa

38. Links Interessantes

39. Links Interessantes – para referências futuras
Referências em português
http://sergiolopes.org/diretorio-design-responsivo/
http://www.caelum.com.br/apostila-html-css-javascript/
Livros português:
http://www.casadocodigo.com.br/products/livro-web-design-responsivo
http://www.casadocodigo.com.br/products/livro-web-mobile
Referências em inglês
http://bradfrost.github.io/this-is-responsive/patterns.html
http://bradfrost.github.io/this-is-responsive/resources.html
http://www.scoop.it/t/gonzodesign
Livros inglês:
http://goo.gl/bcUzfm meu livro http://www.implementingresponsivedesign.com/

40. Vamos às perguntas!
Conte também um pouco de sua experiência nisso, alguma façanha ou até mesmo improvisação que desenvolveu

41. Obrigado!
Dúvidas posteriores: http:// www.gilcrespo.com