Sérgio Lopes e Tárcio Zemel trabalharam juntos no livro “Web Design Responsivo”, publicado pela Casa do Código. Eles compartilharam o que pensam sobre o movimento do RWD e deram dicas preciosas.

Sérgio Lopes é instrutor e desenvolvedor na Caelum. Interessou-se por responsivo quando o assunto ficou popular nos EUA e passou a pesquisar o tema por aqui.

Responsivo é uma tendência nos dias de hoje. Você diria que quem não possui num site responsivo pode ser considerado atrasado?

Sérgio Lopes: Os usuários mobile esperam hoje uma boa experiência ao abrir seu site num dispositivo móvel. Se você não atende essa expectativa, frustra seu usuário. Então ter uma boa solução móvel é um diferencial competitivo, sim, e quem não busca isso está ficando pra trás.

O que é preciso saber para criar uma boa página responsiva?

SL: Há muitas técnicas novas que ajudam na implementação de uma página responsiva — media queries, imagens responsivas, suporte a telas retina, RESS, entre outras. Mas a principal mudança é o layout fluído, que são layouts baseados em medidas flexíveis, como as porcentagens, ao invés de pixels. Quer dizer, isso existe há muito tempo, mas os web designers (eu incluso) durante muito tempo aprenderam a pensar em pixels. A maior mudança para o responsivo é parar de pensar em pixels e pensar flexivelmente, em um design adaptativo. É olhar para um design e enxergar proporções flexíveis ao invés de medidas fixas. Parece simples, mas eu considero essa mudança de pensamento o maior desafio.

Que tipos de ferramentas, linguagens, métodos ou técnicas existem para a criação de design responsivo?

SL: Há muitas técnicas maduras que facilitam a implementação do design responsivo. O uso de layout fluído, por exemplo. Certas boas práticas na hora de escrever media queries. Ou ainda a metodologia “mobile-first”, que prega um desenvolvimento responsivo focando primeiro em dispositivos móveis, que são mais limitados. Com relação a ferramentas, ainda estamos bem no início. A maior deficiência é uma ferramenta para criação e design, já que o Photoshop é bastante limitado para desenhar designs fluídos. Algumas pessoas usam frameworks de grids responsivos como o Bootstrap, mas eu não os acho necessários.

Quais são as dicas para um bom site responsivo?

SL: Minha principal dica é que se projete o site da maneira mais portável possível. Isso quer dizer, por exemplo, um design que se adapte a todo tipo de resolução e não só as dos aparelhos mais famosos. Quer dizer levar em consideração touch screens em todos os cenários, já que hoje temos até notebooks com esse recurso. Quer dizer também projetar para uma boa performance sempre, já que o usuário pode estar no 3G do celular mas também usando 3G no tablet ou notebook. Um bom design responsivo leva em consideração uma série de diferenças entre aparelhos e adapta a experiência do usuário da melhor forma possível em todos os cenários.

Há algum projeto pessoal seu que você pode citar como exemplo?

SL: Tenho meu blog pessoal que, claro, é responsivo (e com código fonte todo aberto para estudo). Mas na Caelum, onde trabalho, todos nossos últimos projetos já saem com design responsivo de fábrica e tenho participado de vários. Alguns exemplos: o novo GUJ, a editora Casa do Código, o hotsite do livro Arquitetura Java  e o próprio site da Caelum que está sendo reformulado aos poucos.

Criar sites responsivos vale para qualquer website ou é preciso pensar também no projeto como um todo?

SL: Design responsivo é dar a liberdade para o usuário acessar seu site de onde quiser e como quiser. Então eu acho que isso vale para qualquer site sim. Talvez não seja importante apensas em cenários muito específicos de sistemas corporativos onde a empresa controla quais aparelhos seus funcionários usam e aí não é necessário suportar vários dispositivos.

Que referências você recomenda para quem se interessa pelo assunto?

SL: Eu tenho um livro chamado “A Web Mobile – Programe para um mundo de muitos dispositivos” que lancei em abril pela editora Casa do Código. Nele, falo bastante de responsivo e de técnicas de front-end para implementar esse site (como, por exemplo, JavaScript para eventos touch, RESS, como suportar telas de alta resolução, entre outros). No meu blog pessoal escrevo bastante sobre mobile, web e responsivo. Se você é bom pra ler em inglês, recomendo que leia e acompanhe tudo que Brad Frost, Ethan Marcotte e Luke Wroblewski fazem (livros, palestras, posts etc). Há outras pessoas, claro, mas esse trio está em bastante destaque e tem muito conteúdo bom.

