Responsive Web Design - Introdução

  • View
    651

  • Download
    2

Embed Size (px)

DESCRIPTION

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
  • 9. UMA FUNDAO FLUDA
  • 10. FLUID GRIDS SCROLL FREE
  • 11. COMPOSIO EM PX 590PX 590PX 1190PX 190PX 190PX 190PX 190PX 190PX 190PX 10PX
  • 12. NO ESQUECER DA META A largura do nosso site ca optimizada para o dispositivo em que est a ser visto
  • 13. SER QUE EST BEM ASSIM? grid.html http://pau.7q.sl.pt
  • 14. DE PX PARA % Para comear, um pouco de matemtica ! target / context = result
  • 15. COMPOSIO EM % 49.1666667% 49.1666667% 99.1666667% 15.8333 333% 15.8333 333% 15.8333 333% 15.8333 333% 15.8333 333% 15.8333 333% 0.8333333% 1190/1200 590/1200 190/1200 10/1200
  • 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
  • 21. MAX-WIDTH: 100% img, embed, object, video{ ! max-width:100%; ! }
  • 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
  • 39. IDENTIFICAR BREAKPOINTS Denir Breakpoints naturais // Device