Tableless - Desenvolvimento inteligente com Padrões Web

06/12/2007
Geral

Tableless.com.br – The Wonder Years

No dia primeiro de Janeiro de 2008, o Tableless.com.br faz 5 anos de idade. Por isso, uma reformulação total do site era bem vinda. Essa reformulação não será rápida e não envolve apenas a constante mudança do layout, mas também …

Por


No dia primeiro de Janeiro de 2008, o Tableless.com.br faz 5 anos de idade. Por isso, uma reformulação total do site era bem vinda. Essa reformulação não será rápida e não envolve apenas a constante mudança do layout, mas também a filtragem de todo o conteúdo contido no site.

Durante muito tempo, principalmente no começo do site, o tableless.com.br foi apenas um blog. Conforme o tempo foi passando, o site foi se transformando sendo influenciado pelo mercado e pelas tendências da comunidade. Conforme a necessidade dos desenvolvedores foi mudando, o site ia se adaptando e o conteúdo era criado baseando-se nestas transformações. Por causa disso, muito conteúdo lixo foi criado e uma das metas é filtrar esse conteúdo e deixar o que realmente é interessante e útil.

A missão do site até agora era de evangelizar os desenvolvedores web. Hoje, essa missão mudou um pouco. Como a maioria dos desenvolvedores já sabem ou pelo menos ouviram falar – ainda assim muitos se fazem de surdos – sobre Padrões Web, o mais interessante a partir de agora, seria indicar e mostrar as melhores práticas de desenvolvimento usando Padrões Web. E sim, do meu ponto de vista, essa é a parte mais divertida.

Pra quem não sabe, o site é baseado em WordPress. Este foi um dos motivos pelo qual eu consegui implementar, sozinho, em 8 horas (começando as 10h00 da matina, e terminando as 18h00) um site do tamanho do Tableless.
Fiz o design no começo desta semana. Hoje implementei XHTML e CSS e adaptei quase totalmente um template do WordPress. Quer saber o segredo? Dá uma olhada aqui.

A próxima grande mudança será o logo. O logo atual não significa nada e mesmo assim ele é usado desde o nascimento do site. Acho que está mais do que na hora de mudar.

Nem preciso dizer que sugestões para melhorar o site serão bem-vindas. Como estou experimentando uma série de novas idéias, sua cooperação vai ser essencial.

E se você ainda acha que todo site Tableless tem cara de blog, seu lugar não é aqui.

