Dani Guerrato

Design Responsivo I – O que é e por que usar

Por | Comentários: 39

Oi Galera!  Nesse post vou falar um pouco sobre Design Responsivo, um tema que está sendo muito comentado pela comunidade gringa de design, mas que ainda está engatinhando aqui no Brasil.


Como é difícil encontrar material em português sobre este assunto, vamos fazer uma série de artigos sobre o tema. Neste primeiro post vou falar sobre o aspecto um pouco mais teórico, sobre o “onde” e “por que”. O “como” ficará para a parte dois, que será um guia prático de implementação em seus projetos, com uma compilação de dicas práticas e ferramentas úteis. Comentários, dúvidas e sugestões são super bem vindos. :)

Como surgiu o conceito

Faça uma experiência. Tente aumentar ou diminuir muito a janela deste blog. Reparou como o conteúdo se re-organizou de acordo com o tamanho do browser? Em um tamanho pequeno, as imagens e o texto diminuiram proporcionalmente. Para aproveitar melhor o espaço, a sidebar se transformou em um menu superior. Já em uma janela maior o layout ganhou uma coluna extra. Se você acessar esse blog de um celular ou tablet vai reparar em outras adaptações. Tudo pensando em melhorar a sua experiência de navegação. Isto é design responsivo.

Mas como surgiu o conceito? Tudo começou com um artigo do blog A List Apart assinado por Ethan Marcotte no comecinho de 2010. Logo no inicio do artigo somos apresentados a Christopher Wren, um arquiteto inglês. Christopher disse uma vez que a arquitetura é uma arte que “objetiva a eternidade”. Afinal, todo arquiteto que se preze quer construir um prédio que seja admirado (e habitado) por séculos… Quer um exemplo prático? O coliseu de Roma foi construído no ano 79 e ainda é uma das maiores atrações turísticas do mundo. A imagem abaixo é a primeira versão do Twitter, lançado em julho de 2006. Aposto que o serviço não seria tão popular se a interface não tivesse sido atualizada… O Design Digital não tem a permanência da arquitetura. Na verdade, projetar para internet é já estar desatualizado daqui a duas semanas!

Twitter em 2006

O Problema

Se você tem 20 anos ou mais provavelmente se lembra daquela época: um passado não muito distante, um tempo em que era obrigatório ter um computador para acessar a internet. As coisas evoluíram bastante e hoje as pessoas utilizam tablets, smartphones, televisores… Já vi por aí até banheiras conectadas a rede. A questão é que impossível prever como acessaremos a internet no futuro. E não é só a capacidade de cada aparelho que varia. Você pode até querer eleger uma categoria como alvo principal: desktops, por exemplo. Mas ainda vai ter as diferenças entre sistemas operacionais, browsers, resoluções de tela… #comofaz? Não podemos partir do pressuposto que todos se conectam através dos mesmos aparelhos. Mas através do Design Responsivo é possível garantir a acessibilidade do conteúdo independente do meio que o usuário utilizar para acessa-lo. OK, talvez ainda não da banheira… mas vamos chegar lá!

960 pixels não são mais suficientes.

A maior parte dos desenvolvedores para web trabalha da seguinte maneira: cria-se uma divisão principal de largura fixa que funciona como um container (ou wrap). Ou seja, todo o site acontece dentro desta divisão, impedindo que tudo se espalhe desordenadamente pelo monitor. Esta divisão foi criada para que tivéssemos mais controle do design. Como a maior parte dos monitores eram da resolução 1024×768 foi padronizado 960 pixels como a largura ideal para um site. E isso funcionou bem. Por um tempo…

Na verdade os dispositivos foram evoluindo tão rápido que acabamos ficando para trás nesta corrida. Você já viu como um site de 960 pixels parece pequeno em um iMac de 21”? Todo aquele espaço vazio… E em uma televisão de 42”? Ignorar estas mudanças é um tiro no pé.

As telas com resolução menor também não podem ser ignoradas. E se você pensa que desenvolver uma versão mobile para o seu site é uma perda de tempo esta muito enganado. Uma pesquisa internacional comprovou que os smartphones ultrapassaram os computadores pessoais em vendas. Em 2010!  Tentar fazer um layout diferente para cada aparelho também é loucura… São tantos sistemas operacionais e browsers diferentes que dá até crise de ansiedade nos pobres desenvolvedores. Eleger apenas um, como o iPhone por exemplo, é privilegiar os donos de uma determinada marca e negar acesso a uma quantidade enorme de outros usuários… É! 960 pixels não são mais suficientes… E agora?

by Bazaar Designs

Não entre em pânico! Conheça os Media Queries

