Resolução de Problemas de Layout

Design Responsivo: Entenda o que é a técnica e como ela funciona.

O conceito de design responsivo não é uma grande novidade, mas tem chamado bastante atenção nos últimos tempos com o crescimento do mercado de dispositivos móveis, principalmente por conta dos tablets e celulares de tamanhos e resoluções cada vez mais variadas.
Só para você saber, o layout do Midiatismo é um exemplo de design responsivo.
Neste novo contexto dos navegadores e várias resoluções, o design responsivo surge como uma evolução lógica do design de sites, também conhecido como web design. Antes grande parte da internet era acessada por resoluções e navegadores muito semelhantes. Até pouco tempo atrás bastava fazer um site que funcionava em Internet Explorer com resolução máxima de 1024×768 pixels que tudo estava resolvido, claro existiam outras características, mas a grande maioria estava nesse mesmo grupo – no máximo havia os usuários de Mozilla Firefox. Hoje tudo mudou, temos TVs de 50″ polegadas acessando internet, temos celulares que tem telas de 2″ até 5″, tablets de 6″ até 11″ polegadas e sem contar os próprios computadores, que tem telas de netbook até os mais novos iMacs da Apple, colocando uma margem de 11″ até 26″ polegadas.

Esta característica demonstra que um site pode ser visto de diversas formas e em diversos contextos, e é para isto que os sites devem estar preparados. O design responsivo, como o próprio nome já indica, consegue responder ao tamanho da tela para se adequar da melhor forma. Ao invés de criar dois sites separados, um para mobile e um para desktops, como era muito comum hoje, você faz apenas um site que vai se adaptar muito bem a qualquer tela em que ele for carregado.

Você faz um site responsivo ou vai fazer dez sites diferentes

Uma das principais vantagens do design responsivo também se torna um grande problema para as agências digitais. Se você quer que o seu site esteja adaptado aos celulares, smartphones, tablets, notebooks, desktops e TVs, você provavelmente teria que fazer pelo menos 5 sites diferentes. A evolução do design responsivo mudou bastante isto, conseguindo trazer a vantagens de ter diversos sites para um só lugar.
Mas esta facilidade de adaptação também cria um problema para as agências digitais e todos aqueles profissionais que trabalham no desenvolvimento de sites. Como cobrar um site com design responsivo? Você deve somar o valor de vários serviços ou deve ter um valor diferenciado? Você deve oferecer design responsivo em pacotes diferenciados onde cada um tem foco em certos dispositivos?

Claro que o design responsivo não resolve todos os problemas e talvez nem seja a solução para todos, mas definitivamente é um caminho a ser seguido e ainda mais explorado. Muitos defendem que o melhor caminho ainda é um site dedicado a cada dispositivo que pode – e deve – se aproveitar de técnicas de design responsivo.
Há também quem aponte que o design responsivo não é a solução completa, já que ainda não consegue ser totalmente otimizado aos celulares (principalmente no quesito peso e velocidade de carregamento), mas ainda parece ser a melhor solução em relação a custo benefício.

A importância da adoção de padrões na internet

Apesar da existência dos padrões da W3C para tentar igualar as ferramentas baseadas em web, quem desenvolve para web sabe que os padrões não são assim tão padronizados – quem diga o Internet Explorer.
Hoje em dia não há apenas dois navegadores centrais para você se preocupar. Até pouco tempo atrás você fazia o site funcionar no Firefox e – com muito trabalho – no Internet Explorer 6 e 7. Hoje temos Internet Explorer (7, 8, 9 e 10), Firefox, Google Chrome (Desktop, tablet e celular), Safari, Opera (desde desktop até o da televisão) e vários navegadores menores. Tudo isso sem contar a proliferação de sistemas operacionais, hoje em dia não existe “apenas” o Windows, também devemos nos preocupar com o Mac, Linux, Android, iOs, Windows Phone e por aí vai.

A adoção e evolução dos padrões de internet nunca foram tão necessárias como estão sendo agora.

