Design Responsivo na prática - Tableless

Prévia do material em texto

22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 1/31
Design Responsivo na prática 2: do
layout ao HTML
Acompanhe o desenvolvimento de um HTML/CSS responsivo passo-a-passo a
partir de um layout �xo, com direito a muitas dicas, comentários e demo.
Há um tempinho atrás eu escrevi aqui no Tableless um artigo chamado Design Responsivo na
Prática – Do Rascunho ao Digital. A abordagem na época foi mais voltada para os designers, que
estavam carentes de conteúdo bacana sobre o assunto. Mas, no entanto, todavia, algumas
pessoas comentaram que gostariam de ver o desenvolvimento do dito cujo do layout criado
passo-a-passo ou ao menos uma demo. Como eu não poderia deixar de atender os devs também,
é justamente isto que vou fazer hoje. Portanto, pegue seu cafézinho pois hoje é dia de codar! 
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 2/31
é justamente isto que vou fazer hoje. Portanto, pegue seu cafézinho pois hoje é dia de codar! 
Hora da Revisão
Não vou perder tempo aqui falando o que é design responsivo (conjunto de técnicas para
melhorar a experiência do usuário independente do dispositivo que ele esteja utilizando), quais
são as principais características de um site responsivo (um único conteúdo em uma única URL em
um único código) ou por que você deve utilizar (são tantas que este parênteses seria gigante).
Mas, como este artigo é mão na massa mesmo, antes de começar tenham certeza de entender os
três pilares básicos do RWD (Responsive Web Design, que abrasileiramos carinhosamente para
Design Responsivo).
Quais são?
…
…
…
Spoiler: fundação �exível, imagens adaptáveis e media queries. Bem, se você conseguiu lembrar
todos os três de memória e está aí resmungando consigo mesmo ganhou um passe “pule a
revisão”: vá direto para a prática. Se não conseguiu lembrar, sem problemas. Vamos refrescar a
memória!
1. Fundação Flexível
Este é o esqueleto básico do layout. A fundação pode ser construída através de um sistema de
grid �uído ou na unha combinando medidas relativas e um pouquinho de matemática. Como
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 3/31
grid �uído ou na unha combinando medidas relativas e um pouquinho de matemática. Como
gostamos de desa�os, vou ensinar por aqui a segunda opção.
(Quase) tudo é relativo
Para que o seu site possa se adaptar a múltiplos dispositivos e toda aquela ladainha que vocês já
estão cansadinhos de saber é preciso colocar um pouco de lado os pixels. Note bem: colocar de
lado, não jogar fora! Você ainda vai utilizá-los para de�nir alturas �xas e para de�nir, se for
determinado no layout, um container inicial com uma largura máxima.
Para todo o resto conheça agora seus novos melhores amigos: % e EM.
(Existem também algumas outras medidas responsivas super bacanas como REM, VW, VH e FR.
Mas vamos nos concentrar no básico.)
O que diabos é EM?
EM ou quadratim é uma medida relativa que nasceu na tipogra�a. 1 EM era originalmente
correspondente ao tamanho da letra M maiúscula de uma determinada fonte. Isto era útil lá
naquela época em que os tipógrafos utilizavam blocos de madeira ou metal para diagramar
impressos, a�nal, através desta letra eles teriam uma “chave” para todos as outras.
Já em se tratando de CSS, 1 EM é correspondente ao valor de font-size, que, por padrão do
browser é em média 16px. E isto é bacana para a gente por que é um tamanho dinâmico. Ou seja,
vamos supor que o seu usuário possua alguma de�ciência de visão e precise aumentar e diminuir
o tamanho do texto… Como pixel é uma medida �xa é impossível fazer isto de maneira
proporcional, sem distorções ou quebras no layout. Já o EM é super proporcional. É uma questão
de usabilidade.
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 4/31
Conversão de PX para EM
Como fazer contas em base 16 é meio chatinho podemos usar um truque de CSS para facilitar a
conversão de pixels para EM.
1.  body {
2.     font­size: 62.5%;
3.  }
Isto signi�ca que alteramos o valor da fonte padrão de 16px para 10px. Desta forma, 12px passa a
equivaler a 1.2em, 14px �ca equivalente a 1.4em, etc.
Lembre-se que 1 EM é relativo ao font-size. Então uma vez que você altere este valor dentro de
um article, por exemplo, todos os elementos �lhos também serão alterados.
Conversão de PX para %
Para construir a tal da fundação �exível é preciso seguir uma formula estrutural básica: objeto :
contexto = resultado.
Não fez o menor sentido? É, para mim também não fez a primeira vez que eu li. Vamos adiantar
um pouquinho a prática e pensar no seguinte: temos uma div de largura 1128px. Dentro dela uma
coluna com 264px de largura. A coluna é, portantom �lha do container. Então vamos pegar o valor
em px da coluna (objeto = 264px) e dividir pelo valor em pixel do elemento pai (contexto =
1128px). O resultado deu 0,23404255319149. Agora basta andar duas casas para a esquerda com
a virgula e acrescentar um ponto que temos o valor 23.404255319149. E esta é a correspondência
da nossa coluna em porcentagem: 23.404255319149%. Este número é realmente grande e a
tentação é grande para chamar de 23% e acabar com a história. Mas, se você arredondar, uma
hora a soma vai quebrar. Computadores são bem mais exatos que a gente. Eles sabem lidar bem
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 5/31
hora a soma vai quebrar. Computadores são bem mais exatos que a gente. Eles sabem lidar bem
com matemática…
En�m, design responsivo é repetir esta continha a exaustão, meus caros. Usar um sistema de Grid
ou Framework pronto é mais fácil? Muito! Como usar um elevador é mais fácil do que subir vários
lances de escadas de um prédio a pé. Mas o dia que o nosso prédio metafórico pegar fogo saber
COMO subir as tais das escadas é um conhecimento bem útil para salvar sua pele, certo? O
mesmo vale para grids e frameworks. São ferramentas legais, mas tenha certeza que você sabe se
virar sem elas. Pode ser que caia no seu colo um projeto onde, por uma incompatibilidade de
linguagens ou escolha das outras pessoas envolvidas, você não possa usar um sistema de Grid
pronto. Vai por mim. É melhor aprender a fazer na unha primeiro. Depois não diga que eu não
avisei…
2. Imagens adaptáveis
Já que vamos trabalhar com porcentagens precisamos garantir que as imagens não vão se
distorcer, certo? Então podemos acrescentar o seguinte código CSS.
1.  img {
2.     max­width: 100%;
3.  }
Isto signi�ca que o tamanho �nal da imagem no browser nunca vai ultrapassar o tamanho original
dela. Mas, para isto funcionar, é necessário sempre envelopar as imagens em um container. Pode
ser um �gure, uma div, en�m, vai dá sua escolha para aquele contexto.
3. Consulta de mídia
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 6/31
O terceiro e último passo da nossa revisão é consulta de mídia ou media queries. Estes
chuchuzinhos do CSS3 servem para identi�car qual é o tipo, resolução e densidade do dispositivo
e tornar a nossa vida mais fácil.
Para isto basta utilizar a regrinha @media combinada com parâmetros como min-width, max-
width, min-height, max-height, aspect ratio, etc. e operadores como and, only e not.
Vamos supor que você queira trabalhar apenas com telas de largura máxima 1024px. O media
querie �caria assim:
1.  @media screen and (max­width: 1024px) {
2.     /*estilos*/
3.  }
A tradução disto de CSS paraportuguês seria “tipo de mídia: tela E largura máxima: 1024px”.
Este tema sozinho daria um artigo inteiro. Na verdade já deu! Então, no melhor estilo escolha sua
própria aventura:
– Se você tem dúvidas a respeito do funcionamento da consulta de mídia de uma lida em Design
Responsivo III – Media Queries e Compatibilidade escrito pela autora que vos fala.
– Se você entendeu tudo desta explicação relâmpago e quer simplesmente ver mais exemplos de
media queries dê uma olhadinha em Logic in media queries.
– Se você já entendeu tudo e não precisa de mais exemplos siga em frente. 
Round Bonus – Viewport
Precisamos dizer para todos os dispositivos que a escala inicial do nosso layout é equivalente ao
tamanho do dispositivo. Se não �zermos isto, alguns aparelhos móveis vão redimensionar o
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 7/31
tamanho do dispositivo. Se não �zermos isto, alguns aparelhos móveis vão redimensionar o
layout por conta própria e o design responsivo só vai funcionar no desktop! Para isto vamos
manipular a metatag viewport. Cole isto no head do seu documento
1.  <meta name="viewport" content="width=device­width, initial­scale=1.0">
Quer saber mais sobre viewport? O artigo Desenvolvimento Responsivo e Viewport é super
completo.
Fim da revisão!
O HTML
Hora de colocar a mão no código!
Eu pessoalmente acredito ser mais fácil construir todo o HTML para depois desenvolver o CSS.
Mas esta é uma preferência pessoal e não vou �car aqui cagando regra. Vou manter a estrutura
bem simples para nos concentrarmos no CSS. Vamos relembrar o layout que construímos juntos
no artigo anterior.
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 8/31
Podemos dividir este HTML em cinco estruturas básicas.
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 9/31
– Uma div com a classe container envolvendo todo o layout;
– Um cabeçalho com a classe header;
– Uma div “hero” com a classe banner;
– Quatro blocos de texto e imagem com a classe coluna;
– Um rodapé com a classe footer.
Até aqui não tem segredo nenhum. É um HTML normalzinho. Você pode fazer o download deste
HTML no meu repositório do GitHub e acompanhar passo-a-passo.
Note que todas as imagens estão dentro de outros elementos (div ou �gure).
O CSS [Desktop]
Para facilitar vou especi�car todas as medidas em pixel na versão desktop. Vamos a elas:
Container – 1128px
Logotipo – 234px x 36px
Menu – maximo 840px
Banner – 1128px x 450px
Caixa de texto – 480px
Colunas de texto – 264px
Fotos – 264px x 218px
Margens – 24px
Rodapé – 1128px
Primeiro vamos centralizar e determinar a largura máxima do container no CSS.
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 10/31
1.  .container {
2.     max­width: 1128px;
3.     margin: 0 auto;
4.  }
Clear�x
Esta é uma técnica utilizada para conter os �oats e evitar que elementos entrem em colapso.
Funciona basicamente adicionando um espaço vazio antes e depois dos elementos e dando um
“clear” nos dois lados. Tudo isto sem precisar escrever marcação adicional. Como em design
responsivo estaremos utilizando muito �oats é útil conhecer. Vamos aplicar esta classe ao
container do nosso layout para que ele possa conter todas as divs.
1.  .clearfix:before,
2.  .clearfix:after {
3.     content: " ";
4.     display: table;
5.  }
6.   
7.  .clearfix:after {
8.     clear: both;
9.  }
10.   
11.  .clearfix {
12.     *zoom: 1;
13.  }
Proporção
A seguir vamos garantir que todas as imagens, videos e conteúdos embedados �quem com a
largura máxima de 100% do tamanho original.
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 11/31
1.  img,
2.  picture,
3.  video,
4.  embed {
5.     max­width: 100%;
6.  }
Aqui cabe uma observação. Como no nosso mock-up �nal as imagens em smartphones ocuparão
o tamanho de uma coluna eu preferi utilizar um tamanho proporcionalmente maior (500x413px).
Assim nenhuma imagem irá estourar a resolução nos smartphones.
Border-box
Outro truque bacana de CSS para design responsivo é o box-sizing border box acompanhado do
seletor *. Basicamente esta regra diz que todos os elementos agora levarão em conta apenas a
largura e altura determinada, sem somar a este valor a borda e o padding. Ou seja, uma coisa a
menos para nos preocuparmos.
1.  *, *:before, *:after {
2.     ­webkit­box­sizing: border­box;
3.     ­moz­box­sizing: border­box;
4.     box­sizing: border­box;
5.  }
O Header
A seguir vamos especi�car o tamanho do header. Este é bem fácil: 100%!
1.  .header {
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 12/31
1.  .header {
2.     width: 100%;
3.     height: 48px;
4.     margin­top: 3.6em;
5.     margin­bottom: 3.6em;
6.  }
Eu dei a ele também uma altura �xa (48px) e especi�quei margens utilizando a medida EM. A
minha intenção aqui foi criar uma margem dinâmica que �casse em um tamanho bacana em
relação ao texto em qualquer resolução. Por isto utilizei EM ao invés de px.
Dentro deste header temos um logotipo e um menu. Lembra da formulinha? Objeto : Contexto =
Resultado. Então 234 : 1128 = 0,20744680851064. Andando duas casas para direita temos
20,744680851064. Este é o valor em porcentagem do logotipo. Eu gosto de deixar comentado o
valor original em pixels para facilitar caso for preciso recalcular os elementos.
Ah, �que atento para substituir a virgula por ponto no CSS.
1.  .logo {
2.     width: 20.744680851064%; /*234px / 1128px */
3.     float: left;
4.  }
O menu �cará �utuando a direita e a largura máxima “segura” é 840px.
1.  .menu {
2.     width: 74.468085106383%; /*840px / 1128px */
3.     float: right;
4.  }
Coloquei também alguns elementos de estilo dos links e texto. Mas isto você já sabe fazer, certo? 
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 13/31
Coloquei também alguns elementos de estilo dos links e texto. Mas isto você já sabe fazer, certo? 
Banner
O banner também é bem padrão, com 100% de largura. Aqui poderiamos ter um slider ou
carrossel em JavaScript. Mas vou �car apenas no HTML por este artigo.
1.  .banner {
2.     background: url('../img/banner.jpg');
3.     height: 450px;
4.     margin­bottom: 4.8em;
5.     position: relative;
6.  }
Repare que a imagem está dentro do background do banner. Neste caso ela vai sendo cortada de
acordo com a altura e largura que eu especi�car para ele. Dentro do banner temos uma caixa que
eu carinhosamente dei a classe de “caixa”. Aqui é a mesma ladainha de sempre. Objeto : Contexto
= Resultado. A diferença aqui está na posição absoluta da caixa em relação ao banner.
1.  .caixa {
2.     width: 42.553191489362%; /* 264px / 1128px */
3.     padding: 2.4em 4em 2.4em 4em;
4.     position: absolute;
5.     top: 48px;
6.     background: rgba(0,0,0,0.6);
7.  }
Novamente vamos pular os estilos puramente estéticos para ganharmos tempo. Mas você pode
conferir todos eles na demo.
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 14/31
Colunas
Temos quatro destaques contendo texto e imagens que chamamos de colunas. A margemda
direita também foi calculada em porcentagem. Como o último bloco não tem margem coisa
nenhuma utilizamos o parâmetro last-child para especi�car isto. Lembrando que versões antigas
do IE não suportam isto.
1.  .coluna {
2.     width: 23.404255319149%; /* 264px / 1128px */
3.     margin­right: 2.127659574468%; /* 24 / 1128px */
4.  float: left;
5.  }
6.   
7.  .coluna:last­child {
8.     margin­right: 0;
9.  }
Footer
O rodapé do nosso layout é bem simples e ocupa 100% de largura.
1.  .footer {
2.     width: 100%;
3.     margin­top: 2.4em;
4.     margin­bottom: 2.4em;
5.     float: left;
6.     clear: both;
7.  }
CSS [Mobile]
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 15/31
CSS [Mobile]
Vamos adaptar o layout aqui para tamanhos menores do que1128px. Mas poderíamos utilizar
media queries para criar versões alternativas para televisores, impressão, dispositivos com maior
densidade de pixel (como as telas retinas), etc.
Estes aparelhos podem ser divididos em alguns tamanhos médios de largura:
1024px – Tablets em modo paisagem;
768px – Tablets em modo retrato;
600px – eReaders;
480px – Smartphones;
Mas estes valores não passam de chutes calculados. Existem dezenas de resoluções
intermediárias. Aqui vai entrar o conceito de break-point, ou, ponto-de-quebra. Funciona mais ou
menos assim:
1. Redimensione o seu browser até identi�car um problema.
2. Concerte o problema.
3. Repita.
Sério. Não tem segredo. Para isto você pode utilizar algum bookmarklet de resolução. Copie o
valor para o seu Media Querie.
Por exemplo, em exatos 1128px de largura temos o primeiro problema. Não existe nenhuma
margem e o layout �ca coladinho na janela do browser. Entra o primeiro Media Querie.
1.  @media screen and (max­width: 1128px) {
2.  .container {
3.     padding: 0 2.4em 0 2.4em;
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 16/31
   padding: 0 2.4em 0 2.4em;
4.  }
5.  }
Tradução: em telas de largura máxima 1128px aplicar os seguintes estilos: espaçamento de 2.4em
para a esquerda e para a direita.
O próximo problema é que lá por volta do 768px a nossa caixa de banner parece meio apertada
demais. Podemos aumentar o tamanho dela.
1.  @media screen and (max­width: 768px) {
2.  .caixa {
3.     width: 65%;
4.  }
5.  }
O mesmo acontece com as colunas… Dentro do mesmo media querie vamos especi�car duas
colunas com largura de 48% e margem de 2%.
1.  .coluna {
2.     width: 48%;
3.     margin­bottom: 2.4em;
4.     margin­right: 2%;
5.  }
6.   
7.  .coluna:nth­child(even) {
8.     margin­right: 0;
9.  }
Lembrando que agora a regrinha é diferente. Para cada coluna de número par zeramos a margem
através do :nth-child(even).
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 17/31
O logotipo poderia ter uma margem maior por aqui.
1.  .logo {
2.     margin­top: 1.2em;
3.  }
O próximo problema é o banner. Por volta de 718px ele poderia receber menos destaque na
imagem e mais destaque no texto. Diminuimos a altura dele para 150px, e colocamos a caixa logo
abaixo. O resto é correção de margem e perfumaria.
1.  @media screen and (max­width: 718px) {
2.  .banner {
3.     position: relative;
4.     float: left;
5.     margin:0;
6.     height: 150px;
7.  }
8.   
9.  .caixa {
10.     position: relative;
11.     display: block;
12.     float: left;
13.     margin­top:100px;
14.     width: 100%;
15.     background: #000;
16.  }
17.   
18.  .caixa h1 {
19.     font­size: 2.5em;
20.  }
21.   
22.  .principal {
23.     margin­top: 450px;
24.  }
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 18/31
25.  }
Diminua mais ainda a janela do browser. Eventualmente o menu cairá para duas linhas, certo?
Como temos apenas quatro links na navegação ele pode muito bem simplesmente ocupar 100%
de largura e zerar a margem das linhas. Vamos também diminuir um pouco o tamanho dos links.
1.  @media screen and (max­width: 640px) {
2.  .menu {
3.     width: 100%;
4.  }
5.   
6.  .menu ul {
7.     float: left;
8.     font­size: 0.8em;
9.  }
10.   
11.  .menu li:first­child {
12.     margin­left: 0;
13.  }
14.  }
Poderíamos, através de JavaScript e/ou CSS3, criar outras soluções de navegação como um menu
retratil, com overlay, etc. Mas como já existem alguns artigos aqui no Tableless sobre o tema
vamos seguir adiante.
Neste ponto já temos nosso layout em tablets. Esta é uma screenshot em um iPad 2 modo retrato.
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 19/31
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 20/31
O próximo, e último passo, é criar o layout em smartphones em si. Para isto vamos especi�car que
todas as colunas também ocupem 100% da tela.
1.  @media screen and (max­width: 520px) {
2.  .coluna {
3.     width: 100%;
4.     margin­right: 0;
5.  }
6.  }
E aqui esta o layout em um smartphone.
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 21/31
Saiba mais
E está �nalizada nossa demo. Baixem o layout e brinquem com o código. Ainda está com dúvida
em algum tema especí�co ou quer se aprofundar em um dos aspectos? Segue uma listinha básica
de alguns outros artigos sobre o assunto:
Design Responsivo na Prática: Do rascunho ao digital
Design Responsivo I – O que é e por que usar
Design Responsivo II – Grids e Texto
Design Responsivo III – Media Queries e Compatibilidade
Desenvolvimento Responsivo e Viewport
Design Responsivo & Retina Display: desenvolvimento web em alta resolução
Imagens em alta resolução utilizando SVG
Grids semânticos com LESS
Menu Restrátil com CSS e jQuery
Como testar Design Responsivo
Imagens Responsivas de Alta Performance
Responsive Web Design
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 22/31
Responsive Web Design
Espero que tenha sido proveitoso para vocês. Bons estudos, um abraço e até a próxima! 
—
Update:
O Diego Eis fez um Micro Workshop Online mostrando como implementar um layout responsivo,
mostrando o básico sobre Grids �uídos, Imagens (vídeos etc) �uídos, Media Queries, Fonts com
REM e algumas outras coisas. Vale a pena ver.
Dani Guerrato
Uma geek de 27 anos apaixonada por cinema, literatura, tecnologia e, é
claro, internet! É designer, desenvolvedora front-end e co-fundadora do
estúdio PopUp Design, localizado em São Paulo. Adora semântica e acha
divertido ler o código fonte do site dos outros.
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 23/31
VIDEO: LeBron Shows Up in Full Football
Equipment, Fans Go Berserk Stack
30 Magnificently Sexy Kate Upton GIFs
PBH Network
Flying Cars Have Arrived. So What? Web2Carz.com
Your Signature Style: What Do People Notice
About You? Talk Shop
PELA WEB
Web Fundamentals ­ Dicas do Google 4 comentários
Header responsivo somente com css 24 comentários
Brackets, editor Open Source da Adobe
12 comentários
API de cotaçõesde Bolsa de Valores, Dólar e
Euro 7 comentários
TAMBÉM EM TABLELESS O QUE É ISSO?
19 Comentários Tableless  Entrar
Ordenar por Melhor avaliado Compartilhar ⤤
Participe da discussão...
Felipe Fialho  •  9 meses atrás
Dani, beleza?
Muito legal seu tutorial, acho muito bacana essas abordagens de mostrar na pratica o que passamos no
dia a dia, assim pessoas que estão começando conseguem ter uma visão mais real das coisas.
Parabéns.
Só tenho um comentário a fazer, com relação ao desenvolvimento em si. Tenho usado mobile first nos
últimos projetos e acredito que esse seja o caminho. Ou seja, começo do menor dispositivo e vou
"crescendo" até as janelas maiores, usando "min" ao invés de "max". Uso "max" apenas em propriedades
Favorito ★
Menu PARA INICIANTES UX & DESIGN CSS HTML5 JQUERY 
JAVASCRIPT RESPONSIVE WORDPRESS SEO TRADUÇÕES
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 24/31
• Responder •
"crescendo" até as janelas maiores, usando "min" ao invés de "max". Uso "max" apenas em propriedades
que serão usadas somente até o tamanho X.
Além disso, na versão do CSS de desenvolvimento, adiciono os media queries o mais próximo possível
da classe que quero atingir, e como uso o grunt, na versão de distribuição, deixo uma tarefa para dar um
"merge" em todos os media queries.
Já usou essa abordagem de mobile first, quais suais impressões sobre isso? Abraços e novamente
parabéns :)
  9
