Dani Guerrato

Design Responsivo II – Grids e Texto

Por | Comentários: 133

No artigo desta semana você vai aprender as seguintes habilidades ninjas em CSS: como criar um grid flexível (e como usar um sistema pronto), a fantástica história do EM e a diferença entre design responsivo e layout liquído. Se você ainda não sabe o que é design responsivo e por que utilizar eu recomendo a leitura da parte I desta série.

Não entre em pânico

Não quero assustar vocês, mas para trabalhar com design responsivo vamos precisar de um pouco de matemática… É uma continha super simples que a calculadora pode fazer sozinha! Na verdade é tudo uma questão de deixar o conteúdo proporcional… utilizando porcentagens e/ou EM. Se mesmo assim você achar confuso, no final deste artigo tem uma compilação de algumas ferramentas úteis para te ajudar nesta tarefa.

O que é EM mesmo?

O EM, também chamado de quadratim, é uma medida tipográfica. Antigamente, quando as fontes eram feitas de prensas de metal, 1 EM correspondia a largura de corpo quadrado da letra M maiúscula. O nome é derivado da pronúncia fonética, em inglês, dessa letra.

tipos de metalTipos de Metal | Créditos: tonystl

EM é uma unidade de medida relativa, ou seja, que varia proporcionalmente de acordo com o contexto. É muito útil em CSS por que é possível definir as margens e espaçamentos também em um tamanho proporcional. O que já não funciona com medidas fixas como pixels ou pontos. Quando você define a tipografia de um site no padrão EM, conforme o tamanho da letra aumenta o mesmo acontece com os elementos afiliados ao texto. 1 EM normalmente equivale a 16 pixels, ou seja, a medida que o browser considera como padrão para textos. Utilizar EM é uma questão de acessibilidade, pois pessoas com dificuldade de leitura podem aumentar e diminuir livremente o tamanho do texto de maneira proporcional. O que dá mais liberdade para o usuário, sem quebrar o seu layout!

Mas se você é como eu e acostumou a pensar em pixels, tem uma linha simples de CSS que vai facilitar a sua vida.

Bem, a lógica é simples: se 16 pixels = 100%, 10 pixels é igual a 62.5%. (16 x 0.625 = 10). Então é só definir este valor como padrão para todo o documento. Utilizando esta regrinha 1em passa a ser equivalente a 10px, o que torna bem mais fácil calcular os valores a partir de uma base decimal. É só pegar o seu valor em pixels, andar uma casa para a esquerda e colocar um ponto. Um texto de 14px, por exemplo, seria equivalente a 1.4em. Já um header com 36px seria equivalente a 3.6em.

Ficou com preguiça? Deixe o font-size em 100% mesmo e utilize a calculadora px to em.

O que é um grid?

Se você ainda não sabe eu recomendo a leitura do livro da coleção Design Básico, volume 6, dos autores Gavin Ambrose e Paul Harris. É ótimo! Aliás, a coleção inteira é muito boa. E eu não estou ganhando nada pra falar isso. :) Mas basicamente um grid é um conjunto de linhas bases que fornecem uma estrutura para o seu layout (ou qualquer outro tipo de peça gráfica). A seguir eu vou explicar como transformar um grid fixo de 960px em um grid flexível.

Do fixo ao relativo

Vamos supor que você recebeu do designer que trabalha com você o seguinte mock-up no Photoshop:

mockup em pixels

É um layout bem simples. Uma sidebar de 300px e uma área de conteúdo de 660px. Tudo isso dentro de um wrap de 960px. Se fossemos construir usando o método de layout fixo o CSS ficaria assim:

Adeus Pixels… Olá Sr. Grid Flexível!

Para a maior parte das coisas na vida não existe uma fórmula mágica. Felizmente para construir um grid flexível existe! Repita como se fosse um mantra, faça uma musiquinha, crie um wallpaper para a sua área de trabalho… Faça como achar melhor, mas decore isto pois é a base de tudo: objeto ÷ contexto = resultado. Parece meio difícil, mas é fácil de pegar o jeito.

design dividido por contexto é igual a resultadoseu novo melhor amigo!

Vamos voltar ao nosso layout. Precisamos calcular o valor em porcentagem da sidebar e da área de conteúdo em relação ao valor total do site (960px). Esse wrap seria, neste caso, nosso contexto. Vamos começar pela sidebar. Nosso primeiro objeto alvo! Seguindo a fórmula a conta ficaria assim: sidebar ÷ wrap = resultado. Para descobrir a porcentagem é necessário multiplicar o resultado por 100. Vamos começar pela largura da sidebar. 300 ÷ 960 = 0.3125 Eu sei! É um número bem feio. Mas não arredonde… Apenas coloque o ponto duas casas para a direita e acrescente o sinal de porcentagem. Ou seja: 31.25%. E, voilá, você tem uma sidebar proporcional linda. Toca aqui! o/

mockup sidebar

Bem, para descobrir o tamanho relativo da div .principal a mecânica é a mesma. Objeto ÷ contexto = resultado. 660 ÷ 960 = 0.6875. Andando duas casas pro lado chegamos em 68.75%. E essa é a largura da nossa div .principal.

mockup porcentagem

Você deve ter notado que eu deixei os valores originais em pixel comentados. Isto não é obrigatório, mas é um bom recurso para facilitar no caso de alguma alteração no futuro.

Como lidar com o texto

lorem ipsum

O telefone toca. O designer estagiário esqueceu de te mandar o estilo do texto… Você recebe um novo arquivo com as seguintes especificações: tamanho da fonte 16px, entrelinha 24px e 40px de margem. Ok, vamos converter isto para medidas relativas. Como definimos o font-size lá no começo para 62.5% a medida do texto é o mais fácil: 1.6em.

Uma coisa meio óbvia mas que é importante lembrar sobre a relatividade é que ela é, bem, relativa. Se o contexto muda, o objeto alvo também muda. Como o nosso font-size é 1.6em o espaçamento entre as linhas tem que ser calculado com base neste novo número. Lembra da fórmula objeto ÷ contexto = resultado? Ela também vai servir para o texto. 2.4 ÷ 1.6 = 1.5. Ou seja, 1.5em. Como não estamos trabalhando com porcentagem não é necessário multiplicar por 100.

Vamos ao espaçamento. Você poderia perfeitamente indicar padding como 40px. Mas não usamos nenhum pixel até agora… Pra que estragar, né? Sem contar que talvez um espaçamento de 40px fique grande demais em um celular com a tela pequena como o Blackberry. Então vamos continuar com as medidas proporcionais!

Sobre margins e paddings

Isso parece repetitivo, mas lembre-se que o contexto sempre muda. E esta é uma regrinha importante de se lembrar:
1. Quando você utilizar o parâmetro margin pra definir um elemento o seu contexto é a largura do container pai (neste caso a div .principal).
2. Quando você utilizar o parâmetro padding para definir um elemento o contexto é o tamanho do próprio elemento.

Com isso em mente vamos especificar o padding do nosso texto. Como o parágrafo está na medida EM, vamos deixar o padding como EM também! 40 ÷ 16 = 2.5em

Ficou confuso demais com a matemática? Ainda tem solução!

Antes de apelar tente fazer na prática. É mais fácil do que parece! Mas se você absolutamente não consegue fazer contas ou precisa de muita agilidade no seu projeto dá para utilizar um sistema de grid adaptável pré desenvolvido…

1140 CSS Grid

1140 grid system

