O desenvolvimento web está mudando; e para melhor. É preciso que nós, desenvolvedores web, acompanhemos estas mudanças, tendo ciência de que, agora, existem novas regras para o desenvolvimento web moderno, o desenvolvimento da web responsiva.
Responsive web design (ou web design responsivo) se tornou um termo onipresente no mundo de desenvolvimento web. Se você pesquisar por #rwd no Twitter ou Google+, vai encontrar ambos, conteúdo e spam. Essa é uma fase comum no amadurecimento de uma ideia nova. Na época do “boom” do AJAX, o termo foi “levado ao chão”. Agora, poucas pessoas falam sobre AJAX, mas bibliotecas como jQuery estão totalmente entrelaçadas com o fluxo de trabalho de um desenvolvedor web interativo.
Isso parece espelhar o que está acontecendo com o web design responsivo. O termo está em toda parte. Por exemplo, aconteceu o caso de uma amiga de um desenvolvedor envolvida com publicação de revistas que foi a uma conferência; um editor de uma revista conhecida, falando sobre as próximas tendências, mencionou web design responsivo. Os editores podem não ser profissionais da web, mas conhecem as buzzwords do momento.
À medida em que o web design responsivo vai ganhando força, nossa forma de desenvolver sites vai se alterando. À medida em que o status de “buzzword” vai se alterando e o web design responsivo, em si, vai se tornando parte comum de todos os projetos de web design, nossa forma de trabalhar como profissionais de web também precisa mudar. Com isso em mente, precisamos estabelecer algumas regras básicas sobre como vamos trabalhar a partir de agora.
Não pare no “esticar”
Quando alguém diz “Confira este site responsivo”, qual a primeira coisa que você faz? Provavelmente, você vai redimensionar a janela do navegador para ver as mudanças no layout. Provavelmente, você não vai abri-lo num celular ou tablet e começar a fazer mudanças de orientação ou iniciar a execução de testes de performance. Todos nós escalamos a janela do navegador e seguimos em frente com nosso dia. Essa é a nossa experiência como designers e desenvolvedores, mas não como “usuários”. Quando se visita um site como “usuário”, não existe muita “paciência”: geralmente as pessoas não se importam se o site “estica” bem, só queremos o que queremos (pesquisar, encontrar alguma coisa, realizar alguma tarefa, etc).
“Esticar” é uma escala linear em um site. O site vai de “magro” para “gordo”? Ao invés de uma escala linear, web design responsivo deve se centrar no estabelecimento de uma base de carregamento e, a partir daí, carregar recursos progressivamente a partir daí. Imagine um site que tenha que ser desenvolvido para um celular minúsculo usando IE7 em uma rede EDGE. Esse é o “ponto de partida”, o “core mínimo”; a partir daí, você vai incrementando com base no tamanho da tela e capacidades dos dispositivos.
Não procure por um caminho mais fácil
Web design responsivo é complicado. É assim que é. Eu gostaria que houvesse algo que eu pudesse dizer para tornar mais fácil, mas não há. A maioria das pessoas trabalhando com responsive web design acrescentaram algo a seus fluxos de trabalho, seja um novo produto ou apenas perguntando a um desenvolvedor se o projeto vai trabalhar responsivamente.
Veja este cenário comum (história real): um amigo trabalhando em um site responsivo para um cliente. Ele está planejando o visual do site no Photoshop em tamanho desktop. Depois de alguns esboços de algumas páginas, ele queria mostrar como o site se pareceria em um tablet e um smartphone, por isso ele fez estes esboços também. Depois de apresentar ao cliente, foram dados alguns ajustes criativos. Existem mais de 50 arquivos PSD para este site e, como não poderia deixar de ser, são necessários alguns dias para rever todos os layouts.
Tentar acrescentar novos designs sozinhos só vai resultar num processo demorado e inconsistente. Uma das melhores maneiras de resolver isso é através da criação de wireframes e os apresentando para os respectivos clientes. Isso permite ter deliverables sobre o layout do site sem que, simultaneamente, seja preciso se preocupar com o design. Existem ferramentas excelentes que podem ser usadas, também, para a criação rápida de wireframes e protótipos, como Twitter Bootstrap e ZURB Foundation.
Mas somente adicionar protótipos em seu fluxo de trabalho também não será o suficiente. Para ter sucesso no desenvolvimento de sites responsivos é preciso ajustar (o que nos leva à próxima regra).
Abrace a mudança
Muitos desenvolvedores, ao começarem em suas carreiras de desenvolver sites, usaram ferramentas como Photoshop e GoLive. Atualmente, existem muitos outros, considerados por alguns absolutamente necessários para a construção de um site. Obviamente não existe unanimidade, mas, por exemplo, um desenvolvedor pode usar o Photoshop para a criação de elementos gráficos, “projetar no navegador” com Sublime Text 2 e usar as ferramentas de desenvolvedor do Safari para inspecionar elementos num iOS 6, usar alguma ferramenta para compilar códigos LESS e o Terminal para controle de versão com Git.
Web design responsivo também significa mudar a maneira de projetar. Ao invés de uma página inteira no Photoshop, é possível usar Style Tiles para o projeto visual. Ao projetar o visual de um site e elementos de interface fora de uma disposição real (o que sugere o projeto Style Tiles), é possível comunicar o design diretamente e combiná-lo com protótipos para “projetar no navegador” sites responsivos.
Pré-processadores CSS, como LESS e SASS, também são uma grande ajuda em qualquer fluxo de trabalho ágil. Para explicar de maneira simples, pré-processadores podem ser usados para “desembaraçar” um pouco da complicação de desenvolver um site e ajuda bastante com a repetição e herança de CSS. Para melhorar ainda mais, é possível agilizar o fluxo de compilação de pré-processadores de forma simples, como, por exemplo, é mostrado no screencast sobre como compilar LESS com Sublime Text 2.
Acompanhe as mudanças que acontecem e não se prenda a ferramentas específicas só porque você está acostumado a elas. A melhor ferramenta é a ferramenta mais eficiente para executar determinado propósito. Lembre-se disso!
Lembre-se de suas raízes
[A web] deve ser acessível a partir de qualquer tipo de hardware que pode se conectar à internet, fixo ou móvel, tela pequena ou grande.
Tim Berners-Lee
HTML e CSS são, inerentemente, responsíveis. Desde o início do HTML, a web foi criada com a intenção de ser flexível o suficiente para trabalhar em qualquer hardware com uma conexão à internet. Não foi porque nós, designers e desenvolvedores, mudamos para layouts fixos, que essa ideologia mudou.
Na tentativa de impor dimensões fixas aos sites, restringimos a web a computadores de mesa. É hora de corrigirmos nosso erro!