△ ▽
 
• Responder •
Dani Guerrato    •  9 meses atrás
ver mais
> Felipe Fialho
Oi Felipe, tudo certo?
Bem, a abordagem do artigo é desktop­first por uma questão didática. É muito mais fácil de
explicar um conteúdo a partir de um terreno comum ao leitor, no caso, o desenvolvimento de sites
para desktop. Este é o ponto de partida da maior parte das pessoas aqui.
Quanto a minha opinião pessoal sobre a técnica, bem, para mim não existe certo, errado ou "o
caminho". Trata­se de estudo de caso de cada projeto, de público­alvo, dispositivos mais
utilizados, etc. Só esta discussão já daria um artigo inteiro. Quem é o seu usuário e o que ele
realmente precisa? Estas são as perguntas que você deve responder na hora de escolher uma
abordagem.
­ A premissa do mobile­first é poder simplificar navegação, layout e conteúdo nas versões mobile
para aumentar a complexidade aos poucos no desktop. Isto parte do raciocínio que o usuário de
dispositivos móveis está sempre "com pressa" ou em uma "conexão ruim". Isto é um grande mito
de desenvolvimento móvel que cai facilmente se você analisar estatísticas de uso. Nada justifica
cortes no conteúdo. Eu, particularmente, não acredito em uma separação radical entre a "web
mobile" e "web desktop". Isto é contra o conceito de design responsivo (one web). O que muda é
se você vai nivelar por cima (desktop­first) ou por baixo (mobile­first). No caso eu prefiro o
  21