A solução proposta por Marcotte é criar um design que *responda* de maneira diferente de acordo com o dispositivo. Desta forma os sites não estariam desatualizados tão freqüentemente, pois não seria mais necessário tentar adivinhar quais formatos de dispositivos serão inventados no futuro. É só uma questão de formatar o conteúdo de acordo com o tamanho e o tipo. Podemos fazer isto através de uma ferramenta chamada Media Queries.

Imagine uma galeria de arte. Cada visitante gostaria de apreciar obras de um determinado estilo… Os Media Queries são como os funcionários da galeria. Eles direcionam cada visitante para uma sala diferente, de acordo com o que eles gostam mais de observar. Media Queries, em uma tradução livre consulta de mídia, são expressões que direcionam o visitante do seu site para uma folha de estilos diferente se acordo com o dispositivo que ele estiver utilizando. Isto já era possível em CSS2 através da função Medias Types… Antes você podia determinar o tipo de dispositivo: móvel (handheld), screen (monitores), print (impressão), etc. Mas com a chegada do CSS3, a funcionalidade Media Queries tornou-se uma ferramenta muito mais precisa.  É possível definir não apenas o tipo de dispositivo, mas também o tamanho, orientação, resolução, proporção… Desta forma você pode ter um “alvo” muito mais específico. Você pode, por exemplo, definir o estilo para uma tela (screen only) com largura mínima de 768 pixels e máxima de 1024 com orientação paisagem (landscape). E, tcharam, aí está um conjunto de estilos perfeitos para iPads “deitados”. Através dos operadores *not*, *end* e *only* as possibilidades de determinação são muito grandes.

No próximo artigo desta coluna explicarei como aplicar Media Queries na prática. Mas se você está curioso e souber um pouco de inglês, a melhor forma de aprender mais sobre o assunto é na documentação da própria W3C . Lembrando que o CSS3 ainda está em processo de definição, mas isto não significa que você não deve utilizar desde já nos seus projetos!

Não é a pedra filosofal

Saber utilizar Media Queries é fundamental para lidar com design responsivo. Mas não é a solução para todos os problemas. Afinal, se você desenvolver um CSS completamente diferente para cada dispositivo você simplesmente não está sendo responsivo. Para isto é necessário buscar fórmulas inteligentes de lidar com imagens, tipografia, espaço, grid, que possam ser reutilizadas de maneira lógica para minimizar a quantidade de retrabalho necessário para cada versão do layout.

O Futuro

O design responsivo não é a solução absoluta para tudo, mas é um caminho a ser seguido, testado, remodelado… A intenção principal deste artigo (e do BlogUp como um todo) é levar conhecimento, mas também criar questionamentos e discussões acerca do futuro. A constante mutabilidade da web trás problemas como os apresentados aqui. Isto pode ser considerado uma desvantagem para quem almeja a eternidade, como os arquitetos, mas para nós tem um sabor único. Designers, desenvolvedores, programadores tem algo que a maior parte das outras profissões não tem: espaço para mudança e transformação. Nós somos os responsáveis pela criação das bases para o futuro aqui e agora. O design responsivo pode não ser a solução definitiva, mas está nas nossas mão criar o conceito que seja. Espaço para isso não falta. Que a imutabilidade fique com os arquitetos. Sabe, prefiro a metamorfose ambulante que é ser designer…

Uma última coisa…

Portfólio PopUp Design Responsivo: Portfólio PopUp

