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

Série Criar Site Responsivo com HTML5 e CSS3

Nesta nova série de tutoriais, você verá Como Criar um Site Responsivo com HTML5 e CSS3. Mostrarei, passo a passo, como construir um site utilizando HTML5 e CSS3, além de aplicar técnicas utilizadas para Web Design Responsivo, deixando-o disponível para smartphones, tablets e desktops. Ao final, gostaria de receber a opinião de vocês sobre este tutorial, pois um feedback é muito importante para a melhoria e continuidade deste blog.

Pré-Requisitos

  • Conhecimento básico de HTML5 e CSS3
  • Noções de responsive design
  • Fazer o download das imagens do tutorial no link abaixo:

Imagens do Tutorial | RESULTADO FINAL

Passo 1 – Conhecendo o projeto do site responsivo

Se você já acompanha meus tutoriais sobre criação de sites, sabe que sempre faço questão de frisar a importância de um bom planejamento antes mesmo de colocarmos às mãos nos editores gráficos e códigos. Pensando nisso, criei quatro versões do layout já pensando em um design responsivo. Desta forma, em um projeto “real”, podemos ganhar um tempo precioso, planejando bem o que iremos desenvolver e, sempre priorizando o conteúdo quando o assunto for dispositivos móveis.

O projeto foi desenvolvido para as seguintes resoluções:

  • 320 pixel – Smartphones no formato retrato
  • 480 pixel – Smartphones no formato paisagem
  • 768 pixel – Tablets no formato retrato
  • 960 pixel – Tablets no formato paisagem e alguns monitores mais antigos
  • 1200 pixel – Desktops com monitores widescreen

Lembrando que, os formatos acima são os mais comuns e, por mais que trabalhemos com eles, ter uma boa visualização em qualquer dispositivo é praticamente impossível.

Para que você perceba a diferença entre cada layout, no momento dos breakpoints (pontos de quebra), não só a estrutura sofrerá alterações, mas cores da chamada principal, links, box do conteúdo principal serão redefinidos de acordo com a resolução.

Fig. 01: layouts para criar site responsivo

Fig. 01: layouts para criar site responsivo

Projeto Responsive Mobile

O grande desafio para os designers web, no momento do desenvolvimento da ideia de criação de um layout, é pensar em várias perspectivas. Então, criar pensando em dispositivos móveis e não apenas em desktops, é essencial para o sucesso do projeto. Com isso, neste tutorial trabalharemos com telas de 320 px, para a visualização vertical e 480 px para visualização horizontal, em se tratando de smartphones, óbvio.

Fig. 02: layouts para criar website responsive design mobile.

Fig. 02: layouts para criar website responsive design mobile.

Observe as diferenças entre os layouts, tanto com relação às cores do menu e links, quanto à reestruturação da arquitetura de informação, do posicionamento do conteúdo.

Projeto Responsive Tablet

Outro momento do desenvolvimento de um projeto de site responsivo é criar um layout intermediário entre smartphones e desktops, com resoluções de aproximadamente a 768px, ou seja, voltado para tablets.

Fig. 03: layouts para criar website responsive design tablet.

Fig. 03: layouts para criar website responsive design tablet.

Projeto Responsive Desktop

E, como de costume, a criação para desktops para resoluções entre 1024px a maiores que 1200px (telas widescreens) é a mais usual, mas que também requer muito planejamento para que haja harmonia entre as outras resoluções e, principalmente, preocupando-se com o conteúdo que realmente é essencial ao usuário final.

Fig. 04: layouts para criar website responsive design desktop.

Fig. 04: layouts para criar website responsive design desktop.

Passo 2 – Organizando o Trabalho

Como de praxe, sempre é bom manter organizado a estrutura dos projetos. Com isso, indico a seguinte formatação:

Fig. 05: Organização dos arquivos do site

Fig. 05: Organização dos arquivos

Passo 3 – Conhecendo e Dividindo o Layout

Para criar um site responsivo com HTML5 e CSS3, você deve primeiro analisar o layout e identificar suas seções únicas e compartilhadas, ou seja, as div’s e/ou tags, e classes.

Background