Dentre todos os grids que eu testei o que eu achei mais simples e fácil de usar foi o 1140 CSS Grid System desenvolvido por Andy Taylor. É um grid de 12 colunas considerando um container máximo 1140 pixels. Cada coluna tem uma classe formada pelo seu número em inglês + o sufixo col. Exemplo: .onecol, .twocol, .threecol e assim por diante. Estas colunas podem ser utilizadas em qualquer combinação que some 12 no final. Posso usar 6 vezes em uma fileira a classe .twocol, em outra posso usar três vezes a .fourcol, doze vezes a .onecol e assim por diante. O legal é que você não precisa se preocupar com contas ou com margem. Tudo se adapta elasticamente.
grid 12 colunas
Existem outras 3 classes importantes:
.container é onde tudo acontece. Tem a mesma função do .wrap do mock-up que nós desenvolvemos.
.row define uma nova fileira de colunas. Cada vez que o resultado somar 12 abra uma nova div .row
.last deve ser utilizada no último elemento de cada fileira. Esta classe serve para remover a margem da direita.

Exemplo de mark-up retirado do site oficial do sistema:

Para quem QUER saber a matemática por trás

A largura de cada coluna corresponde ao valor da primeira multiplicada pelo número do sufixo (mais a margem para a direita de 3.8%). Exemplo: a .onecol possui como largura 4.85%; a .two col vai ter 13.45% de largura [2 x (4.85% + 3.8%)].

Outros grids e frameworks

Existem diversos tipos de grid que funcionam bem com design responsivo, cada um é útil em um determinado contexto. Escolher o certo é uma questão de gosto pessoal. O ideal é experimentar vários até encontrar o que funciona pra você. Segue uma listinha de alguns grids bacanas. Infelizmente nenhum em português. :/

Skeleton

skeleton screenshot
Skeleton é um boilerplate responsivo com um “esqueleto” básico de CSS para os seus layouts.

Golden Grid System

golden grid system
Um grid dobrável de 18 colunas. O Golden Grid acompanha um script muito útil com linhas guias para você visualizar a estrutura do grid no browser enquanto desenvolve.

Tiny fluid Grid


Um grid super leve! O Tiny Fluid Grid é legal por que você pode customizar (dentre as opções do site) o número de colunas, o tamanho das margens e a largura mínima e máxima do container.

Inuit.css

inuit.css screenshot
Um framework super completo. O inuit.css combina webstandarts, um ótimo reset para o CSS e um grid responsivo. É necessário instalar um plugin para gerar o grid.

Less Framework

less framework 5 screenshot
O Lessframework contém de grid mais adaptável. Existem quatro estados estáticos do layout: 320, 480, 768, e 992 pixels. O grid perde ou ganha colunas de acordo com as mudanças da tela, mas o tamanho das colunas sempre fica o mesmo.

FrameLESS

FrameLESS screenshot
O FrameLESS é um grid responsivo sem ser fluído. Funciona assim: o grid “cresce” para os lados coluna por coluna ao invés de pixel por pixel. Um conceito muito legal, mas para usar você precisa manjar de LESS – uma linguagem de folhas de estilo dinâmica.

the SEMANTIC grid

the semantyc grid system
Isso mesmo! Um grid semântico para quem odeia sujar o código com classes como .onecol. É necessário saber usar LESS, SASS ou Stylus.

E você? Testou algum outro grid responsivo legal que eu não citei aqui? Manda o link nos comentários! Entende pra caramba sobre LESS? Você está convidadíssimo a fazer um artigo sobre o assunto aqui no blog. :)

Round Bonus: GuideGuide

Quem é designer sabe que lidar com grids no Photoshop é um pé no saco. Esse plugin facilita MUITO a sua vida. Você pode criar um grid super personalizando especificando exatamente onde você quer cada linha guia. Muito útil! Só lembrando que se você usa OSX é necessário fazer esta atualização para o Adobe Extension Manager.

GuideGuide screenshot

Design fluído ou design responsivo?

Muita gente confunde os dois conceitos! Design fluído, ou design liquido, é uma técnica de desenvolvimento web que também utiliza medidas relativas para que o layout de um site possa aumentar ou diminuir de tamanho de acordo com o tamanho da área de visualização. Bem, nesse sentido é muito semelhante ao design responsivo. Mas as semelhanças acabam por aqui. No caso do design responsivo, não se trata apenas de esticar ou encolher os elementos visuais do site, e sim de adaptar a experiência de navegação de acordo com as necessidades de cada tipo de mídia. E estas mudanças vão muito além do tamanho do grid.

Vamos imaginar, por exemplo, que você está no meio da rua e precisa descobrir o endereço ou telefone de um restaurante. Você saca o seu smartphone do bolso e tem uma péssima surpresa: a recepção da área é péssima! O sinal da internet só pega em modo EDGE (conexão mais lenta que a 3G). Depois de alguns minutos, que pareceram séculos, o site do restaurante até abre no seu celular… mas como ele é liquido a sidebar ocupa 30% da tela. Os links do menu são tão pequenos que você não consegue nem clicar! A experiência é tão frustrante que você até desiste de encontrar o endereço e decide comer em outro lugar!

Mas, se o site do nosso restaurante imaginário fosse responsivo, o menu lateral poderia ser transplantado para o topo do site, com os links com um tamanho maior pensando em uma interface touch! Ou, para aproveitar ainda mais o espaço, o menu poderia ser um campo de formulário tipo select. Super prático! Alguns elementos como imagens grandes meramente decorativas poderiam ser substituídos por versões menores e mais leves (ou nem existir). Isto tudo sem a necessidade de um novo html em uma versão mobile.

E pra finalizar uma dica de livro

Lembra o Ethan Marcotte, o cara que inventou o design responsivo? Então, ele tem um livro muito completo sobre esse assunto que eu super recomendo!

RESPONSIVE WEB DESIGN - A book apartA Book Apart, Responsive Web Design

Não perca o próximo capítulo!

Quer se tornar um mestre jedi do design responsivo? Não perca nos próximos artigos: como usar media queries, como lidar com imagens e videos, plugins úteis de javascript, ferramentas recomendadas… E como vencer o duelo contra o lado negro da força, erm, Internet Explorer.

Tags: > , ,

Dani Guerrato

Dani Guerrato

Uma geek que adora Design, Literatura Fantástica, Games de RPG e mochaccinos de chocolate branco - não exatamente nesta ordem. É designer, desenvolvedora front-end, palestrante e co-fundadora da PopUp. Gosta de coisas estranhas como cheiro de livro e bandas de heavy metal que ninguém ouviu falar.

