Midiatismo 7 e o framework de design responsivo Foundation

Como você pode perceber estamos com um novo visual aqui no blog. Faz pouco tempo que adotei aqui uma modificação do tema Yoko (a versão 6 do Midiatismo), que foi introduzida em Agosto de 2012, e agora já estou mudando novamente, por quê?

Existem dois motivos básicos para a introdução deste novo tema:

  • Melhorar a experiência mobile;
  • Adicionar novas funcionalidades;

O visual anterior já havia introduzido o conceito de design responsivo, uma nova técnica de construção de sites que vem chamando bastante atenção que já falamos sobre o design responsivo em um post aqui no blog, mas eu queria tornar a experiência em dispositivos móveis ainda melhor, portanto troque para o Reverie

Para quem não conhece, o Reverie é um tema para WordPress que usa como base o framework Foundation, um dos frameworks que comentamos anteriormente no post sobre design responsivo.

Este é o grid do Foundation, o esqueleto

Este é o grid do Foundation, o esqueleto

Além de um design responsivo muito bem construído, o Foundation ajuda trazendo funcionalidades interessantes que podem tornar o conteúdo mais interativo, como por exemplo, as seções. Aqui abaixo temos um exemplo, onde você poderá ver o visual do blog em abas separadas:

É claro que isto é apenas um exemplo de como a funcionalidade é. Existem outras destas funcionalidade que vocês devem ver nos próximos posts, mas você pode conhecer algumas delas acessando está página do Foundation.

Este novo visual também traz novidades em nossas páginas, que antes não estavam 100% adaptadas para os dispositivos móveis. Você pode acessar a página de autores do Midiatismo através do seu desktop ou dispositivo móvel. Da mesma forma as páginas de contato e anuncie.

Outra novidade é a nova tela inicial, que mudou bastante em relação a qualquer versão anterior do Midiatismo. Ao invés de título e um pequeno resumo, agora temos o título e uma imagem de destaque, uma clara influência dos feeds de notícias do Facebook e Google+, que valorizam cada vez mais as imagens compartilhadas.

print-screen-midiatismo-7

Este é a página inicial do Midiatismo 7

O visual foi recém lançado, portanto você pode encontrar alguns bugs e problemas, caso você encontre algo que não está certo, comente neste post ou mande um email, acho ótimo receber qualquer tipo de feedback.

Ah, apenas para ilustrar um pouco a evolução, segue como era o visual do blog antigamente.

  • midiatismo-1
    Este é um dos primeiros a ser usado, no começo de 2010.
  • midiatismo-3
    Este foi um dos temas utilizados na terceira versão do blog.
  • midiatismo-4
    Midiatismo 4, um pouco mais evoluído que os anteriores.

PUBLICADO POR

Dennis Altermann

Fundador-Editor aqui no blog Midiatismo, trabalhando com marketing digital na DuPont Pioneer do Brasil. Entusiasta e estudioso nas áreas de comunicação, cultura, comportamento e tecnologias digitais.

Novidades e atualizações, direto em seu e-mail

  • Apesar de não ser fã do Design Responsivo, neste tipo de site é a melhor opção e caiu muito bem no Midiatismo. Ótima escolha do framework. Ficou muito bom Dennis!

    • Obrigado 🙂 Apesar de ser um defensor ferrenho do Design Responsivo, também acho que ele deve ser usado com muito cuidado pois, em alguns casos, não é a melhor opção mesmo.

  • Hadi

    No design utilizado em 2010, qual era o grid utilizado? De colunas?quantas colunas? E outra coisa, a forma de utilização do grid mudou daquela época para hoje com o DWR? Obrigada.

    • Hadi, não tenho certeza se entendi a sua pergunta. Você se refere ao design do Midiatismo? Antes não usava frameworks prontos, então não usava a lógica de colunas.

      DWR seria RWD (responsive web design) mesmo?

      • Hadi

        Desculpe, me referia sim ao Design Web Responsivo no site do Midiatismo. Então, antes do responsive web, não utilizava nenhum grid para a criação gráfica do site? Ou utilizava outro tipo de grid que não o de colunas que hoje vem nos frameworks?
        Também gostaria de saber quantos brackpoints tem o site? Para quantas resoluções criou layout? E ainda, vi que utilizou o grid de 12 colunas para a versão desktop, quantas colunas utilizou para a versão tablet e a versão celular? Estou fazendo um trabalho de aula e estas informações são bem interessantes.

        • Antes desta versão eu usava uma versão modificada por mim mesmo do tema Yoko (http://theme.wordpress.com/themes/yoko/), que não usa lógica de colunas.

          Atualmente no Midiatismo estou usando o Foundation, que usa grid de 12 colunas. Atualmente tenho 2 breakpoints, 768 e 1024, o que totaliza 3 versões de layout. Pretendo melhorar o suporte a tablets, que por enquanto não está totalmente otimizada.

          Mais alguma dúvida que eu possa ajudar? 🙂