A revolução do Revolução Etc

Por: Henrique Costa PereiraSunday 23 September 2007 às 14:23

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!

Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!

Tags: Mobile Revolução Etc

34 Comentários para “A revolução do Revolução Etc”

# 1° Walmar Andrade Sunday 23 September 2007 às 03:23 PM GMT

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 :)

# 2° Henrique Costa Pereira Sunday 23 September 2007 às 03:23 PM GMT

Bem lembrado Walmar! Já está corrigido ;)

# 3° Marcelo Leite Sunday 23 September 2007 às 03:23 PM GMT

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.

# 4° Canha Sunday 23 September 2007 às 03:23 PM GMT

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.

# 5° Marcelo Leite Sunday 23 September 2007 às 03:23 PM GMT

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?

# 6° Pedro Menezes Sunday 23 September 2007 às 04:23 PM GMT

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.

# 7° Mark de Souza Costa Sunday 23 September 2007 às 04:23 PM GMT

Excelente trabalho, parabéns!

Saudações,

Mark Costa

# 8° Jorge Sunday 23 September 2007 às 04:23 PM GMT

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!

# 9° Mickele Sunday 23 September 2007 às 05:23 PM GMT

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.

# 10° Fabrício Marchezini Sunday 23 September 2007 às 06:23 PM GMT

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!

# 11° Suzan Carla Lopes de Lima Sunday 23 September 2007 às 06:23 PM GMT

Parabéns Henrique. Ficou excelente o seu novo Layout.
Este novo vermelho ficou show. Muito bom mesmo!
[]s.

# 12° Raphael Rodrigues Sunday 23 September 2007 às 08:23 PM GMT

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! =)

# 13° Alessandra Mazzariolli Sunday 23 September 2007 às 11:23 PM GMT

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

# 14° Rochester Sunday 23 September 2007 às 11:23 PM GMT

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

# 15° Alexandre Monday 24 September 2007 às 01:24 AM GMT

Ó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.

# 16° Camilo Monday 24 September 2007 às 02:24 AM GMT

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

# 17° Rodrigo Fante Monday 24 September 2007 às 09:24 AM GMT

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.

# 18° Erick Wilder Monday 24 September 2007 às 11:24 AM GMT

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!

# 19° Aguinelo Pedroso Monday 24 September 2007 às 12:24 PM GMT

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

# 20° Arthur Monday 24 September 2007 às 01:24 PM GMT

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

# 21° Julian Monday 24 September 2007 às 04:24 PM GMT

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!

# 22° Julio Fragoso Monday 24 September 2007 às 06:24 PM GMT

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 !

# 23° Micael Monday 24 September 2007 às 06:24 PM GMT

Curti cara, ficou bem bacana

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

# 24° Diego Monday 24 September 2007 às 06:24 PM GMT

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.

# 25° Rodrigo Fante Monday 24 September 2007 às 07:24 PM GMT

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:
http://www.pontosnoi.com/2007/09/23/fuga-de-cerebros-20-chega-vez-dos-blogs/

# 26° Carlos Monday 24 September 2007 às 08:24 PM GMT

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

# 27° Dirceu Jr. Tuesday 25 September 2007 às 12:25 AM GMT

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

# 28° Yuri Almeida Tuesday 25 September 2007 às 01:25 PM GMT

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.

# 29° Elyézer Mendes Rezende Saturday 29 September 2007 às 05:29 PM GMT

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

# 30° Eliel Monday 1 October 2007 às 02:1 PM GMT

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! =)

# 31° Lino Tuesday 2 October 2007 às 01:2 AM GMT

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

# 32° Anthenor Aguiar Saturday 6 October 2007 às 09:6 PM GMT

Sinceramente… Achei poluído

# 33° Hilder Santos Monday 8 October 2007 às 06:8 AM GMT

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!

# 34° Reginaldo Saturday 5 April 2008 às 01:5 AM GMT

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ý

Avisos
Os itens com asterisco ( * ) são campos de preenchimento obrigatório.
Todos os links inseridos nos comentários possuem o atributo rel="nofollow" para impedir com que user agents (como os mecanismos de busca) sigam os links inseridos para desestimular spammers.
Todos devem se identificar através de e-mail válido.
Os e-mails dos usuários não serão divulgados no site.
Comentários:


Assine por feed

assinantes Assine o feed do Revolução Etc

Sobre o Revolução Etc

Foto do autor Henrique Costa Pereira O Revolução Etc é o site pessoal do Henrique C. Pereira que trabalha com design de interfaces, planejamento, arquitetura da informação e desenvolvimento para web. Ele escreve aqui sobre várias coisas relacionadas com acessibilidade, web standards, tecnologia, desenvolvimento e o que mais der na telha, além de eventualmente escrever alguma coisa ou outra para o Webinsider. Leia mais.

Livros que vão colocar minhocas na sua cabeça:

  • SEO Otimização de Sites - Paulo Teixeira
  • Não me faça pensar! - Steve Krug
  • Google Adwords a Arte da Guerra - Ricardo Vaz Monteiro
  • Design para Internet: Projetando a Experiência Perfeita - Felipe Memoria
  • Sopro no Corpo: Vive-se de Sonhos - Marco Antônio de Queiroz (MAQ)
  • 250 Segredos para Web Designers - MOLLY E. HOLZSCHLAG
  • O design do dia a dia - DONALD A. NORMAN
  • Ser e o Nada - Jean-Paul Sartre
  • Apocalípticos e Integrados - Umberto Eco
  • Ergodesign e Arquitetura de Informação - LUIZ AGNER
  • The Art and Science of Web Design - Jeffrey Veen
  • Ansiedade de Informação 2 - RICHARD SAUL WURMAN
  • Criando Páginas Web com CSS - ANDY BUDD, CAMERON MOLL, SIMON COLLISON
  • Mobile Web Design - Cameron Moll
  • Sigam-me no Twitter

Me encontre

Lugares onde digitalmente eu costumo estar presente.

Anúncios

Blogroll:

Alguns sites interessantes e blogs de amigos que eu leio com frequência. Em ordem alfabética.

Pessoas que trabalham comigo:

Sites dos colegas de trabalho na Webroom.

Já trabalharam comigo:

Som que faz a minha cabeça!

Procurando inspiração? Esta é uma breve lista do que eu ouço!

  • Diana Krall - The Very Best Of
  • U2 - How to dismantle an atomic bom
  • U2 - 18 singles
  • The Essential - Bob Dylan
  • Bob Dylan - Modern Times
  • Miles Davis - Cool & Collected
  • Miles Davis - Prestige Profiles Vol 1
  • Pink Floyd - The Division Bell
  • Pink Floyd - The wall
  • Pink Floyd - Delicate Sound Of Thunder
  • John Coltrane - The Best of John Coltrane
  • The beatles - The Beatles 1