Responsivo na prática

Não tem a menor idéia de como começar a fazer o seus projetos de maneira responsiva?

Nessa palestra vou apresentar técnicas, ferramentas e exemplos práticos que ajudam no desenvolvimento de uma boa interface flexível.

Transcript

1. @bazevedo RESPONSIVO NA PRÁTICA segunda-feira, 12 de maio de 14
2. marimbondo.me segunda-feira, 12 de maio de 14
3. POR QUE FAZER WEB RESPONSIVA? segunda-feira, 12 de maio de 14
4. PORQUE TÁ NA MODA? segunda-feira, 12 de maio de 14
5. PORQUE TEU CHEFE MANDOU? segunda-feira, 12 de maio de 14
6. PORQUE A GALERA BACANA TÁ FAZENDO? segunda-feira, 12 de maio de 14
7. ENTREGAR A MELHOR EXPERIÊNCIA POSSÍVEL AO TEU USUÁRIO, INDEPENDENTE DO SEU DISPOSITIVO. segunda-feira, 12 de maio de 14
8. m. tablet. site full. segunda-feira, 12 de maio de 14
9. segunda-feira, 12 de maio de 14
10. WEB É UMA SÓ segunda-feira, 12 de maio de 14
11. A WEB É UM CANVAS EM BRANCO O que importa é o tamanho desse canvas, e como o teu conteúdo irá se adaptar a ele. segunda-feira, 12 de maio de 14
12. AGORA COMEÇA A PARTE TÉCNICA segunda-feira, 12 de maio de 14
13. <meta name="viewport" content="width=device-width, initial-scale=1.0"/> TAG VIEWPORT segunda-feira, 12 de maio de 14
14. UNIDADES DE MEDIDA segunda-feira, 12 de maio de 14
15. PX % EM REM segunda-feira, 12 de maio de 14
16. . válido para medidas imutáveis . background de tamanho fixo . border radius . text-shadow PX segunda-feira, 12 de maio de 14
17. . grids fluidos . margin . padding . imagens responsivas % segunda-feira, 12 de maio de 14
18. . fontes . margins . paddings . width EM segunda-feira, 12 de maio de 14
19. REM . valor de acordo com o root do documento . não funciona nos IE’s velhos .fallback { font-size:16px; font-size:1rem; } segunda-feira, 12 de maio de 14
20. *, *:before, *:after { -moz-box-sizing : border-box; box-sizing : border-box; } http://www.paulirish.com/2012/box-sizing-border-box-ftw/ *box-sizing:border-box segunda-feira, 12 de maio de 14
21. GRID segunda-feira, 12 de maio de 14
22. . usar “%”nos containers . EM/REM para as fontes e margin/ padding TOTALMENTE FLUIDO segunda-feira, 12 de maio de 14
23. width:35% width:65% segunda-feira, 12 de maio de 14
24. COMO MONTAR UM GRID? segunda-feira, 12 de maio de 14
25. segunda-feira, 12 de maio de 14
26. segunda-feira, 12 de maio de 14
27. MEDIA QUERIES segunda-feira, 12 de maio de 14
28. MEDIA QUERY - SIMPLES @media ( min-width : 1024px ) { a { color : red; } } segunda-feira, 12 de maio de 14
29. MEDIA QUERY - COMPOSTA @media ( min-width : 0 ) and (max-width: 48EM ) { a { color : green; } } segunda-feira, 12 de maio de 14
30. MEDIA QUERY - RETINA (HD) @media ( -webkit-min-device-pixel-ratio:2), (min-resolution: 192dpi) { a { color : black; } } segunda-feira, 12 de maio de 14
31. COMO NÃO USAR <link href="main.css" rel="stylesheet" type="text/css"/> <link href="giant.css" rel="stylesheet" media="(min-width:1600px)"/> segunda-feira, 12 de maio de 14
32. FEATURE DETECTION segunda-feira, 12 de maio de 14
33. var isMobileDevice = { Android: function() { return navigator.userAgent.match(/Android/i); }, BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i); }, iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, Opera: function() { return navigator.userAgent.match(/Opera Mini/i); }, Windows: function() { return navigator.userAgent.match(/IEMobile/i); }, any: function() { return (isMobileDevice.Android() || isMobileDevice.BlackBerry() || isMobileDevice.iOS() || isMobileDevice.Opera() || isMobileDevice.Windows()); } }; segunda-feira, 12 de maio de 14
34. segunda-feira, 12 de maio de 14
35. MODERNIZR segunda-feira, 12 de maio de 14
36. var documentWidth = window.innerWidth || document.documentElement.clientWidth; segunda-feira, 12 de maio de 14
37. IMAGENS segunda-feira, 12 de maio de 14
38. ESSE É O NOSSO MAIOR PROBLEMA segunda-feira, 12 de maio de 14
39. PICTURE <picture> <source srcset= "small.jpg" media= "max-width : 600px" > <source srcset= "media.jpg" media= "min-width : 601px" > <source srcset= "default.jpg"> <img srcset= "default.jpg" alt= "alt da foto default" > </picture> segunda-feira, 12 de maio de 14
40. FRAMEWORKS segunda-feira, 12 de maio de 14
41. BATMAN segunda-feira, 12 de maio de 14
42. BATMAN segunda-feira, 12 de maio de 14
43. segunda-feira, 12 de maio de 14
44. segunda-feira, 12 de maio de 14
45. segunda-feira, 12 de maio de 14
46. segunda-feira, 12 de maio de 14
47. segunda-feira, 12 de maio de 14
48. segunda-feira, 12 de maio de 14
49. PERFORMANCE E TESTE segunda-feira, 12 de maio de 14
50. . concatenar e minificar os insumos . entregar os arquivos “gzippados” . otimizar as imagens e svg’s ENTREGA segunda-feira, 12 de maio de 14
51. webpagetest.org segunda-feira, 12 de maio de 14
52. PageSpeed Insights segunda-feira, 12 de maio de 14
53. Firefox - Responsive View segunda-feira, 12 de maio de 14
54. responsinator.com segunda-feira, 12 de maio de 14
55. ish. segunda-feira, 12 de maio de 14
56. Lembrem-se! Não adianta fazer tudo isso para o usuário, e ter uma porcaria de conteúdo. segunda-feira, 12 de maio de 14
57. segunda-feira, 12 de maio de 14
58. OBRIGADO! @bazevedo segunda-feira, 12 de maio de 14