SlideShare uma empresa Scribd logo
WEB DESIGN RESPONSIVO

                                    Rodrigo Simoni
                                     CEO da Brandweb

                                      facebook/rodrigosimoni
                                    contato@brandweb.com.br
                                      www.brandweb.com.br




sexta-feira, 28 de setembro de 12
O IMPACTO DOS
                          DISPOSITIVOS MÓVEIS




sexta-feira, 28 de setembro de 12
255 milhões            de linhas móveis ativas no Brasil


                                                 Fonte: Anatel




sexta-feira, 28 de setembro de 12
69%
                                    dos brasileiros têm celular


                                              Fonte: IBGE




sexta-feira, 28 de setembro de 12
46%
                                    navegam na internet através de celular


                                                   Fonte: IBGE




sexta-feira, 28 de setembro de 12
77,7 milhões               de pessoas na internet mobile


                                               Fonte: IBGE




sexta-feira, 28 de setembro de 12
Tablets


                                      275%
                              Crescimento de tablets no Brasil em 2012


                                             Fonte: IDC Brasil




sexta-feira, 28 de setembro de 12
Estes Números estão crescendo




sexta-feira, 28 de setembro de 12
Estes Números estão crescendo




                                       Alguns motivos:
                                    Crescimento da classe C
                                     Xing Ling com internet
                                    Popularização da intenet
                                         Redes sociais
sexta-feira, 28 de setembro de 12
O que é Web Design
          Responsivo?


sexta-feira, 28 de setembro de 12
O que é Web Design Responsivo?

           É uma técnica de estruturação HTML e CSS, em que o
            site se adapta em qualquer tamanho de tela sem que
             precise fazer versões do site para cada dispositivo.




sexta-feira, 28 de setembro de 12
Como surgiu?


sexta-feira, 28 de setembro de 12
Como surgiu?

      Em 2010, Ethan Marcotte publicou um artigo no blog A List
        Apart apresentando pela primeira vez o conceito e as
                técnicas de Web Design Responsivo.




sexta-feira, 28 de setembro de 12
Como surgiu?

                                    Leitura obrigatória:




sexta-feira, 28 de setembro de 12
Os ingredientes


sexta-feira, 28 de setembro de 12
Os ingredientes


                            Como fazer de fato um site responsivo?
                          Em termos de front-end, os ingredientes são:



                                           1. Grid flexível
                                    2. Imagens e mídias flexíveis
                                          3. Media queries




sexta-feira, 28 de setembro de 12
1. Grid flexível


sexta-feira, 28 de setembro de 12
1. Grid flexível

            Grid é um conjunto de linhas bases que fornecem uma
                         estrutura para o seu layout.




sexta-feira, 28 de setembro de 12
1. Grid flexível

            Grid é um conjunto de linhas bases que fornecem uma
                         estrutura para o seu layout.




sexta-feira, 28 de setembro de 12
1. Grid flexível
                                     Site de exemplo:




sexta-feira, 28 de setembro de 12
1. Grid flexível
                                     Site de exemplo:



                                                  •     Faça seus layouts usando grids.

                                                  •     Pense em como seu layout se
                                                        adaptará nos smartphones e
                                                        tablets.

                                                  •     Exemplo de grids: http://960.gs/




sexta-feira, 28 de setembro de 12
1. Grid flexível

                               Antes de tudo insira a meta tag viewport.

            Serve para desativar a escala original do navegador, definindo uma nova escala,
           orientando como o site deve ser exibido, além de controlar de zoom do dispositivo.



      <meta name="viewport" content="width=device-width;
                      initial-scale=1.0">




sexta-feira, 28 de setembro de 12
1. Grid flexível
                                       Divs flexíveis



                                     #geral {
                                     ! width: 960px;
                                     ! margin: 0 auto;
                                     ! background: #fff;
                                     }

                                     .chamadas article {
                                     ! width: 300px;
                                     ! float: left;
                                     ! margin: 10px;
                                     }


sexta-feira, 28 de setembro de 12
1. Grid flexível
                                       Divs flexíveis



                                     #geral {
                                     ! width: 960px;
                                     ! margin: 0 auto;
                                     ! background: #fff;
                                     }

                                     .chamadas article {
                                     ! width: 300px;
                                     ! float: left;
                                     ! margin: 10px;
                                     }


