Em dezembro foi ao ar um dos meus últimos projetos. Eu sei que já tem algum tempo, mas só agora consegui parar para escrever sobre ele.

O projeto foi refazer o site da rede de hambúrgueres gourmet Madero, que tem sede em Curitiba e hoje é uma rede bastante importante na região, com um movimento de expansão acelerado para outras partes do Brasil. O grande diferencial do Madero em relação a maioria dos restaurantes que vendem hambúrgueres é que eles prezam pela qualidade do que eles vendem, e isso fica evidente na hora que eles entregam produtos frescos comprados de produtores locais.

Versão para celular Versão para tablet Versão para desktop menor Versão para desktop largo
(Versões do site para cada dispositivo, do menor para o maior. Clique para expandir)

A reformulação do site é um projeto da Agencia Solar, também aqui de Curitiba, que fez o projeto visual para o novo site, bem como delineou com o cliente o que haveria em cada seção. Eu já trabalho com eles há algum tempo, e quando surgiu a oportunidade de refazer o site, eles me contactaram.

O meu papel foi o de arquitetar a estrutura do site, de acordo com o que foi definido pelo cliente e a Agência, e também adaptar o layout desenvolvido para dentro do site. A proposta era sair de um site feito puramente com Wordpress onde só haviam páginas e posts de blog e evoluir para uma estrutura mais elaborada, organizada por tipos de conteúdo e seções claras. Para essa tarefa, como não poderia deixar de ser, escolhi o Drupal.

A arquitetura do site foi elaborada de acordo com as necessidades do cliente, sendo a mais evidente a facilidade de uso por parte da equipe interna que iria manter o conteúdo. Isso fez com que eu criasse tipos simples, mas que em conjunto com outros, tornasse o site rico, mas sem agregar complexidade demasiada. Todo o site gira em torno de restaurantes e cidades. Um restaurante está sempre em uma cidade e é de um tipo (Madero Burger & Grill, Madero Burger ou Madero Premium). Isso reflete diretamente em todo o restante do site, fazendo com que uma informação apareça em várias partes, sem necessidade de redigitação. Um exemplo são os cardápios do site, que são compostos por pratos (outro tipo de conteúdo bem simples), e que são associados a uma cidade e um tipo de restaurante. Cada cardápio é valido para uma cidade, e cada item do prato pode ter um valor definido somente para aquele cardápio, mas os pratos são sempre reaproveitados, evitando assim a repetição da digitação de informação. Ao todo foram criados 7 tipos de conteúdo que se complementam e fazem com que a gestão do site seja mais simples.

Em todo o site foram usado cerca de 40 módulos distintos do Drupal. Alguns deles muito pequenos (como o Tipsy), e outros realmente importantes como o Views e o Field Collection. Para dar suporte à simplicidade na gestão, criei um módulo pequeno que junta algumas partes do conteúdo.

Outro grande requisito por parte do cliente era que o site estivesse disponível para dispositivos móveis, o chamado site responsivo. Aí outra vez o papel da Agência Solar ficou em evidência. Os designers deles criaram os layouts para cada seção do site em 4 tamanhos diferentes, indo de celulares ao desktop com telas largas. Ainda no quesito responsivo, tomamos o cuidado de fazer as imagens que compoem o layout todas adaptadas para telas de alta qualidade (retina). O meu papel foi, com base no layout desenhado pela agência, criar o CSS e o Javascript necessário para funcionamento do site. Essa foi uma parte muito trabalhosa, mas muito divertida. Toda a criação do tema usado foi feita em cima do Zen, um ótimo tema para quem deseja trabalhar com SASS e quer aproveitar o poder do Zen-grids para construção de layouts responsivos.

O site, com eu disse, está no ar desde dezembro e tem um alto índice de visitas diárias. No que se refere a performance, o mesmo sempre esteve bem rápido e não precisei fazer nada extravagante, bastando apenas habilitar o cache regular do Drupal.

No fim, o projeto foi muito divertido e eu aprendi bastante sobre sites responsivos. Também evolui muito o meu conhecimento de CSS e HTML5. Se você ainda não viu o site, pode acessar em http://restaurantemadero.com.br