△ ▽
 
Compartilhar ›
Compartilhar ›
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 25/31
• Responder •
Felipe Fialho    •  9 meses atrás> Dani Guerrato
Muito boa a resposta, já fazia um tempo que queria ver sua opinião com relação a isso,
mas não tive a oportunidade de perguntar antes.
Fica a ótima dissertação para que todos possam ver ; )
  12
△ ▽
 
• Responder •
Lisandro    •  8 meses atrás> Dani Guerrato
Ola Dani;
Para mim cada caso é um caso. 
Serei honesto, já tive casos de clientes onde tive que fazer um layout­mobile muito simples
(provisório) no lançamento do site, pois o próprio cliente queria alterações a todo momento.
Optei para não gerar retrabalho firmar o layout desktop com o cliente primeiro e logo depois
partir para os mobiles com um layout mais bem acabado. 
Ou seja, neste caso seria inviável mobile­first.
  1
△ ▽
 
• Responder •
Vagner Baggio    •  9 meses atrás> Felipe Fialho
Felipe, em relação ao seu comentário você poderia explicar mais como seria esse
desenvolvimento começando da menor resolução para a maior?
Como é isso na prática?
Grande abraço!
  2
△ ▽
 
• Responder •
Felipe Fialho    •  9 meses atrás> Vagner Baggio
@Vagner Baggio, nesse artigo abordei um pouco disso ­­> felipefialho.c o
m/blog/2014/css­modular­com­mobile­first/
  1
