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
JPEG
mini
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:
Spritecow
-
http://www.spritecow.com/
Stitches
-
http://draeton.github.com/stitches/
CSS Sprites Generator
-
http://css-sprit.es/
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:
Icomoon
-
http://icomoon.io/
Fontello
-
http://fontello.com/
Pictonic
-
https://pictonic.co/fontbuilder
Pictos
-
https://my.pictos.cc/builder/
Zurb Icon Font
-
http://foundation.zurb.com/icon-fonts.php
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:
http://jefff.co/misc/svg/
Raphäel SVG icons -
http://raphaeljs.com/icons/
Zurb Social SVG icons
http://foundation.zurb.com/social-icons.php
SVG Icon Generator
http://www.kkj.no/apps/windows-phone-svg-icon-generator.htm
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