DESIGN RESPONSIVO
POR UMA
WEB ÚNICA
@sergio_caelumsergiolopes.org
sergiolopes.org
10% off:OLHOSEO10
SITE MOBILE ouDESIGN RESPONSIVO?
SITE MOBILEm.uol.com.br
SITE MOBILE ouDESIGN RESPONSIVO?
SITE MOBILE ouDESIGN RESPONSIVO? MOBILE
???
MOBILETELA PEQUENA
MOBILE
PORTABILIDADE
TELA PEQUENA
MOBILE3GPORTABILIDADE
TELA PEQUENA
MOBILE3G TOUCHPORTABILIDADE
TELA PEQUENA
tablet.terra.com.br
DESIGN RESPONSIVO
MEDIDAS FLEXÍVEIS
MEDIDAS FLEXÍVEIS
%, em, rem, vh
NUMA TELA DE 320px
100%
49% 49%
LAYOUT CONDICIONAL
NUMA TELA DE 320px
.formulario,
.endereco { width: 49%;}
@media (max-width: 600px) { .formulario, .endereço { width: 100%; }}
CSS
.formulario,
.endereco { width: 49%;}
@media (max-width: 600px) { .formulario, .endereco { width: 100%; }}
CSS
CSS3 MEDIA QUERIES
.formulario,
.endereco { width: 49%;}
@media (max-width: 600px) { .formulario, .endereco { width: 100%; }}
CSS
DESIGN RESPONSIVOFLEXÍVELADAPTÁVEL
FRAMEWORKS&
FERRAMENTAS
CRIAÇÃOPHOTOSHOP?
CRIAÇÃODESIGN IN THE BROWSER
GRIDSBOOTSTRAP, FOUNDATION, ETC
TESTESEMULADORES & APARELHOS
LIBSZEPTO, HAMMER, MICROJS
SITE MOBILE ouDESIGN RESPONSIVO?
DESIGN ADAPTATIVO
RESPONSIVO
DESIGN ADAPTATIVO
RESPONSIVOSEMPRE
SITE MOBILE ouDESIGN RESPONSIVO?
SITE MOBILE ouDESIGN RESPONSIVO?
SITE ÚNICO
SITE MOBILEm.uol.com.br
3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
3" 4" 5" 7" 9" 10" 13" 15" 17" 20"
DESIGN RESPONSIVO
POR UMA
WEB ÚNICA
OBRIGADOsergiolopes.org@sergio_caelum
sergiolopes.org
10% off:OLHOSEO10