O fundo é uma imagem distribuída por todo o layout.

Fig. 06: Background do site responsivo

Fig. 06: Background do site responsivo

Seção Header – Cabeçalho

A div #topo conterá todo o cabeçalho contido na tag <header>, como o logotipo e o menu.

Fig. 07: Seção header - cabeçalho do site responsivo

Fig. 07: Seção header – cabeçalho do site responsivo

Seções Chamada Principal e Container – Conteúdo

A seção .chamada conterá dois blocos de texto em H2 e H3. A seção .container conterá 3 colunas com as div’s .desktop, .tablet e .mobile.

Fig. 08: Seção conteúdo - chamada principal e container

Fig. 08: Seção conteúdo – chamada principal e container

Seção Footer – Rodapé

E a última seção do site será a do rodapé (footer), contendo duas colunas: uma para copyright e outra do desenvolvedor.

Fig. 09: Seção footer - rodapé do site responsivo

Fig. 09: Seção footer – rodapé do site responsivo

Passo 4 – Marcação Básica do HTML5

O foco deste tutorial é criar site responsivo, com isso, subtende-se que você já saiba o básico de HTML5 e CSS3. Portanto, os detalhes básicos dessas linguagens não serão mencionadas, ok?!

A estrutura inicial da nossa página index.html será a seguinte:

A meta tag a ser analisada é a seguinte:

Como padrão, a maioria dos navegadores para dispositivos móveis, tentam exibir as páginas como se estivessem sendo exibidas no desktop, ajustando automaticamente o zoom da tela (display), ocasionando muitos problemas para sites que não foram planejados e criados responsivamente.

No entanto, para alegria de todos e felicidade dos desenvolvedores, a meta tag viewport surgiu para contornar essa situação, pois com ela, podemos trabalhar com resoluções personalizadas, inclusive na renderização do zoom, manipulando a escala inicial do site.

Mencionarei novamente sobre esta tag na parte final desta série: Criar Site Responsivo com HTML5 e CSS3 – Parte 03 – FINAL

Complementando o arquivo com a marcação básica do site (index.html):

O resultado que você obterá até aqui, será:

Fig. 10: Marcação básica do HTML5 exibida no navegador

Fig. 10: Marcação básica do HTML5 exibida no navegador

DEMO

Passo 5 – Codificação Básica da Folha de Estilos com CSS3

Para melhor visualização, vamos empregar algumas configurações básicas do arquivo css estilo.css.

Configurando Background e Estilos Gerais

Primeiramente, vou usar o CSS reset normalize.css.

Vou usar também a fonte externa do Google Fonts e incorporá-la no arquivo index.html, como mostrado abaixo:

Após esses ajustes, o arquivo inicial estilo.css estará da seguinte forma:

Com poucas linhas no CSS, já é possível visualizar o seguinte resultado:

Fig. 11 - Configuração básica do CSS no site responsivo

Fig. 11 – Configuração básica do CSS no site responsivo

DEMO

Continuando a formatação geral, apliquei características para cabeçalhos, links, parágrafos e etc. Veja:

E, como resultado, veremos:

Fig. 12: Formatação geral para itens básicos do layout do site responsivo

Fig. 12: Formatação geral para itens básicos do layout do site responsivo

DEMO

Bom, pessoal, no próximo post, continuarei a mostrar como criar um site responsivo com HTML5 e CSS3, detalhando cada seção.

Até lá.

CarlosHPS Webdesigner 8)

Série Criar Site Responsivo com HTML5 e CSS3

Leitura Adicional

Meta Tag Viewport


