Web design responsivo tornou-se uma palavra de ordem quase onipresente na web. Tente pesquisar por #rwd no Twitter para encontrar conteúdo de partes iguais e spam no Twitter. Esta é uma fase comum no amadurecimento de uma nova ideia. Eu me lembro quando AJAX era toda a raiva; o termo foi jogado no chão. Agora, poucas pessoas falam sobre o AJAX, mas bibliotecas como o jQuery são totalmente adotadas no fluxo de trabalho de um desenvolvedor.
Isso parece refletir o que está acontecendo com o design responsivo da web. O termo está em todo lugar. Uma amiga minha está na publicação de revistas, ela foi a uma conferência recentemente, e um editor de uma nova revista bem conhecida estava falando sobre tendências futuras e mencionou o web design responsivo. Os editores podem não ser profissionais da web, mas conhecem as palavras-chave.
Como o web design responsivo ganhou fôlego, a maneira como construímos websites mudou. À medida que o termo passa da palavra-chave para uma parte comum de todo projeto de web design, a maneira como trabalhamos como profissionais da web precisa mudar. Com isso em mente, precisamos estabelecer algumas novas regras básicas de como trabalhamos.
Quando alguém lhe diz para “verificar este site responsivo”, qual é a primeira coisa que você faz? Você provavelmente dimensiona a janela para ver como o layout é alterado. Eu provavelmente não vou abri-lo no meu celular e tablet e começar a mudar as orientações ou começar a executar testes de velocidade de página. Eu dimensiono o navegador e continuo com o meu dia. Esta é a nossa experiência como designers e desenvolvedores, mas não como usuários. Quando visito um site como usuário, não tenho paciência. Eu não me importo se o site está bem. Eu só quero a coisa que quero.
"Squishy" é uma escala linear de um website. O site vai de magro a gordo? Em vez de dimensionamento linear, o design da Web responsivo deve se concentrar no estabelecimento de um núcleo de site e no carregamento progressivo a partir dele, com base nos recursos. Imagine um site que precisava ser construído para um pequeno celular rodando o IE7 em uma rede EDGE. Esse deve ser seu site principal e, em seguida, dimensionar com base no tamanho da tela e nos recursos.
Web design responsivo é complicado. É assim que é. Eu gostaria que houvesse algo que eu pudesse lhe dizer para facilitar, mas não existe. A maioria das pessoas respondeu ao design responsivo da Web adicionando algo aos fluxos de trabalho, seja uma nova entrega ou apenas indo a um desenvolvedor e perguntando se o design funcionará de maneira responsiva.
Eu tenho um amigo que está trabalhando em um site responsivo para um cliente. Ela está construindo o site no Photoshop no tamanho da área de trabalho. Depois de alguns mockups em algumas páginas, ela queria mostrar como o site ficaria em um tablet e um smartphone, então ela também fez esses mockups. Depois de apresentar ao cliente, ela recebeu alguns ajustes criativos. Existem cerca de 50 arquivos PSD para este site neste momento. Leva alguns dias para revisar os layouts.
Tentar adicionar novos designs sozinho resultará em um processo demorado e inconsistente. Uma das melhores maneiras de resolver isso é prototipando seus wireframes e apresentando-os ao seu cliente. Isso lhe dá uma entrega para falar diretamente no layout do site sem falar simultaneamente sobre o design. Fundação por ZURB é uma ótima ferramenta para construir protótipos rapidamente.
Basta adicionar protótipos ao seu fluxo de trabalho não será suficiente. Para ter sucesso na criação de sites responsivos, você precisa ajustar, o que nos leva à próxima regra.
Quando comecei a criar sites, usei duas ferramentas, Photoshop e GoLive. Agora eu tenho pelo menos seis programas que eu absolutamente preciso para construir um site. Eu ainda uso o Photoshop para criar elementos gráficos, mas eu principalmente projeto no navegador com Sublime Text 2 e eu uso ferramentas de desenvolvedor do Safari para inspecionar elementos no meu iOS 6. Eu também uso Codekit para compilar meu CSS pré-processado e Terminal para controle de versão em Git.
Web design responsivo também significa mudar a maneira como você projeta. Em vez de colocar uma página inteira no Photoshop, eu uso Telhas de estilo de Samantha Warren articular o design visual. Ao projetar a marca visual e os elementos de interface de um site fora de um layout real, você pode comunicar o design diretamente e combiná-lo com o layout do protótipo para criar seu site responsivo no navegador.
Os pré-processadores CSS também são de grande ajuda em qualquer fluxo de trabalho responsivo. Para simplificar, os pré-processadores podem ser usados para desvendar algumas das complicações da criação de um site e facilitar a repetição da herança para trabalhar em CSS. Eu pessoalmente prefiro SCSS, mas LESS é uma alternativa melhor para alguns, pois tem uma menor barreira de entrada e tem melhor documentação.
[A web] deve ser acessível a partir de qualquer tipo de hardware que possa se conectar à Internet: fixo ou móvel, tela pequena ou grande. - Tim Berners-Lee
HTML e CSS são inerentemente responsivos. Desde o início do HTML, a Web foi projetada para ser flexível o suficiente para funcionar em qualquer hardware com uma conexão com a Internet. Não foi até nós, designers e desenvolvedores, mudarmos para layouts fixos que isso mudou. Ao tentar impor dimensões fixas em sites, restringimos a Web a computadores desktop.
A web responsiva é aquela que abstrai o que você tem a dizer de como você diz isso. Tomemos, por exemplo, a recente mudança da NPR para um modelo de conteúdo baseado em API. Ao migrar para uma API para fornecer conteúdo, a NPR conseguiu gerenciar sua coleção de aplicativos e sites de maneira consistente. A única coisa que muda é a camada de apresentação.
Isto é o que a web responsiva deveria ser. Descobrir o que é que você tem a dizer e deixar que você diga que seja motivado por isso. O design consiste em atender a uma necessidade de uma maneira visualmente agradável, mas que também atenda às necessidades do usuário.
É disso que se trata a Web responsiva, os sites criadores de usuários que trabalham para as pessoas que os usam, mas acessam o conteúdo. Fazer sites que podem se refatorar para telas pequenas é apenas o começo.
Você já adotou o design responsivo da web? Quais regras de design responsivo você gostaria de adicionar? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem de tamanho via Shutterstock.