△ ▽
 
Vagner Baggio    •  9 meses atrás> Felipe Fialho
Valeu querido, vou dar uma olhada. Abs!
Compartilhar ›
Compartilhar ›
Compartilhar ›
Compartilhar ›
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 26/31
• Responder •
Valeu querido, vou dar uma olhada. Abs!
  1
△ ▽
 
• Responder •
Paulo  •  9 meses atrás
Oi Dani. Parabéns pelo Post, ficou muito bacana. Achei bem legal a maneira como vc conversa com o
leitor =D
  3
△ ▽
 
• Responder •
Paulo Ricardo  •  9 meses atrás
Oi Dani, só dois ajustes e/ou dúvidas:
No tópico 2. IMAGENS ADAPTÁVEIS, não seria max­width: 100% ao invés de max­size?
E nos cálculos para a porcentagem, não seria duas casas pra direita?
E parabéns pelo artigo, muito bem explicado, fácil de compreender! Abraço!
  2
△ ▽
 
• Responder •
Dani Guerrato    •  9 meses atrás> Paulo Ricardo
Oi Paulo!
Opa! Falha minha. Obrigada pelos apontamentos. Já corrigi o post! :)
Um abraço!
 
△ ▽
 
• Responder •
eck' ­uke  •  9 meses atrás
Olá Dani, adoro seus posts, eles possuem um leve toque de humor hahaha...e além disso são bem úteis.
Parabéns!
  2
