O novo tema do RBtech em detalhes

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Hoje, como anunciado em nossa página do Facebook, fiz a mudança do tema aqui do site. Já fazia algum tempo que um novo tema estava nos planos, mas por razões diversas e adversas ele sempre era deixado de lado.

Porém durante o feriadão, os planos sairam do papel e se transformaram em código fonte :) e aí está nosso novo tema (ainda com pequenos bugs) instalado e configurado. Neste post, assim como fiz há 2 anos atrás, vou explicar um pouco sobre o que eu queria com tudo que foi modificado no site.

Explicando o multisite

Pra quem não sabe, o RBtech não é apenas um blog, mas uma rede que roda na plataforma do WordPress. Isso é bom e ruim: bom para gerenciar vários sites em um mesmo painel e com dados centralizados, mas péssimo para desenvolver (principamentel temas).

Não que seja difícil fazer um tema para multisite, mas é preciso muito mais trabalho para chegar ao mesmo resultado de um simples tema para um blog. Em virtude disso, temos um tema para o site principal (RBtech.info) e outro para cada site da rede (Criação, Consultoria, Developer e Hardware). Acho que deu pra entender porque ficamos dois anos sem mudar de tema, ou não??

Objetivo do novo tema

Quando comecei a planejar o tema, eu queria basicamente duas coias: um tema responsivo e que destacasse o conteúdo recente.

Responsivo pois o número de acessos via dispositivos móveis está aumentando exponencialmente. Destaque para o contéudo pois eu tenho poucos segundos para convencer o leitor a abrir um post, e as imagens ajudam muito neste ponto.

A partir desses dois objetivos básicos, outras coisas foram surgindo e sendo adicionadas ao projeto, vejamos as principais a seguir

Topo e menu de navegação

No topo do site, além do menu principal de navegação que permaneceu muito semelhante ao anterior, foi criado um menu dropdown ao lado do logo para facilitar o acesso aos demais sites e setores da rede RBtech. Ao clicar no sinal de + ao lado do logo, as opções são mostradas:

mais sites

Destaques da rede

Na página principal do site, os três posts mais recentes de toda rede são mostrados com o devido destaque. É praticamente impossível alguém acessar o site e simplesmente ignorar o conteúdo exibido no início da página.

destaques rede

Logo abaixo das novidades, foi incluído um formulário de inscrição na newsletter do site. Quem vive de internet sabe a importância de ter uma boa lista de emails, com pessoas interessadas no que você produz.

Como a seção de novidades chama bastante atenção, o formulário indiretamente acaba ficando em evidência também.

newsletter

Mais atualizações

Logo abaixo do formulário, temos uma seção com mais 4 posts recentes da rede toda e também um anúncio publicitário, afinal de contas eu preciso garantir o leite das crianaças...

mais novidades

Logo abaixo foram inseridos ícones que ilustram cada site da rede, fazendo com que a pessoa que rolou a página sinta-se estimulada a visitar um site de seu interesse após ver as principais novidades mostradas até então.

sites continuar

Pra fechar a parte central da página, temos os tópicos mais recentes do fórum e outro anúncio na lateral.

novidades forum

Rodapé

Pra finalizar a página principal temos o rodapé (que é padrão para todos os sites), nele são exibidos um menu de navegação secundário com algumas páginas básicas e ícones para as redes sociais das quais fazemos parte.

rodape

Os sites da rede

A home dos sites muda um pouco em relação à página principal, pois ao invés de mostrar três destaques, apenas um post é colocado em evidência. Logo abaixo o formulário da newsletter se repete assim como na página principal.

destaque site

Depois desta seção, a listagem de posts segue um padrão que todos já estão acostumados a ver nos blogs, incluindo uma paginação para facilitar a navegação. Se você navegar para uma página seguinte ou uma categoria, por exemplo, verá que o post destacado não é mais exibido, deixando assim que o padrão dos blogs persista.

Sidebar

A barra lateral é constantemente modificada para exibir conteúdo relevante em cada situação. O único widget fixo é o formulário de busca, no mais, o conteúdo é sensível ao contexto.

