O novo site do Diário do Nordeste

No dia 13 de Novembro começamos, eu, Marcelo Glacial e Rodrigo Coifman, respectivamente, designer e programador do Portal Verdes Mares, a elaborar o novo layout do Diário do Nordeste Online, que deveria entrar no ar na data de aniversário do jornal, no dia 19 de dezembro, e coincidir com as mudanças no jornal impresso.

Já conhecíamos a proposta de reforma feita pela Cases i Associats desde o começo de novembro, quando Ildefonso Rodrigues, Diretor de Redação, a apresentou para algumas pessoas, incluindo aí Almino Loiola, Coordenador do Portal, Eduardo Queiroz, Editor de Fotografia, Henrique Silvestre e Luís Carlos Freitas, ambos secretários de redação e responsáveis pela capa, e Eduardo Freire, Editor de Arte.

O desafio de reforma no site deveria suprir algumas necessidades:

1. ele deveria ser dinâmico, ou seja, mudar ao longo do dia, com notícias atualizadas baseadas em agências e na própria produção da redação. Antes da reforma, o site meramente reproduzia a versão impressa, o que gerava um edição de vida útil muito curta, com seu ápice de leitura pela manhã e redução drástica a partir do meio-dia.
2. integrar dois sistemas de gerenciamento de conteúdo em um projeto gráfico único. O primeiro, usado no próprio Portal e contratado à empresa bahiana Netra, seria responsável por todo o conteúdo dinâmico, com a publicação mais ágil das matérias e fotografias durante o dia. O segundo, utilizado para a versão baseada no impresso e tecnologicamente limitado, continuaria a fazer a versão estática, ou seja, aquela área do site que não seria modificada nas 24 horas seguintes de cada edição.
3. manter a identidade entre online e impresso, respeitando o layout da Cases i Associats, assim como as funções de cada um dos elementos gráficos como hierarquizadores e classificadores de informação.
4. dar maior destaque à participação do leitor com o Alô Redação e comentários nas notícias.
5. criar espaços publicitários fora do chamado “espaço cego”, o local em que o leitor, por hábito, não olha no layout porque sabe não ser conteúdo editorial. É um problema comum em banners. Da mesma forma, deveriam ser criados novos espaços e ampliar o portfólio de peças publicitárias.
6. trabalhar com a tecnologia tableless.

Neste artigo, explico de forma detalhada cada uma das necessidades e as principais dificuldades do projeto. Mas antes, vou lembrar como era o jornal antes.

Antes da reforma

A característica mais marcante do antigo Diário, era sua incapacidade de mudar durante o dia. Quando foi elaborado em 2001, a intenção era manter a versão online como espelho do impresso, sem novos conteúdos nas 24 horas seguintes, até uma nova edição na madrugada. Isso gerava dois problemas:

1. o site dava a sensação de constante desatualização, já que muitas notícias publicadas envelheciam rapidamente e
2. pelo próprio dinamismo do noticiário e o não acompanhamento pelo site, o nivel de audiência caía drasticamente a partir das 10/11 horas da manhã - ou seja, havia uma migração normal de leitores para portais, que costumam noticiar em seus “últimas” o que há de mas recente.

Tecnologicamente, a edição era feita em uma solução caseira, à época considerado muito bom, mas que com o tempo perdeu sua agilidade e algumas novas demandas não poderiam ser supridas. Este sistema não foi eliminado, ainda é por ele que todos os textos do impresso vão ao ar - está suficientemente enraizado nos processos de edição para um fim rápido, embora marcado para reforma total nos próximos meses.

Teríamos que conviver com dois sistemas para fazer um mesmo site e isso não deveria transformar-se em um estorvo seja para a produção ou para o usuário final. Adianto que, se não conseguimos 100% dessa meta, ficamos bem perto dos 90.

A logo

O primeiro desafio no layout foi a logo. Na versão anterior, ela ocupava espaço considerável do editorial e era um inconveniente para os leitores com menor resolução de tela, que tinham mais de 50% da área visível tomada pela publicidade e pela própria logo.