△ ▽
 
• Responder •
Vinicius Rocha  •  9 meses atrás
A cada artigo, me torno mais fã do seu trabalho! Parabéns pelo artigo!
  1
△ ▽
 
Compartilhar ›
Compartilhar ›
Compartilhar ›
Compartilhar ›
Compartilhar ›
Compartilhar ›
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 27/31
• Responder •
Tiago Bezerra dos Santos  •  9 meses atrás
Dani Guerrato e seus artigos sempre úteis! Já compartilhei!
  1
△ ▽
 
• Responder •
Fábio  •  2 meses atrás
Excelente artigo! Me ajudou bastante, obrigado!!
 
△ ▽
 
• Responder •
Gabriel Falieri  •  3 meses atrás
Ola dani, beleza??
Para criar um site responsivo, se usa apenas um @media screen ou um para cada??
 
△ ▽
 
• Responder •
Davi Assumpção  •  8 meses atrás
TOP Dani, estou começando a trabalhar com responsive e suas publicações deram "a" luz... obrigado e
continue com esse sucesso.
 
△ ▽
 
• Responder •
Julio Coronel  •  8 meses atrás
Super proveitoso, detalhista ao extremo, pro demais! Obrigado por compartilha seu conhecimento.
Estudo primoroso.
 
△ ▽
 
