A revolução do Revolução Etc

Se você está lendo estas linhas do seu leitor de feed, dê um pulo aqui para ver as alterações que eu fiz no site. Finalmente está pronto (ou quase), estas alterações deram muito mais trabalho do que qualquer outra feita no passado, e achei o resultado compensador. E você? Bom, como foram muitas as alterações e como eu prometi escrever sobre cada passo do processo de desenvolvimento do site, este texto pretende ser apenas um resumo.

Acessibilidade na veia

O foco principal do redesign foi o usuário, como não poderia ser diferente. Eu o fiz baseado em estatísticas dos últimos 6 meses. Além das implementações de acessibilidade que agora são exploradas em alguns novos contextos. A alteração mais visível é o layout em 3 colunas, explorando melhor o espaço de 90% dos usuários que passam por aqui com resolução de tela igual ou superior a 1024px de largura. Para quem navega em resolução de 800×600 pixels pode alterar para uma folha de estilos mais adequada. E o mais importante, tudo aqui funciona sem javascript. Pode fazer teste!

O site foi testado no Internet Explorer 6 e 7, no Lynx e nas últimas versões do Mozilla Firefox, Opera e Safari para Windows. Não testei no Safari do Mac e não sei se a versão Windows é 100% igual a versão Mac. Alguém tem algo a dizer? Fiz um teste também utilizando o JAWS no Internet Explorer 6 (que é a combinação mais comum entre os usuários) e tudo parece ok . Existe uma folha de estilos com alto contraste, que ainda está inacabada mas que em breve estará finalizada. Mais detalhes sobre ela em breve. Existe também uma opção para o usuário com certo grau de miopia e com dificuldades de visão em relação ao tamanho da fonte padrão. Sendo assim ele pode aumentar o tamanho da letra. Esta implementação foi baseada no artigo “Power to the people: Relative Font Size” publicada no A List Apart , você pode ir lá dar uma olhada e ver como se faz. Usuários com algum tipo de daltonismo (deuteranopia, protanopia e tritanopia) também não terão dificuldades de navegar por aqui. Depois eu falo com detalhes como eu fiz estes testes que são bem simples.

Versão 100% Mobile

A novidade maior é que eu e o Flávio estamos testando o WURFL para gerar uma versão em XHTML-MP do site. Ou seja, não trata-se de uma transformação do site no cliente usando media handheld e sim uma transformação no servidor, que se você estiver acessando o site por algum dispositivo móvel (celular ou PDA), o WURFL identifica e serve uma versão mobile do site usando XHTML-MP. Simples assim. Seria nosso blog o primeiro blog brasileiro em XHTML-MP? Sim, eu sei. Sites já existem e muitos, mas e blogs em WordPress brasileiros? Se souber de alguém me avisem. Como eu disse, estamos “testando”. As coisas podem não estar como deveriam em alguns celulares mas em breve espero que estarão.

Outras coisas mais!

A listagem de tags e o famoso blogroll estão de volta depois de muito tempo longe. Estava sentindo falta destes espaços aqui. Aumentei a quantidade de livros indicados na lateral e coloquei uma lista de bandas que eu ouço como inspiração. Claro que eu não ouço apenas os poucos discos que estão ali, são apenas os representantes deles. Os anúncios também estão explorados de forma diferente. E a procura de anunciantes tem crescido tanto, que agora eu criei uma página chamada “Anuncie aqui“, com detalhes para quem quer investir em anúncios no Revolução Etc.

Ufa, é isso! Preciso de você para me dizer se nada parece quebrado em algum browser, se tem alguma coisa que não está funcionando, etc. Ah, como eu disse antes, a versão mobile ainda está em fase beta (beta de incompleto e não de infinitamente beta) e estamos testando. Se acessa a web pelo celular, smartphone ou PDA e quiser me dar um feedback, ficarei eternamente agradecido. Queria agradecer o grande amigo Flávio, responsável pelo PHP e pelos infindáveis testes, e que também está de site novo (eu fiz o design) com boa parte das mesmas características que o meu. E queria agradecer a todos que passam por aqui, que assinaram o feed (e os que não assinaram também), e é por causa do público cada vez mais exigente que estou sempre transformando as coisas aqui. E se você quiser um site assim com acessibilidade e uma versão mobile, é só chamar!