Você acha que no Brasil essa técnica ainda está atrás em comparação com outros países ou a web brasileira já conta com boas demonstrações de sites responsivos?

SL: O Brasil está num bom caminho. Aqui a Internet móvel demorou mais pra se estabelecer entre os consumidores então é natural que os sites responsivos também tenham demorado mais pra surgir. Mas agora o mercado móvel está crescendo bastante e as empresas já estão começando a focar em soluções pra isso. Acho que temos um futuro de muitas oportunidades nesse área!

_______________________________________________________________________________________________________

Tárcio Zemel começou a trabalhar com web por curiosidade, que se transformou em profissão. Conta que, quando se deparou pela primeira vez com um exemplo responsivo, apaixonou-se.

Fale um pouco sobre você e o web design responsivo.

Tárcio Zemel: Sou atuante e entusiasta do desenvolvimento web mais ou menos desde o ano 2000. Depois de algum tempo conhecendo a web, cheguei à conclusão de que eu queria saber como fazer web, também. O que começou como curiosidade e brincadeira, rapidamente se tornou uma paixão e, depois disso, profissão.

Cerca de 2 anos atrás foi quando tive o primeiro contato com um site responsivo (infelizmente, não me lembro qual foi). Quando vi aquelas alterações de layout acontecendo automaticamente, conforme eu redimensionava o navegador, fiquei tão maravilhado e entusiasmado que pensei: “É isso! Esse é o futuro!”.

Você acredita que o design responsivo é uma tendência?

TZ: Quando se usa a palavra “tendência”, isso passa a ideia que é algo passageiro, que vai ser substituído na próxima estação. Milhares de desenvolvedores pelo mundo consideramos que não se trata de uma “moda” ou um mero hype na internet; não se trata de algo que chegou, vai angariar alguns fãs e sumir na próxima temporada. O web design responsivo é uma nova forma de pensar a web e, dentro de pouco tempo, será tão vital e importante aos desenvolvedores e à experiência do usuário quanto hoje são os próprios HTML e CSS.

Até que esse tempo não chegue, eu não seria tão radical ao ponto de afirmar que quem não possui num site responsivo já pode ser considerado “atrasado”. Apesar do entusiasmo da comunidade webdev, há que se considerar as necessidades de cada projeto sempre. Nem todos têm a necessidade de um site responsivo, mas as estatísticas que registram o uso de dispositivos móveis e a mudança de comportamento das pessoas ao usar tais aparelhos mostram que, a cada dia, mais e mais gente está se dando conta da importância de se ter um site com tais características.

Na verdade, antes de uma questão técnica, trata-se de uma questão conceitual: One Web. Nas palavras de Tim Berners-Lee, 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.

Num futuro não muito distante, a capacidade de um site se adaptar a qualquer dispositivo será, sim, um pré-requisito para que seja considerado algo de qualidade. Só que essa hora ainda não chegou.

O que é essencial saber?

TZ: As bases desse conhecimento foram identificadas e sistematizadas há exatos 3 anos, no épico artigo “Responsive Web Design”, no qual Ethan Marcotte presenteou o mundo com os pilares do web design responsivo: layout fluido (ou grid flexível), imagens e recursos flexíveis e media queries. Não foi Ethan quem desenvolveu essas tecnologias, mas ele foi o responsável pela sistematização de seu uso em conjunto, o que deu ensejo ao que hoje conhecemos como web design responsivo.

Então, apesar de uma “boa página” ser um conceito relativo, sabendo e aplicando corretamente esses “pilares” do responsive web design, qualquer desenvolvedor tem condições de desenvolver um site que se adapte a diferentes dispositivos. Mas, como disse, essas são os “pilares”; é preciso ir além.

Que tipo de ferramentas para design responsivo estão disponíveis hoje em dia?

Por se tratar de um conceito novo (ou relativamente novo), ainda não há nada totalmente consolidado ou definido como “infalível” para a criação/manutenção de projetos com web design responsivo. Felizmente, a comunidade é muito ativa e criativa e, a cada dia, novas ideias e soluções surgem.  Atualmente, as soluções front-end são as mais comuns de se encontrar, embora RESS (Responsive Design + Server Side Components), que mistura front-end e back-end, esteja ficando cada vez mais disseminado. Talvez por ter uma bagagem com PHP, a meu ver, combinar estratégias no lado cliente e servidor faz mais sentido, dado as características intrínsecas e possibilidades de cada “lado”. Num futuro não distante, repleto de recursos e recomendações W3C voltadas à One Web – como servir diferentes recursos dependendo do contexto, CSS Template Layout Module, CSS Grid Layout, Flexbox, aprimoramento e criação de APIs para contato com hardware e mais -, desenvolver sites responsivos será muito mais simples.Atualmente, não tem como fugir de muita experimentação e estar preparado para mudanças (bruscas) na maneira de se fazer as coisas.

