RESPONSIVE DESIGN
    sem mitos
      Bernardo Heynemann
          @heynemann
vamos fazer
  um site
RESPONSIV
 em alguns
 segundos
SEM
FRAMEWORKS
      !
SEM
JQUERY
CROSS-
BROWSER
 sem internet explorer,
 mas dá pra suportá-lo
       também
MITO 1

 responsive design é
só para sites pequenos
RESPOSTA 1
NOVA HOME DA
 GLOBO.COM
RESPOSTA 1
NOVA HOME DA
 GLOBO.COM
                                    e
                           sive desd
                   é respon
                    UT/11
                já
                   O
MITO 2

tenho muito conteúdo!
MITO 2

 tenho muito conteúdo!
a resolução dos smartphones não é suficiente para mim!
  o conteúdo não se encaixa em resoluções abaixo de
                      1024x768!
NÓS NUNCA VAMOS
ESCONDER
CONTEUDO
     ´
NÓS NUNCA VAMOS
ESCONDER
CONTEUDO
     ´
além disso...
NÓS NUNCA VAMOS
ESCONDER
CONTEUDO
     ´
utilizando os
   dispositivos da
       maneira
QUE FORAM FEITOS
  PARA SEREM
   UTLIZADOS
utilizando os
   dispositivos da
       maneira
QUE FORAM FEITOS
  PARA SEREM
   UTLIZADOS
    FEATURE    +    ADAPTIVE
   DETECTION       RENDERING
MITO 3

mas custa muito caro!!!
MITO 3

  mas custa muito caro!!!
       responsive design triplica o custo do projeto!
    os designers não conseguem pensar nas diferentes
                         versões!
os desenvolvedores terão que fazer três versões diferentes!
RESPOSTA 3

      CUSTA MAIS,
     pero no mucho
tratar os casos específicos de cada
    dispositivo aumenta o custo
   mas não é tão caro
   quanto você pensa
RESPOSTA 3

   CUSTA MAIS,
  pero no mucho

01 04 UXD
MÊS DEV
        01
RESPOSTA 3

   CUSTA MAIS,
  pero no mucho

01 + 04 + UXD =
MÊS DEV
          01
RESPOSTA 3

     CUSTA MAIS,
    pero no mucho

01 + 04 + UXD =
MÊS DEV
          01
tablets e smartphones
MITO 4
não dá pra fazer por
       causa
MITO 4
    não dá pra fazer por
           causa
os estilos, imagens e scripts do meu site são pesados para
                            o 3G
as imagens redimensionadas no telefone ficam muito ruins
RESPOSTA 4

        EXISTE LUZ
       no fim do túnel

carregar folhas
                  +
                          imagens em
  de estilo no
                           diferentes
 topo e scripts
                           tamanhos
    no fim
uma original, vários cortes
          corte sob demanda com reconhecimento
                          facial




 135×95      135×195                 420×270
  7Kb           12Kb                    23Kb


  http://github.com/globocom/thumbor
PERGUNTAS?
heynemann@gmail.com
bernardo@corp.globo.com
@heynemann
http://github.com/globocom



como sempre, estamos contratando ;)

Responsive design Sem Mitos

Notas do Editor

  • #2 \n
  • #3 \n
  • #4 \n
  • #5 \n
  • #6 \n
  • #7 - responsive design só serve para intranets e sites muito pequenos\n
  • #8 \n
  • #9 - responsive design só serve para intranets e sites muito pequenos\n
  • #10 \n
  • #11 \n
  • #12 \n
  • #13 \n
  • #14 \n
  • #15 - responsive design só serve para intranets e sites muito pequenos\n
  • #16 Fazer versões responsive realmente sai um pouco mais caro, afinal temos que tratar casos específicos para dispositivos específicos.\n
  • #17 Fazer versões responsive realmente sai um pouco mais caro, afinal temos que tratar casos específicos para dispositivos específicos.\n
  • #18 Fazer versões responsive realmente sai um pouco mais caro, afinal temos que tratar casos específicos para dispositivos específicos.\n
  • #19 Fazer versões responsive realmente sai um pouco mais caro, afinal temos que tratar casos específicos para dispositivos específicos.\n
  • #20 Fazer versões responsive realmente sai um pouco mais caro, afinal temos que tratar casos específicos para dispositivos específicos.\n
  • #21 - responsive design só serve para intranets e sites muito pequenos\n
  • #22 \n
  • #23 \n
  • #24 \n