Os caminhos da web
- em ALTA RESOLUÇÃO -

http://goo.gl/7nVz1


Richard Duchatsch Johansen

@ridjohansen | fb.com/ridjohansen

gILBERTO cRESPO

www.gilcrespo.com


Imagem de alta resolução


JPEGmini

http://www.jpegmini.com/


tinypng

http://tinypng.org/‎


Retina display


Retina Display



Imagens Responsivas



IMAGEM E BREAKPOINT



ART DIRECTION



ESTRUTURA TAG <picture>



SOLUCIONANDO COM FORESIGHT.JS


PROS:

  • TESTE DE CONEXÃO À INTERNET
  • ESCALABILIDADE COM URI find/replace
  • SUPORTA IMAGENS ALTA DENSIDADE (1.5x ou 2x)


CONS:

TAG <noscript> != SEO


http://goo.gl/cuWdi

Focal point css



http://goo.gl/0Rv6f

Iconografia


http://goo.gl/St2Rb

image Sprites



image sprites


PROS

  • MENOR QUANTIDADE DE REQUESTS
  • ICONES COLORIDOS / TRANSPARENTES
  • CROSS-BROWSER MAIS SIMPLIFICADO


CONS

  • DIFÍCIL MANUTENÇÃO
  • RETINA DISPLAY
  • SABER UTILIZAR DE FORMA EXTENSÍVEL

Image Sprites


Ferramentas interessantes:

font icons



font icons


PROS

  • Menor quantidade de requests
  • Retina display suport
  • Suporta CSS3 


CONS

  • Requer conhecimento de IMG vetoriais
  • Exige bom dominio CSS
  • Não possui icones coloridos

Font icons


Ferramentas interessantes:

SVG ICONS



SVG Icons


PROS

  • Menor quantidade de requests
  • Retina display suport
  • Suporta CSS3 
  • Possui icones coloridos nativos


CONS

  • Requer conhecimento de imagens vetoriais
  • Exige bom dominio CSS
  • Para personalização, exige conhecimento em SVG

SVG Icons


Ferramentas interessantes:

Artigos citando sobre SVG Icons:


  • http://blog.jamesflorentino.com/2012/07/21/svg-spriting-in-css.html
  • http://dev.webonomic.nl/unleash-the-power-of-svg-sprites
  • http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/

Vale a pena conferir


  • http://webplatformtools.org/
  • http://bradfrost.github.io/this-is-responsive/
  • http://mobile.smashingmagazine.com/2013/05/29/
    the-state-of-responsive-web-design/

  • http://coding.smashingmagazine.com/2012/08/20/
    towards-retina-web/
  • http://tableless.com.br/utilizando-icones-formato-font/
  • http://www.geekchamp.com/news/
    windows-phone-svg-icon-generator
  • http://coding.smashingmagazine.com/2012/01/16/
    resolution-independence-with-svg/

Perguntas

Obrigado

Made with Slides.com