17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 1/3 ­ CarlosHPS Blog

Série Criar Site Responsivo com HTML5 e CSS3
Criar Site Responsivo com HTML5 e CSS3 – Parte 01
Criar Site Responsivo com HTML5 e CSS3 – Parte 02
Criar Site Responsivo com HTML5 e CSS3 – Parte 03 – FINAL

Nesta nova série de tutoriais, você verá ComoCriar 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ãode 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.

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3… 1/10
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 1/3 ­ CarlosHPS Blog

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.

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 entresmartphones e

desktops, com resoluções de aproximadamente a 768px, ou seja, voltado para tablets.

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3… 2/10
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 1/3 ­ CarlosHPS Blog

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 (telaswidescreens) é 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.

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

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3… 3/10
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 1/3 ­ CarlosHPS Blog

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

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

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,

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3… 4/10
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 1/3 ­ CarlosHPS Blog

.tablet e .mobile.

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

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:

1 <!DOCTYPE html> ?
2 <html lang="pt‐br">
3 <head>
4      <title>Como Criar Site Responsivo com HTML5 e CSS3 ‐ CarlosHPS Blog</title>
5      <meta charset="utf‐8">
6       

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3… 5/10
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 1/3 ­ CarlosHPS Blog
6       
7      <link rel="stylesheet" href="estilo.css" type="text/css">
8      <meta name="viewport" content="width=divice‐width, initial‐scale=1.0">
9 </head>
10 <body>
11  
12 </body>
13 </html>

A meta tag a ser analisada é a seguinte:

1 <meta name="viewport" content="width=device‐width, initial‐scale=1.0"> ?

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 dozoom, 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):

1 <!DOCTYPE html> ?
2 <html lang="pt‐br">
3 <head>
4      <title>Como Criar Site Responsivo com HTML5 e CSS3 ‐ CarlosHPS Blog</title>
5     <meta charset="utf‐8">
6     <link rel="stylesheet" type="text/css" href="estilo2.css">
7      <meta name="viewport" content="width=device‐width, initial‐scale=1.0">
8 </head>
9 <body class="center clearfix">
10     <header>
11         <h1>Logotipo</h1>
12         <nav>
13                menu de Navegação
14         </nav><!‐‐ fim nav ‐‐>
15     </header><!‐‐ fim header ‐‐>
16      <section class="chamada">
17      <h2>Como Criar um SITE RESPONSIVO com HTML5 e CSS3</h2>
18           <h3>Com este tutorial você verá como criar um site responsivo onde poderá ser bem visualiz
19     </section><!‐‐ fim .chamada ‐‐>
20      <section class="container">
21      <div class="desktop">
22                <h3>Site Responsivo DESKTOP</h3>
23             <p>Com este tutorial você verá e aprenderá, de maneira simples, como criar um site respo
24             multivisualização de dispositivos onde poderá ser bem visualizado na maioria dos desktop
25           e smartphones.</p>
26         </div><!‐‐ fim #desktop ‐‐>
27         <div class="tablet">
28                <h3>Site Responsivo TABLET</h3>
29             <p>Com este tutorial você verá e aprenderá, de maneira simples, como criar um site respo
30             multivisualização de dispositivos onde poderá ser bem visualizado na maioria dos desktop
31           e smartphones.</p>
32         </div><!‐‐ fim #tablet ‐‐>
33         <div class="mobile">
34                <h3>Site Responsivo MOBILE</h3>
35             <p>Com este tutorial você verá e aprenderá, de maneira simples, como criar um site respo
36             multivisualização de dispositivos onde poderá ser bem visualizado na maioria dos desktop
37           e smartphones.</p>

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3… 6/10
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 1/3 ­ CarlosHPS Blog
37           e smartphones.</p>
38         </div><!‐‐ fim #mobile ‐‐>
39      </section><!‐‐ fim .container ‐‐>
40     <footer>
41      <small class="copyright">
42           <p>Copyright © 2014 ‐ Todos os Direitos Reservados ao <a href="http://www.carloshps.com.br
43         </small><!‐‐ fim .copyright ‐‐>
44         <small class="desenvolvedor">
45             Desenvolvedor
46         </small><!‐‐ fim .desenvolvedor ‐‐>
47     </footer><!‐‐ fim footer ‐‐>
48 </body>
49 </html>

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

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:

1 <head> ?
2     <title>Como Criar Site Responsivo com HTML5 e CSS3 ‐ CarlosHPS Blog</title>
3     <meta charset="utf‐8">
4     <link rel="stylesheet" type="text/css" href="estilo.css">
5     <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800' rel
6     <meta name="viewport" content="width=device‐width, initial‐scale=1.0">
7 </head>

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3… 7/10
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 1/3 ­ CarlosHPS Blog

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

1 body{ ?
2      background:url(imagens/background.jpg); /*inserção da imagem de fundo em todo o site*/
3      color:#868686; /*cor padrão para todas as fontes*/
4      font‐family: "Open Sans", Helvetica, sans‐serif, arial; /*definição da fonte geral incorporada 
5      font‐size: 18px; /*tamanho da fonte*/
6      font‐weight: 300; /*indica que a fonte está coonfigurada como Open Sans Light*/
7      line‐height: 22px;/*altura da linha*/
8      text‐align: left; /*alinhando o texto à esquerda*/
9      text‐shadow:1px 1px 0px #fff; /*sombreamento para as fontes do site*/
10 }
11 .center{
12      margin: 0 auto; /*centralizando o conteúdo no navegador*/
13      width: 1200px; /*largura do layout*/        
14 }

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

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:

1 /*.clearfix usado para adicionar um espaço vazio antes e depois dos elementos ?
2   evitando que os floats se aglomerem.
3 */
4 .clearfix:before, .clearfix:after {
5     content: " ";
6     display: table;
7 }
8 .clearfix:after {
9     clear: both;
10 }
11 .clearfix {
12     *zoom: 1;
13 }
14 /*fim do clearfix*/
15 img, picture, video, embed {
16     max‐width: 100%; /*define a largura máxima em até 100%*/
17 }
18 h1, h2{
19      color:#FE9380;
20      font‐size: 60px;
21      font‐weight: 800;

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3… 8/10
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 1/3 ­ CarlosHPS Blog
21      font‐weight: 800;
22      letter‐spacing: ‐3px; /*espaçamento entre as letras*/
23      line‐height: 60px;
24 }
25 h3{
26      font‐size: 32px;
27      font‐weight: 300;
28      letter‐spacing: ‐2px; /*espaçamento entre as letras*/
29      line‐height: 38px;
30 }
31 p{
32      font‐weight: 300;/*modifica a força da fonte para light*/
33      letter‐spacing: ‐1px; /*espaçamento entre as letras*/
34 }
35 a, a:link, a:visited{
36      color:#FE9380; /*cor dos links*/
37      font‐weight:400; /*modifica a força da fonte para semi‐bold*/
38      text‐decoration:none; /*retira o sublinhado dos links*/
39 }
40 a:hover{
41      color:#FE5E41;
42      text‐decoration:underline; /*inseri uma linha sob o link*/
43      text‐shadow:none; /*retira a sombra da fonte*/
44 }

E, como resultado, veremos:

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

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3… 9/10
17/11/2015 Criar um Site Responsivo com HTML5 e CSS3 ­ Parte 1/3 ­ CarlosHPS Blog

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á.

data:text/html;charset=utf­8,%3Ch2%20style%3D%22margin%3A%200px%3B%20padding%3A%200px%200px%205px%3B%20border%3A%200px%3… 10/10