sexta-feira, 28 de setembro de 12
1. Grid flexível



                                    Decore a fórmula mágica:


          objeto ÷ contexto = resultado



sexta-feira, 28 de setembro de 12
1. Grid flexível


                                        Fórmula mágica:

                               objeto ÷ contexto = resultado


                                    300px ÷ 960px = 0.3125
                        Coloque o ponto duas casas para a direita e acrescente o sinal de %.




sexta-feira, 28 de setembro de 12
1. Grid flexível
                                              Divs flexíveis



                                    #geral {
                                    ! width: 90%; /* 960px */
                                    ! margin: 0 auto;
                                    ! background: #fff;
                                    }

                                    .chamadas article {
                                    ! width: 31.25%; /* 300px / 960px */
                                    ! float: left;
                                    ! margin: 1%;
                                    }


sexta-feira, 28 de setembro de 12
1. Grid flexível
                                    Fontes flexíveis - trocar px por em
                   Os valores de tamanho das fontes devem ser substituídos de px para em.
                  O Valor padrão das fontes considerada pelas browsers é de 16px, exemplo:


                                             .chamadas h1 {
                                             ! font: 30px arial;
                                             ! color: #666;
                                             ! margin: 1%;
                                             }


                                         Fórmula: 30 ÷ 16 = 1.87500

                         No caso de fontes, não é necessário posicionar o ponto para direita.


sexta-feira, 28 de setembro de 12
1. Grid flexível
                                    Fontes flexíveis - trocar px por em



                                    .chamadas h1 {
                                    ! font: 1.87500em arial; /* 30px / 16px */
                                    ! color: #666;
                                    ! margin: 1%;
                                    }




sexta-feira, 28 de setembro de 12
2. Imagens flexíveis


sexta-feira, 28 de setembro de 12
2. Imagens flexíveis

         As imagens também precisam se adaptar conforme o tamanho da tela, para não “sair
                             fora” do layout. Então faça o seguinte:



                                                img {
                                                     max-width: 100%;
                                                }


                                    A mesma regra serve para outros elementos do html:



                                            img, embed, object, video {
                                                 max-width: 100%;
                                            }


sexta-feira, 28 de setembro de 12
2. Imagens flexíveis

                                     Adapte isso para o IE...




                                     img, embed, object, video {
                                          width: 100%;
                                     }



sexta-feira, 28 de setembro de 12
3. Media queries


sexta-feira, 28 de setembro de 12
3. Media Queries
       São novos seletores de CSS3 adicionados pela W3C. Eles servem como uma consulta
                  de mídia que o navegador faz quando o seu site for acessado.

                                    Media queries interna no CSS:



    @media screen and (max-width: 1024px) { /* Layout para desktops */
      Estilos aqui...
    }

    @media screen and (max-width: 380px) { /* Layout para Smartphones */
      Estilos aqui...
    }

    @media screen and (max-width: 780px) { /* Layout para Tablets */
      Estilos aqui...
    }

sexta-feira, 28 de setembro de 12
3. Media Queries

                                    Chamando as Media Querie externamente:




    <link rel="stylesheet" href="smartphones.css" media="screen and (max-
    width:320px)" />

    <link rel="stylesheet" href="tablets.css" media="screen and (max-width:
    320px)" />


        Outros tipos de especificações para Media Queries estão no site da W3C..




sexta-feira, 28 de setembro de 12
3. Media Queries

         Media queries não são suportadas pelo IE8 e inferiores. Por isso, devemos usar uma
                  biblioteca como o css3-mediaqueries-js que faz o trabalho sujo.


                                          Para chamá-la:



     <header>

     <!--[if lt IE 9]>
         <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/
     css3-mediaqueries.js"></script>
     <![endif]-->

     </header>



sexta-feira, 28 de setembro de 12
Alguns exemplos


                                        http://www.globo.com
                                       http://bostonglobe.com
                                    http://html.adobe.com/edge
                                        http://mediaqueri.es/




sexta-feira, 28 de setembro de 12
Obrigado!



   Rodrigo Simoni

   facebook/rodrigosimoni
   contato@brandweb.com.br
   www.brandweb.com.br


sexta-feira, 28 de setembro de 12

Mais conteúdo relacionado

Mais procurados

