Decidi migrar para o WordPress com um dos meus sites e há uma semana estou em busca de templates para WordPress acessíveis e otimizados para os motores de busca, além de claros e agradáveis.

A pesquisa de bons templates é difícil visto a enorme quantidade de layouts disponíveis, por isso resolvi selecionar e compartilhar os melhores sites que oferecem templates para todas as exigências: profissionais, amadores, gratuitos e pagos.

Freshy 2 Theme

Um template gratuito, mas de alto nível, desenvolvido por Julien De Luca. O plugin Customize permite um nível de personalização através do painel de controle quase sem limites. Eis as características principais:

• compatível com WP 2.6 (diferentemente da versão anterior)
• 17 línguas configuradas automaticamente através do user agent do visitante
• muitos sub temas
• compatível com gravatar
• largura fixa ou fluída
• compatibilidade com XHTML
• open source

E muito mais.

É aconselhado porque o alto nível de personalização lhe permite torná-lo único em relação aos outros blogs que o adotam.

DiploD

Davide Del Monte é o autor do velho layout do blog italiano Geekissimo e desenvolve templates para WordPress e Joomla lançando-os gratuitamente com licença Creative Commons.

Entre outros indico:

• Nerino 2.0

Template para WP agradável e profissional. Widget ready, já pronto para Adsense, compatível com gravatar e altamente personalizável.

• Gekissimo

A base do velho template desse site popular na Itália, disponível para download.

• Web TV

Se você tem um site de TV via internet ou web TV dê uma olhada neste ótimo layout já pronto.

Aconselhado porque é finalmente um produto italiano a altura da concorrência global.

TemplatePanic

Arquivo de layouts de vários tipos. Se você tiver paciência de percorrer todas as páginas poderá encontrar ótimos templates, tanto minimalistas quanto mais extravagantes e alegres. Entre estes indico o iPhone Blog Theme. Eis as principais características:

• XHTML e CSS compatíveis
• Widget ready
• Gestão de artigos correlacionados automática

Aconselhado para blogs geek que falam sobre gadgets.

Web 2.0 Themes

São 6 templates para WordPress dos quais 5 grátis e um pago. Têm um estilo rigorosamente Web 2.0. Eis os melhores dos três:

• Magazine theme (US$100)
• Sodelicious 2 (free e ótimo)
• Socute (free)

Você pode visualizar e baixar os outros daqui.

Aconselhado para quem quer um blog no estilo Web 2.0.

Woo Themes

Se você procura um tema WordPress para um blog focado em conteúdos e artigos este é o lugar certo.

Foi aqui que escolhi o layout que logo testarei com o Ikaro Brasil. São aproximadamente 15 e todos pagos, a licença monousuário custa US$70. A qualidade dos templates é excelente, ideal para tentar dar um salto de qualidade com um blog de conteúdo já relevante.

Indico algumas coisas legais para a personalização dos templates:

• gestão de banners 125×125 integrada
• integração e arquivo de vídeos graças a Tubepress
• gestão de artigos em evidência
• integração do Feedburner e assinatura do feed via email automatizada
• gestão do Google Analytics integrada

Estes são os dois templates do Woothemes que prefiro: The Gazzette Edition, Fresh News Theme.

Aconselhado para dar o devido destaque a conteúdos relevantes.

Top WP Themes

130 templates gratuitos para WordPress, entre os de sempre você consegue achar alguns de ótima qualidade. Ideal se você ainda não tem uma idéia clara de como quer deixar a gráfica do seu blog: aqui você encontrará muitas propostas que vão do minimalismo mais básico até o super colorido 2.0 mais extremo.

Ótimo sistema de navegação: é possível filtrar os templates baseado nas características desejadas como número de colunas, gestão widget, largura fixa ou fluída, etc… (o template da figura é Zinmag Redux)

Aconselhado para quem ainda não sabe se prefere um blog minimalista ou psicodélico.

Revolution Wordpress Theme

Templates profissionais pagos, ideais para revistas, jornais online ou simplesmente para blogs ricos de conteúdo. São 10 temas ao todo, compatíveis com a versão 2.6 do WordPress. A licença para somente um site custa em média US$80.

Divirtam-se e não se esqueçam que a versão 2.6.X doWordPress pode causar alguns problemas com o alinhamento das imagens em alguns templates desenvolvidos para as versões anteriores. Eis como resolvê-los.

Eis um ótimo guia de Reinhold Weber para desenvolver folhas de estilo (Cascading Style Sheets, ou simplesmente CSS) de uma forma correta e otimal. O encontrei navegando com StumbleUpon, o traduzi e o repropus.

Photo Credit: urbanangel

O que evitar

• In-line CSS (especificar os estilos diretamente nas tags do texto)
• Dimensões absolutas dos caracteres
• Utilizar ápices únicos nos path das imagens
• Redeclarar valores já herdados
• Aplicar margens de células ou bordas a elementos de dimensões absolutas
• Posicionar elementos com coordenadas absolutas
• Denominar estilos e classes baseado em suas aparências

Recomendações a seguir