Sua crítica também é fundamental. Este foi apenas o resumo do que aconteceu, em breve eu volto com mais detalhes do planejamento de tudo isso. Até breve!

  • http://fatorw.com/ Walmar Andrade

    Bem legal, Henrique. Mudou, mas manteve a identidade visual. Só uma coisa: lá em cima, o que a pessoa aumenta ou diminui não é o tamanho do texto e sim da letra. O texto vai continuar com seus sete parágrafos, com seus 700 caracteres etc. A letra é que aumenta de tamanho :)

  • http://revolucao.etc.br/ Henrique Costa Perei

    Bem lembrado Walmar! Já está corrigido ;)

  • Marcelo Leite

    Esse gostei. O outro só via RSS, minha retina não agüentava mais que 10 segundos vendo aquele vermelho intenso.

    Uso Safari no Mac, tudo funcionando, nada quebrado.

  • Canha

    Henrique, tá show de bola o novo visual do site!

    Continue com o excelente trabalho que vc anda proporcionando para toda a web.

    Abraços.

  • Marcelo Leite

    Navegando pelo site, recebi 3 vezes a mensagem abaixo:

    "A script on the page "A revolução do Revolução Etc » Revolução Etc" (http://revolucao.etc.br/archives/a-revolucao-do-revolucao-etc/) is making Safari unresponsive. Do you want to continue running the script, or stop it?"

    Que script é esse?

  • http://pedromenezes.com/ Pedro Menezes

    Muito bom, velhinho. Um dia eu ainda faço um design assim. Concordo com o Marcelo, o vermelho do antigo doía os olhos. =x

    Que plugin você usa pra Tag Cloud? A referência do Text Link Ads dá dinheiro? Não recebi um centavo quando coloquei no meu…

    Um abraço.

  • Mark de Souza Costa

    Excelente trabalho, parabéns!

    Saudações,

    Mark Costa

  • http://direitoetrabalho.com Jorge

    Caro Henrique,

    Parabéns pelo novo visual (assino seu FEED e o apelo para a visita foi irresistível).

    Gostaria de uma dica (se não for segredo de estado). Eu acho superinteressante esta forma como expões os livros e em virtude do segmento do meu blog indicar livros é crucial, assim gostaria de saber se é através de plugin que apresentas os livros e CDs e, se positivo, se podes me indicá-lo.

    Muito grato e mais uma vez parabéns!

  • Mickele

    Não rolou no Opera Kestrel 9.50 alpha pra Mac, ficou estranho, parece que pegou o estilo pra mobile. Na versão estável do Opera pra Mac não pude testar.

  • http://zeroseis.com.br Fabrício Marc

    Mais uma vez, muito bom, Henrique. No momento estou num Firefox 1.5 do Linux e está tudo certo. Depois vou acessar nos browsers do Mac e te aviso caso haja algum problema.

    Parabéns pelo trabalho!

  • Suzan Carla Lopes de

    Parabéns Henrique. Ficou excelente o seu novo Layout.

    Este novo vermelho ficou show. Muito bom mesmo!

    []s.

  • Raphael Rodrigues

    Muito boa a nova versão! Funcionando perfeitamente no FF 2.0.0.7 e resolução 1280 x 800 px no Windows Vista! Infelizmente não posso testar em pda ou similares :(

    Dicas excelentes também, já tinha pensado em desenvolver algo parecido para aumentar letra! =)

  • http://www.alemazzariolli.com Alessandra Mazzariol

    Olá Henrique,

    Adorei a tonalidade que você usou no novo layout e como eu já comentei no artigo do Flávio, gostei muito das funcionalidades que vocês implementaram.

    O fato de pensarem em todos os detalhes para os diferentes tipos de usuários foi o grande diferencial que você e o Flávio tiveram com essa nova interface.

    Parabéns! Muito mais sucesso…

    :D

  • Rochester

    Nossa cara, gostei muito. Eu nao tinha problemas com o vermelho anterior, gosto de sites fortes e o vermelho fica bem marcado na memória.

    Uma coisa que sempre me atormenta é Layout Elástico X Layout estático x layout liquido. Ainda acho que o elástico seria melhor, nao sei sinceramente se a opção de diminuir a resolução foi uma boa.

    No geral gostei muito do site. Mas o melhor foi a honra de estar em um blogroll ao lado de grandes nomes :)

    []'s

  • http://www.acordapraweb.com Alexandre

    Ótimo design, embora um pouco poluído. Enfim, é o preço a se pagar por anúncios =)

    Quanto a acessibilidade, ficou muito bom no w3m (navegador via terminal padrão no debian, similar ao links2), mas há como melhorar muito ainda. Colocar links ocultos via css de "próximo post" e "post anterior" nas chamadas da página principal e uma maneira melhor de explicar que o título leva ao artigo completo tornariam tudo muito melhor.

  • http://www.camilo87.com Camilo

    Ficou bacana, usou melhor o espaço. Mas como visual, o anterior era tão bom que sacrificá-lo é um crime :).

    Algumas coisas só que eu acho que podiam melhorar:

    1) Na barra de menu, o fundo preto grande parece estranho, passando em cima do logotipo. Não se é possível uma transparência (ou uma imagem), mas acho que podia dar uma atençãozinha pra essa parte. Gostava também das flechinhas no mouse-over.

    2) Entre o número de assinantes e o ícone do feed há um 'traço' vermelho claro. Sei que é um pedaço do logotipo, mas com o banner do Bluehost no meio do caminho, esse pedaço parece estar perdido.

    3) Um pouco abaixo, em "Sobre o Revolução Etc", com o texto alinhado à direita (e sua foto também) ficou com um alinhamento meio irregular. Entendo que vai ficar algo parecido com isso, mas talvez uma editada no texto podia melhorar isso. Talvez tirar a borda do lado direito da foto também ajudasse um pouco, o que desalinha a foto do alinhamento que você estabeleceu.

    4) Na coluna da direita (OPML), o Elcio tinha dado uma dica que quem usa Bloglines podia linkar para o arquivo OPML que o próprio Bloglines gera. Não lembro do link, só lembro da dica :) e como você era um dos que mais falava bem do serviço, imagino que ainda o use e não precise ficar atualizando o arquivo de tempos em tempos.

    5) Na seção anúncios, embaixo do banner da Dreamhost, o 'mouse-over' no texto "Mais detalhes do hosting aqui" deixa o texto em preto, o que fica com difícil leitura. Você podia deixar o link da mesma forma que deixa os links no Sobre o Revolução (Cursos da Visie, Webinsider, Leia Mais) na cor amarela, sem mouse-over.

    6) Aqui no meu computador, o link para o "topo" (que fica do lado inferior direito) deixa aparecer um filete vermelho do fundo (Windows XP/Firefox/1024×768).

    Parabéns pela mudança, os outros blogueiros podiam fazer mais dessas coisas! Gostei bastante da forma como usou a borda das imagens, com um vermelho BEM escuro, dando a impressão de sombra. Legal ter o blogroll de volta, espero estar um dia por lá ;) U2 é um som que agrada muito!

    Abraço

  • http://www.fazedordesite.com Rodrigo Fante

    Bom agora sim, perfeito!

    O vermelho de fundo antes chamava demais atenção, cansava muito a vista.

    Ficou muito melhor, sem falar na acessibilidade.

    Parabéns, agora sim um layout a altura do blog.

  • http://www.flickr.com/photos/erickwilder Erick Wilder

    Bem, eu gostava do visual antigo e sinceramente a única coisa que me desaponta são as propagandas (talvez a que mais incomode é o banner da bluehost, enorme como sempre) e infelizmente (sim, digo infelizmente mesmo) criei filtros do seu site aqui no adblockplus!

    Acho muito legal a iniciativa de poder dar aos diferentes tipos de usuários a chance de acompanhar um blog/site. Seria bacana se os sites "públicos" (leia-se "do governo") tivessem uma preocupação assim.

    Navegando pelo site do Senado ou até mesmo sites menos visitados que são de responsabilidade do governo (federal, estadual ou o que quer que seja) existe um certo descaso quanto promover a acessibilidade. A coisa que mais encontro é javascript completamente obstrusivo (ou programação orientada a javascript – href=javascript:;) e fontes que ao serem aumentadas inutilizam o layout.

    Talvez isso seria um bom tema apra ser discutido aqui, já que você está sempre um passo a frente no que diz respeito a acessibilidade na web brasileira. Quem sabe discutindo apontando os problemas as empresas que adminsitram os sites não resolvem botar a mão na massa?

    Parabéns pela reforma!

  • http://www.aguinelopedroso.com Aguinelo Pedroso

    Henrique, muito bom, testei no FF e IE e está perfeito, vou testar o mobile e te dou um feedback, a identidade visual foi mantida e está bem acessivel e usável, você continua sendo um icone da Web brasileira. Parabéns

  • Arthur

    Estou acessando o site atraves do meu smartphone nokia e61 utilizando o navegador nativo e acredito que nao estou visualizando a versao para dispositivos moveis, mas sim a mesma versao que vejo no firefox no pc. A navegacao pelo smartphone ficou um pouco cansativa, mas funciona perfeitamente

  • Julian

    Parabéns pelo site novo, Henrique! Ficou muito foda!

    Um pequeno problema quase insignificante que encontrei, foi que o CSS não carregou direito na primeira visita. Deu isso no FF, IE6 e Opera, pra mim pelo menos. Depois de um refresh, volta tudo ao normal.

    De novo, parabéns, cara. Ficou tudo muito bom. Queria ter um PDF/smartphone pra acessar e ver como ficou.

    SHOW!

  • http://julioweb.wordpress.com Julio Fragoso

    cara, uma vez eu li em algum canto que todos nós devemos ter ídolos, por que além de nos tornarmos humildes, eles servem de montanha, para chegarmos até lá ao alto.

    sou teu fã, estou sempre acessando teu site/blog/o que seja, para ver coisas sobre acessibilidade e tudo mais que você escreve.

    parabéns pelas mudanças visando todos, parabén mesmo !!

    desejar sucesso pra tu, acho que nunca é demais !

  • Micael

    Curti cara, ficou bem bacana

    Soh achei meio poluido la em cima, mas ficou bem legal.

  • Diego

    Henrique passo aqui pra dizer: Sem comentários… parabéns pelo investimento em estudo e pesquisas e de se importar com o próximo, isso é responsabilidade social, estou preparando um revolução para o modelando também, espero contar com sua ajuda, mas quando for ai vai ser pra valer. Abraço.

  • http://www.fazedordesite.com Rodrigo Fante

    Nao acredito que tem gente que reclama de propagandas em blogs!!

    Povo ingrato, recebe conteudo de graça no conforto de sua casa e ainda reclama de um bannerzinho.

    Dou cada vez mais razao ao Daniel do Pontos no I nesse artigo:
    .

  • Carlos

    site ta bugado no FF e to vendo com 1152×864

  • http://www.dirceupauka.com/ Dirceu Jr.

    Legal.

    Fica ai a dica p/ vc testar mais fácil em vários navegadores:
    http://browsershots.org/

  • http://psdoyurialmeida.blogspot.com Yuri Almeida

    Então, Henrique… O novo visual está muito bom. Muito bom mesmo, mas acho que você deveria ter continuado com os ícones dos microformatos. Em um artigo – que não procurei – você fala sobre o uso dos ícones.

    No mais, gostei mesmo do visual. Inspiração pra todos nós.

  • http://elyezer.com Elyézer Mende

    Sempre achei o visual do Revolução etc muito interessante, mas este realmente me surpreendeu. Gosto muito de transparência e efeitos com gradiente.

    Está nota 10. Assim como o conteúdo.

    Parabéns.

    Abraço

  • http://www.elielcezar.com/blog Eliel

    Olá e parabéns pela precupação com a acessibilidade. A idéia do layout específico para os poucos usuários do 800×600 foi show de bola. Vou implementar no site tb! =)

  • http://linoresende.jor.br/blogagem-coletiva-quem-participa Lino

    Vi, vi e gostei. Como leio pelo RSS não vi as mudanças antes, mas agora que as vi, aprovo.

  • Anthenor Aguiar

    Sinceramente… Achei poluído

  • Hilder Santos

    Uau, Henrique…

    Cada vez mais você se supera, cara! Está muito legal o novo design, gostei pra caramba, brother.

    E o jabazinho no texto caiu como luva, hein? :)

    Mas tá é certo, quem sabe, faz o ao vivo.

    Ficou muito show, parabéns, meu velho. Quando crescer, quero ser igual a você. :D

    Grande abraço, e sucesso!

  • Reginaldo

    Muito bom seu layout, mesmo eu não tendo visto seu anterior (é a primeira vez que te visito, obrigado pela amigabilidade do site).

    Também gostaria de dar meus parabéns pelo seu trabalho! Não é sempre que vejo um webdesigner se preocupando com questões como websemântica, acessibilidade e, principalmente, conteúdo inteligente e estimulante!

    Rasgação de seda à parte, mãos à obra, meu amigo! Ainda há muito trabalho pela frente na blogosfera! rsrs

    Um abraço,

    Nepomucký

  • @lesilva

    Ficou Show de bola – pena que eu tenho o costume de ler pelo gReader e não dê pra visitar sempre a interface do seu blog – mas tá de parabéns :)

  • http://www.facebook.com/profile.php?id=100003405474233 Chofer

    Concordo com vc, mas traablho com Libras e conheco muitos surdos sinalizadores e conseguir interpretes nao e tao facil quanto vc diz. Faltam interpretes, professores, pessoas capacitadas para lidar com os surdos.