Introdução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoIntrodução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivo
Régis Eduardo Weizenmann Gregol
 
Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para web
Ítalo Waxman
 
Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!
Cristofer Sousa
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
Victor Melo
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptável
Guto Xavier
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Augusto César Albuquerque
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
Gustavo Zimmermann
 
Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
Jackson F. de A. Mafra
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
Diego Eis
 
Design responsivo
Design responsivo Design responsivo
Design responsivo
Ana Laura Gomes
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
Eduardo Mendes
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
Diego Eis
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Diego Eis
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
Diego Eis
 
Criação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material DesignCriação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material Design
Daniel Brandão
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
Davidson Fellipe
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
Rael Max
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
Sérgio Vilar
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
Diego Eis
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)
Felipe Fernandes
 

Mais procurados (20)

Introdução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoIntrodução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivo
 
Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para web
 
Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptável
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
 
Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
 
Design responsivo
Design responsivo Design responsivo
Design responsivo
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
Criação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material DesignCriação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material Design
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)
 

Semelhante a Web Design Responsivo

Debito técnicos
Debito técnicosDebito técnicos
Debito técnicos
COTIC-PROEG (UFPA)
 
Engenharia web seminário
Engenharia web   seminárioEngenharia web   seminário
Engenharia web seminário
Benedilosn
 
Ajax
AjaxAjax
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-ender
tdc-globalcode
 
Aula android 01.pdf
Aula android 01.pdfAula android 01.pdf
Aula android 01.pdf
Carlos Cavalcanti
 
Projetando Apps
Projetando AppsProjetando Apps
Projetando Apps
Samuel Menezes
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Cristofer Sousa
 
IaaS: Implantação e gerenciamento de configurações de ambientes Cloud usando...
 IaaS: Implantação e gerenciamento de configurações de ambientes Cloud usando... IaaS: Implantação e gerenciamento de configurações de ambientes Cloud usando...
IaaS: Implantação e gerenciamento de configurações de ambientes Cloud usando...
Diego Santos
 
Html 5 datainfo
Html 5   datainfoHtml 5   datainfo
Html 5 datainfo
Romário J. Santos
 
Neto Marin - Next Level Apps
Neto Marin - Next Level AppsNeto Marin - Next Level Apps
Neto Marin - Next Level Apps
iMasters
 
Responsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possívelResponsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possível
Sérgio Lima
 
Infraestrutura como código com Puppet e Mcollective
Infraestrutura como código com Puppet e McollectiveInfraestrutura como código com Puppet e Mcollective
Infraestrutura como código com Puppet e Mcollective
Jose Augusto Carvalho
 
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
Bunee.io - Hiring with Intelligence
 
Mini-curso Twitter Boostrap 3.3.5
Mini-curso Twitter Boostrap 3.3.5Mini-curso Twitter Boostrap 3.3.5
Mini-curso Twitter Boostrap 3.3.5
Diego Sanches Modesto
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
Leonardo Quixada
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
Carlos Eduardo Kadu
 
Introducao ao Rails
Introducao ao RailsIntroducao ao Rails
Introducao ao Rails
Klaus Paiva
 
Puppet Cloud IaaS
Puppet Cloud IaaSPuppet Cloud IaaS
Puppet Cloud IaaS
Jose Augusto Carvalho
 
Usando a data grid wpf
Usando a data grid wpfUsando a data grid wpf
Usando a data grid wpf
Sidney07queiroz
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
Vitor Garcia
 

Semelhante a Web Design Responsivo (20)

Debito técnicos
Debito técnicosDebito técnicos
Debito técnicos
 
Engenharia web seminário
Engenharia web   seminárioEngenharia web   seminário
Engenharia web seminário
 
Ajax
AjaxAjax
Ajax
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-ender
 
Aula android 01.pdf
Aula android 01.pdfAula android 01.pdf
Aula android 01.pdf
 
Projetando Apps
Projetando AppsProjetando Apps
Projetando Apps
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 
IaaS: Implantação e gerenciamento de configurações de ambientes Cloud usando...
 IaaS: Implantação e gerenciamento de configurações de ambientes Cloud usando... IaaS: Implantação e gerenciamento de configurações de ambientes Cloud usando...
IaaS: Implantação e gerenciamento de configurações de ambientes Cloud usando...
 
Html 5 datainfo
Html 5   datainfoHtml 5   datainfo
Html 5 datainfo
 
Neto Marin - Next Level Apps
Neto Marin - Next Level AppsNeto Marin - Next Level Apps
Neto Marin - Next Level Apps
 
Responsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possívelResponsive Web Design - Entregando a informação da melhor maneiro possível
Responsive Web Design - Entregando a informação da melhor maneiro possível
 
Infraestrutura como código com Puppet e Mcollective
Infraestrutura como código com Puppet e McollectiveInfraestrutura como código com Puppet e Mcollective
Infraestrutura como código com Puppet e Mcollective
 
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
 
Mini-curso Twitter Boostrap 3.3.5
Mini-curso Twitter Boostrap 3.3.5Mini-curso Twitter Boostrap 3.3.5
Mini-curso Twitter Boostrap 3.3.5
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Introducao ao Rails
Introducao ao RailsIntroducao ao Rails
Introducao ao Rails
 
Puppet Cloud IaaS
Puppet Cloud IaaSPuppet Cloud IaaS
Puppet Cloud IaaS
 
Usando a data grid wpf
Usando a data grid wpfUsando a data grid wpf
Usando a data grid wpf
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
 

Web Design Responsivo

  • 1. WEB DESIGN RESPONSIVO Rodrigo Simoni CEO da Brandweb facebook/rodrigosimoni contato@brandweb.com.br www.brandweb.com.br sexta-feira, 28 de setembro de 12
  • 2. O IMPACTO DOS DISPOSITIVOS MÓVEIS sexta-feira, 28 de setembro de 12
  • 3. 255 milhões de linhas móveis ativas no Brasil Fonte: Anatel sexta-feira, 28 de setembro de 12
  • 4. 69% dos brasileiros têm celular Fonte: IBGE sexta-feira, 28 de setembro de 12
  • 5. 46% navegam na internet através de celular Fonte: IBGE sexta-feira, 28 de setembro de 12
  • 6. 77,7 milhões de pessoas na internet mobile Fonte: IBGE sexta-feira, 28 de setembro de 12
  • 7. Tablets 275% Crescimento de tablets no Brasil em 2012 Fonte: IDC Brasil sexta-feira, 28 de setembro de 12
  • 8. Estes Números estão crescendo sexta-feira, 28 de setembro de 12
  • 9. Estes Números estão crescendo Alguns motivos: Crescimento da classe C Xing Ling com internet Popularização da intenet Redes sociais sexta-feira, 28 de setembro de 12
  • 10. O que é Web Design Responsivo? sexta-feira, 28 de setembro de 12
  • 11. O que é Web Design Responsivo? É uma técnica de estruturação HTML e CSS, em que o site se adapta em qualquer tamanho de tela sem que precise fazer versões do site para cada dispositivo. sexta-feira, 28 de setembro de 12
  • 12. Como surgiu? sexta-feira, 28 de setembro de 12
  • 13. Como surgiu? Em 2010, Ethan Marcotte publicou um artigo no blog A List Apart apresentando pela primeira vez o conceito e as técnicas de Web Design Responsivo. sexta-feira, 28 de setembro de 12
  • 14. Como surgiu? Leitura obrigatória: sexta-feira, 28 de setembro de 12
  • 15. Os ingredientes sexta-feira, 28 de setembro de 12
  • 16. Os ingredientes Como fazer de fato um site responsivo? Em termos de front-end, os ingredientes são: 1. Grid flexível 2. Imagens e mídias flexíveis 3. Media queries sexta-feira, 28 de setembro de 12
  • 17. 1. Grid flexível sexta-feira, 28 de setembro de 12
  • 18. 1. Grid flexível Grid é um conjunto de linhas bases que fornecem uma estrutura para o seu layout. sexta-feira, 28 de setembro de 12
  • 19. 1. Grid flexível Grid é um conjunto de linhas bases que fornecem uma estrutura para o seu layout. sexta-feira, 28 de setembro de 12
  • 20. 1. Grid flexível Site de exemplo: sexta-feira, 28 de setembro de 12
  • 21. 1. Grid flexível Site de exemplo: • Faça seus layouts usando grids. • Pense em como seu layout se adaptará nos smartphones e tablets. • Exemplo de grids: http://960.gs/ sexta-feira, 28 de setembro de 12
  • 22. 1. Grid flexível Antes de tudo insira a meta tag viewport. Serve para desativar a escala original do navegador, definindo uma nova escala, orientando como o site deve ser exibido, além de controlar de zoom do dispositivo. <meta name="viewport" content="width=device-width; initial-scale=1.0"> sexta-feira, 28 de setembro de 12
  • 23. 1. Grid flexível Divs flexíveis #geral { ! width: 960px; ! margin: 0 auto; ! background: #fff; } .chamadas article { ! width: 300px; ! float: left; ! margin: 10px; } sexta-feira, 28 de setembro de 12
  • 24. 1. Grid flexível Divs flexíveis #geral { ! width: 960px; ! margin: 0 auto; ! background: #fff; } .chamadas article { ! width: 300px; ! float: left; ! margin: 10px; } sexta-feira, 28 de setembro de 12
  • 25. 1. Grid flexível Decore a fórmula mágica: objeto ÷ contexto = resultado sexta-feira, 28 de setembro de 12
  • 26. 1. Grid flexível Fórmula mágica: objeto ÷ contexto = resultado 300px ÷ 960px = 0.3125 Coloque o ponto duas casas para a direita e acrescente o sinal de %. sexta-feira, 28 de setembro de 12
  • 27. 1. Grid flexível Divs flexíveis #geral { ! width: 90%; /* 960px */ ! margin: 0 auto; ! background: #fff; } .chamadas article { ! width: 31.25%; /* 300px / 960px */ ! float: left; ! margin: 1%; } sexta-feira, 28 de setembro de 12
  • 28. 1. Grid flexível Fontes flexíveis - trocar px por em Os valores de tamanho das fontes devem ser substituídos de px para em. O Valor padrão das fontes considerada pelas browsers é de 16px, exemplo: .chamadas h1 { ! font: 30px arial; ! color: #666; ! margin: 1%; } Fórmula: 30 ÷ 16 = 1.87500 No caso de fontes, não é necessário posicionar o ponto para direita. sexta-feira, 28 de setembro de 12
  • 29. 1. Grid flexível Fontes flexíveis - trocar px por em .chamadas h1 { ! font: 1.87500em arial; /* 30px / 16px */ ! color: #666; ! margin: 1%; } sexta-feira, 28 de setembro de 12
  • 30. 2. Imagens flexíveis sexta-feira, 28 de setembro de 12
  • 31. 2. Imagens flexíveis As imagens também precisam se adaptar conforme o tamanho da tela, para não “sair fora” do layout. Então faça o seguinte: img {      max-width: 100%; } A mesma regra serve para outros elementos do html: img, embed, object, video {      max-width: 100%; } sexta-feira, 28 de setembro de 12
  • 32. 2. Imagens flexíveis Adapte isso para o IE... img, embed, object, video {      width: 100%; } sexta-feira, 28 de setembro de 12
  • 33. 3. Media queries sexta-feira, 28 de setembro de 12
  • 34. 3. Media Queries São novos seletores de CSS3 adicionados pela W3C. Eles servem como uma consulta de mídia que o navegador faz quando o seu site for acessado. Media queries interna no CSS: @media screen and (max-width: 1024px) { /* Layout para desktops */   Estilos aqui... } @media screen and (max-width: 380px) { /* Layout para Smartphones */   Estilos aqui... } @media screen and (max-width: 780px) { /* Layout para Tablets */   Estilos aqui... } sexta-feira, 28 de setembro de 12
  • 35. 3. Media Queries Chamando as Media Querie externamente: <link rel="stylesheet" href="smartphones.css" media="screen and (max- width:320px)" /> <link rel="stylesheet" href="tablets.css" media="screen and (max-width: 320px)" /> Outros tipos de especificações para Media Queries estão no site da W3C.. sexta-feira, 28 de setembro de 12
  • 36. 3. Media Queries Media queries não são suportadas pelo IE8 e inferiores. Por isso, devemos usar uma biblioteca como o css3-mediaqueries-js que faz o trabalho sujo. Para chamá-la: <header> <!--[if lt IE 9]>     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/ css3-mediaqueries.js"></script> <![endif]--> </header> sexta-feira, 28 de setembro de 12
  • 37. Alguns exemplos http://www.globo.com http://bostonglobe.com http://html.adobe.com/edge http://mediaqueri.es/ sexta-feira, 28 de setembro de 12
  • 38. Obrigado! Rodrigo Simoni facebook/rodrigosimoni contato@brandweb.com.br www.brandweb.com.br sexta-feira, 28 de setembro de 12