Quer ver como funciona na prática? O Mediaqueri.es é um showcase super bacana de design responsivo. Se quiserem ver um exemplo brasileiríssimo de layout responsivo confiram o site do estúdio de design PopUp. Também conhecido como meu portfólio. :) Espero que vocês se empolguem para começar a desenvolver seus próprios projetos… A gente promete divulgar os mais bacanas por aqui no futuro. That’s all folks!

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

  • http://www.facebook.com/r.gabrielnegocios Gabriel Rocha

    Parabéns,ótima explicação com uma linguagem de fácil entendimento !
    o/

  • http://twitter.com/lsantosweb Leandro Santos

    Ótimo post! começando o blog com os dois pé, é isso ai, Parabéns a toda equipe do Pop Up Design. 

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

    O 1024×768 ficou chato, limitado. Sinceramente, já estou sem paciência de ficar olhando pra sites com 960px de largura. E tem muita gente ainda presa dentro desta gaiola!

    Desenvolver um site de maneira responsiva é a melhor maneira de agradar uma maior parte de usuários, e fazer o site durar mais tempo. Ultimamente, toda vez que olho pra um site feito dentro deste molde, penso que aquilo é tão duas semanas atrás… 

    O problema é que tem muito webdesigner preguiçoso que demora anos para se atualizar em duas semanas… por isso a ainda vejo sites usando tabelas, flash e tudo mais…

  • http://www.facebook.com/vinnynogueiraa Vinicius Nogueira

    Muito bom ! Fico no aguardo do proximo post sobre o assunto .

  • Deivid Marques

    Galera mas assim pra fazer isso, o designer tb tem que ter uma noçao pra que la na criação nós front-end possamos usar o media queries corretamente, to certo?

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

      Sim… Ao decidir pela implementação de uma layout responsivo, é necessário haver um planejamento inicial. Em uma situação ideal é fundamental uma sinergia com o design e o front-end. Mesmo por que nem todos os elementos do layout funcionam só reduzindo e aumentando. Uma sidebar, por exemplo, muito dificilmente se encaixaria bem em uma tela de celular. O mais interessante seria transplantar o menu para o ponto superior do site… Mas, se você é um desenvolvedor consciente trabalhando junto com um designer preguiçoso, ainda pode tomar algumas medidas por conta própria para facilitar o caminho da responsividade. Como, por exemplo, utilizar o padrão de medida EM ao invés de pixels para texto. Ou determinar o tamanho das imagens por porcentagem… Mas o ideal para qualquer site, responsivo ou não, é ter um estudo em conjunto por parte de todas as pessoas da equipe para determinar o que é melhor para cada situação. Pedir para um designer utilizar um grid também é uma boa medida. Por que por mais que ele não construa um layout único para a versão mobile para você ter como base, é mais fácil de dividir matematicamente as colunas. 
      Abraço!

  • Vinicius Cardoso

    Muito bom artigo, não vejo a hora de ver os próximos. ;) Parabéns.

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

    Uma coisa que acho importante ser levado em conta e que não foi citado (mesmo que esteja implícito) é que nem sempre é possível usar design responsivo nos projetos. Porque por se tratar de uma funcionalidade do CSS3 já esbarramos num vilão super conhecido: (o maldito) Internet Explorer.

    Sabemos que o IE9, que é o único que aceita atualmente as Media Queries, não é o mais utilizado, e mesmo que fosse, cada projeto é um projeto.
    Sites que já estão no ar, que vão passar por uma reformulação e tem como grande maioria de uso o IE8 por exemplo, não usufruirá das vantagens do DR. Claro que isso não impede de usar, mas nessa situação, a agência/cliente poderá escolher não investir no desenvolvimento com DR, visto que o mesmo necessita de mais horas de planejamento, criação e desenvolvimento, o que o torna ligeiramente mais caro.

    Nós profissionais da área temos como obrigação estar atualizados com novas tecnologias e procedimentos e esse post representa um grande passo na nossa atualização!
    Parabéns!

  • http://twitter.com/gustvomelo Gustavo Melo

    Melhor artigo que eu já li até agora. Simples e fácil de entender. Parabéns!!.

  • Andrerivoanimior

    Ótimo post, erar isso que eu estava procurando a um bomm tempo, quero muito aprender a trabalahr com isso. Parabéns a todos do Pop UP.

  • http://www.facebook.com/people/Daniel-Leal-Freitas/517359482 Daniel Leal Freitas

    Parabéns pelo Blog e pela postagem. realmente eu não entendia direito o que era Design responsivo até agora. valeu.

  • Rodrigo

    legal!
     

  • http://www.facebook.com/neridesign Neri Ribeiro

    Ótima colocação sobre o Design Responsivo, um assunto novo, que merece ser estudado por todos os designers que lidam com web. Adorei a forma como é abordado o assunto e a linguagem aplicada no post. Parabéns!

  • Renato

    Cool… é um grande tema a ser explorados pelos tupinikins…

  • Carlos Jurunna

    Excelente matéria! Parabéns! Gostaria muito de entrar nesse mundo “Media Queri” e largar o Flash, ou aliá-los! Mais uma vez PARABÉNS PELO EXCELENTE POST!

  • http://www.caelum.com.br Paulo Silveira

    Excelente Dani! O Sergio Lopes também escreveu um post muito bom em português de responsive design:
    http://blog.caelum.com.br/flexibilidade-em-paginas-para-dispositivos-moveis-com-media-queries/

  • http://www.facebook.com/profile.php?id=1534367648 Guilherme Bento

    Explicou muito bem Dani! Curti!

  • Mikael Carrara

    Execelente artigo, obrigado! Estou tentando aplicar esses conceitos nos meus projetos e mesmo com alguns anos de experência com desenvolvimento web, estou tendo algumas dificuldades, mas também gostando do desafio.

  • http://www.facebook.com/people/Diogo-Rodrigues/100003315373794 Diogo Rodrigues

    Embora seja um assunto que vem gerando muito burburinnho no mundo do web design, muitas agências ainda estão longe de implementarem essa técnica. Mas, acredito que isso irá melhorar em 2013. Parabéns pelo artigo! Ficou ótimo. ;D

  • Arthur

    Muito bom Parabéns. Rápido e Objetivo um real snapshot de informação!

  • William Roger

    Parabéns Dani ótima matéria e super curti sua linguagem super natural como se estivesse falando pessoalmente com a gente! e o melhor de tudo nada daquela linguagem 100% técnica! adorei msm já virei fã!!!

  • braga

    não sou machista, mas confesso que me admirei vendo que a autor, é na verdade uma autora, parabens.

  • Mario Vidal

    Parabéns pela matéria…procuro sempre colocar isto em prática, mas precisava de artigos deste tipo, e o melhor, com argumentos.

  • Pauliana

    adorei perfeito

  • http://www.facebook.com/edantasn Eduardo Dantas

    Muito show! iniciando o acompanhamento do blog desde já! Parabéns, Dani! :D

  • Adriana Freitas

    Parabéns pelo post Dani!

  • Edson Uchôa

    Estou querendo investir mais na minha atividade em webdesign. O post veio me dá ainda mais vontade de produzir e produzir bem, cada vez melhor.

  • Neto

    Dani parabens pelas materias, estou adorando. Tenho a seguinte duvida: vou desenvolver um design responsivo, mas antes disso como deve trabalhar o designer q vai me fornecer a arte ? Ela deve desenhar a pagina no photoshop e em pixels e dai uma vez eu recebendo eu executo a regrinha ? Tb qual a melhor width para a wrap ja q dizem q o 960 esta ultrapassado . Valeu !,,

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

      Oi Neto!
      A questão do design pode ser resolvida de duas maneiras.
      1. Criando um layout no Photoshop para cada ponto-de quebra: um mockup para smartphone outro para tablet outro para computador.
      2. Projetando um guia de estilos…

      Eu discuto estas duas opções nos seguintes posts do Tableless:
      http://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/
      http://tableless.com.br/guia-de-estilos

      Quanto a melhor width para wrap, bem, isto vai variar de acordo com o seu tipo de projeto. É importante para o seu cliente ter um layout bacana em monitores grandes? Uma diagramação diferente para televisores? No geral 960 está okay para tablets em modo paisagem e computadores antigos, mas pode ficar pequeno em um monitor maior… Eu costumo trabalhar com algo por volta de 1200 pixels para monitores grandes, mas há quem prefira 1400, 1600…

      Um abraço!

      • Neto

        Muito obrigado !

        Subject: Re: New comment posted on Design Responsivo I – O que é e por que usar

  • Neto

    Estou utilizando o Semantic.gs como vi em alguns artigos seus.
    Ali posso configurar @column-width, @gutter-width e @columns.
    Mas e as margins do wrap ? Onde configuro ? No proprio css do wrap ou body ?

    Alem disso percebi que no seu arquivo less, existe a seguinte sintaxe:

    .wrap { max-width: 960px; }

    Entao o que acontece no mesmo arquivo less, um pouco mais abaixo, qdo passo estas informacoes ?
    @column-width: 60;
    @gutter-width: 20;
    @columns: 12;

    Ele vai ignorar o wrap acima e trabalhar com % no @column-width,etc ou ele vai estourar o wrap ?
    Se eu nao defino o max-width no wrap ele tb nao deveria se basear em @columns-width pra pra gerar o wrap ?

    Abracos

  • Artur Henrique

    Mais didático que isso, impossível. Perfeito, parabéns.

  • Clau

    Parabéns pelo artigo!

  • Ramon Reis

    show!!..valeu pelo artigo.

  • Ademar Santana

    descomplicou =]

  • João Lucas

    Frequento o site da PopUp a pouco tempo, mas aprendi muito nesse curto espaço de contato com vocês, #descomplicou tudo em :D

  • Mendelson Tomé

    Sensacional o artigo, parabéns.

  • Leandro Souza Rodriguês

    Eu acredito que o ideal seria criar uma versão exclusiva para celular independente da versão para desktop ter design responsivo. O problema é que sites com design responsivo consomem muito recurso como internet e memória RAM. Ao término da franquia do 3G é impossível acessar qualquer página com design responsivo pelo smartphone pois é necessário no mínimo uns 512 Kbps para a maioria dessas páginas. Outro problema é que se você possuí um aparelho de entrada, provavelmente vai travar com a memória RAM sobrecarregada antes que a página termine de carregar. Eu entendo a importância do designe responsivo, mas também entendo que ele por si só não faz milagre. Se os desenvolvedores ficarem se apoiando apenas nessa tecnologia como uma muleta para economizar tempo como se o design responsivo fosse um santo milagroso capaz de resolver todos os problemas do cliente, logo logo só seremos capazes de acessar a maioria dos sites da web com um PC Desktop ou com muita sorte e uma boa dose de paciência.

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.