RESPONSIVE DESIGN
sem mitos
Bernardo Heynemann
@heynemann
Tuesday, April 24, 2012
Slide 2
Slide 2 text
vamos fazer
um site
em alguns
segundos
RESPONSIVE
Tuesday, April 24, 2012
Slide 3
Slide 3 text
SEM
FRAMEWORKS!
Tuesday, April 24, 2012
Slide 4
Slide 4 text
SEM
JQUERY!
Tuesday, April 24, 2012
Slide 5
Slide 5 text
CROSS-
BROWSER
sem internet explorer, mas dá
pra suportá-lo também
Tuesday, April 24, 2012
Slide 6
Slide 6 text
MITO 1
responsive design é
só para sites pequenos
Tuesday, April 24, 2012
Slide 7
Slide 7 text
RESPOSTA 1
NOVA HOME DA GLOBO.COM
Tuesday, April 24, 2012
Slide 8
Slide 8 text
RESPOSTA 1
NOVA HOME DA GLOBO.COM
já é responsive desde
OUT/11
Tuesday, April 24, 2012
Slide 9
Slide 9 text
MITO 2
tenho muito conteúdo!
Tuesday, April 24, 2012
Slide 10
Slide 10 text
MITO 2
tenho muito conteúdo!
a resolução dos smartphones não é suficiente para mim!
o conteúdo não se encaixa em resoluções abaixo de 1024x768!
Tuesday, April 24, 2012
Slide 11
Slide 11 text
NÓS NUNCA VAMOS
ESCONDER
CONTEUDO
´
Tuesday, April 24, 2012
Slide 12
Slide 12 text
NÓS NUNCA VAMOS
ESCONDER
CONTEUDO
´
Tuesday, April 24, 2012
Slide 13
Slide 13 text
além disso...
Tuesday, April 24, 2012
Slide 14
Slide 14 text
NÓS NUNCA VAMOS
ESCONDER
CONTEUDO
´
Tuesday, April 24, 2012
Slide 15
Slide 15 text
QUE FORAM FEITOS
PARA SEREM
UTLIZADOS
utilizando os
dispositivos da maneira
Tuesday, April 24, 2012
Slide 16
Slide 16 text
QUE FORAM FEITOS
PARA SEREM
UTLIZADOS
utilizando os
dispositivos da maneira
FEATURE
DETECTION
ADAPTIVE
RENDERING
+
Tuesday, April 24, 2012
Slide 17
Slide 17 text
MITO 3
mas custa muito caro!!!
Tuesday, April 24, 2012
Slide 18
Slide 18 text
MITO 3
mas custa muito caro!!!
responsive design triplica o custo do projeto!
os designers não conseguem pensar nas diferentes versões!
os desenvolvedores terão que fazer três versões diferentes!
Tuesday, April 24, 2012
Slide 19
Slide 19 text
RESPOSTA 3
CUSTA MAIS,
pero no mucho
mas não é tão caro
quanto você pensa
tratar os casos específicos de cada
dispositivo aumenta o custo
Tuesday, April 24, 2012
Slide 20
Slide 20 text
RESPOSTA 3
CUSTA MAIS,
pero no mucho
01
MÊS
04
DEV
01
UXD
Tuesday, April 24, 2012
Slide 21
Slide 21 text
RESPOSTA 3
CUSTA MAIS,
pero no mucho
01
MÊS
04
DEV
01
UXD
+ + =
Tuesday, April 24, 2012
Slide 22
Slide 22 text
RESPOSTA 3
CUSTA MAIS,
pero no mucho
01
MÊS
04
DEV
01
UXD
+ + =
tablets e smartphones
Tuesday, April 24, 2012
Slide 23
Slide 23 text
MITO 4
não dá pra fazer por causa
da conexão dos usuários!
Tuesday, April 24, 2012
Slide 24
Slide 24 text
MITO 4
não dá pra fazer por causa
da conexão dos usuários!
os estilos, imagens e scripts do meu site são pesados para o 3G
as imagens redimensionadas no telefone ficam muito ruins
Tuesday, April 24, 2012
Slide 25
Slide 25 text
RESPOSTA 4
EXISTE LUZ
no fim do túnel
carregar folhas de
estilo no topo e
scripts no fim
imagens em
diferentes
tamanhos
+
Tuesday, April 24, 2012
Slide 26
Slide 26 text
135×95 135×195 420×270
7Kb 12Kb 23Kb
uma original, vários cortes
corte sob demanda com reconhecimento facial
http:/
/github.com/globocom/thumbor
Tuesday, April 24, 2012
Slide 27
Slide 27 text
PERGUNTAS?
como sempre, estamos contratando ;)
[email protected][email protected]
@heynemann
http:/
/github.com/globocom
Tuesday, April 24, 2012