Criar um Site Responsivo com HTML5 e CSS3 – Parte 3/3

Série Criar Site Responsivo com HTML5 e CSS3

Para finalizar a série de tutoriais, Como Criar um Site Responsivo com HTML5 e CSS3, mostrarei como transformar o layout HTML/CSS desenvolvido no tutorial anterior, Criar Site Responsivo com HTML5 e CSS3 – Parte 02, para design responsivo.

Parte 09 – Converter um Layout Estático em um Layout Fluido

O segredo para se ter um site responsivo é criá-lo sobre uma base fluida. Isso faz com que o layout seja definido em razões e proporções, ao invés de valores absolutos. Então, para convertermos uma medida exata, em pixel, para uma relativa como em ou pixel, utilizaremos a seguinte fórmula (isso mesmo, fórmula… rsrs):

Fig. 01: Fórmula para conversão de medidas absolutas em relativas

Fig. 01: Fórmula para conversão de medidas absolutas em relativas

Unidade de Medida 'em'

Só um breve esclarecimento sobre a medida em. Em CSS (font-size) ela está relacionada às fontes (tipografia) onde 1em equivale a 16px que é justamente o tamanho padrão, em média, das fontes nos navegadores.

Tipografia Flexível

Vamos iniciar a conversão do layout estático em fluido pelas fontes do layout. Utilizando a fórmula acima, vamos transformar os 18px da tag body para a medida em:

Fig. 02: Conversão da tipografia de pixel para "em".

Fig. 02: Conversão da tipografia de pixel para “em”.

Com, isso, faça a seguinte modificação no código CSS, para a tag body e elemento font-size:

Importante!

É importante que você comente cada conversão, pois, sempre precisará, em algum momento, dos dados anteriores que servirão de base para outras conversões.

O que você acabou de fazer foi pegar o objeto (o alvo) a ser convertido, de acordo com o contexto que ele está inserido, que, neste caso, como está na tag body, corresponde a todo o layout e que está relacionado diretamente com a janela do navegador. Parece simples, não é verdade?! Mas fique atento(a), pois existirão vários momentos em que você poderá se confundir o contexto que deverá ser considerado para realizar uma conversão, por exemplo: qual o valor “em” será atribuído à propriedade line-height do código anterior?

Fig. 03: conversão da tipografia em pixel para em

Fig. 03: conversão da tipografia em pixel para em

A propriedade line-height (altura da linha) está ligada diretamente com a fonte do seletor body, por isso que ela é convertida com relação ao body e não, ao navegador. E como o font-size do body é 18px, o valor final será de 1.2222222222em.

Importante!

Não simplifique os resultados da conversão, pois quanto mais casas decimais, mais precisa será a medida. Costumo usar, pelo menos, umas 10 casas.

Veja o resultado:

DEMO

Mas ficou do mesmo jeito que estava antes?

Você deve ter se perguntado, mas é isso mesmo. É sinal que, mesmo convertendo pixel para “em” a estrutura do layout permaneceu intacta.

Convertendo Elementos de Pixel para Porcentagem

Vamos trabalhar agora com a conversão de px para %.

Para transformarmos uma layout fixo, determinado em pixel, por um flexível, utilizando porcentagem, a fórmula é a mesma que você usou para conversão da tipografia do site. O importante é saber identificar bem quem é o contexto, ou seja, quem é o elemento pai e seu descendente, o elemento filho. Veja as ilustrações abaixo sobre proporções e herança:

Fig. 04: Dimensões e proporções de pixel e porcentagem

Fig. 04: Dimensões e proporções de pixel e porcentagem com utilização da fórmula: alvo / contexto = resultado

Fig. 05: Relação de herança e descendência entre os elementos

Fig. 05: Relação de herança e descendência entre os elementos

Bom, o primeiro passo é trabalharmos a classe .centro inserida na tag body, pois ela que servirá de base à todos os elementos restantes do layout. Veja o código CSS a seguir:

Criei um limitador de largura de até 1.200px (para que o site não fique ampliando em telas maiores) e um ajuste de 90% do layout com relação à tela. Não existe regra para a aplicação deste valor em porcentagem, mas o que você deve ter em mente que ele, ao redimensionar a janela do navegador, possa preencher, proporcionalmente o conteúdo do site na tela.

Seção HEADER – Topo do Site

A seção header é descendente do elemento body, portanto, sua formatação será a seguinte:

O logotipo é descendente do header, que, coincidentemente, tem a mesma largura do elemento body, então:

O menu de navegação, nav, também é descendente do header, então:

Seção .CHAMADA – Manchete do Site

Assim como a seção header, a .chamada também tem o body como contexto, portanto:

Seção .CONTAINER – Conteúdo com 3 colunas

When setting flexible margins on an element, your context in the width of the element’s container. Tradução: Ao definir as margens flexíveis sobre um elemento, o seu contexto é a largura do recipiente do elemento.

Ethan Marcotte

When setting flexible padding on an element, your context is the width of the element itself. Tradução: Ao definir o preenchimento flexível sobre um elemento, o seu contexto é a largura do próprio elemento.

Ethan Marcotte

Com base nas definições do criador do Responsive Design, Ethan Marcotte, podemos afirmar que a propriedade margin tem como contexto o recipiente ao qual o elemento está inserido. Quanto ao padding, o seu contexto é o próprio elemento. Por exemplo:

Fig. 06: Diferenciação de conversão entre margin e padding

Fig. 06: Diferenciação de conversão entre margin e padding

Vejamos como esses conceitos funcionam na prática.

Altere o código CSS da seção container para a seguinte formatação:

Veja o resultado:

DEMO

Perceba que houve um deslocamento à direita do preenchimento do container. Mas por quê?

O conceito que fala sobre padding, nos diz que o contexto é o próprio elemento, não é verdade?! Então, a soma dos preenchimentos à esquerda e direita, juntamente com a largura do container deve ser 100%. Veja a ilustração:

Fig. 07: Formatação da seção .container

Fig. 07: Formatação da seção .container

Diante disso, atualize o CSS da seguinte forma:

DEMO

Com isso, os box’s desta seção, ficarão com esta formatação:

Se você redimensionar a janela do navegador perceberá que o conteúdo já está quase convertido, em sua totalidade, para uma versão fluida.

DEMO

Com isso, o restante do código com as devidas conversões, ficará assim:

Resultado:

DEMO

Formatando as imagens

A inserção do simples comando abaixo no código CSS, por incrível que pareça, já torna as imagens flexíveis.

De acordo com a documentação da W3C sobre max-width, essa propriedade CSS restringe a largura do conteúdo de acordo com o valor declarado, que no caso das imagens, 100%. Mas, para funcionar, é necessário que a imagem esteja dentro de algum elemento, seja div, figure, etc.

Com isso, faça um ajuste no seguinte código CSS:

Antes

Depois

Com estas atualizações, nosso layout fluido ficou da seguinte forma:

DEMO

Parte 10 – Converter um Layout Fluido em Layout Responsivo

Você verá agora como que sites responsivos são criados sobre layouts fluidos com a ajuda de media queries, para não atingir resoluções de dispositivos específicos, mas  sim, adaptar o design e conteúdo, através de vários pontos de interrupção, chamados de breakpoints, afim de oferecer uma experiência integrada aos usuários.

Definindo os Breakpoints

Major breakpoints are conditions that, when met, trigger major changes in your design. A major breakpoint might be, for example, where your entire layout must change from two columns to four. Tradução: Os principais pontos de interrupção (breakpoints) são condições que, quando cumpridas, provocam grandes mudanças no seu projeto. Um importante ponto de interrupção pode ser, por exemplo, onde toda a sua disposição deve mudar a partir de duas colunas de quatro.