Posts Relacionados
Comentários ( 46 )
  1. Reginaldo
    5 de Maio de 2014 at 9:14
    Responder

    os links 2 e 3 não funcionam

    Criar Site Responsivo com HTML5 e CSS3 – Parte 02
    Criar Site Responsivo com HTML5 e CSS3 – Parte 03 – FINAL

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      6 de Maio de 2014 at 23:01
      Responder

      Reginaldo,

      O link 2, acabei de publicar. Já o 3, devo publicá-lo até próxima semana. Fique “ligado”.

      Abs.

      CarlosHPS Webdesigner 8)

  2. Nelito Zangui @quarteldaweb.com
    5 de Maio de 2014 at 10:40
    Responder

    Olá Carlos, tenho acompanhado algumas das tuas matérias e, confesso, tem sido de muito proveito e agrado, pelo menos de minha parte.
    Tenho desenvolvido site e, de facto, tem sido um desafio construí-los na vertende responsiva. Os webdesigners devem ter em conta o design responsivo pelo facto de grande parte dos internautas utilizar smatphones e tabletes para navegar na internet ao invés de descktop.
    Tenho certeza que esta série de tutoriais que começaste vai ser de grande ajuda para os interessados, sobretudo os iniciados. Mas também acredito que muitos profissionais com alguma experiência poderão beber da tua e, melhorar a forma como trabalham.
    Muita força e, bom trabalho.
    Um abraço.

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      6 de Maio de 2014 at 22:59
      Responder

      Olá, Nelito

      Comentários como este me deixam extremamente feliz e motivado para continuar o trabalho.

      Obrigado e grande abraço.

      CarlosHPS Webdesigner 8)

  3. paula milani
    24 de julho de 2014 at 14:01
    Responder

    Olá Carlos !!

    suas matéria são ótimas e estou aprendendo muito !

  4. Valter Ferreira Martins
    24 de setembro de 2014 at 13:58
    Responder

    O seu trabalho está incrível e já nos ajudou muito, parabéns por nos dar o caminho, sempre, quando começo alguma nova experiência fica meio complicado, mas as dicas e o exemplo foram determinantes.

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

      Valter, determinação, perseverança e foco são fundamentais para galgar novas experiências. Sucesso e boa sorte.
      Abs.
      CarlosHPS Webdesigner

  5. Valter Ferreira Martins
    24 de setembro de 2014 at 14:02
    Responder

    Aproveitando, estou apanhando um pouco para colocar um menu abaixo dos itens:
    home html5 css3 responsive contato, tem como fazer uma atualização desse layout com um exemplo de um menu?
    Valeu

  6. Paulo Ricardo
    21 de outubro de 2014 at 15:40
    Responder

    Parabéns pelo tutorial, perfeito. Difícil achar tutoriais tão explicativos como esse. Acredito que irá ajudar muita gente.

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      27 de novembro de 2014 at 9:03
      Responder

      Obrigado, Paulo, pelo seu comentário. Certamente, espero que tenha ajudado a você e as pessoas que buscam um pouco mais de orientações sobre a criação de sites responsivos.
      Abração.
      CarlosHPS Webdesigner 8)

  7. Victor
    28 de outubro de 2014 at 11:51
    Responder

    Queria saber como que faço para utilizar estes normalizer.css

    Abraço, e ótimos trabalhos, gostei bastante.

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      27 de novembro de 2014 at 9:01
      Responder

      Olá, Victor
      O normalize.css assim como outros arquivos do gênero, servem para ajudar na formatação inicial das páginas, principalmente com relação aos espaçamentos que cada navegador possui em sua versão padrão. Verei se criarei um posto do tema.
      Abração.
      CarlosHPS Webdesigner 8)

      • Clarissa
        17 de Abril de 2015 at 10:57
        Responder

        Mas em que parte do codigo entra o normalize.css?

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

          Clarissa, logo no início, não percebeu?

  8. Adnilson Medina
    31 de outubro de 2014 at 16:15
    Responder

    OLa Carlos sou Cabo verdiano e para dizer a verdade nunca eu assiste um curso como este porque na verdade da forma como foi apresentado é muito bom mesmo. O seu trabalho merece um grande reconhecimento.
    tens um dom incrivel mesmo na forma explicas as coisas simples e claro. para mim é um prazer estar assistindo essas aulas sobre responsive design com voce. es o melhor que já vi. continue sempre assim . um abraco e sucessos e saude .

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

      Olá, Adnilson. Fico muito feliz em ler seu comentário e perceber que meus posts ultrapassaram os limites do meu país e chegaram até a República de Cabo Verde 😉
      São comentário assim que me dão ânimo para prosseguir.
      Grande abraço.
      CarlosHPS Webdesigner 8)

  9. Clemilson Tavares
    9 de novembro de 2014 at 16:25
    Responder

    Muito Bom!!!
    Realmente é de grande proveito estes tutoriais com alguns detalhes que muitas vezes não conseguimos assimilar em sala de aula sobre HTML e CSS…

    Tenho uma dúvida crucial, se fosse possível tirar… como fazemos para criar um Banco de Dados que recebas as informações de Formulários e seus respectivos acessos a pesquisas exclusivas com login e senha?

    Agradeço novamente!

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

      Oi, Clemilson
      Que bom que gostou dos posts. Por isso que estou com a ideia de montar um curso online sobre criação de sites responsivos.
      Quanto ao banco de dados, não é meu foco, portanto, ficarei lhe devendo 😉
      Abração.
      CarlosHPS Webdesigner 8)

  10. Bruno Riggs
    10 de novembro de 2014 at 13:27
    Responder

    Ola, parabéns pelo artigo. Gostaria de saber quando você publicou, e esta atualizado para os dias de hoje. Abraços.

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

      Olá, Bruno. Agradeço pelo contato e fico satisfeito em ajudar. A série foi desenvolvida em maio deste ano, 2014. Está bastante atualizada, com certeza.

      Abração.

      CarlosHPS Webdesigner 8)

  11. Mate
    4 de dezembro de 2014 at 15:27
    Responder

    Olá! Primeiro, muito obrigado pelo seu artigo! Comecei a estudar desenvolvimento front-end agora e esse artigo sobre design responsivo foi extremamente útil.

    Gostaria apenas de tirar uma dúvida pontual. Percebi que você não fechou a tag nas duas vezes que usou, mas em exemplos de outros sites vejo sempre . Existe alguma diferença ou ambas são aceitas?

    Um abraço!

  12. Jonas
    19 de dezembro de 2014 at 10:03
    Responder

    Muito bom o tutorial.

  13. tiagoservelin
    19 de Janeiro de 2015 at 15:07
    Responder

    Excelente tutorial, obrigado Carlos!
    Sou programador back end, não gosto muito de programar front end, mas é um sacrifício que tenho que fazer, hehe.

  14. Morppheus
    4 de Março de 2015 at 19:59
    Responder

    Boa noite amigo! Ótimo tutorial. Eu estava com algumas duvidas e foram sanadas.
    Agora falta fazer um passo a passo desses com PHONEGAP para portar ele para Android nativo 😉
    Obrigado pelo tutorial!!!

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

      Opa, Morppheus
      Despois me envia o link para ver como ficou com o Phonegap.
      Abs.
      CarlosHPS Webdesigner 8)

  15. Lucivaldo Barbosa
    11 de Março de 2015 at 10:24
    Responder

    Excelente conteúdo, parabéns pela iniciativa e perseverança e de grandíssima ajuda para aperfeiçoar a teoria.

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

      Lucivaldo, eu é que agradeço pela sua participação. Trabalhar com Web Design Responsivo é muito bacana, você verá.
      Sucesso e boa sorte.
      CarlosHPS Webdesigner 8)

  16. Alexandre Simões - Itápolis SP
    29 de Abril de 2015 at 9:11
    Responder

    Show de bola Carlos,
    Sou aluno da Etec, e estava necessitando de uma ajuda com o HTML5 e o CSS 3, sua postagem foi muito útil e inspiradora não só pra mim, mas também a todos que acompanham seus tutoriais! Acho que todos os iniciantes de Desenvolvimento Web deveriam acessar apoio perfeito que você disponibiliza aqui no site. Ensinando de uma Maneira educativa e rápida. Fazendo com que nós aprendemos, ganhamos novas experiências e o melhor rapidamente. Desde já estou grato!
    Um forte abraço

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

      Alexandre, esse é meu maior propósito com relação ao blog: poder compartilhar o pouco que sei e poder “transformar” o dia a dia das pessoas. E, aguarde, que está saindo um curso “fresquinho” sobre o tema. 😉
      Obrigado.

  17. Luiz
    5 de Maio de 2015 at 12:03
    Responder

    Cara. É o máximo, o código tá todo compilado. e como foi explicado vai rodar em tablet e afins. Muito Bom!!!!!!!!!!!!!!

    🙂 MUITO BOM MESM !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    // Por favor me envie um script de banner médio para eu colocar no meu site ou entao a sua logo …

  18. Caio Conrad Le Petit Costa
    11 de Maio de 2015 at 14:42
    Responder

    Carlos gostaria de desejar os parabéns pelo excelente tutorial.

    Estou utilizando o Eclipse para realizar o tutorial e surgiu um “warning” no html, dizendo que “a localização da tag é inválida, na tag que está dentro da tag .

    Saberia me dizer se este warning é normal pela localização da tag?

    Atenciosamente,
    Caio Conrad Le Petit Costa

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

      Caio, usei muito o Eclipse na faculdade para projetos de desenvolvimento mobile em C++, Java, .Net, etc. Mas nunca gostei dele para aplicações simples como HTML e CSS. Infelizmente, não sei o que significa esta mensagem. Já tentou fazer em outro editor?

  19. Igor Thierry
    9 de junho de 2015 at 23:26
    Responder

    Muito bom,belo site e ótimo blog, muito obrigado e abraços.

  20. Itamar Oliveira
    15 de junho de 2015 at 19:34
    Responder

    Olá Carlos, teus tutoriais estão me ajudando muito, estou começando agora na área de web, gostei muito! parabéns!!!

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      7 de outubro de 2015 at 15:00
      Responder

      Itamar, eu é que fico lisonjeado com sua participação.
      Obrigado.
      CarlosHPS Webdesigner 8)

  21. Mateus
    24 de junho de 2015 at 17:08
    Responder

    Muito boa explicação! Mas uma dúvida ainda ficou, como fazer um menu retrátil responsivo? Quando ele está em telas maiores ele é um menu inline e quando se está em um Celular ou Tablet o menu muda para um menu retrátil. Teria como postar um tutorial assim aqui? Aplicado neste projeto responsivo que você ensinou?

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

      Mateus, sugestão anotada para o próximo post. Obrigado. =)

  22. victor cesaretti
    26 de junho de 2015 at 21:23
    Responder

    olá carlos!!!!
    Então , faço um curso de webdesing, na escola eu fiz um site perfeitamente sem dificuldades , eu fui tentar fazer em casa e as divs , header, tudo não funciona , e no meu curso foi certinho , eu estou a dois dias tentando sair do mesmo lugar no site e não vou para a frente porque não aparece nada do que eu quero , o que será que eu fiz de errado?

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

      Victor, quando tudo da errado, é melhor recomeçar do zero. Sempre faço isso em projetos meus.
      Já tentou?

  23. Renato
    3 de agosto de 2015 at 11:13
    Responder

    Bom dia!! Onde posso ver a segunda aula? Não é possível acessar pelo link disponível.

  24. Chrystian
    5 de outubro de 2015 at 11:21
    Responder

    Tutorial excelente! foi de grande ajuda. Muito obrigado por disponibilizar um conteúdo maravilhoso gratuitamente e com essa clareza de ensino, continue assim. Abraços!

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

      Olá, Chrystian
      Que bom que gostou. O a série de tutoriais Criar um Site Responsivo com HTML5 e CSS3 cumpriu seu objetivo que é despertar a ideia de responsividade aos desenvolvedores. Obrigado pela sua participação.
      CarlosHPS Webdesigner 8)

  25. Igor
    6 de novembro de 2015 at 11:05
    Responder

    Muito obrigado, estou aprendendo e esse material me serviu muito !

  26. Roberto Paes
    25 de novembro de 2015 at 9:31
    Responder

    Meu caro, acessei o site e achei fantástico o artigo. No entanto, quando fui ler o 2 e 3 o link redireciona para uma página de um site xxx-hacker… Acho que o link está com defeito ou sua página foi hackeada.

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

      Roberto, realmente fui hackeado. Tive uma dor de cabeça danada, mas aos poucos estou recuperando o conteúdo.
      Obrigado.
      CarlosHPS Webdesigner 8)

Deixe uma resposta
Captcha Clique para atualizar o código