O objetivo era reduzir a área tomada pela logo sem diminuir sua visibilidade. A solução foi colocá-la no caminho de leitura que começa na lateral superior esquerda e tende a terminar na lateral inferior direita. A redução e o novo posicionamento deram mais espaço para o conteúdo editoral sem esconder a indentificação do site.

Navegabilidade e elementos

Capa Dinâmica

A capa dinâmica é a capa propriamente dita quando se acessa o endereço http://www.diariodonordeste.com.br. Nela entrarão os destaques para o conteúdo da versão do jornal impresso e para as notícias ao longo do dia. É o ponto de partida para todo o conteúdo do site e, portanto, deve conter não só o mais importante, como também áreas separadas por tipos de conteúdos.

Ela se divide em seis elementos básicos:

Destaques principais: são as notícias mais importantes do momento ou do dia. A imagem (160×120px) é livre para ser sobre um assunto diferente da manchete. Os nomes das editorias levam para a capa de cada uma e o título leva diretamente para a matéria. Aqui, não há nenhuma limitação de editoria, pode ser qualquer uma, desde que o assunto seja relevante o suficiente para pertencer à área. Como auto-crítica, admito que ficou parecido com a mesma região no UOL, mas em vários testes, foi o formato que melhor se enquadrou tanto ao estilo quanto às necessidades de conteúdo.

Destaques secundários: logo abaixo dos destaques principais, reúnem as notícias das editorias Nacional, Internacional, Negócios, Jogada, Cidade, Política, Polícia, Opinião e Regional. Cada editoria tem seu próprio bloco, com chamadas principais e secundárias. O destaque principal de cada bloco pode ou não conter uma imagem (65×49px). Nos bastidores, costumávamos chamar a “área dos conteúdos serios”, para designar a separação das notícias de entretenimento, arte e cultura. Os filetes que separam cada bloco, assumem a cor das editorias, assim contemplamos a leitura do projeto gráfico do impresso para o online sem deixar o layout por demais poluído.

Destaque especial: toda a lateral direita do site está reservada para conteúdos diferenciados do miolo, ou seja, são matérias especiais, de entretenimento, arte, cultura, Alô Redação e colunistas. A primeira área, chamada de “Destaque especial” é reservada para reportagens, entrevistas ou matérias com multimídia. Aqui, não existe escolha padrão de editoria, pode ser qualquer uma. A imagem tem formato e tamanho variáveis.

Entretenimento, Arte e Cultura: a primeira coluna tem editorias de entretenimento reservadas, são elas: Zoeira, Eva, Gente, Automóvel, Turismo e Infantil. Mas permite inclusões, dependendo da matéria, de outras editorias. Talvez a melhor forma de definí-la seja classificá-la como a coluna da diversão, do humor e das fofocas. A segunda deve trazer o Caderno 3, Cultura e Opinião, e sua melhor definição é o entretenimento e a cultura aprofundadas.

Essa separação tênue será um exercício diário de critérios, mas para exemplificar: se tenho uma notícia sobre a estréia de um filme nos cinemas, isso é entretenimento e fica na primeira coluna; uma entrevista ou crítica sobre o filme vai para a segunda. A primeira é curta, a segunda é longa. A primeira é fofoca, dica, promoção, a outra é constatação.

Outro exemplo: se no caderno de Regional, que nos dias normais trás o cotidiano do interior do estado, temos uma reportagem sobre a vaquejada, com suas origens, sua influência nos costumes locais e personagens, ou seja, sua história e sua sociologia, temos um material para a segunda coluna, é cultura, não apenas entretenimento; mas, uma matéria sobre o festejo (com vaquejada) do fim-de-semana, é para a primeira coluna, é a diversão do dia.

A imagem do destaque, em ambas, tem 130×97px.

Alô Redação: é uma das formas de valorizar a participação do leitor. O Alô Redação é um serviço do Diário do Nordeste em que o leitor pauta o jornal, por carta, e-mail ou telefone. Este bloco é dedicado a mostrar este conteúdo.

Colunas: listagem de seis colunas. A seleção é aleatória, sempre que o leitor carregar a página, novas colunas são mostradas. Cada um dos destaques tem a foto do autor, quando for o caso.

Ainda hoje, publico mais informações sobre o layout, para a leitura não ficar chata nem o post muito longo.