Stephen Hay (http://alistapart.com/article/responsive-web-design/)

Como citei na primeira parte da série: , desenvolvi 5 variações do mesmo site para utilizar os seguintes breakpoints:

  • 320 pixel – Smartphones no formato retrato com tela pequena
  • 480 pixel – Smartphones no formato paisagem com tela pequena
  • 768 pixel – Tablets no formato retrato, como o iPad
  • 960 pixel – Tablets no formato paisagem e alguns monitores mais antigos
  • 1200 pixel – Desktops, notebooks com monitores widescreen

Porém, não existe uma regra quando a esta escolha. O que você precisa saber é qual público deseja alcançar e quais dispositivos a maioria deles utiliza. Associado a isso, criar variações onde os pontos de interrupção, conhecidos como breakpoints, harmonizem o conteúdo, preocupando-se com a navegabilidade e usabilidade do mesmo.

Lembre-se que é apenas um tutorial, pois, na prática, você saberá quais serão os melhores breakpoints para o seu projeto.

Implementando as Media Queries

As medias queries, em resumo, são recursos do CSS para reconhecer o dispositivo usado pelo usuário, mudar o layout para este dispositivo sem alterar o conteúdo.

Para resumir, vou aplicar diretamente uma sintaxe básica das media queries a serem utilizadas no tutorial. Essas instruções serão inseridas no CSS:

Ferramentas para consulta de medias

É interessante que você utilize alguma ferramenta para verificar as medias queries e seus pontos de interrupção. Das várias que utilizo, duas delas são integrantes ou extensões dos navegadores:

Firefox: use o modo de design adaptado, pressionando CTRL + SHIFT + M

Chrome: instale a extensão Window Resize

Media Querie 1200px

Ao redimensionar a janela para 1200px, encontramos problemas na manchete do site(seção .chamada), nos cabeçalhos e botões dos box’s da seção .container. Vamos corrigi-los:

Fig. 08: Ajustes da media querie para o breakpoint 1.200px

Fig. 08: Ajustes da media querie para o breakpoint 1.200px

Resultado:

DEMO

Media Querie 960px

Veja alguns problemas com este breakpoint:

 Fig. 09: Ajustes da media querie para o breakpoint 960px

Fig. 09: Ajustes da media querie para o breakpoint 960px

Resultado:

DEMO

Media Querie 768px

Resultado:

DEMO

Media Querie 480px

Resultado:

DEMO

Media Querie 320px

Finalização da Série Como Criar um Site Responsivo com HTML5 e CSS3

Sim, chegamos ao fim. Se você perceber, no geral, a criação de sites responsivos segue esta linha de raciocínio. Porém, existem mais detalhes como um controle maior sobre o redimensionamento de imagens; o tratamento e comportamento de vídeos; a utilização de configurações para versões mais antigas do Internet Explorer; a utilização de ferramentas e frameworks para a otimização do trabalho; as possibilidades de navegação dinâmica com plugins, jQuery e CSS3. Enfim, são muitos detalhes a serem vistos e analisados.

Outra questão é sobre os breakpoints. Perceba que as media queries utilizadas requerem mais refinamento, porém, o intuito foi mostrar como a técnica de responsive design funciona na prática.

Por fim, veja o resultado final desta série e responda o questionário abaixo para poder melhorar ou não, a amplitude deste assunto.

RESULTADO FINAL

[wpdm_file id=41]

Até a próxima.

CarlosHPS Webdesigner 8)

Série Criar Site Responsivo com HTML5 e CSS3

Webtutoriais:3F41A3E0


