Introdução ao Responsive Web Design com exemplos em código. Descarregar em: https://7lo634.s.cld.pt
Text of Responsive Web Design - Introdução
1. VTOR TEIXEIRA | PRIMEIT @ SAPO UX Team INTRODUO AO RESPONSIVE WEB DESIGN @vsdteixeira vteixeira@primeit.pt PrimeAcademy Maio 2014
2. RESPONSIVE WEB DESIGN Ethan Marcote MOBILE FIRST Luke Wroblewski MOBILE UX - PRINCPIOS BSICOS Vtor Teixeira - http://pae.gg.sl.pt 3 2 BIBLIOGRAFIA 1
3. ALGUNS NMEROS 1900M Utilizadores globais de internet em dispositivos mveis em 2015 1700M Utilizadores globais de internet em dispositivos xos em 2015 Fonte: http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6
4. Isto j est a acontecer! necessria uma soluo
5. RESPONSIVE WEB DESIGN // RWD Adaptar o layout e interao de um site a um variado nmero de resolues, densidades de ecr e modos de interao
6. No so apenas resolues diferentes, so tambm diferentes contextos e formas de interao
7. ALICERCES DO RWD Fluid Grids CSS Media Queries Imagens e Media exveis Mobile First / Preocupao com contexto RWD
8. VANTAGENS 1 CONTEDO 1 CDIGO 1 URL O mesmo contedo onde quer que seja visto nica base de cdigo para manter Acabam-se os m.* e os /mobile
16. Prtica Quando estiverem mais vontade podem parar de passar pixels para percentagens e comear a pensar nas relaes baseadas nas propores entre elementos e seus contentores diretamente DICAS No arredondar valores 33%+33%+33% != 100% Escrever o racional em comentrio ao lado da regra
17. E AGORA? grid-fluid.html http://pau.j3.sl.pt
18. CONTEDO FLEXVEL
19. IMAGENS BEM COMPORTADAS NO EXCEDE O SEU CONTENTOR
20. SER QUE SE PORTAM BEM? image.html http://pau.j7.sl.pt
22. AGORA DEVEM PORTAR-SE MELHOR image-flexible.html http://pau.jd.sl.pt
23. IE STUFF /*IE6 specic*/ ! img{ width:100% }
24. CUIDADO Devido s imagens serem as mesmas de desktop, os sites tm o potencial de car pesados para ambiente mobile element, srcset, etc em desenvolvimento mas ainda cedo para usar JS to the rescue! [For now] http://ink.sapo.pt/ui-elements/images/#targeting-multiple-devices https://github.com/scottjehl/picturell JS
25. MEDIA QUERIES
26. Identica tipos de media e inspeciona as caractersticas fsicas dos dispositivos e browsers que apresentam o contedo
27. TIPOS DE MEDIA all braille embossed handheld print projection screen speech tty tv Mais informao: http://www.w3.org/TR/CSS21/media.html#media-types
28. FEATURES QUE PODEM SER TESTADAS Mais informao: http://www.w3.org/TR/css3-mediaqueries/#media1 width min|max prexes height device-width device-height orientation portrait | landscape aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid
29. ANATOMIA DE UMA MEDIA QUERY @media screen and (min-width:1024px){ body{ /* Your rules here */ ! } } s do tipo screen? e tens pelo menos 1024px de largura?
30. UMA QUESTO DE REGRAS grid-responsive.html http://pau.jz.sl.pt
31. POSSIBILIDADE DE CHAINING @media screen and (min-width:480px) and (orientation: landscape){ body{ /* Your rules here */ } } s do tipo screen? e tens pelo menos 480px de largura? e a orientao do dispositivo landscape?
32. ESTADO DO SUPORTE >IE8 suportam media-queries! Para os outros: JS again // https://github.com/scottjehl/Respond
33. GOING RESPONSIVE
34. Estejam atentos ao contexto de uso do vosso site ! O tipo de site dita [em grande medida] a forma como vai ser usado
35. Avaliem os objetivos dos vossos utilizadores ! Os objetivos em mobile podem ser diferentes dos de Desktop
36. RWD s se prova til se resolver melhor o problema ! Caso contrrio devemos adotar a estratgia mais adequada
37. RESPONSIVE WORKFLOW
38. Denir um scope para os nossos esforos, identicando as resolues mais usadas pelo nosso pblico
