{"id":3725,"date":"2014-11-12T10:07:26","date_gmt":"2014-11-12T12:07:26","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=3725"},"modified":"2014-11-12T10:07:26","modified_gmt":"2014-11-12T12:07:26","slug":"design-responsivo-o-que-e-e-por-que-usar","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/design-responsivo-o-que-e-e-por-que-usar\/","title":{"rendered":"Design Responsivo: o que \u00e9 e por que usar"},"content":{"rendered":"

Design responsivo \u00e9 um tema muito comentado em v\u00e1rias\u00a0comunidade de design gr\u00e1fico. E \u00e9 ainda mais dif\u00edcil encontrar material em portugu\u00eas para o estudo desse tema.
\nEncontramos uma postagem no blog PopUp<\/a>\u00a0que consegue explicar muito bem os conceitos do Design Responsivo. A equipe da Turbosite <\/a>compartilha com a postagem abaixo esse conhecimento.<\/p>\n

 <\/p>\n

Como surgiu o conceito<\/h2>\n

Fa\u00e7a uma experi\u00eancia. Tente aumentar ou diminuir muito a janela deste blog. Reparou como o conte\u00fado 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\u00e7o, a sidebar se transformou em um menu superior. J\u00e1 em uma janela maior o layout ganhou uma coluna extra. Se voc\u00ea acessar esse blog de um celular ou tablet vai reparar em outras adapta\u00e7\u00f5es. Tudo pensando em melhorar a sua experi\u00eancia de navega\u00e7\u00e3o. Isto \u00e9 design responsivo.<\/p>\n

Mas como surgiu o conceito? Tudo come\u00e7ou com um artigo do blog A List Apart\u00a0<\/a>assinado por Ethan Marcotte<\/em> no comecinho de 2010. Logo no inicio do artigo somos apresentados a Christopher Wren<\/em>, um arquiteto ingl\u00eas. Christopher disse uma vez que a arquitetura \u00e9 uma arte que \u201cobjetiva a eternidade\u201d. Afinal, todo arquiteto que se preze quer construir um pr\u00e9dio que seja admirado (e habitado) por s\u00e9culos\u2026 Quer um exemplo pr\u00e1tico? O coliseu de Roma foi constru\u00eddo no ano 79 e ainda \u00e9 uma das maiores atra\u00e7\u00f5es tur\u00edsticas do mundo. A imagem abaixo \u00e9 a primeira vers\u00e3o do Twitter, lan\u00e7ado em julho de 2006. Aposto que o servi\u00e7o n\u00e3o seria t\u00e3o popular se a interface n\u00e3o tivesse sido atualizada\u2026 O\u00a0Design Digital n\u00e3o tem a perman\u00eancia da arquitetura. Na verdade, projetar para internet \u00e9 j\u00e1 estar desatualizado daqui a duas semanas!<\/p>\n

\"Twitter<\/p>\n

 <\/p>\n

O Problema<\/h2>\n

Se voc\u00ea tem 20 anos ou mais provavelmente se lembra daquela \u00e9poca: um passado n\u00e3o muito distante, um tempo em que era obrigat\u00f3rio ter um computador para acessar a internet. As coisas evolu\u00edram bastante e hoje as pessoas utilizam tablets, smartphones, televisores\u2026 J\u00e1 vi por a\u00ed at\u00e9 banheiras\u00a0conectadas a rede. A quest\u00e3o \u00e9 que imposs\u00edvel prever como acessaremos a internet no futuro. E n\u00e3o \u00e9 s\u00f3 a capacidade de cada aparelho que varia. Voc\u00ea pode at\u00e9 querer eleger uma categoria como alvo principal: desktops, por exemplo. Mas ainda vai ter as diferen\u00e7as entre sistemas operacionais, browsers, resolu\u00e7\u00f5es de tela\u2026 N\u00e3o podemos partir do pressuposto que todos se conectam atrav\u00e9s dos mesmos aparelhos. Mas atrav\u00e9s do Design Responsivo \u00e9 poss\u00edvel garantir a acessibilidade do conte\u00fado independente do meio que o usu\u00e1rio utilizar para acessa-lo.<\/p>\n

 <\/p>\n

960 pixels n\u00e3o s\u00e3o mais suficientes<\/h2>\n

A maior parte dos desenvolvedores para web trabalha da seguinte maneira: cria-se uma divis\u00e3o principal de largura fixa que funciona como um container (ou wrap). Ou seja, todo o site acontece dentro desta divis\u00e3o, impedindo que tudo se espalhe desordenadamente pelo monitor. Esta divis\u00e3o foi criada para que tiv\u00e9ssemos mais controle<\/strong> do design. Como a maior parte dos monitores eram da resolu\u00e7\u00e3o 1024\u00d7768 foi padronizado 960 pixels<\/a> como a largura ideal para um site. E isso funcionou bem. Por um tempo\u2026<\/p>\n

Na verdade os dispositivos foram evoluindo t\u00e3o r\u00e1pido que acabamos ficando para tr\u00e1s nesta corrida. Voc\u00ea j\u00e1 viu como um site de 960 pixels parece pequeno em um iMac de 21\u201d? Todo aquele espa\u00e7o vazio\u2026 E em uma televis\u00e3o de 42\u201d? Ignorar estas mudan\u00e7as \u00e9 um tiro no p\u00e9.<\/p>\n

As telas com resolu\u00e7\u00e3o menor tamb\u00e9m n\u00e3o podem ser ignoradas. E se voc\u00ea pensa que desenvolver uma vers\u00e3o mobile para o seu site \u00e9 uma perda de tempo esta muito enganado. Uma pesquisa<\/a> internacional comprovou que os smartphones ultrapassaram os computadores pessoais em vendas. Em 2010! \u00a0Tentar fazer um layout diferente para cada aparelho tamb\u00e9m \u00e9 loucura\u2026 S\u00e3o tantos sistemas operacionais e browsers diferentes que d\u00e1 at\u00e9 crise de ansiedade nos pobres desenvolvedores. Eleger apenas um, como o iPhone por exemplo, \u00e9 privilegiar os donos de uma determinada marca e negar acesso a uma quantidade enorme de outros usu\u00e1rios\u2026 \u00c9! 960 pixels n\u00e3o s\u00e3o mais suficientes\u2026 E agora?<\/p>\n

 <\/p>\n

Conhe\u00e7a os Media Queries<\/h2>\n

A solu\u00e7\u00e3o proposta por Marcotte \u00e9 criar um design que *responda* de maneira diferente de acordo com o dispositivo. Desta forma os sites n\u00e3o estariam desatualizados t\u00e3o freq\u00fcentemente, pois n\u00e3o seria mais necess\u00e1rio tentar adivinhar quais formatos de dispositivos ser\u00e3o inventados no futuro. \u00c9 s\u00f3 uma quest\u00e3o de formatar o conte\u00fado de acordo com o tamanho e o tipo. Podemos fazer isto atrav\u00e9s de uma ferramenta chamada Media Queries.<\/p>\n

Imagine uma galeria de arte. Cada visitante gostaria de apreciar obras de um determinado estilo\u2026 Os Media Queries s\u00e3o como os funcion\u00e1rios 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\u00e7\u00e3o livre consulta de m\u00eddia, s\u00e3o express\u00f5es que direcionam o visitante do seu site para uma folha de estilos diferente se acordo com o dispositivo que ele estiver utilizando. Isto j\u00e1 era poss\u00edvel em CSS2 atrav\u00e9s da fun\u00e7\u00e3o Medias Types\u2026 Antes voc\u00ea podia determinar o tipo de dispositivo: m\u00f3vel (handheld), screen (monitores), print (impress\u00e3o), etc.\u00a0Mas com a chegada do CSS3, a funcionalidade Media Queries tornou-se uma ferramenta muito mais precisa. \u00a0\u00c9 poss\u00edvel definir n\u00e3o apenas o tipo de dispositivo, mas tamb\u00e9m o tamanho, orienta\u00e7\u00e3o, resolu\u00e7\u00e3o, propor\u00e7\u00e3o\u2026 Desta forma voc\u00ea pode ter um \u201calvo\u201d muito mais espec\u00edfico. Voc\u00ea pode, por exemplo, definir o estilo para uma tela (screen only) com largura m\u00ednima de 768 pixels e m\u00e1xima de 1024 com orienta\u00e7\u00e3o paisagem (landscape). E, tcharam, a\u00ed est\u00e1 um conjunto de estilos perfeitos para iPads \u201cdeitados\u201d. Atrav\u00e9s dos operadores *not*, *end* e *only* as possibilidades de determina\u00e7\u00e3o s\u00e3o muito grandes.<\/p>\n

 <\/p>\n

O Futuro<\/h2>\n

O design responsivo n\u00e3o \u00e9 a solu\u00e7\u00e3o absoluta para tudo, mas \u00e9 um caminho a ser seguido, testado, remodelado\u2026 A constante mutabilidade da web tr\u00e1s problemas como os apresentados aqui. Isto pode ser considerado uma desvantagem para quem almeja a eternidade, como os arquitetos, mas para n\u00f3s tem um sabor \u00fanico. Designers, desenvolvedores, programadores tem algo que a maior parte das outras profiss\u00f5es n\u00e3o tem: espa\u00e7o para mudan\u00e7a e transforma\u00e7\u00e3o. N\u00f3s somos os respons\u00e1veis pela cria\u00e7\u00e3o das bases para o futuro aqui e agora. O design responsivo pode n\u00e3o ser a solu\u00e7\u00e3o definitiva, mas est\u00e1 nas nossas m\u00e3o criar o conceito que seja. Espa\u00e7o para isso n\u00e3o falta.<\/p>\n

<\/h3>\n","protected":false},"excerpt":{"rendered":"

Design responsivo \u00e9 um tema muito comentado em v\u00e1rias comunidade de design gr\u00e1fico. Nessa postagem esclarecemos o que \u00e9 e por que usar essa metodologia.<\/p>\n","protected":false},"author":1,"featured_media":3727,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,6],"tags":[34,176],"class_list":["post-3725","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-2","category-dicas","tag-acessibilidade","tag-design-responsivo"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3725"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/3725\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/3727"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}