Posts Relacionados
Comentários ( 61 )
  1. Jonas Ribeiro
    16 de Maio de 2014 at 18:10
    Responder

    pow cara, show de bola, me ajudou bastante e clareou as idéias!! muito grato! parabéns!!

  2. wamartinez
    25 de junho de 2014 at 1:43
    Responder

    como centralizar o menu?

  3. brunomaximo
    1 de agosto de 2014 at 23:17
    Responder

    Foi de grande ajuda esse tutorial. Obrigado!

  4. Vinicius Rodrigues
    10 de agosto de 2014 at 19:39
    Responder

    Muito bom, CarlosHPS otimo tutorial aprendi obtive bastante conhecimento sobre o assunto. Ainda mais agora que eu preciso criar um site pro meu tcc do curso de informática para web, aguardo novos tutoriais. 😉

    Abraços

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      30 de novembro de 2014 at 13:17
      Responder

      Que bom ter ajudado, Vinicius. Sucesso e boa sorte no seu TCC.
      CarlosHPS Webdesigner 8)

  5. mrodrigo
    7 de setembro de 2014 at 2:07
    Responder

    Cara parabéns, melhor explicação, sucesso para ti.

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      30 de novembro de 2014 at 13:16
      Responder

      Eu é que agradeço pela sua participação ^^
      Abs.
      CarlosHPS Webdesigner

  6. maria emilia
    23 de novembro de 2014 at 17:08
    Responder

    Gostei e me ajudou muito. Muito Obrigada!

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      27 de novembro de 2014 at 8:04
      Responder

      Oi, Maria Emilia

      Fico feliz em poder ajudar. Sucesso.

      CarlosHPS Webdesigner 8)

  7. Bruno Bezerra
    29 de novembro de 2014 at 12:41
    Responder

    Carlos, esses três tutoriais sobre ”como criar um site responsivo em HTML5” foram sensacionais! Congratulações pela exemplar iniciativa educacional!
    []’s

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      30 de novembro de 2014 at 13:13
      Responder

      Bruno, fico plenamente satisfeito com comentários como o seu. São eles que me dão mais força para continuar meu blog. Obrigaado.
      Abs.
      CarlosHPS Webdesigner

  8. fabio
    9 de dezembro de 2014 at 16:01
    Responder

    Carlos, só fiquei com uma dúvida, no meu smart fone não aparece os textos dos 3 quadros (desktop, tablet e mobile) é isso mesmo? não deveria aparecer?

  9. fredmuinga
    23 de dezembro de 2014 at 14:38
    Responder

    Eu não dormia a procura de matéria como fico muito feliz me retribuíste o sono fico sem palavra diante desta iniciativa paz e parabéns pelo tutorial mano

  10. Heraclito
    24 de dezembro de 2014 at 0:50
    Responder

    Gostei muito do seu tutorial…
    Sua forma bem direta e prática, esta de parabéns.
    Outra coisa, se possível, gostaria que indicasse
    livros que tivesse esse conhecimento, pois quero me
    aprofundar mais, ok.
    Dicas de livros…

  11. Paulo Wesley
    28 de Janeiro de 2015 at 15:43
    Responder

    Carlos muito obrigado! Tutorial perfeito! Enfim comecei a entender responsividade! Realmente maravilhoso, tudo muito bem detalhado, você manja!

  12. Will
    2 de Fevereiro de 2015 at 14:56
    Responder

    Parabéns pelo ótimo tutorial Carlos!

    Apenas para ajudar, caso alguém tenha o mesmo problema, fiz o passo-a-passo utilizando um layout diferente e ao chegar nas media queries percebi que estavam com algum problema.
    Depois de muito análisar o código, notei que ao exibir a sintaxe das media queries vazias você utilizou o sinal de “=” desta forma:
    /*
    1200px – Desktops, notebooks com monitores widescreen
    ***********************************************************/
    @media screen and (max-width=1200px){

    }
    e posteriormente no código final está com os “:” como é correto:
    /*
    1200px – Desktops, notebooks com monitores widescreen
    ***********************************************************/
    @media screen and (max-width:1200px){

    }

    é isso, espero que se alguém escorregou nesta parte também, meu comentário possa ajudar.
    Abraço

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 11:01
      Responder

      Will, bem observado. Obrigado.

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 15:59
      Responder

      Will, valeu pela observação. Você tem razão. Obrigado.

  13. João
    3 de Março de 2015 at 13:23
    Responder

    Boas!!

    Desde já, grande trabalho tanto na explicação como na elaboração 🙂

    Estou com uma duvida que me esta a baralhar, eu quando coloco esta parte de código o meu logo desaparece quando retiro o logo volta a aparecer da para me explicar porque e se influencia alguma coisa se eu não colocar.
    =========================
    logotipo
    =========================
    */
    header h1 a{
    background:url(imagens/logo-criar-site-responsivo.png) no-repeat;
    display:block;
    float:left;
    height:139px;
    text-indent:-9999;
    width:58.333333333333%; /* 700px ÷ 1200px = 0.58333333333333 x 100 = 58.333333333333%*/
    }
    /*

    Obrigado pelo tempo 🙂 Fico aguardando!

  14. Bete S. Santos
    12 de Março de 2015 at 17:15
    Responder

    Obrigada!
    Precisava muito dessas informações e você salvou a minha pele! Vou fazer alguns testes agora e colocar em prática o que aprendi. Deus te abençoe!

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      23 de Março de 2015 at 12:50
      Responder

      Oi, Bete
      Que os anjos digam amém! 🙂 Espero que as dicas sobre web design responsivo tenham lhe ajudado.
      Abs.
      CarlosHPS Webdesigner 8)

  15. guilherme
    2 de Abril de 2015 at 14:11
    Responder

    no meu site eu tenho um header 100% e dentro dele um menu 100% dentro de um container de 980px, como que eu faço o calculo de quando o contexto de 100% ?

  16. ALINE
    11 de Abril de 2015 at 15:30
    Responder

    Parabéns pelo tutorial!
    Aprendo muito com seus ensinamentos.

    Obs.: Estou tentando logar para baixar o “arquivo final”, mas não recebo senha alguma em meu email. Poderia me ajudar?

    Grata.
    Aline

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:59
      Responder

      Aline, estou reformulando o sistema de downloads. Assim que tiver pronto, você poderá realizar o procedimento.
      Obrigado.

  17. Douglas Araujo
    15 de Abril de 2015 at 2:56
    Responder

    Olá Carlos, seu tutorial me ajudou muito,
    com esse novo conhecimento poderei desenvolver o meu projeto do curso,
    Parabéns!!!

  18. Glauco Danilo
    23 de Abril de 2015 at 17:32
    Responder

    Fala Carlos, blza ?

    Muito o bom o tutorial, mas fiquei me matando aqui que tem uma coisinha errada, pelo menos aqui mexendo resolveu …..

    @media screen and (max-width=1200px) é @media screen and (max-width: 1200px)

    Tá = e é : !

    Valew

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:58
      Responder

      Isso mesmo, Glauco. Boa observação. Obrigado.

  19. ReinaldoZimba
    24 de Abril de 2015 at 16:11
    Responder

    Muito bom o material! Simples, fácil e objetivo para entender como funciona o responsivo design.
    Ficarei mais atendo ao BLOG. Espero que continue fazendo este excelente trabalho.

    PARABÉNS!

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      25 de Abril de 2015 at 10:46
      Responder

      Olá, Reinaldo
      Que bom que gostou. Pode esperar que virá mais coisa boa por aqui.
      Grande abraço.
      CarlosHPS Webdesigner 8)

  20. Antonio Costa
    4 de Maio de 2015 at 14:09
    Responder

    Já tenho um site normal, queria manter e criar um responsivo, quando for de tablet/ celular encaminhar pro m.cicpecas.com.br, é possível?

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:56
      Responder

      Sim, é possível. Com essa dicas do tutorial, já seria um bom começo 😉

  21. Alberto
    6 de Maio de 2015 at 16:07
    Responder

    Parabéns excelente tutorial!

  22. Uilson Piazza
    8 de Maio de 2015 at 15:42
    Responder

    Cara, simples e objetivo. Show de bola. Abração!

  23. Filiphe
    10 de Maio de 2015 at 20:35
    Responder

    Parabéns, muito bem explicado e detalhado, como usuário agradeço por um conteúdo de valor como este!

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:54
      Responder

      Eu que agradeço sua participação, Filiphe! 🙂

  24. dbonexx
    21 de Maio de 2015 at 18:35
    Responder

    Muito bom!

  25. Aldeci
    30 de Maio de 2015 at 15:50
    Responder

    Primeiramente fica a gratidão por partilhar seu conhecimento (alto nível), segundo e não menos importante, a qualidade do material disponibilizado. Excelente trabalho.

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:51
      Responder

      Eu que agradeço pela sua participação, Aldeci. Aguarde o curso que está saindo do forno =)

  26. Misael
    9 de junho de 2015 at 3:50
    Responder

    Muito bom e bem estruturado para entender – Quando chego ao menor tamanho da tela os botões somem, como faço para que o usuário clique e veja os conteúdos.

    GRato, parabéns pela iniciativa
    Misael

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:50
      Responder

      Misael, qual o seu dispositivo? Já revisou o código?

  27. Roberto de Souza
    11 de junho de 2015 at 16:37
    Responder

    Olá Boa tarde. muito bom, parabéns por dedicar o seu tempo para ensinar, e aprender sempre é muito bom.
    Estive tentando reproduzir o seu site em um servidor o qual eu mesmo configurei, e observei que o texto que esta nas imagens é ocultado quando executado em dispositivos móveis, voltei para o seu site e percebi que também esta assim, tem como colocar o texto junto com as imagens assim como aparece na tela do computador ou só ira exibir as imagens?
    Desculpe pela pergunta pode ser alguma coisa obvia mas sou iniciante em programação html.
    Atenciosamente,
    Roberto de Souza.

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:49
      Responder

      Roberto, juro que não entendi sua dúvida. Reformule sua pergunta, por favor, para eu poder ajudá-lo.
      Abs.
      CarlosHPS Webdesigner 8)

  28. soniacarioca
    20 de junho de 2015 at 20:12
    Responder

    Ótimo material Carlos. É bom ainda ter pessoas como você que dividi informações! Parabéns!!

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:48
      Responder

      Eu que agradeço sua participação, Sonia. =)

  29. cjostruka
    25 de junho de 2015 at 12:53
    Responder

    Oi Carlos,

    Acabei de ler os três posts desta série e fui abrir o site em meu celular… o site ficou muito pequeno, na verdade ficou em um terço da tela.

    Por que?

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:47
      Responder

      Já revisou o código, Cristiano? Qual o seu dispositivo?

  30. Tigo
    9 de julho de 2015 at 22:33
    Responder

    Altíssimo nível, meus parabéns. Explicou passo a passo, bem detalhado, tutorial perfeito, limpo, bem explicado, raríssimo de se ver no Brasil. Parabéns mesmo nota 10, padrão Europeu!!!

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:44
      Responder

      Tigo, fico feliz em ajudar. Obrigado! =)

  31. Thiago
    19 de julho de 2015 at 11:29
    Responder

    Muito bom, poderia colocar o resultado para download, assim poderíamos acompanhar melhor o local a ser inserido cada trecho de código,

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:43
      Responder

      Thiago, estou reformulando o sistema de downloads. Em breve, estará disponível novamente.
      Abs.

  32. herik
    21 de agosto de 2015 at 12:44
    Responder

    Ótimo tutorial! parabéns

  33. Ariane
    16 de setembro de 2015 at 17:46
    Responder

    Muito bom, obrigada por compartilhar seu conhecimento conosco, Carlos! Me ajudou bastante 🙂

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      7 de outubro de 2015 at 12:24
      Responder

      Ariane, eu é que agradeço a sua participação.
      Abraços.
      CarlosHPS Webdesigner 8)

  34. Sincero Zeferino Filho
    2 de novembro de 2015 at 7:42
    Responder

    Olá!

    Excelente seu tutorial, fiz o passo a passo, em um apache no linux e acessando pela rede local am vários dispositivos.
    Todos deram a resposta prometida.

    Estou desenvolvendo um controle de pedidos/operações/materiais para chão de fábrica, feito em PHP/mySQL e formatado com html/Css, que já funciona em desktop mas agora estou refazendo o código das páginas para funcionar de modo “responsivo” em qualquer dispositivo, o que já era a intenção inicial.

    Seu tutorial me mostrou novos modos de ver a formatação de páginas, me ajudou muito.

    Agradeço imensamente.

    Muitas felicidades!!!
    T+

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:36
      Responder

      Sincero, fico muito, muito feliz em ter comentários como este. E essa é minha intenção: compartilhar o pouco que sei e ver que faz a diferença na vida das pessoas.
      Obrigado, sucesso e boa sorte.
      CarlosHPS Webdesigner 8)

  35. Mauricio Lourenço de Paula
    19 de novembro de 2015 at 21:14
    Responder

    Simplesmente fantástico parece uma uma tarde no parque conversando sobre responsividade, sou iniciante nesta área fiz alguns cursos de web designer mais em poucas horas assistindo estes ensinamentos que vcs estão colocando aqui, em pude ter clareza sobre um monte de duvidas que pairavam sobre minha cabeça. Agradeço por mim e por um outro monte de pessoas que tiveram acesso a esta joia preciosa. obrigado Mauricio

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:32
      Responder

      Maurício, eu que agradeço pela audiência. E, em breve, estarei lançando o curso sobre design responsivo. Aguarde!
      Abs.
      CarlosHPS Webdesigner 8)

  36. Xyco
    8 de Janeiro de 2016 at 10:46
    Responder

    Olá Carlos.
    Segui estas instruções, mas não funcionou.
    Quando reduzo o navegador para as medidas dos tablets e mobiles, não funciona.
    Não sei o que acontece.
    Revisei todo o código e tudo está batendo com o seu código.
    Um abraço e obrigado.

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:16
      Responder

      Xyco, qual navegador está usando?
      Bom, recomendo que refaça do início, passo a passo, pois, tem alguns bugs que estou corrigindo, mas nada que interfira o resultado final, blza?

      CarlosHPS Webdesigner 8)

  37. João Gilberto
    4 de Fevereiro de 2016 at 14:59
    Responder

    Olá Carlos, adorei seu tutorial ! Mesmo seguindo teus passos, não consegui chegar ao resultado final, conforme fizestes. Poderia me conseguir os arquivos fontes para eu poder comparar com o que eu fiz aqui e descobrir onde errei ? Abraços !

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 9:44
      Responder

      Oi, João
      Estou reformulando o blog e todos os arquivos-fonte para download sofrerão mudanças. Enquanto não termino, se você acessar a página do resultado final (Site Responsivo Final), clique com o botão direito na página e, em seguida, exibir código-fonte da página. Assim, verá o html, para o css: estilo.css, ok?!

      CarlosHPS Webdesigner 8)

Deixe uma resposta
Captcha Clique para atualizar o código