Design responsivo-por-uma-web-unica-130503184809-phpapp02

  • View
    161

  • Download
    1

Embed Size (px)

Text of Design responsivo-por-uma-web-unica-130503184809-phpapp02

  • 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

  • NO EXISTEMOBILE

  • terra.com.br

  • m.terra.com.br

  • tablet.terra.com.br

  • DESIGN RESPONSIVO

  • LAYOUT FLUDO

  • 960px

    470px470px

  • MEDIDAS FLEXVEIS

  • MEDIDAS FLEXVEIS

    %, em, rem, vh

  • 100%

    49%49%

  • PROPORES

  • NUMA TELA DE 320px

    100%

    49% 49%

  • LAYOUT CONDICIONAL

  • NUMA TELA DE 320px

  • .formulario,

    .endereco { width: 49%;}

    @media (max-width: 600px) { .formulario, .endereo { 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 RESPONSIVOFLEXVELADAPTVEL

  • FRAMEWORKS&

    FERRAMENTAS

  • CRIAOPHOTOSHOP?

  • CRIAODESIGN IN THE BROWSER

  • GRIDSBOOTSTRAP, FOUNDATION, ETC

  • TESTESEMULADORES & APARELHOS

  • LIBSZEPTO, HAMMER, MICROJS

  • SITE MOBILE ouDESIGN RESPONSIVO?

  • DESIGN ADAPTATIVO

    RESPONSIVO

  • DESIGN ADAPTATIVO

    RESPONSIVOSEMPR

    E

  • 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

  • ESTRATGIA

  • 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