Upload
caelum
View
3.459
Download
3
Embed Size (px)
DESCRIPTION
Palestra de Sérgio Lopes no OlhóSEO 2013 - Florianópolis
Citation preview
DESIGN RESPONSIVO
POR UMA
WEB ÚNICA
@sergio_caelumsergiolopes.org
sergiolopes.org
10% off:OLHOSEO10
MOBILEBOMBANDO
APP ouWEB?
WEB-FIRST
SITE MOBILE ouDESIGN RESPONSIVO?
www.uol.com.br
SITE MOBILEm.uol.com.br
bostonglobe.com
SITE MOBILE ouDESIGN RESPONSIVO?
SITE MOBILE ouDESIGN RESPONSIVO? MOBILE
???
MOBILE
MOBILETELA PEQUENA
MOBILE
PORTABILIDADE
TELA PEQUENA
MOBILE3GPORTABILIDADE
TELA PEQUENA
MOBILE3G TOUCHPORTABILIDADE
TELA PEQUENA
NÃO EXISTEMOBILE
terra.com.br
m.terra.com.br
tablet.terra.com.br
DESIGN RESPONSIVO
LAYOUT FLUÍDO
960px
470px470px
MEDIDAS FLEXÍVEIS
MEDIDAS FLEXÍVEIS
%, em, rem, vh
100%
49%49%
PROPORÇÕES
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
www.uol.com.br
SITE MOBILEm.uol.com.br
m.uol.com.br
SEO
ONE WEB
ESTRATÉGIA
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"
MOBILE-FIRST
DESIGN RESPONSIVO
POR UMA
WEB ÚNICA
OBRIGADOsergiolopes.org@sergio_caelum
sergiolopes.org
10% off:OLHOSEO10