• Responder •
Abraão Gabriel  •  8 meses atrás
tem algum tutorial, de como criar um layout no blogger desde o inicio?
 
△ ▽
 
• Responder •
Roger Albino  •  8 meses atrás
Muito bom o post! Parabéns!!
 
△ ▽
 
Compartilhar ›
Compartilhar ›
Compartilhar ›
Compartilhar ›
Compartilhar ›
Compartilhar ›
Compartilhar ›
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 28/31
Assinar feed✉ Adicione o Disqus no seu sited Privacidade
 
escrito por
DANI GUERRATO
28 de april de 2014
19 comentários
NÓS FAZEMOS
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 29/31
Produzimos seu código front-end
Micro Workshops Online
VEJA UM VÍDEO
Codi�cando um PSD direto para
HTML/CSS, passo a passo.
Implementando Wordpress do Zero.
Responsive Web Design passo a passo22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 30/31
SEJA UM AUTOR
Escreva artigos e compartilhe ideias
sendo um autor do Tableless. Leia as
instruções e nos envie um e-mail com
um artigo para avaliarmos.
NEWSLETTER
Email Email Address
Primeiro nome Primeiro nome
22/01/2015 Design Responsivo na prática 2: do layout ao HTML ­ Tableless
http://tableless.com.br/design­responsivo­na­pratica­2­layout­ao­html/ 31/31
Primeiro nome Primeiro nome
Sobrenome Sobrenome
Cadastrar
VAGAS E TRAMPOS
DESENVOLVEDOR FRONT-END (Rio
Grande do Sul)
Desenvolvedor PHP Júnior (estagio,
possibilidade de efetivação) (Rio Grande
do Sul)
Dev Backend (Florianópolis, SC)
Feito para a comunidade web brasileira. Ajude. ♥