• Declarações do estilo CSS em uma única linha
• Comente o código
• Organize o arquivo CSS
• Indentifique a fonte, se necessário
• Simplifique a leitura do código
• Utilize um sistema comum de nomes para classes e estilos
• Elenque os estilos em ordem alfabética
• O ponto e vírgula “;” não é necessário para a última declaração
• Não é necessário declarar grandezas (px/em/%) iguais a 0
• Para as cores utilize o formato hexadecimal abreviado
• Defina as pseudo-classes para os links na ordem LoVe/HAte (Link, Visited, Hover, Active)
• Defina os elementos das margens (padding ou border) na ordem TRouBLed (Top, Right, Bottom, Left)
• Baseie o nome das classes ou das ID mais sobre suas funções que sobre suas aparências
• Aprenda a gerir as características da hereditariedade nas regras CSS
• Administre maiúsculas e minúsculas com os estilos
• Dê uma olhada nas fontes das folhas de estilo dos sites mais relevantes
• Busque inspiração dentre os gurus do design

Simplifique a sua vida quando desenvolve as folhas de estilo

• Teste os seus estilos no browser mais atual e evoluído e depois nos outros, e não vice-versa
• Quando estiver em dúvida, valide a fonte
• Na fase de desenvolvimento integre as declarações na página, quando estiver on-line importe-as de um arquivo externo
• Instale a web developer toolbar para Firefox
• Tenha a mão uma livraria de classes CSS prontas

Sabia que?

• É possível marcar classes múltiplas para elementos únicos
• Graças a isso é possível descompor um único estilo em classes que têm uma única variável ou constante, e destiná-las em sequência aos elementos da página
• Você pode se proteger dos spams com CSS
• É possível utilizar o php para tornar os estilos CSS dinâmicos

O artigo completo é 50+ CSS Best Practices and Coding Guidelines. Aconselho também 25 Sites You Shouldn’t Have Missed In 2005 do Vitaly Friedman’s Notebook. Boa leitura!

De um ótimo post de Josiah Cole eis um elenco de erros muito comuns, mas que devem ser evitados absolutamente, que são cometidos no desenvolvimento de um web site.

Redimensionar o browser do visitante

Redimensionar dinamicamente a janela do browser dos seus visitantes através do javascript pode fazer você se sentir potente e é uma das técnicas mais usadas em sites de arte e mídias em geral, mas… não o faça nunca por dois motivos: é uma técnica muito usada nos spam sites e dá ao visitante uma desagradável sensação de invasão.

Abrir o site em uma pop-up

Você tem 2 segundos para capturar a atenção do visitante que navega de um site para outro em poucos segundos. Quando se carrega uma página o usuário quer ver informação, não links para abrir o site em uma pop-up.

Esta técnica é muito usada pelos Flash developers, mas é uma técnica fracassada.

Criar versões do site baseado na velocidade de conexão do usuário

Quantas vezes deve ter acontecido a você: “Versão para conexão lenta - Versão para banda larga”. É como se você colocasse em frente à sua loja um cartaz escrito: “Loja do povão desse lado - Loja elegante do outro (mas, precisa esperar 30 segundos e usar gravata)”. O que você faria?

Aprender a usar flash e dispensar de vez os desenvolvedores

Flash é somente um instrumento que pode melhorar alguns aspectos de um projeto como a interface para o usuário, acesso às mídias, etc. Mas, não é o instrumento mais adequado para fidelizar usuários e organizar informações. Aliás, se até mesmo a Macromedia.com (desenvolvedores de Flash) decidiu não desenvolver o seu site completamente em flash é porque tem um motivo…

Tentar recriar os standards de navegação

Se em anos e anos de desenvolvimento web os menus de navegação estão no alto ou à esquerda há um motivo. A criatividade é sempre um valor complementar dos projetos web, mas tentar modificar os standards de usabilidade consolidados em anos de trabalho pode se revelar contraproducente.

Não considerar a compatibilidade com Firefox

Tudo bem, o Firefox cobre uma fatia de mercado ainda modesta se comparada a Internet Explorer (cerca de 10%), ainda que esteja em crescimento constante. Também é verdade que a compatibilidade com o Explorer cobre a maior parte dos usuários, mas Firefox é o futuro. E se um site não é plenamente compatível com o Firefox significa que foi desenvolvido por um profissional não atento e não receptivo às tendências das grandes redes que estão olhando para standards abertos e para a interoperabilidade. E isso é ruim.

Iniciar automaticamente a música

Se você usa um canal de áudio no seu site siga estes dois conselhos: não inicie a música automaticamente, dê ao visitante a possibilidade de ligá-la quando quiser escutá-la e, sobretudo, dê a possibilidade de desligá-la!

Usar metáforas e duplo sentido

Existem muitos sites bons por aí para permitir-se ao luxo de mascarar as próprias mensagens e fazer seus visitantes perderem tempo na tentativa de entender tudo o que você quer dizer. Fale claro, use poucas palavras, mas mire e faça de modo com que a sua mensagem saia da home page clara e objetiva como um tapa que pega de surpresa o visitante.