Quer dicas você dá para sites responsivos perfeitos?

TZ: Como apontado na questão anterior, o principal é sempre buscar conhecer novas possibilidades e maneiras mais eficientes de conseguir o objetivo da responsividade. Então, mais do que dicas técnicas, que podem ficar defasadas muito rápida e repentinamente, é preciso levar em consideração questões mais abstratas como capacidade de mudança e adaptação de um projeto; testes de resultados; performance; impacto de ações em outras áreas (UX, SEO, etc); boa comunicação entre as pessoas da equipe; estudos e aprimoramentos constantes.

As primeiras mudanças são a mental e a conceitual. Internalizando os principais conceitos de web design responsivo, sabendo aonde se quer chegar com um projeto e tendo a vontade de sempre entregar algo melhor do que o foi entregue antes, a fim de melhorar a web e o mundo, o que decorre daí é a qualidade.

Que projetos você considera bem sucedidos?

TZ: O blog desenvolvimento para web: desenvolvimentoparaweb.com. Nele, faço muitos testes e experimento técnicas e recursos novos, posso “brincar” à vontade para testar o que vejo pela web sobre o assunto e o uso para espalhar conhecimentos sobre desenvolvimento web, em geral. A atual versão foi feita com HTML5, HTML5 Boilerplate e Twitter Bootstrap e o código está recheado de significados graças ao uso de Microdata API + schema.org.

Á medida que nos envolvemos com determinado assunto (ou tecnologia), ficamos cada vez mais exigentes. Então, apesar de o blog estar bem feitinho, uma nova versão já está no forno, dessa vez usando algumas outras tecnologias e possibilidades, levando em conta, principalmente, o tamanho e números dos recursos, já que, especialmente para projetos responsivos, velocidade e desempenho devem ser levados muito a sério.

Os resultados estão ficando interessantes e, quando tudo estiver pronto, pretendo disponibilizá-lo para a comunidade poder estudar, também. Foi devido à troca de conhecimentos que eu aprendi a desenvolver a web e não estou fazendo mais do que minha obrigação ao retribuir.

É preciso pensar em outros aspectos de um projeto antes de começar pelo responsivo?

TZ: Sem dúvidas, é preciso pensar no projeto como um todo, de maneira holística, levando em conta as necessidades e objetivos deste e, principalmente, as pessoas que irão se valer de suas possibilidades e resultados! Como já citado, não é todo projeto que precisa ser responsivo. Por exemplo, qual seria a necessidade para uma intranet de uma empresa de desenvolvimento de software corporativo ou de um sistema web específico para pessoas que usam smartphones? Simplesmente, não faz sentido – e, em alguns casos, seria até incoerente; um desperdício de recursos. Assim como temos feito até hoje, é preciso levar em consideração o público-alvo e objetivos dos projetos e não haveria o porquê de ser diferente. O advento do web design responsivo só altera as metas que devem ser alcançadas e a maneira como as coisas são feitas; o objetivo de desenvolver projetos bem feitos e de qualidade permanece o mesmo.

Quais são as fontes boas para se beber?

TZ: Sinto orgulho de ter escrito o primeiro livro sobre o assunto do Brasil, “Web Design Responsivo: páginas adaptáveis para todos os dispositivos”. Depois, recomendo “A Web Mobile: programe para um mundo de muitos dispositivos”, de um dos maiores estudiosos e especialistas do Brasil no assunto, Sergio Lopes. Ele estende os assuntos abordados no “Web Design Responsivo” e traz muito mais considerações e discussões a respeito da responsividade e mobile, em geral. Para quem lê em inglês, é historicamente relevante ler “Responsive Web Design”, de Ethan Marcotte e, para aprimorar o “jeito de pensar”, o livro “Mobile First”, de Luke Wroblewski. Além disso, há um conteúdo muito rico no “The Mobile Book”, da Smashing Media. Ainda fora de terras tupiniquins, são leituras praticamente obrigatórias blogs como A List Apart (alistapart.com), Smashing Magazine (smashingmagazine.com), CSS-Tricks (css-tricks.com), Responsive Web Design Blog (responsivewebdesignblog.com), os artigos de Luke Wroblewski (lukew.com) e assinar a Responsive Design Newsletter (responsivedesignweekly.com), que, toda semana, envia por e-mail os principais artigos e recursos sobre web design responsivo.