design responsivo - mobcamp 2014

Download Design Responsivo - MobCamp 2014

Post on 08-Sep-2014

637 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

Palestra de Design Responsivo do Sérgio Lopes na MobCamp 2014

TRANSCRIPT

  • DESIGNRESPONSIVO POR UMA WEB NICA
  • @sergio_caelum sergiolopes.org
  • sergiolopes.org
  • SITE MOBILE ou DESIGN RESPONSIVO?
  • NO EXISTE MOBILE
  • ONE WEB
  • DESIGNRESPONSIVO
  • 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
  • DESIGNRESPONSIVO FLEXVEL ADAPTVEL
  • IMPLEMENTANDO DESIGNRESPONSIVO
  • CRIAO PHOTOSHOP?
  • CRIAO DESIGN IN THE BROWSER
  • LAYOUT FLUDO
  • MEDIDAS FLEXVEIS
  • %
  • width: 90%;
  • width: 90%; 90%
  • width: 90%; 90% 5% 5%
  • width: 90%; 90% 5% 5% 1280px
  • width: 90%; 90% 5% 5% 1280px 1152px
  • width: 90%; 90% 5% 5% 1280px 1152px 54px 54px
  • width: 90%; 90% 5% 5% 1280px 1152px 54px 54px 360px
  • width: 90%; 90% 5% 5% 1280px 1152px 54px 54px 360px 324px
  • width: 90%; 90% 5% 5% 1280px 1152px 54px 54px 360px 324px 18px 18px
  • width: 90%;
  • width: 90%; width: 50%; width: 50%;
  • width: 90%; width: 50%; width: 50%; 33% 33% 33% 33% 33% 33%
  • % font-size
  • font-size: 125%;
  • font-size: 125%;
  • font-size: 125%; font-size: 90%;
  • font-size: 125%; font-size: 90%; font-size: 150%;
  • font-size: 125%; font-size: 90%; font-size: 150%;
  • font-size: 125%; font-size: 90%; font-size: 150%;

    16px

  • font-size: 125%; font-size: 90%; font-size: 150%;

    16px 20px

  • font-size: 125%; font-size: 90%; font-size: 150%;

    16px 20px 20px

  • font-size: 125%; font-size: 90%; font-size: 150%;

    16px 20px 20px 18px

  • font-size: 125%; font-size: 90%; font-size: 150%;

    16px 20px 20px 18px 27px

  • font-size: 125%; font-size: 90%; font-size: 150%;

    16px 20px 20px 18px 18px 27px

  • font-size: 125%; font-size: 90%; font-size: 150%;

    20px 25px 25px 22px 22px 33px

    font-size: 20px;
  • font-size: 1.25em; font-size: .9em; font-size: 1.5em;

    20px 25px 25px 22px 22px 33px

    font-size: 20px;
  • font-size: 1.25em; font-size: 90%; font-size: 1.5em;

    20px 25px 25px 22px 22px 33px

    font-size: 20px;
  • % font-size em
  • font-size: 120%; font-size: 1.2em;
  • margin: 1em 0; max-width: 40em;

    margin: 1em 0; max-width: 40em;

    margin: 1em 0; max-width: 40em;

  • font-size: 1.5em;

    margin: 1em 0; max-width: 40em;

    margin: 1em 0; max-width: 40em;

    margin: 1em 0; max-width: 40em;

  • em
  • rem
  • font-size: 1.5rem;
  • font-size: 1.5rem;
  • font-size: 1.5rem; font-size: .5rem;
  • font-size: 1.5rem; font-size: .5rem; font-size: 2rem;
  • font-size: 1.5rem; font-size: .5rem; font-size: 2rem;
  • font-size: 1.5rem; font-size: .5rem; font-size: 2rem;

    16px

  • font-size: 1.5rem; font-size: .5rem; font-size: 2rem;

    16px 24px

  • font-size: 1.5rem; font-size: .5rem; font-size: 2rem;

    16px 24px 24px

  • font-size: 1.5rem; font-size: .5rem; font-size: 2rem;

    16px 24px 24px 8px

  • font-size: 1.5rem; font-size: .5rem; font-size: 2rem;

    16px 24px 24px 8px 32px

  • font-size: 1.5rem; font-size: .5rem; font-size: 2rem;

    16px 24px 24px 8px 8px 32px

  • font-size: 1.5rem; font-size: .5rem; font-size: 2rem;

    20px 30px 30px 10px 10px 40px

  • font-size: 1.5rem; font-size: .5rem; font-size: 2rem;

    20px 30px 30px 10px 10px 40px

  • vw & vhVIEWPORT UNITS
  • width: 90vw; width: 45vw; width: 45vw; 15 vw 15 vw 15 vw 15 vw 15 vw 15 vw
  • PRTICA
  • FLUDO...
  • FLUDO... .menu { margin: 2%; width: 96%; } .menu > li { width: 33.3%; }
  • FLUDO... 320px 400px
  • iOS 7 The mobile OS from a whole new perspe Watch the keynote Learn more
  • .main img { position: relative; top: -1em; }
  • .main img { position: relative; top: -1em; } ! @media (min-width: 400px) { .main img { top: -2em; } }
  • .news { float: left; width: 100%; } @media (min-width: 768px) { .news { width: 50%; } } @media (min-width: 1024px) { .news { width: 25%; } }
  • CSS3 MEDIA QUERIES BOAS PRTICAS
  • .news { float: left; width: 100%; } @media (min-width: 768px) { .news { width: 50%; } } @media (min-width: 1024px) { .news { width: 25%; } }