Estes dois termos são essenciais para entender como os navegadores interpretam os sites. Em primeiro o user agent, comumente utilizado para diferenciar o usuário quando ele está acessando através do celular ou do navegador desktop. O “agente de usuário” (tradução literal, por favor, não utilizem ela) é a função dentro do site que identifica as questões técnicas que envolvem o usuário que esta o visitando.
Geralmente esta função é utilizada para diferenciar o site mobile do site normal fazendo apenas uma verificação de navegador e sistema operacional – na verdade ele verifica algumas outras questões mais técnicas que não vem ao caso agora. Mas o problema é que muitos dispositivos e navegadores acabam não entrando na lista, portanto não são direcionados para o site correto.
Por exemplo, quando você acessa o fictício www.exemplodesite.com.br e é redirecionado para om.exemplodesite.com.br é porque provavelmente ele identificou que o seu user agent era mobile. O problema é que se você usar, por exemplo, o Firefox para Android, ele não vai ser identificado e irá mostrar o www.exemplodesite.com.br (Obs.: usei Firefox para Android como exemplo porque isto ocorreu recentemente comigo).
O uset-agent do primeiro iPad era este:Mozilla/5.0 (iPad; U; CPU OS 3_2_1 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Mobile/7B405
Já os media queries (que podemos traduzir como “Conferência de Mídia”[?]) são uma propriedade do CSS (“código de estilo” das páginas web) que identifica qual a mídia aquele site está sendo carregado e atribui determinado estilo a ela. O design responsivo atual trabalha basicamente com esta função, modificando tamanhos, dimensões e formatos conforme o tamanho da tela do usuário.
Por exemplo, se você abrir o Midiatismo e redimensionar a tela do seu navegador, quando esta função do CSS identificar que se trata de uma tela menor que 760 pixels de largura, ele irá mudar o visual do blog, sem ter nenhuma alteração no conteúdo carregado, apenas na forma como eles estão dispostos.
Você pode entender mais sobre as media queries através desta documentação da W3C.
Só media queries não bastam. Seria impraticável criar uma media querie para cada resolução existente — seriam milhares! Devemos usar poucas media queries e fazer o layout fluir entre os breakpoints.
O segredo é não usar pixels nas medidas, mas priorizar um layout mais fluído e flexível baseado em porcentagens e ems.
Seria até possível criar um site mobile apenas com essa ideia, sem usar media queries. Se tudo for porcentual, o design se adaptaria a todas as resoluções. Mas, na prática, não seria um design capaz de aproveitar o potencial de cada dispositivo. As media queries permitem ajustar o design pensando em adaptar e melhorar a experiência do usuário.

A verdade é que você provavelmente precisará reconstruir boa parte do seu site. Mas para ter um pouco menos de trabalho, recomendo que procure utilizar frameworks que já trabalhem com o design responsivo. Frameworks são estruturas de código já prontas que trazem consigo diversas linhas em CSS, JavaScript e HTML já escritas, facilitando bastante o trabalho do desenvolvedor do site.

Entre os frameworks mais conhecidos podemos citar os seguintes:
Foundation (http://foundation.zurb.com/)
Boostrap (http://twitter.github.com/bootstrap/)
Semantic Grid System (http://semantic.gs/)
Frameless (http://framelessgrid.com/)
Skeleton (http://www.getskeleton.com/)
Golden Grid (http://goldengridsystem.com/)
Fluid Baseline (http://fluidbaselinegrid.com/)
Initializr (http://www.initializr.com/)

Classes condicionais

Existem várias maneiras de se lidar com as diferenças entre browsers quando se trata de CSS. Eu mesmo já falei sobre CSS hacks, comentários condicionais e até uma biblioteca JS que corrige os problemas do IE tornando-o standards compliant. Cada uma delas tem suas vantagens e desvantagens, e ainda vou escrever um post sobre isso, prometo.
Os comentários condicionais costumam ser uma das maneiras mais aceitas e bem vistas de se encarar o problema. Com eles é possível entregar o layout perfeito, sem erros, mantendo o CSS limpo, sem hacks e válido à um custo razoável: o uso um arquivo CSS adicional para o Internet Explorer. Pra quem ainda não conhece, funciona assim:
01.<html>
02.<head>
03.<link rel="stylesheet" type="text/css" href="estilos.css" />
04.<!--[if IE 6]>
05.<link rel="stylesheet" type="text/css" href="estilos-para-ie6.css" />
06.<![endif]-->
07.</head>
08.<body>
09.<div id="menu">conteúdo do site....</div>
10.</body>
11.</html>

Tudo o que estiver dentro das tags <!–[if IE 6]> e <![endif]–> será interpretado apenas pelo Internet Explorer 6. Dessa forma você pode escrever o seu CSS sem nenhum hack, com código 100% válido, e colocar todas as correções em um outro arquivo específico para o IE. A desvantagem é ter 2 arquivos CSS ao invés de um, o que pode ser prejudicial em termos de atualização e manutenção.
Mas e se, ao invés de usar os comentários condicionais para linkar um novo CSS, os usássemos para fazer o seguinte:
01.<html>
02.<head>
03.<link rel="stylesheet" type="text/css" href="estilos.css" />
04.</head>
05.<!--[if IE 6 ]>
06.<body class="ie">
07.<![endif]-->
08.<!--[if !IE 6]>-->
09.<body>
10.<!--<![endif]-->
11.<div id="menu">conteúdo do site....</div>
12.</body>
13.</html>

Isso faz com que a classe “ie” [class="ie"] seja aplicada apenas quando o browser utilizado é o Internet Explorer 6 [if IE 6]. Caso contrário o <body> fica sem nenhuma classe [o sinal "!" significa "não igual"]. Assim, podemos escrever nosso CSS da seguinte maneira:

1.div#menu { color: inherit; } /* linha interpretada por todos os browsers */
2..ie div#menu { color: #ff8000; } /* linha interpretada apenas pelo IE 6 */

Ou seja, podemos colocar todas as correções precedidas pelo seletor de classe “.ie”, dessa forma apenas o IE 6 irá interpretá-las. Eliminamos assim a necessidade de um segundo arquivo e ficamos livres também dos hacks, podendo então escrever CSS 100% válido.