O design responsivo (também conhecido como design 'adaptável'), em que a mesma página da web apresenta a melhor versão de dois ou mais layouts artesanais, dependendo da largura do navegador, é a opção mais forte para a maioria dos sites. Para entender o porquê, é útil examinar todas as opções disponíveis para web designers:
Layouts fixos
Uma largura de página fixa, em que a largura do conteúdo é a mesma, independentemente da largura do navegador, oferece uma aparência uniforme entre os dispositivos e pode exigir menos codificação, pensamento e manutenção do que os designs mais flexíveis.
Alguns acham que os layouts de largura fixa são relíquias de uma época passada, onde as pessoas almejavam a perfeição em pixels e a aparência uniforme em todos os navegadores. Andy Clarke, autor de Hardboiled Web Design, sente que essa maneira de pensar está morta:
"No passado, era uma prática comum lutar arduamente para criar um site com a mesma aparência e funcionamento em todos os navegadores - independentemente de suas capacidades. Fazer isso significava comprometer e evitar o uso de tecnologias não suportadas por todos os navegadores.
Isso é duro?
Não se iluda, bochechas doces. Essa não é a maneira de evoluir nosso ofício ou construir uma web melhor. Esse tipo de pensamento antiquado nos impede. Nos obriga a dar desculpas por não fazer o que sabemos ser a coisa certa. O pior que nós, como atuais guardiões da web, podemos fazer é permitir que qualquer coisa limite o que é possível ".
- Andy Clarke, Hardboiled Web Design, pág. [PDF Edition disponível aqui ]
Enquanto alguns veem os layouts fixos como a altura da preguiça, os designs de largura fixa ainda são escolhidos pelas equipes de design muito inteligentes em vez dos layouts fluidos ou adaptáveis. A Apple, por exemplo, atualmente serve o mesmo layout para os iMacs e iPads e iPhones. Por que a empresa responsável por levar a navegação na web móvel às massas não otimiza seu site para dispositivos móveis?
Porque não acha que precisa.
Em vez de adaptar seu site para telas pequenas, a Apple construiu hardware e software para lidar confortavelmente com sites amplos nessas telas. A Apple acha que uma experiência 'otimizada para celular' é melhor entregue em um aplicativo nativo, não em uma janela do navegador. É por isso que oferece o aplicativo Apple Store em vez de atender a uma loja virtual otimizada para celular. E é por isso que incentiva os editores a oferecer aplicativos de revistas em sites personalizados. A atual filosofia de web design da Apple é clara: um layout para governá-los funciona bem. Para todo o resto, há um aplicativo para isso.
Por esse motivo, alguns argumentam que layouts fixos permanecem tão relevantes como sempre; eles dizem que layouts fluidos e adaptáveis são apenas algumas lacunas, enquanto esperamos que o software do navegador móvel melhore, e HTML e JavaScript evoluam e tentem os desenvolvedores a se afastarem das lojas de aplicativos isoladas.
Na minha opinião, porém, percorrer a Web por um longo período de tempo em um dispositivo móvel não é muito divertido, mesmo em um iPhone. Se você acredita que a melhor experiência na Web é a que torna a leitura, a publicação e a interação com os sites um prazer, e não uma tarefa árdua, independentemente do dispositivo que você está usando, você precisa conceder, em algum momento, a veiculação de conteúdo adaptado a cada vale a pena considerar o visitante.
Layouts de fluidos
Os layouts de fluidos, nos quais a largura da página flui para preencher a tela (geralmente até uma largura máxima imposta), prometem uma melhor experiência em diferentes plataformas, fornecendo conteúdo em uma largura mais adequada para a viewport.
Na prática, os layouts de fluidos causam mais problemas do que resolvem, conforme observado por Cameron Moll neste texto:
"... os projetos fluidos resolvem todos os problemas de layout da mesma forma que os computadores tornam os escritórios sem papel, ou seja, eles não".
- Cameron Moll, "Todos os sites devem ser fluidos?", Setembro de 2006
Quando você adota um layout fluido, renuncia ao controle de seu design e aceita que o texto seja reorganizado, as imagens refluirão, os comprimentos das linhas variarão de maneira imprevisível, o texto, as imagens e os elementos de navegação podem se fragmentar em pequenas larguras e as colunas saltam e flutuam ao redor apenas para te irritar.
Um layout fluido, alguns podem dizer, também é uma opção preguiçosa. É a abordagem da espingarda ao web design adaptável. Em vez de fornecer uma experiência personalizada com três ou quatro designs de largura fixa cuidadosamente considerados, você está oferecendo uma experiência imprevisível na esperança de que ele funcione em telas grandes e pequenas e, esperançosamente, elimine todas as lacunas que você não considerou completamente entre.
Isso não torna inúteis os layouts de fluidos. Existem maneiras de fazê-los funcionar. O blog 456 Berea St , por exemplo, adota um layout fluido até uma determinada largura, após o qual usa um layout fixo para algo maior. E em larguras realmente pequenas, a barra lateral cai para usar uma única coluna que facilita a leitura em telas pequenas. Mas esse não é mais um layout fluido. É algo melhor. É um design responsivo .
Layouts responsivos
Um layout 'responsivo' ou 'adaptável' - em que a mesma página da web apresenta uma versão de dois ou mais layouts criados, dependendo da largura do navegador do visitante - é uma parte essencial do aprimoramento progressivo, que visa fazer com que o site tenha a melhor aparência pode para todos os visitantes.
Optar por adotar um layout adaptável é "excelente atendimento ao cliente", nas palavras de Aaron Gustafson, autor de Adaptive Web Design. Se projetarmos bem nossos sites, ele diz, os visitantes devem receber uma experiência perfeitamente criada, sem perceber que estamos fazendo um alarido deles:
"Como web designers e desenvolvedores, devemos nos esforçar para ser tão bons em nosso trabalho quanto aquele garçom atento e discreto, mas não é uma tarefa simples. Assim como um garçom não tem idéia se um cliente que entra pela porta exige freqüentes recargas ou poucos, não temos como saber as necessidades de um usuário em particular quando eles chegam ao nosso site. Em vez disso, precisamos nos elevar para atender a essas necessidades. Se somos realmente bons, podemos fazê-lo sem que nossos clientes percebam que estamos fazendo considerações especiais para eles. Felizmente, com a abordagem focada no usuário e no conteúdo da melhoria progressiva (em oposição à abordagem mais recente do navegador da degradação graciosa), isso é facilmente possível ".
- Aaron Gustafson, Adaptive Web Design, p12 [edição em PDF disponível aqui ]
A percepção de que nosso trabalho como web designers é adaptar-se a nossos visitantes e não forçá-los a se adaptarem a nós - como a Apple pode nos fazer acreditar - é um desenvolvimento bastante recente no design de sites. É, na minha opinião, uma espécie de renascimento: terminamos de escolher os bons hábitos em anos de design de impressão. Agora devemos jogar fora os grilhões impostos trabalhando dentro de um espaço predefinido na página impressa.
Onde uma vez que tratamos o navegador como uma tela fixa, agora estamos aceitando que não existe nenhuma tela definida, e isso fica cada vez mais claro com a enorme variedade de tamanhos de tela que você sem dúvida está começando a ver nas estatísticas do visitante . Em vez de tratar cada novo dispositivo como um 'tamanho de página' único a ser alvejado (e depois ter que reunir tropas quando um novo dispositivo for lançado), podemos seguir mais convenções preparadas para o futuro.
Podemos pensar em termos de bandas - 'grande', 'médio' e 'pequeno' - em vez de pensar em telefones e tablets específicos, e depois criar sites para parecerem melhores nessas bandas. Quaisquer que sejam os novos dispositivos lançados, eles se encaixam em uma banda ou outra e - mesmo que estejam na fronteira entre duas bandas - ainda temos mais controle sobre a experiência do que se tivéssemos usado um dispositivo fixo ou fluido layout.
Em Responsive Web Design, Ethan Marcotte oferece esta chamada para os braços:
"Precisamos deixar ir.
Em vez de criar designs desconectados, cada um adaptado a um dispositivo ou navegador específico, devemos tratá-los como facetas da mesma experiência. Em outras palavras, podemos criar sites que não são apenas mais flexíveis, mas que podem se adaptar à mídia que os renderiza.
Em suma, precisamos praticar
web design responsivo. Podemos adotar a flexibilidade inerente à web, sem abrir mão do controle que exigimos como designers. Tudo incorporando tecnologias baseadas em padrões em nosso trabalho e fazendo uma ligeira mudança em nossa filosofia em relação ao design on-line ".
- Ethan Marcotte, Responsive Web Design, p8 [edição em PDF disponível aqui ]
Mas que bandas você usa? Ethan Marcotte recomenda os três a seguir em Responsive Web Design. (Para saber o que eles fazem e entender as advertências, convém pegar o livro. )
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
Há também uma variedade de estruturas CSS projetadas para ajudar a criar sites adaptáveis, incluindo o Less Framework de Joni Korpi .
Em vez de usar pontos de interrupção arbitrários, talvez seja melhor deixar o design do seu site ditar as faixas. Reduza a largura da tela do navegador e, sempre que o design for interrompido, essa largura deverá ser um dos seus "pontos de interrupção". Continue reduzindo a largura e adicionando pontos de interrupção com consultas de mídia CSS até que seu design pareça bom em todas as larguras. Dessa forma, seu design ficará bem em todos os dispositivos, em vez de apenas no punhado de tamanhos de tela em que você tentou digitar. Se você usa o Chrome, ativar as Ferramentas do desenvolvedor (Exibir> Desenvolvedor> Ferramentas do desenvolvedor) e reduzir a largura do navegador fornecem uma leitura útil da largura atual no canto superior direito que você pode usar para descobrir onde devem estar seus pontos de interrupção.
Outra abordagem popular a considerar é o design responsivo do Mobile First , em que sua folha de estilo principal lida com os estilos dos dispositivos menores e as consultas de mídia lidam com larguras de tela maiores, e não o contrário. Isso pode resultar em um desempenho mais rápido em dispositivos móveis, principalmente se você usar muitas imagens de plano de fundo CSS. (Você construiria os pontos de interrupção da mesma maneira - comece com a largura do navegador no mínimo e trabalhe para cima. E não se esqueça de testar em quantos dispositivos reais puder) - considere visitar um dispositivo aberto Lab .)
Em resumo, quando bem feito, o design adaptável é uma alegria de se ver e experimentar tanto como web designer quanto como usuário comum da web de jardins. Veja o site da empresa japonesa Information Architects , por exemplo:
Em um iPhone
Em um iPad
Em um iMac
Assim como Aaron Gustafson previu, você nem sabe que está sendo atendido até ver os desenhos na mesma página.
A experiência dificilmente poderia ser mais agradável em cada caso; você não precisa pensar ou interagir com a página para começar a ler o conteúdo, passar um tempo se perguntando por que parece estranho na tela ou aumentar o zoom para ver os elementos de navegação antes de poder tocá-los, porque alguém já resolveu esses problemas para você. E que é por isso que o design responsivo quase sempre supera outras opções.