Quando você está na home de um blog, são mostrados os dez posts mais populares da rede, mas quando você navega para outra página são mostradas as últimas atualizações. Nas páginas estáticas nenhuma publicidade é mostrada, enquanto nas demais são vinculados anúncios que podem inclusive ser fixados ao rolar a página para baixo.

O formulário para inscrever-se na newsletter também não é mostrado na home para não haver duplicidade de conteúdo.

A exibição dos posts

A página de posts sofreu grandes alterações, desde o título do post até a seção de comentários. Pra começar, logo abaixo do título um anúncio divide espaço com as informações do post, como data, categoria, etc, para somente depois o conteúdo propriamente dito ter início.

Os textos ficaram mais espaçados e com fonte mais suave, facilitando a leitura. Os vídeos embutidos são responsivos, bem como as imagens (ao menos na teoria era assim).

Depois do post temos botões de compartilhamento em redes sociais, mais um anúncio e posts relacionados. Mais abaixo as informações do autor e a seção de comentários com exibição personalizada e bem diferente da antiga.

Pra finalizar

Bom, se você leu até aqui, primeiro deixe-me dizer: MUITO OBRIGADO. Mas talvez você está se perguntando: por que falar tudo isso sobre um tema novo, não é só mais um tema?

Tudo isso pra que você entenda o seguinte:

  • Se você é nosso leitor: eu não fiz "mais um tema", eu fiz um tema pensando em tornar sua experiência melhor e mais satisfatória.
  • Se você é desenvolvedor: tente entender porque cada coisa foi colocada onde está, e use isso como experiência em seus próximos projetos.
  • Se você é blogueiro: tente entender as estratégias que se escondem por traz de cada seção do blog e use-as a seu favor.

Caso tenha sugestões, basta comentar este post. Abraço!

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 14 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Sidney Jr. Miranda comentou em

    Ricardo, venho acompanhando o evolução do Rbtech há um bom tempo.
    Gostava muito do último formato do blog, porém ele bombardeava o usuários com muitas informações.
    Neste novo formato pude reparar na simplicidade do layout e atenção totalmente voltada para o conteúdo, que é o carro chefe!

    Ponto negativo, se eu não lê-se esse post, jamais saberia que tinha um menu na logo do site.

    Parabéns pelo excelente trabalho desde sempre!

    Responder
  • Adilson Rumão comentou em

    Apesar de achar que ficou bem simples comparando ao Layout anterior, gostei pois agora consigo acessar via celular. Nesta parte ficou show de bola. Parabéns Ricardo.

    Responder
  • Junior Eberhardt comentou em

    olá Ricardo, achei muito importante você ter mudado o tema do site, afinal fazia muito tempo e aquele layout na minha opinião não era muito bonito. gostei do conceito que você trouxe com o novo tema, mas sinceramente eu não curti muito, me passou a sensação do site estar desorganizado, sabe, bagunçado mesmo, tem coisas a destacar claro, o menu ficou legar, a barra lateral informativa e o rodapé ficou impressionante, mas o design do conteúdo ficou estranho, meio que fora de proporção... é apenas uma crítica construtiva, não leve a mal por favor.... abraço e até.

    Responder
    • Entendo, é que todos estamos acostumados a ver blogs com conteúdo de aproximadamente 65% da tela e barra lateral de 35%. O proposto aqui é justamente deixar mais espaço para o conteúdo, e sei que toda mudança causa sensações estranhas no começo.
      Críticas aceitas com certeza!

      Responder
  • felipemantoan comentou em

    Sem querer ser chato ('o que é dificil'), em uma tela de celular o resultado é impressionante, porém numa tela de 1366/1360 fica um pouco estranho, botões relativamente grandes (com fontes pequenas, mas eu acho que é uma questão de gosto), mesmo assim ficou muito bom. Parabéns ! (Iniciativa interessante limitar o uso de navegadores inferiores ao IE 9 [há propósito alguém já pressionou F12 nele? { IE9 }] )

    Responder
    • Concordo que os botões podem ter ficado um pouco grandes, mas discordo da fonte pequena.
      Também tem a questão "mudança", há dois anos tinha um tema totalmente diferente, é difícil acostumar com algo novo do dia pra noite (todos somos assim).

      Responder

Deixe seu comentário