Você pode achar a Dani por aqui:
Facebook - Twitter - - Instagram

  • Alexandre Gemellaro

    Parabéns Dani, artigo muito bem escrito e detalhado. Vai ajudar e muito nós designers. compartilhando pra geral ;-)

  • Anônimo

    Ola Dani.. show de bola seu artigo… Já adoto o responsive design a mais de um ano e meio em quase todos meus projetos, o primeiro frame work que usei foi o Less, mas não gostei muito das grids, pois estava acostumado ao 960gs com 24 colunas, então, resolvi adaptar o conceito do Less ao 960gs com 24 colunas e desde então uso esse meu próprio “”Framework””

    Continue com esse seu ótimo trabalho

    • http://www.popupdesign.com.br Dani Guerrato

      Opa! Depois manda o link do seu portfólio pra gente conhecer. :) 

    • http://www.popupdesign.com.br/ Leandro Lima

      Manda teu portfólio sim, cara! Depois vamos fazer uma lista de sites que já estão usando Responsive Design pra servir de inspiração e incentivo pra quem vai começar com isso! ;)

  • http://twitter.com/brunobruno2 Monteiro

    A única coisa que tenho conta o uso de frameworks CSS é o excesso de classes e outras coisas que raramente vamos usar.

    Na minha opinião, o ideal é criar um framework próprio, com tudo aquilo que você tem de melhor nas mangas e ir adaptando para cada projeto, sempre sob medida.

    • http://www.popupdesign.com.br Dani Guerrato

      Eu concordo plenamente com você. Não apenas no caso de frameworks, mas em boilerplates de maneira geral o legal é sempre estudar e ver o que de fato você precisa. Tem muita gente usando metralhadora para matar formiga! rs Mas eu acho sempre interessante conhecer novas soluções, por mais que você não use o código completo… você vai pegando uma linha dali, outra de lá, até montar o que funciona de verdade pra você. :)

      • Anônimo

        Foi justamente o que eu fiz com meu próprio Framework, pois realmente, aquele monte de código que eu nunca iria usar, estava la pesando meus arquivos… outra coisa que adotei tbem foi o LESS CSS com compilador em PHP, pois ele deixa o arquivo CSS bem organizadinho e poupa bastante tempo de desenvolvimento.

        Dani caso no futuro vc queira fazer um post sobre o LESS CSS (http://leafo.net/lessphp/) pode contar comigo para tirar qualquer dúvidas…

        • http://www.popupdesign.com.br Dani Guerrato

          O LESS realmente é muito útil. Principalmente pelo aspecto da semântica. Eu acabei não me adaptando muito bem ao jeitão do LESS, mas estou querendo aprender mais sobre este assunto e usar em meus projetos. :)

  • http://www.facebook.com/wultra Henrique Wu

    Post sensacional, tornou simples e entendível algo pelo qual não me interessava antes e me fez enxergar o quanto estava perdendo!

    Parabéns e obrigado!

    • Amanda Thomaz

      Concordo! Parabéns!

  • http://www.eduardodesign.com/ Eduardo Matos

    Muito bom Dani, excelente explicação! (podia ser editora do Tableless sem dúvidas hehehe)

  • http://twitter.com/dheyfesson Dheyfesson Pinheiro

    caracas!!! muito bom mesmo esse artigo. 

    parabéns Dani.

  • Evandro Oliveira

    Dani, excelente artigo, parabéns. Uma pequena observação, que não vai mudar em nada a qualidade do texto, é que PX também é uma unidade relativa, que no artigo foi tratada como absoluta. Apesar de podermos assumir isso com segurança, em se tratando de monitores/computadores, a brincadeira fica séria quando tratamos de impressoras, projetores, celulares, TV’s etc.
    PX é relativo à densidade de imagem, que pode ser definida em pontos por polegada (dpi) ou – o que realmente interessa pra gente no caso – pixels por polegada (ppi). Como a densidade em computadores é padrão (72ppi), não há mal algum em assumir isso como unidade absoluta, reforço, em se tratando de computadores. O maior exemplo disso é o Retina Display, que dobra a densidade de pixels, e trouxe uma baita dor de cabeça junto com a novidade.
    No mais, artigo e texto impecáveis. Um abraço.

    • http://www.popupdesign.com.br Dani Guerrato

      Oi Evandro! Obrigada pelo seu comentário. Serve de alerta para quem for lidar com outras mídias. 
      Talvez tenha ficado um pouco ambíguo, mas vou explicar por que eu chamei o pixel de fixo: embora em outras mídias o pixel pode ter um valor diferente, 1px em um determinado contexto sempre vai ter o mesmo valor. Por exemplo, embora o iPhone 3GS e o iPhone 4 tenham medidas diferentes do que é um pixel, no que diz respeito a cada um deles não existem pixels diferentes. Se 1px = x para o seu browser ele nunca vai valer y dentro do mesmo browser. Diferente do EM, que pode sofrer variações dentro do mesmo contexto, pois ele é uma medida muito particular a cada tipografia. Se você especificar 1 EM de espaçamento para a esquerda no seu parágrafo, isto vai depender do seu texto. Tudo varia de acordo com o referencial. Já 40 pixels de distância de padding não dependem de outros fatores. Relatividade é uma coisa confusa, né? :)

  • http://twitter.com/oieduardorabelo Eduardo Rabelo

    É, bem parecido com o do Nick Pettit em Agosto de 2011

    target / context = result http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

    Gostei do humor e do seu ponto de vista técnico :) 
    Muito bom o artigo Dani!

    • http://www.popupdesign.com.br Dani Guerrato

      Sim. Se você for buscar as referencias tanto o meu post quanto o do Think Vitamin on são baseados no mesmo livro do Ethan Marcotte que eu citei no final do artigo. Vale a pena a leitura! Existem diversos outros artigos interessantes em inglês. A Smashing Magazine, por exemplo, tem umas compilaçōes muito boas sobre o assunto. :)

  • Frank Gilber

    Olá Dani!
    Parabens pelo artigo totalmente detalhado não deixando nenhuma dúvida ao leitor, esse era um assunto que eu já havia procurando e não encontrava, para poder entender melhor sobre o Design Responsivo  I e II, novamente parabens.

  • http://www.facebook.com/limaluciano Luciano Lima

    Simplesmente ótimo artigo.

    Dei uma lida rápida, mas vai me servir de base para me aprofundar no assnto.
    Obrigado pelo compartilhamento!

  • Rodnei

    Olá, Dani! Estou aguardando o próximo artigo para redimensionamento de imagens e vídeos para diversas resoluções. Ótimo artigo!  

    • http://www.popupdesign.com.br Dani Guerrato

      Oi Rodnei! A terceira parte já está no ar em http://blog.popupdesign.com.br/design-responsivo-iii-media-queries-e-compatibilidade/
      Abraço!

  • Rafael Rebelato

    Super post!

  • Nandorossetto

    Fazia tempo que num via algo tão bem explicado. Congrats!

  • http://twitter.com/mahortense Marcus Ortense

    Trabalho fantástico, muito detalhado, bem explicado e sem tornar o artigo cansativo, esta de parabéns!

  • Glaucia Rezende

    Obrigada, Dani!  Minhas dúvidas ficaram relativamente menores: dúvidas / layout = responsive! Valeu!

  • http://twitter.com/loissecom2s Loisse n!

    Parabéns, Dani!!! Não imagina o quanto me ajudou com essa explicação tão clara, objetiva, de fácil entendimento e com um ótimo conteúdo!! Continue assim!! 
    =)

  • Jean Copati

    Parabéns, valeu a pena ler tudo colocar funcionado ;D

  • http://twitter.com/_been Ben ‘

    Muito bom mesmo, o melhor tutorial de grids que encontrei, e o único que pude entender algo :)

  • Carlosalamorim

    Parabens…..moça……rsrsr estou aprendendo essa coisa que digitamos um monte de códigos e sai uma maravilha do outro lado(HTML e CSS) e não expert ainda, ams entendi pra caramba esses seus posts……vou ficar ligado aqui e quando eu for expert igual vc vamos compartilhar muita indormação……PArabéns.

  • Lucas Lopes

    Gostei muito do post, parabéns.

    Estou fazendo experiências e cheguei a conclusão de que é mais fácil utilizar porcentagens nas larguras, alturas, margens, etc. Particularmente não gosto de EM. Sempre usei pixels e hoje estou achando mais fácil trabalhar com porcentagens.

    Agora, em relação ao tamanho dos textos, não há nenhuma diferença em usar EM, porcentagens ou pixels. Na realidade, prefiro seguir com pixels e em cada break point, alterar o tamanho da fonte, isso porque nenhuma medida é na realidade responsiva ou fluída. Não importa qual eu utilize, o tamanho das fontes não diminuem ou aumentam conforme eu redimensiono a janela.

    Sabendo disso, por que usar medidas como porcentagem ou EM faria alguma diferença quando o assunto é o tamanho das fontes?

    Se estou errado, por favor me corrija.

    Obrigado.

    • http://www.popupdesign.com.br Dani Guerrato

      Não é “errado” utilizar pixels. Mas existem alguns motivos pelos quais é mais recomendável utilizar EM, principalmente ao lidar com design responsivo. Vou te dar 5 motivos. :)
      1. Uma questão de usabilidade. Pense em um usuário com dificuldades de leitura, por exemplo.  Como 1 Em corresponde ao valor que o browser estabeleceu como padrão, o usuário poderia configurar o navegador para aumentar o tamanho da letra automaticamente. Isto funcionaria bem com EM ou até com porcentagens, mas não funciona com pixels. 2. Não podemos prever quais serão os padrões de resolução de tela do futuro por isso é dificil pensar em termos de  “break points”. Quando este post foi escrito, por exemplo, não existia o novo iPad (com sua resolução de 2048 x 1536). Não sei se você já teve a oportunidade de visualizar um site no novo iPad que não tenha a meta viewport configurada… Fica tudo muito pequeno! Isto acontece por que embora as telas tenham fisicamente o mesmo tamanho, a densidade de pixels é diferente. Ou seja, 1 px do iPad 2 vai ser diferente de 1px do iPad “3”. Já como 1 EM é considerada a medida padrão tudo vai ficar proporcional no tamanho de texto que o browser considera ideal para aquele dispositivo. :)  Sim, você pode usar media queries para alcançar estes usuários especificamente, mas, e a próxima geração de iPads? Daqui a uma semana podem inventar um novo aparelho/browser/sistema operacional que fatalmente vai quebrar o seu texto. Mas a probabilidade disto acontecer com EM é menor do que com pixels. 

      3. Textos com Zoom fatalmente vão ficar rasterizados se você utilizar pixels. 

      4. Eu não sou especialista em tipografia, por isso mesmo não arrisco inventar proporções de distancia para fontes. Por isto mesmo no caso de paddings e margens quando se trata de textos é melhor utilizar EM. Isto acontece por que 1 EM é exatamente a altura da fonte ou seja, sua margem vai ficar proporcionalmente perfeita. Afinal, ela vai sempre ser relativa ao tamanho do seu texto. Não uma porcentagem arbitrária. 

      5. Finja que EMs são pixels com um ponto no meio! :D Se para você é dificil pensar em termos de EM utilize no topo do seu CSS a regrinha que eu expliquei no post: body { font-size: 62.5%; }. Desta maneira 1 em = 10 pixels. Se você precisar de 12 pixels, por exemplo, é só colocar 1.2em, etc…

      Espero ter ajudado. Um abraço.

  • http://www.facebook.com/marco.aguila777 Marco Águila

    Poxa, Dani…
    Um verdadeiro tesouro toda essa informação compartilhada nestes teus posts! 
    Vlw “mermo”!

  • http://evelynjacovanifrontend.wordpress.com/ Evelynjacovani

    Muito muito bom esse post, extremamente útil. Era exatamente o que eu procurava, entender a lógica e não simplesmente Ctrl+c Ctrol+v
    Parabéns pelo trabalho Dani, um trabalho bem feito e onde AINDA existem poucas mulheres como nós. Toca aqui! o/
    Bjs

    • http://www.popupdesign.com.br Dani Guerrato

      o Valeu Evelyn! :)

  • http://twitter.com/magnesio maneco

    Coisa linda de Deus esse teu post!! Só fiquei meio confuso com o título do livro 

    Design Básico, volume 6, dos autores Gavin Ambrose e Paul Harris, o nome seria Design Básico: Layout? ou Formato? Não achei por volumes. Brigado! 

    • http://www.popupdesign.com.br Dani Guerrato

      O nome do livro é “Design Básico: Grids”
      Link para o livro no site da editora: http://migre.me/9mR8I 
      Um abraço!

  • Alexandre Soares

    “Nunca te vi, sempre te amei” (Risos) Dicas de Design com qualidade e objetividade, conselhos fantásticos que salvam vidas! Obrigado! Mesmo!

  • Anônimo

    You are the one baby! Congrats.

  • Fábio Cezar Baía

    Excelente post Dani. Ainda não conhecia esse conceito de design responsivo, embora já tivesse visto ele em ação (quando redimensiono a janela do browser usando Google+).
    Sempre usei pixels porque achava mais simples, mas agora com sua explicação de como converter as medidas acho que nunca mais uso eles :)

    A respeito dos frameworks eu já usei um que não está na sua lista, gostei muito dele por sinal. O nome é blueprint: http://blueprintcss.org/

    É minha primeira vez no blog, mas agora virei leitor assíduo! Parabéns pelo blog!

  • http://twitter.com/EulerDesigner EulerDesigner

    Muito bom o post, parabéns e obrigado Dani.

     

    Está me ajudando muito, porem fiquei com uma dúvida, e no
    caso da altura? Como calculo uma altura de uma sidebar por exemplo em que eu
    precise de um altura fixa/proporcional sendo que a sidebar está dentro de um contém
    onde a altura é auto? Porque no caso da largura é tranquilo, eu entendi que ela
    é em relação a largura do wrap, só que no caso da altura eu não vou ter um
    número ‘x’ pra fazer o calculo…  (
    espero não incomodar já incomodado )
     

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Euler! Você pode calcular a altura em pixels.

      Um abraço!

  • http://www.facebook.com/douglasfaria10 Douglas Faria

    Muito |Bacana!

  • http://www.facebook.com/douglasfaria10 Douglas Faria

    Parabéns!

  • http://www.facebook.com/rubens.deandradegarcia Rubens De Andrade Garcia

    boa noite curti muito o teu artigo sobre grids e texto gostaria muito de poder ler os demais artigos do seu blog porém não estou conseguindo navegar nele ou o link ta quebrado ou o banco de dados retorna erro ! Poderia arrumar por favor Dani ?

    []’s

    • http://www.popupdesign.com.br Dani Guerrato

      Oi Rubens!
      Aparentemente aqui está tudo ok, talvez o nosso servidor tenha passado por alguma instabilidade no momento do seu acesso. Tente navegar novamente. Se o problema continuar, por favor nos avise. :) 
      Um abraço!

  • Robson Pratti

    Dani Parabens !!!!
    Bem explicado até mesmo os calculos… me ajudou bastante ate mesmo como calcular o bendido do EM :)

  • Bianka Teles

    Parabéns pelo post, na verdade, pelos posts. Vc conseguiu explicar da melhor maneira, mais simples e mais objetiva, sobre design responsivo. Agora eu me atrevo a fazer! =)

  • Fabio Botelho

    Muito bom, o post. Parabéns pela iniciativa.

  • Roberto Silva

    Quando comecei a ler o post logo pensei: “Que feitiçaria é essa de EM?”

    Sou estudante de programação e cada dia me surpreendo em sites como o seu aprendendo conteúdos que não são vistos no local de ensino.

    Parabéns pela postagem e pelo blog que, a primeira vista, parece ser incrível.

    Estarei lendo os demais artigos da serie Responsive e espero encontrar mais conteúdos no nível excelente que li agora.

  • Sandro Lima

    Dani o 960 Grid System também é um Grid Responsivo? Semelhante ao
    1140 CSS Grid System indicado por você neste artigo.

    Teria alguma vantagem ou desvantagem no uso do 960 ao invés do 1140?
    Thanks

  • Batista

    Qual o melhor grid atual para se usar

  • Batista

    Estou usando o http://www.tinyfluidgrid.com/ atualmente e encontrei um problema ao montar e fazer aninhamento desse grid. Como é feito nesse caso, o aninhamento do grid fluido sem precisar recalcular os valores?

  • http://twitter.com/pedronauck Pedro Nauck

    Mulheres conseguem ter o dom de explicar com delicadeza hahaha Parabéns, excelente a série de artigo.

    • Nicholas Eduardo

      Percebi isso lendo seus artigos kkk

  • http://www.facebook.com/profile.php?id=100001114770795 Paulo F. Muschalski

    Muito bacana seus pots. Atuais, linguagem fácil e inteligente. Parabéns =D

  • Leandro

    Olá, foi falado em como tratar a largura dos “box”, como eu faria com a altura?

    • http://www.popupdesign.com.br/ Leandro Lima

      Olá Leandro,

      Então, eu acredito que a melhor opção é deixar a altura automaticamente, usendo um height: auto. Eu já cheguei a usar alturas em porcentagem para um site com Scroll horizontal. Em outros casos, acho melhor usar a altura automática.

  • Igor Leony

    Você saberia me dizer onde encontrar a tradução deste livro, já pesquisei bastante, mas n consegui encontrar…Obrigado, e parabéns pelo post, ficou excelente…

  • Tiago

    Dani vc arrasou no post, estou começando em Responsivo e adorei o post, parabéns !!!!

  • Rodrigo Emgydio

    Sem palavras, realmente Lindo este post. Ajudou muito a vida de escovadores de bits (programadores) como eu. Valeuuu de mais!!

  • Sidney Simpsons

    Perfeito!!!!!!

    Essa é a palavra que define seu post’ ^^

  • gabriel

    Muito legal o artigo, parabéns… gostaria de saber se você pode responder uma dúvida
    sobre o 1140 CSS Grid System. “Só posso utilizar o grid para marcar as partes básicas do site ou posso utilizar por exemplo uma dentro de uma “, pelo teste que eu fiz deu, mas as grids ficam menores, não sei se é um modo correto de utilzar as grids…

    Espero que tenha entendido minha dúvida e obrigado desde já.

  • http://www.facebook.com/expalmer Palmer Oliveira

    Muito legal…objeto / contexto = resultado isso ai.

  • http://www.facebook.com/profile.php?id=100000755514998 Fábio Hnc Fernandes

    Awesome o/

  • Silvio Sabá

    A sua didática é sensacional! Ah, se todos os mestres fossem iguais a você…que maravilha aprender …

  • http://twitter.com/fernandodibob Fernando DiBob’s

    Muito bom o post ! Valeu pela dica (y)

  • André Costa

    Parabéns Dani G., realmente é o material de mais fácil compreensão que encontrei… Sua didática é excelente!!

    Mas (sempre existe um ‘mas’) resolvi implementar e surgiram alguns probleminhas e dúvidas, que até vi por aqui em alguns comentários, mas sem resposta.

    O projeto no qual estou aplicando o grid possui muitos elementos aninhados, às vezes até três níveis de fieldsets/divs e dentro destes os forms com seus elementos… Precisei fazer vários ajustes na grid para que não houvesse quebra na estrutura da grid devido ao aninhamento e com isso consegui resolver o problema com os containers (divs, fieldsets, etc…). Porém, com elementos de formulário (inputs, textarea, selects, etc…) não consigo um comportamento satisfatório utilizando ‘EM’, obtendo tamanhos totalmente diferentes de acordo com a posição do elemento nessa hierarquia de animanhento.

    Há algumas sugestão?! Já passou por isso?!

  • http://www.facebook.com/felippeDev Luiz Felippe Gonçalves

    Parabéns e muito obrigado por compartilha!! Você estão nos ajudando muito! =D

  • Felipe

    Dani… quando vc diz 40/16 na parte de padding e margin o 16 é o tamanho da fonte? caso eu colocasse fonte 24 faria 40/24 é isso?

    • http://www.popupdesign.com.br/ Dani Guerrato

      Sim. O valor do padding é sempre relativo ao tamanho da fonte em EM. Se a fonte tivesse 24 pixels e você quizesse um padding de 40px ficaria algo assim:

      font-size: 2.4em; /*24 pixels*/
      padding: 1.66666666667em; /*40 pixels*/

      Já que 40 dividido por 24 é igual a 1.66666666667.
      Ficou mais claro?

  • Rodrigo

    Assim como o Felipe, fiquei com um pouco de dúvida sobre o item “Sobre margins e paddings”. Fiquei tão confuso que nem sei direito explicar qual é a minha dúvida…

    O “designer estagiário” definiu “tamanho da fonte 16px, entrelinha 24px e 40px de margem”, achei que o parágrafo teria 40px de margin. Quer dizer que essa margem é relação ao texto (conteúdo) e não ao parágrafo (“container”)?

    No exemplo do parágrafo, você usou 40px de padding (convertido proporcionalmente para EM). E se o parágrafo tivesse 40px de margin? Como seria essa medida? Os 40px seriam convertidos em EM ou em %?

    Acho que o que me deixou confuso com o padding, é por que ele teve que submeter à medida da fonte (tendo seu valor convertido para EM) sendo que padding não é um “elemento” de texto (e EM é uma medida de tamanho de texto, certo?). O padding não poderia ser em % (tendo assim sua medida adaptada proporcionalmente ao tamanho do parágrafo, e não da fonte)?

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Rodrigo!
      É importante notar que EM não é uma medida “de” texto, EM é uma medida “relativa” ao texto. Ou seja, é um valor que vai ser modificado de acordo com o tamanho do texto. Na verdade EM pode ser utilizado como unidade para qualquer elemento em HTML, inclusive divs e pontos-de-quebra de media queries. Já % é uma medida relativa ao viewport (janela do browser) e vai ser modificado de acordo com o tamanho desta janela. O que acontece é que enquanto 2%, por exemplo, de uma tela grande é um bom espaço, em uma tela pequena como celular 2% é um valor muito menor. Já utilizando EM se o seu texto aumentar ou diminuir de tamanho os espaçamento sempre acompanharão proporcionalmente esta mudança. Do ponto de vista do design, portanto, esta é a melhor prática! No entanto não existe nada proibindo você de utilizar outras medidas como porcentagem ou até mesmo pixels. Apenas não é algo recomendável tendo em vista que o design responsivo visa criar um código que possa ser em sua maioria reaproveitável. Utilizar outras medidas significa uma maior quantidade de ajustes em outros pontos-de-quebra. O que é mais característico do design adaptável do que do design responsivo… Mas isto é outra história.

      Quanto a sua dúvida é necessário antes entender a diferença entre margin (margem) e padding (espaçamento). Margins são medidas relativas ao espaço externo, enquanto paddings cuidam do espaço interno. Ao pensar em uma margin, tanto para definir um valor em % quanto para definir um valor em EM, é necessário portanto pensar em unidades relativas a largura da div (ou qualquer outro elemento de HTML) que ele está inserida. Já no caso do padding o contexto são os elementos “dentro” desta div que vão determinar “quanto vale” 1 EM.

      Como no exemplo o estagiário gostaria de 24px de distância entre o texto e a “borda” da divisória optei pelo elemento padding. Margens não se aplicariam por uma questão de padrão pois, se utilizadas em um elemento block, isto poderia afetar a estrutura total do grid (que já definiu todas as margins como valores em porcentagem!) “empurrando” elementos em float. Outra coisa que pesa “contra” a escolha de % neste caso é que não sabemos a largura do parágrafo! Com EM este valor simplesmente não é relevante…

      Mas, para responder a sua pergunta, no exemplo que eu sugeri se você quizesse utilizar 40px de margin em EM o que você deveria fazer é observar qual é a unidade relativa ao elemento “pai”. Como ela não foi fornecida no nosso pequeno trecho de código vamos supor que seja a padrão do restante do meu HTML (10px = 1em). Neste caso a margem seria de 4em.

      Acho que o que te confundiu foi a utilização a palavra “margem” na historinha de exemplo. Neste contexto é uma expressão genérica que um designer utilizaria para explicar um layout… Mas quem deve definir se o caso trata dos elementos de CSS margin ou padding é o desenvolvedor.

      Espero ter ficado claro desta vez. Vale lembrar, no entanto, que este é um artigo introdutório. Para mais informações de uma olhada nos outros comentários, nos links indicados para a leitura e na documentação da própria W3C. Conhecer “para que serve” cada coisa é fundamental para entender não apenas design responsivo, mas desenvolvimento web como um todo.

      Um abraço!

      • Rodrigo

        Puxa, obrigado mesmo por ter dedicado um tempo pra responder tão detalhadamente! Agora sou capaz de ler novamente o post e reestruturar meu raciocínio, afinal eu nunca me dediquei muito a entender o padrão de medida EM, nunca dei muita bola pra ele… Mas tomando como ponto de partida o seu post, vou atrás de mais informações sobre o EM que vou ser capaz de assimilar o funcionamento dele!
        Obrigado Dani!

  • Mauricio Reis

    Dani sem comentários, você é D+ e muito humorada. Geralmente o leitor só consegue chegar no máximo até o 4º parágrafo e os outros vão pulando com os olhos até chegar ma imagem pra dispertar o interesse novamente, no seu caso foi super interessante do início ao fim, e é disso que eu estou falando, você consegue com pitadas de humor fazer com que o leitor leia, interpréte interagindo com você. Legal menina de ouro. Continue assim / valeuuuuuuu!!!!

  • Hellius Junior

    Excelente post, esclareceu todas minhas dúvidas a tempos não achava algo tão detalhado como essa sequência falando sobre design responsivo. descobri o site hoje e já está nos meus favoritos

    Obrigado. :)

  • Reinaldo Moura

    Muito bom, excelente. Dani você é demais…
    Continue distribuindo conhecimento.

    Muito grato.

  • Felipe

    Olá Dani, ótimo artigo, 1001 parabéns por esta postagem… A única dúvida minha é a seguinte. Para calcular as ‘margin-top’ e ‘margin-bottom’ de um Heading ou paragrafo é feito pelo tamanho da fonte certo, exemplo quero um ‘margin-bottom’ de 15px e minha fonte é 2.4em para transformar o 15px em ‘EM’ seria 15/24=0.625 Estou correto???

    Abraços

  • Alexandro

    Excelente artigo. Só tenho uma dúvida em relação ao valor do em, pois você diz que ele é equivalente a aproximadamente 16px e muitos Frameworks utilizam a tamanho padrão 14px, inclusive o UIKIT e o Bootstrap. Existe muita diferença nisso?

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Alexandro!
      O “tamanho padrão” no contexto deste artigo é relativo ao tamanho que o browser determina automaticamente como padrão para textos (que, geralmente, corresponde a 16px). Mas cada framework tem uma folha de estilos e escolhe um outro valor arbitrário para substituir este padrão.
      Um abraço!

  • Anderson de Souza

    Parabéns pelo post, muito bom mesmo.

  • Neto

    Dani,
    Em se tratando de imagens, vamos dizer que eu queira desenvolver um background pra aplicacao.
    Quais devem ser as medidas para iphone5, ipads e iphone anteriores ?

  • Eliton Luiz

    Parabéns pelo artigo. Nossa! Ficou tão fácil entender a questão dos EM, eu estava com um problema ao usar porcentagem nas heights de um site e agora tô feliz com resultado usando EMs no lugar. A formula pareceu mágica mesmo, heheheh.

  • Christian Gibaldi

    só uma dúvida, a altura (height) da sidebar e do principal e até do wrap, pode ser em pixel ?

    • http://www.popupdesign.com.br/ Leandro Lima

      Pode sim, sem problemas! ;)

  • Darlon

    Pixel não se váaaa!….T^T ii eu gostava tanto de você….gostava tanto de você…

  • cassiodourado

    muito bom o post! muito mesmo!!!

  • Neto

    Dani, adoro seus posts.
    Tenho a seguinte duvida:
    QUAL O REAL INTUITO DO GRID ?
    Pq venho que muitas vezes ele é usado para se alinhar texto ou images,no entanto podemso ver q outras vezes tb temos coisas por cima dos espacos entre eles.
    De uma forma leiga, pq usa-los ?

  • Cleverton Heusner

    Incrível! Case-se comigo!

  • Thales Cardarelli

    Boa noite, Dani. Tudo bom ???

    Não entendi uma coisa referente a transformação de pixels para porcentagem. Na verdade é assim: Se temos um valor fixo em pixels, ele ocupará um certo espaço na tela… Quando usamos a fórmula que você passou para transformar esse valor fixo para porcentagem e se tornar fluído, acontece que esse valor em porcentagem ocupa um espaço um pouco maior na tela… nao é o mesmo 960px e 85,40%, eles tem uma diferença no espaço ocupado… Eu queria entender o porque isso acontece… Ou estou equivocado ou fazendo algo errado?? Rsss…
    Muito obrigado e boa noite.

    Att,

    Thales Cardarelli

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Thales!

      No nosso exemplo 960px são a largura máxima do layout – um container. Tudo vai acontecer dentro desta div de 960px que “segura” as outras divs dentro e evita que elas se “espalhem” pela tela. Neste caso, 960px seriam os nossos 100% (contexto). A partir daí os objetos que estão dentro deste container podem sim ocupar uma largura maior ou menor ao original em pixel. Na verdade é esta a intenção. Nós queremos que a largura sempre se ajuste para cada tamanho de tela, mas que relação de proporção entre os elementos seja mantida. Ficou mais claro?

      Um abraço!

  • Guilherme

    Ola Dani sou Guilherme, estou com algumas duvidas aqui que estão dando aquela parada no meu projeto, só falta isso mesmo, enfim.
    Bom, bacana os teus posts, mas supondo que eu vá utilizar % somente, em todas as “divs”, seria na mesma logica? ou preciso de uma medida fixa com px como em seu exemplo em que a medida da div que agrupa os boxes é fixa ?

    E também, utilizando ems e porcentagem o layout consegue se adaptar a resolução sozinho ?

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Guilherme,

      1. Por uma questão de controle utilizamos o recurso de uma div container (div que agrupa todos os conteúdos do layout) para especificar um tamanho máximo do site. Desta forma o conteúdo não aparece esticado demais em resoluções mais altas. Se você não utilizar este container com medidas fixas seu site irá se “esparramar” pela tela.

      Mas tudo isto depende da diagramação que você estiver trabalhando. De repente este é um efeito que o designer propositalmente escolheu…

      2. Utilizando EM e Porcentagem o seu site irá “esticar” e “encolher” sozinho. Mas isto não significa adaptação. Afinal, você terá exatamente o mesmo conteúdo apenas em um tamanho menor… É necessário utilizar media queries para redefinir as estruturas do layout para que o usuário tenha uma experiência melhor de navegação.

      Um abraço!

  • Keven Silva

    Dani, e no caso do site completo ser 100% como eu faria pra saber o valor relativo da sidebar e da div de conteudo?

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Keven!

      Se você partiu de algum layout estático como modelo é só calcular os valores referentes a partir desta base. Se não você vai ter que definir alguma relação de proporção. Vamos supor que você queira que a sidebar ocupe 1/3 do espaço da tela. Neste caso ela teria 33,3333333333% de largura.

      Um abraço!

  • Roger Albino

    Post bacana!
    Estou acostumado a usar ems nas medidas, com os 16px padrão mesmo no body.
    (post antigo, mas só vi agora rsrsrs)

  • Alex Batista

    Genial, parabéns!

  • huehuheuheu

    sua puta

  • http://www.felipera.com.br Felipe De Oliveira Silva

    Poxa Dani, seu post foi realmente sensacional, uma fácil leitura e compreensão do responsivo ou fluído, sou designer desenvolvedor front-end e estava viciado em algumas coisas como pixels e agora sei que esse barato realmente é uma viagem, tornou minha vida mais fácil à partir de agora, parabéns pelo post

  • Escarlate Almeida

    muito bom moça

  • Ueslei Azarias

    Parabéns, em 15 anos é o melhor material que já li sobre o assunto;

  • douglas88

    Existe a possibilidade de criar layout’s de acordo com as polegadas da tela, não estou falando de resolução ?

  • Wladimir Miranda

    Parabéns, pela busca, pesquisa e por compartilhar tantas coisas iradas de uma forma acessível. Obrigado!

  • Guerino Rodella

    Muito bom o post! Me esclareceu muitas dúvidas quanto ao layout relativo. Parabéns ;)

  • Marcelo Mattos

    Olá Dani, você tem algum e-mail que eu possa te enviar uma dúvida?

  • Tulio

    Dani bom dia! Lí o artigo mas fiquei um pouco confuso na questão da definição do tamanho das fontes. No meu site por exemplo eu coloquei dessa forma:

    body {
    margin:0px;
    padding:0px;
    text-align:center;
    font-family:’Open Sans’, Verdana, Arial, Sans-serif;
    font-size:100%;
    }

    Isso vai significar que minhas fontes ficarão com 16px aproximadamente?

    Aí olhando a calculadora se eu clico em 15px do lado esquerdo fica 0.938em e 93.8% e do lado direito fica 15px 1.0em. Enfim, fiquei confuso…

    no font-size do body eu devo colocar font-size: 100% ou 1.0em? e nos elementos internos por exemplo

    #menu li a {
    font-family: ‘GothamBold’;
    font-size:14px;
    color: #fff;
    position: relative;
    display: inline-block;
    outline: none;
    text-decoration: none;
    text-transform: uppercase;
    }

    Neste caso meu font-size deveria ficar 0.875em?

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Tulio,
      É meio chatinho mesmo fazer contas com a base 16 (o padrão do seu browser). Para facilitar usamos um um truque. No body definimos o font-size para 62.5%. Desta forma, 1em passa a equivaler a 10px. O que facilita bastante a conta!
      1em = 10px
      0.5em = 5px

      Só não se esqueça que o EM é herdado. Se no elemento pai você alterou o tamanho da fonte, para os elementos filhos o que passa valer é o valor do pai.

      Um abraço!

  • wenner

    Bom dia Dani,

    Estou com uma duvida em relação ao tamanho das tela quando carregar em browser de tamanho diferentes.

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Wenner,

      Existem algumas generalizações de tamanhos de tela. Por exemplo, um tablet de pé normalmente tem 768px e um smartphone tem 320px… Mas, com o passar do tempo, isto foi se tornando meio irrelevante já que temos diversos dispositivos híbridos que ficam no meio do caminho como mini tablets, phablets e dumb phones. Basicamente a tendência que se seguiu foi utilizar o conteúdo como base, não o tamanho da tela para determinar os “pontos de quebra”.

      Siga estes três passos:
      1. Redimensione o seu site no browser.
      2. Deu um problema? Insira um media querie e concerte.
      3. Repita o processo.

      De qualquer forma eu daria uma olhadinha no simulador Responsinator já que lá tem alguns tamanhos de tela comuns no mercado. https://www.responsinator.com/

      Um abraço!

  • Itarcio Lima

    Dani, não sou desenvolvedor, sou designer. Tenho uma dúvida que talvez seja imbecil. Faço o layout desktop em média 1200px. Encontrei alguns grids e informações quanto a resolução do layout para mobile, e variam (no formato retrato) de 320px à 1080px (que é a atual full hd, você sabe). Mas se eu (resumindo) simplesmente arrasto os elementos do layout desktop para o mobile em 1080px de largura e vou ajustando, não há tanta diferença de 1200 para 1080. Trabalhar com 320px parece não ser ideal, já que em imagens pode haver perda de qualidade em resoluções maiores (em arquivos psd de ui mobiles para download na internet notei que trabalham no 1080x1920px). Minha dúvida é: vou agigantar tudo no layout para ficar bom pro mobile? Esse redimensionamento generalizado (elementos, tamanhos de fontes etc) não prejudicará o desenvolvedor?

    • Itarcio Lima

      Atualmente estou trabalhando em 640px de largura, mas ao importar os elementos da versão desktop fica tudo muito pequeno na tela do celular.

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Itarcio,
      Sua dúvida é mais perguntada por todos os designers…

      Esta estratégia de criar um mock-up para cada resolução vai fazer você perder muito tempo. E, além de tudo, o desenvolvedor não vai conseguir imitar bem todos os comportamentos afinal, não é um site mobile. Esta confusão é por que estamos partindo, como designers, de um mundo de medidas fixas para um canvas fluido. Para isto precisamos abrir mão um pouco do controle do design… Eu sei, é bem difícil no começo. O que você precisa pensar, em conjunto com o desenvolvedor, é no fluxo e refluxo da informação.

      Normalmente no design responsivo trabalhamos com elementos “flutuantes”. Ao redimensionarmos o browser alguns destes elementos vão “cair” para as próximas fileiras. Esta “queda” se dá na direção da direita para esquerda, de cima para baixo. Quando você projetar o layout é mais fácil você prever estas “quedas” do que simplesmente redimensionar todos os elementos. Por exemplo, vamos supor que você tem uma galeria de imagens com 3 linhas de 4 imagens cada. Quando tudo começar a parecer “amassado” demais o ideal seria trocar esta configuração para 4 linhas de 3 imagens cada. E assim por diante.

      Projetar o fluxo é mais fácil do que criar um mock-up para cada ponto de quebra. Nós aqui na PopUp, pessoalmente, criamos um mock-up para a maior resolução possível (para ficar mais fácil de redimensionar as imagens sem perder qualidade) e um guia de estilos de interface com todos os elementos (botões, texto, menus, parágrafos) “avulsos”.

      Mas, respondendo a sua pergunta, o redimensionamento não vai afetar o desenvolvedor pois ele utilizará porcentagem para manter a proporção das imagens. Existem algumas técnicas para substituir as imagens por outras menores, mas isto já é outro pepino.

      Um abraço!

      • Itarcio Lima

        Olá, Dani.

        De fato é melhor pensar em layout fluido. Porém vejo uma certa padronização em design de sites responsivos que acabam por não ter identidade, sendo um layout genérico que serviria para várias empresas. E quando o design é mais específico, há dificuldade na adaptação pro responsivo, por tentar evitar estruturas tão padrões na busca por diferenciais e exclusividade.

        Algumas questões também seriam resolvidos simplesmente se o designer fosse o próprio desenvolvedor – o que não é meu caso, infelizmente :( – ou se o desenvolvedor tiver boas noções de design, não haveria necessidade de descrever cada comportamento em diversas resoluções.

        Um amigo desenvolvedor me disse que para mobile (retrato) eu posso criar uma em 320px e outra em 720px, como se fosse os dois extremos, e ele se encarregaria das resoluções intermediárias com base nessas duas.

        Agradeço mais uma vez sua prestatividade, além de tão criterioso e simpático artigo :)

        • http://www.popupdesign.com.br/ Dani Guerrato

          Oi Itarcio,
          Na minha opinião, a padronização de layouts não é culpa do design responsivo ou de pensar de maneira fluída. Estes layouts sem identidade vieram em função da popularização de Frameworks de CSS como Bootstrap e Foundation. Estes projetos são de baixo custo e não costumam nem ao menor ter um designer envolvido…

          Enfim, a dica que eu dou para todos os designers é: estude HTML. Mesmo que você não pretenda trabalhar com isto. É fundamental entender como o processo funciona para que você consiga transmitir suas ideias para o desenvolvedor de maneira mais clara. As duas áreas não existem sem um diálogo.

          Uma última dica: não se esqueça da resolução 240px (equivalente a um mini Android). Alguns desenvolvedores ignoram tamanhos menores de 320px e isto é um problema do ponto de vista da acessibilidade.

          Abraço!

          • Itarcio Lima

            Acho que o responsivo tem suas restrições, mas de maneira nenhuma signifique que não possa ter diferenciais, apenas que será mais difícil por não ser fixo.

            Infelizmente não tenho tendência a aprendizado de códigos, mas gosto bastante, rs.

            Não conhecia a 240px, mas parando pra pensar é fácil encontrar celulares nesta resolução.

            Valeu!

  • Lucas Lins

    Valeu eu tinha tinha me esquecido dos cálculos para converter as medidas em medias flexiveis

  • http://meufilhousou.com.br Jeane Lucas Avellar Kratochwil

    Post lindo!

  • http://www.newboss.com.br Luiz Alfredo Mattioli

    Muito bom, obrigado por compartilhar esse conteúdo. Parabéns pelo empenho!

  • http://www.aindaestouconstruindo.com Dorinha Pianka

    Oi, Dani, tenho aprendido muito com seus artigos. Montei o index do meu site com todas as medidas em percentuais. Ficou muito bom. Só que quando eu vou ver nos tamanhos menores (320px de largura, por exemplo) aparece uma barra de rolagem horizontal. Isso significa que o site não está responsivo? Porque nos sites responsivos que eu vejo não aparece barra horizontal. O que será que causa issso?

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Dorinha,

      Provavelmente algum elemento do seu site está ultrapassando a largura do seu wrap. Só olhando o código para ver qual é… Pode ser uma palavra muito grande (como um link, por exemplo). Neste caso você pode usar no CSS word-wrap: break-word.

      Existe um truque para forçar o browser a não visualizar esta barra. É só definir no seu wrap, media querie de 320px, overflow-x: hidden que ela vai sumir. Mas o ideal é achar qual é o elemento que está “vazando” para fora.

      • http://www.aindaestouconstruindo.com Dorinha Pianka

        Oi, Dani,
        Obrigado pela dica. Você é uma pessoa atenciosa e isso é muito bom.

  • Eduarda Alencar

    Dani, não tenho muita experiencia na area de WD, mas foi me dado o desafio de administrar um site, mas o rapaz que criou o site não me ensinou a usar os códigos. Preciso diminuir a fonte – somente a fonte – da area inicial e não sei como fazer, pode me ajudar?

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Eduarda!
      O ideal é você pedir uma ajudar para o / um desenvolvedor já que é necessário saber pelo menos o básico de HTML para alterar o código.

      Uma solução rápida: na barra lateral do WordPress vá em Aparência, Editor. A partir daí você pode ver o código do site, Você precisa mexer no arquivo de CSS (normalmente style.css ou algo assim). Procure por “font-size” e diminua o número. Talvez você tenha que fazer isto diversas vezes… Mas já deixo um alerta que isto, se feito por alguem que desconhece desenvolvimento, pode (e provavelmente vai), prejudicar o visual de todo o site. É melhor SEMPRE contratar um profissional.

  • Bruno Romualdo

    Por favor Dani, sei que não tem nada a ver com o assunto de site responsivo (aliás o post esta ótimo:), mas como que faz aquele efeito de quando passa o mouse nos itens do menu e aparece aqueles colchetes(chvaes)?

  • Régis Adamavicius

    Gostei do artigo, mas no responsivo tem um problema a quantida de script que são carregados nas versões desktop tb serão carregadas na versão mobile, e com isso irá demorar a renderização do site, no page speed do google fica claro muitos ou quase 100% dos sites responsivo que testei são reprovados por html, css muito pesados, script muito grandes e imagem muito pesadas.
    Tô começando a achar que criar um outro site ex m.meusite seja melhor otimizado para versão mobile tendo em vista no espetacular conexão 3G e 4G.

  • Jandrey Oliveira

    Sanou minhas dúvidas em todo lugar eu procurava conteúdo assim e não achei nenhum mais preciso que o seu muito obrigado :D

  • Yam Lucas Maciel

    Parabéns pelo artigo. Tenho uma dúvida, achei muito interessante a matemática da porcentagem, mas como definir a porcentagem do wrap? Se deixarmos em pixels ele não irá funcionar, e 100% deixará o arquivo sem margins, correto? Poderia usar algo como 80% para o wrap e dividir essa porcetagem entre os objetos?

  • http://www.500px.com/visionefotografia Joao Carlos dos Santos

    entendi nada….

  • William Roger

    Depois de 2 anos estou eu aqui novamente lendo esta série de artigos maravilho da Dani! como é bom aprender com vc! ah aproveitando só pra avisar o 1140 CSS GRID foi descontinuado!

  • jean tossin

    oi dani.. muito bom seu artigo… estou usando ele para construir um modelo para detalhes de uma loja online, porém como a loja online é de uma plataforma de fora não é da empresa, esta base tem que estar com o styles inline, estou com dificuldades para fazer 2 colunas ficarem certas, a imagem que vai na segunda coluna fica sempre quebrada, abaixo o código que fiz, não sei o que to fazendo de errado na real vc pode me ajudar??

    Design Elegante com detalhes que fazem a diferença
    As cases Ipaky foram especialmente desenvolvidas para se adaptar perfeitamente ao corpo do iPhone, com curvas suaves e detalhes cromados.
    Com material resistente ultra fino, as capas Ipaky oferecem extemo conforto e alta sensibilidade no manuseio do aparelho.

    • jean tossin

      acho qure o codigo ficou meio estranho, mais veja como esta na página da loja: http://www.cubshop.com.br/capa-ipa

      veja que a imagem fica para baixo, e nó código usei a base de calculo da mesma forma que vc ensinou…

  • EFRAIN CORLETO

    ótimo, perfeita redação trouxo compreensão de uma maneira simples, perfeito, continue assim!

  • Bradock

    o talento que essa mina tem pra escrever e demais… alem de escrever de forma simples, ainda faz com analogias, fazendo a leitura ficar mais agradável, seria uma excelente colunista de qualquer jornal de renome, parabéns pelo talento… textos grandes se tornam pequenos pelo fato agradável de ser.

Postamos coisas legais aqui


Google

Adicione no GOOGLE+

Instagram

Siga nosso perfil no INSTAGRAM

Quer utilizar o conteúdo do BlogUp?

Gostamos de compartilhar conhecimento por isto os textos sa seção Blog são licenciado sob Creative Commons com as condições: Atribuição - Não Comercial - CompartilhaIgual.

Em português claro, você pode reproduzir este artigo se cumprir TODOS os requisitos:
1. Ninguém esteja lucrando nada em função disto.
2. Exista crédito para a PopUp Design e o autor do post em um local claro com link para o conteúdo original.
3. O material derivado seja distribuido da mesma maneira.

Obs 1. Leia a licença completa para entender todos os termos.
Obs 2. Se o seu site tiver qualquer tipo de anúncio, como AdSence, por exemplo, isto já é considerado fim comercial e portanto você não pode reproduzir o texto.
Obs 3. Se você gostaria de utilizar este material sob outros termos e/ou possui dúvidas envie um e-mail contato@popupdesign.com.br e requisite uma autorização.