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