PS.: Estou usando um bocado o Twitter. Quem está no twitter sabia da mudança do layout a mais ou menos 1 semana adiantado. Meu profile. E tem feed. ;)

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • http://dgmike.wordpress.com DGmike

    Primeiro!
    Acabei de chegar para ver o novo layout do tableless… e minha impressão…
    Ainda não me acostumei… vamos esperar… >.<

  • http://dgmike.wordpress.com DGmike

    Agora um comentário mais sério… e sobre o assunto. Me senti meio perdido pea falta de um menu (apesar de ter uma “barra lateral destina a isso em branco”), mas é inovação é o lema do tableless.
    A mudança do logo to tableless sou contra, a menos que seja sutil, toda e qualquer marca deve ter sua identidade, baseando-se em alguns atributos.
    Bom, minha opinião seria deixar o simbolo mais juvenal, mas não mudar em si. Agoro as cores vermelho e preto que compõe o logo. Lembram-me os sandinistas de minha terra natal que diziam que o vermelho é o sangue e o preto a força dos sandinos. Enfim, não vem ao caso. Mas isso é apenas uma singela opiniao.

  • http://dgmike.wordpress.com DGmike

    Talvez colocar algumas ferramentas como comunicação entre os usuarios, ou chamadas a artigos na barra lateral (mas isto deixaria com cara de blog… esquece), que tal? Essa barra vazia me incomodou…

  • http://rufspace.com Fellipe Cicconi

    Que tal deixar que os usuários coloquem as tags que acharem pertinente em cada post?

    Gostei do layout. Valew a pena o trabalho :)

  • André

    Maravilhoso o layout, quanto a navegabilidade é apenas questão de costume.

  • http://www.oiah.com.br Fabio Nobre

    Achei o site simplesmente lindo. Porém acho que ficou mais dificil de achar a informação.
    Acho que a beleza estetica foi colocada em primeiro lugar, deixando de lado o mais importante que são os textos. Achei que foi dada pouca enfase ao texto da pagina principal. Já a pagina secundaria, onde o texto realmente aparece, acho que está muito bom.
    Bem, é minha opnião… :D

  • http://tableless.com.br/ Diego Eis

    Legal galera.
    Estou anotando as sugestões e vou implementando devagar as soluções.
    Mas ainda quero mais sugestões… Mandem bala.

  • http://blog.copjr.info JoaoJose

    O site ficou muito mais limpo (detalhe para ausência do adsense), estranhei um pouco essa barra lateral branca e ausência de menu, mas acho interessante a idéia.

    Notei alguns detalhes, como os números de comentários nas paginas que listam conteúdo (categorias e tags). Outro detalhe, novamente nas páginas de listas, quando o post utiliza o mesma tag de cabeçalho do título, não fica claro onde é um novo post ou somente um cabeçalho do texto. Mais um detalhe (acho que não revisou este template), os links próxima pagina e anterior também não parece compor o design.

    Por hora é isso.

  • http://blog.copjr.info JoaoJose

    Mais uma coisa, é impressão minha ou quando da dupla quebra de linha, aparece uma linha escura no meio?

  • http://crix.info Cristiane Bicca

    Então… vi ontem o novo layout… pra ser sincera eu me perdi pensei que tivesse vindo ao lugar errado..Porém, acho que é só questão de costume mesmo a navegabilidade.. Claro que senti falta de um menu (esse espaço ai ao lado é para isso?)
    Mas está lindo! Tableless :) ‘Beautiful, is true’

  • http://dgmike.wordpress.com DGmike

    Só pra descontrair… :D
    O tableless vai continuar com o mesmo layout azul e apertando as teclas J e K eu navego pelos posts. O chato é que fica aquele tal de google no topo do site.

  • Rafael

    Blogbits morreu de vez?

  • http://ianliu.art.br IanLiu

    Gostei da página inicial, mas não muito da visualização dos artigos.
    O que eu não gostei muito foi a mudança brusca de cores entre e página inicial (tons escuros) e esta (branca). Mas isso deve variar de pessoa para pessoa…
    Quanto a navegação, eu não senti muita diferença porque eu não usava o menu :p

  • http://www.rdesigner.ppg.br Rubens Ayres

    Achei bonito e clean o layout. Talvez um pouco clean demais, poucos elementos… Enfim…
    Com certeza o espaço vazio à direita só pode ser para o menu e outras funcionalidades. Não acredito que terei que voltar à pagina inicial toda vez que quiser ir para outra seção. Menu é item básico de navegação, de usabilidade. Fora isso, meus parabéns!

  • http://jaderubini.wordpress.com Jader Rubini

    Gostei da mudança. O que me incomoda também é esse espaço branco aqui do lado. Talvez um menu com posts relacionados (ao invés de colocá-los ao final do post) ajudaria a dar uma amenizada.

    E, por favor, cadê o :hover dos links?! É importante informar ao usuário quando e qual link está sendo apontado. Um exemplo da confusão que isso pode trazer é na página principal, nas categorias do post em destaque. ;)

    No mais, ficou MUITO bom.

  • http://gaigalas.net Alexandre

    Parabéns. É o primeiro layout do Tableless.com.br que eu acho realmente bonito!

    Fiquei um pouco assustado com os posts antigos repipocando no meu RSS, mas já passou.

  • http://futuroprofessor.com.br André

    Diego, sempre adorei e acompanhei o site, mas sentia uma dificuldade em encontrar conteúdo, muitos links quebrados, etc. Acho que essa reorganização interna é importantíssima, e um ponto essencial é tornar o conteúdo fácil de localizar e de acessar.
    O layout já está muito bonito!

    Ah, outra sugestão é tirar os links do del.icio.us do RSS, ou prover um RSS sem isso. Pra ser sincero nunca abro os itens do RSS com links de del.icio.us, e isso só polui =P

    Abraços

  • Bruno Francisco Santos

    O site está muito bonito e muito simples. Ele alcança os objetivos facilmente: passar informação.
    Eu achei muito legal o texto alinhado à direita deixando essa coluna lateral esquerda, e acho também que não tem que haver nada nela. Fica uma ‘área de suspiro’ no site, melhorando até a leitura das pessoas por não ficar tão poluído, além do que, lembra o logo do tableless com aquelas duas colunas alinhadas na direita.

    Eu acho que voce Diego, mais do que ninguem sabe que inovar é o que há. E esse novo layout foi uma ótima inovação. Não foi só o layout que você mudou.. voce reestruturou o site e criou um ‘novo modo de pensar’, tirando o menu e algumas coisas ‘tradicionais’ mudando a experiencia e passando a informação que deseja aos navegantes de um modo suave e bonito :D .

    Abraços!

  • http://blog.lucas-ts.com Lucas TS

    A pagina esta muito bonita, muito mesmo, parabens.

    Totalmente KISS. Adorei

    Dica, que tal uma das colunas ser uma especie de planeta?

    agregando artigos em outros sites/blogs, acredito muito nisso, ainda mais no site brasileiro de tableless, que mesmo que tenha sido uma iniciativa de voces, Diego e Elcio, tornou-se maior, dar esse lado mais comunitario, seria muito legal.

    Mas, mantenham o controle, senao vira putaria.

  • http://silas.theducks.com.br Silas Ribas

    Salve,

    A página de Início está muito boa, parabêns. Agora a página dos artigos está algo diferente, meio cru.

    Valeu!

  • Bruno Francisco Santos

    Eu acho que toda semana deveria ter uma ‘enquete’ para as pessoas escolherem sobre o que voce vai falar um determinado dia da semana.. por exemplo escolher entre ‘hacks de css’ ou ‘ferramenta de controlee de versão’
    aí o assunto mais votado ganha um post com todas as explicações pertinentes.. seria um ‘conteúdo participativo’ [;)]

  • http://dgmike.wordpress.com DGmike

    Falando em RSS (o andré tocou no assunto) eu já falei no meu blog inclusive, por que não encontrei o RSS do tableless, sei que mudou porque eu assino desde que me falaram do bloglines.
    Vi que foi disponibilizado o RSS dos comentários de cada artigo, mas sinto falta dos outros dois rsss (rss com s no final para fazer o plural): Feed do site e Feed de todos os comentários, eu não gosto de ter que voltar post por post para saber quem comentou depois de mim, se eu quiser continuar o debate eu venho no tablelles através do link dos comentários e posto direto no assunto.

  • http://dgmike.wordpress.com DGmike

    AE, beteu na caxola agora: na lateral, se for usar alguma coisa, por que não os links (aleatórios ou não) da comunidade ou do client-side ou do codeshow (videos).

  • http://www.juniovitorino.com Junio Vitorino

    Gostei do novo layout, está meio fora do padrão o que é sempre divertido, pois podemos perceber o quão podemos ser diferentes na hora de criar. Parabéns Diego pelo novo Tableless, espero só que ele não fique tanto tempo sem atualizações como anda ocorrendo né?? Hehehehe, abraços.

    Ah!! Senti falta de mais botões de navegação nas páginas de leitura dos posts, acho que isso poderia ser implementado.

  • http://www.i9mais.com Izac Cavalheiro

    Ficou muito bom o novo layout, leio todos os artigos do Tableless.com.br. Mas, acho que a mudança do layout foi muito drástica.

    Parabéns, vamos nos acostumar agora né ;)

  • http://aiatola.net Micael

    Diego,

    Acho muito legal a ideia de mudar o conceito do site para boas práticas. Acho que falta isso atualmente.

    []s

  • http://www.zamana.eti.br RZamana

    Visu novo…

    Gostei…

    Fiquei sabendo pelo Élcio, achei muito legal o novo visual, só sinto falta mesmo do menu…

    A imagem randomica na frente do site ficou 10… Seria sempre uma nova sensação a cada refresh.

    Esperava algo com uma cara mais natalina, afinal… tá pertinho…

    Abraços e Feliz Festas de Final de Ano

  • http://www.web2ponto0.com.br Inside

    Como disse no Twitter, curti bastante a inovação do layout, só falta se acostumar agora. =]

    Ah, e dá um jeito nessa barra branca aqui do lado ;)

    []‘s

  • http://www.tyasske.com Tyasske

    Gostei bastante do novo design. Leve, limpo e mais fácil de navegar. Usar letras grandes ao invés daquelas pequenas foi uma escolha bem acertada.

    Gostei da navegação e da página inicial. Difícil encontrar alguém que use tão bem os recursos de dinamismo do WordPress pra deixar o site com essa cara única.

    Achei o espaço negativo (branco) ao lado dos posts legal, ao contrário da maioria. Só faria uma coisa: Colocaria um link do tipo âncora no topo da página para se chegar mais rápido à navegação, já que tem gente que pode se perder nessa parte.

    Ah, falando em navegação, aqui no Firefox a navegação nas páginas está duplicada. Gostei muito!

  • http://designcoletivo.com/ Camilo Oliveira

    Podia colocar um text-decoration:underline nos nomes de quem comenta e tem site.
    Desse jeito não dá pra diferenciar quem tem e quem não tem sem passar o mouse em cima.

  • http://www.tyasske.com Tyasske

    Agora que li sobre as idéias de um novo logotipo. Creio que não seja muito interessante trocar não. Esse logo, mesmo não significando nada, é a visão que o público tem do tableless.. acho que seria ruim trocar. Se for pra fazer alguma alteração, eu só trocaria algum pequeno detalhe.

    Por exemplo, em versão.. err.. 2.0, dava de fazer assim: http://www.tyasske.com/upload/tableless2.png

    Mas acho que não deveria ser trocado tudo não.

    Ah, e o “Gostei Muito!” do meu comentário acima não diz respeito ao menu duplicado como pôde parecer, rsrs.. é sobre o site como um todo. Agora fui.

  • http://assuncaojr.net Assunção Jr.

    Bom, não poderia deixar de opinar. Particularmente não gostei, acho que perdeu o foco de ‘blog’, mas isso é datalhe; segundo a caixa de busca tá ali perdida, que tal colocar ela no meio – antes das 3 colunas?

    Mais uma: a coluna lateral branca na leitura do post ficou esquisita, dá a sensação de que o layout não carregou direito ou que não foi codificado direito. Quel tal preenche-lo com alguma outra coisa???

  • http://enlabs.net/blog/ Valdir Silveira Junior

    Diego, já acompanho o Tableless praticamente desde o começo, e só posso dar os parabéns pelo excelente novo layout. Gostei do bloco aí de baixo, da organização do conteúdo em “outros artigos” e “aprenda”. Para a coluna em branco do lado esquerdo, poderia ser colocado o bloco dos comentários, ao invés do tradicional “abaixo do post”. Em geral, tá ótimo.

    Grande Abraço

  • http://www.tyasske.com Tyasske

    Eu acredito que a busca está no melhor lugar possível. Nada contra sua opinião, Assunção Jr., até porque esteticamente seria legal ter a busca logo acima da navegação. O problema é que isso causaria um probleminha de usabilidade e até de acessibilidade, já que a busca é um dos fatores mais importantes de um site desse porte.. acho que quanto mais acima ela estiver, melhor.

    Me corrijam se eu estiver errado.

  • Ivan

    Gostei.

    Realmente ficou mais limpo.
    Ótima a idéia do menu ficar na parte inferior do layout, abaixo do post. A pessoa lê o texto, ou passa correndo e dá de cara com mais opções…
    A lacuna branca poderia ser removida, já que neste momento não tem função. Mas não está me incomodando não.
    Parabéns.

  • Paty

    Olá!

    Eu concordo com a Cristiane Bicca, eu tive a impressão de ter entrado no lugar errado, num site que não tinha nada a ver com o assunto.
    Também senti falta do menu lateral.
    Bonito está, mas a imagem inicial não relação com o contéudo…

    \o

  • http://www.portal3lagoas.com.br Paulo Jorge

    Sempre que posso eu leio os textos aqui do Tableless estou montando meu site novo apartir das idéias tiradas de muitos textos que li aqui o site está show de bola Parabéns mesmo!!!! Agora tenho duas perguntas porque não dá certo fazer cadastro no forun e onde vc arruma essas imagens que você usa todas show de bola valew abraços e continuem nos ajudando a melhorar nosso trabalhos com as super dicas que são colocadas aqui no site

  • http://zoopnews.com Nil Tojal

    Ola Diego quero dizer que é a segunda mudança de layout do seu site que eu estou acompanhando.
    Cara eu achei demais… vai mudar alguns conceitos de layout que sempre estamos vendo por ai…
    Eu sempre gostei de layouts clean… fazer um site clean e deixa-lo funcional é um trabalho arduo mas que compensa e muito….

    Eu to preocupado com a parte de patrocínio como vc vai resolver onde ira colocar….
    .
    O fato de o textos dos posts estar a direita do layout e não ter nada ao seu lado tirando o foco do texto achei o maximo….

    E gostei muito tb das mudanças de imagens a cada refresh da pagina.

    Agora questão do logo eu sou contra.. logo é um patrimônio muito frágil de qualquer produto ou instituição, não deveria mudar, ja se tornou um simbolo conhecidos por muitos como sinônimo de tableless, como o google é busca e assim vai.. sou contra…um caso diferente é o logo da Vale Rio Doce que todos so o identificavam como Vale então foi legal a mudança do logo deles para terem maior aceitação de marketing… ok abraços… falei de mais!!! rsrs

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

    Nossa, revolução…. muito bom o layout, quebra alguns paradigmas e a mesmisse., traz alguns conceitos novos e inovadores, muito bom….

  • Diego Bittencourt Muniz

    “Conforme o tempo foi passando, o site foi se transformando sendo influênciado pelo mercado e pelas tendências da comunidade”

    Bela frase (apesar do “influênciado”, rs). Muito bom saber que um blog que eu sempre acreditei está voltando com posts de verdade. Parabéns, Diego Eis.

  • Bruno Francisco Santos

    É só no meu, ou as 3 colunas inferiores estao ‘sendo comidas’ pela imagem do ródapé ? eu aumentei o tamanho do texto e vi que tem até um select pra ver qual o mês escolher..
    de qualquer forma, testei no ff no ie7 é tá acontecendo a mesma coisa.. agora no ie6 tá normal!! :S

    minha resolução é 1024×768

    se quiser providencio até os screenshots ;)

    abraços

  • Murilo

    Ficou muito bonito , mais a usabilidade deveria ser avaliada!

    ;)

  • http://www.brunozampoli.com.br Bruno Zampoli

    O site está com um ar bem “clean”, sairam do aspecto wordpress e estão com uma aparência mais séria, evoluida.
    Achei desnecessário esse espaço branco a esquerda, isso me incomoda. Tentem equilibrar os elementos. O menu lá em baixo também me trouxe um certo desconforto, pois nem sempre quero rolar a página até em baixo para acessar todo o conteúdo; um menu a esquerda, bem estilizado, seguindo a rolagem do site seria bacana, claro, sem interferir na leitura, nem no restante do site. É isso.

    Abraço.

  • Marcus

    Cara, ficou massa..
    Como o murilo comentou, a usabilidade deveria ser bem avaliada..

    As paginas de post não ficaram mto legais..

    Ah e um pedido/opinião.. bota uns sumarios para ficar mais facil navegar entre as dicas e os tutoriais.. sei la.. algo mais objetivo. Talvez eu não esteja navegando corretamente não sei..

    no mais, ficou bonito pra c!$%@$!@%$!

  • Júlio Brazão

    Antes era um blog, agora é o quê?

    Simplicidade, SIM!
    Praticidade, SIM!
    Repetitividade, NÃO! (agora todos os sites são iguais, que falta de criatividade!)

    São meus únicos comentários sobre o site…

    Ab’s!

  • Alex

    Cara a interface ta bonita, bem legal. Curti os efeitos no menu e a idéia do ultimo post no topo tmb é show.
    Só está bugado no IE (Pelo menos na versão 7).. O combo com os meses nao aparecem e a transparência no fundo do box preto tmb não rola no IE. Claro q 90% dos usuarios do Site usam FF. Mas isso é moleza de fazer pra vc, nao custa dar o toque.
    Separar o conteúdo por categoria vai ser legal, não sei se esse menu é definitivo mas..acredito que voce ainda esteja pensando nisso.
    Cara.. é muito trampo que você tem pra fazer.. eu imagino que achar todos os bugs é impossível pra um cara só em pouco tempo (Se quiser, por R$ 200,00 a hora eu dou uma força pra voce =P hehe).
    Parabens e boa sorte na migração… Curto muito as informações no site!!

  • http://zoopnews.com Nil Tojal

    Uma coisa bacana a se pensar em fazer é sempre mostrar so os ultimos comentarios para num precisar descer tanto pagina e um botão para ler os comentarios anteriores..ok

  • Rodrigo

    Entrei para dar uma olhadela nas notícias e me deparei com um novo layout. Gostei muito e não encontrei nenhum problema em navegar pelo site. Parebéns!

    ps.: a dica do Nil Tojal é legal (desculpe a rima tosca)

  • Assunção Jr.

    @Tyasske
    Eu acredito que a busca está no melhor lugar possível…

    Acho que não expliquei direito, me refiro a caixa de busca na página inicial, pra mim o local onde ela está situada não legal; já nas páginas internas ela está no melhor lugar.

    @Tyasske
    …O problema é que isso causaria um probleminha de usabilidade e até de acessibilidade

    Bom, problema de usabilidade já está acontecendo no local onde está, o que sugeri é que ela fosse melhor posicionada, na meio da página para não estragar o design e melhor ela ficaria se fosse para o topo.

  • http://www.hospedagem.infostaclara.com mateus giroldo

    Bom dia, muito bom o layout novo, inspirador!!!