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

← Older Comments
  • http://tcelestino.com.br/blog Tiago Celestino

    Eu curti, ficou bem mais legal do que a antiga versão. Está com um visual mais clear. :P

  • http://www.tyasske.com Tyasske

    @Assunção Jr.
    Sorry, pensei que se referia à essa página. Eu realmente esqueci da inicial quando respondi.

    No caso da página inicial, concordo com você.

  • Gilliam

    Ai Diego curto muito o tableless…fifou show muito lindo e pratico, mas faltou uma coisinha para dar nota 10 ao site…Um video aula da implementação do site (rsrsrsrs….). Parabens caka ficou muito bom…

  • http://guilhermemattos.wordpress.com Guilherme Mattos

    Quando eu digitei a url do tableless.com.br, pensei que tinha entrado no site errado.

    Gostei muito do novo layout, muita criatividade da sua parte, agora só falta eu me acostumar como posicionamento do menu.

  • http://www.baudovalentim.com/ Fábio Valentim

    Parace que isto esá virando uma tendência na blogosfera. Blogs de sucesso estão se transformando em websites de nível profissional. Sucesso com o novo layout.

  • Elias

    Completamente redundante…
    vc que diz tanto sobre acessibilidade e talz, vem e me faz um novo “template” adaptado para resoluções maiores de 800×600….

    vc pode até vir falar sobre seu publico alvo e tudo mais… mas não se esqueça que discartar usuários dessa forma não é correto em hipotese alguma!

    falta estudar um pouco a arquitetura da informaçãoi e seus fundamentos!

  • Lucas

    quando acessei a home..UAU!!
    bem acessei a home e esse post só..e já estou escrevendo

    depois quando voltei para a home apareceu outra imagem..mas a qualidade estava ruim….dava para ver aqueles quadrados ou retângulos quando diminui a qualidade do jpg.

    a dobra de cima tem só a imagem e o post.
    a navegação está na dobra de baixo…jakob Nielsen naõ ia gostar muito não…
    talvez se diminuisse a altura da imagem para caber parte da navegação na primeria dobra..porém isso poderia deixar desamornioso a dobra….sei lá… XD

  • Lucas

    não estou enxergando o link para o fórum….

    não tem mesmo??

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

    Não vamos nos esquecer que, apesar de tudo, a maioria dos usuários usam (e provavelmente contunuarão usando) o IE.

    Repitam comigo:
    Acessibilidade, Acessibilidade, Acessibilidade…

    e depois:
    Usabilidade, Usabilidade, Usabilidade…

  • Reginaldo Sousa

    Pra mim a segunda versão foi a melhor de todas.
    Essa aqui parece esconder a informação.

  • Reginaldo Sousa

    Ah, esqueci de falar.
    Tão querendo transformar o tableless no Visie neh?! rs

  • Francisco dos Santos

    Gostei da mudança visual do site, é uma questão de se acostumar a procurar as informações.

    Uma coisa que melhorou bastante, em relação a versão anterior, foi a versão impressa. Entretanto ainda existe alguns detalhes, como campo de busca e tags que são completamente desnecessárias em um versão impressa.

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

    Reginaldo, não entendi? Porque querendo transformar o site do Tableless em Visie?
    O layout não tem nada a ver com o layout atual, nem com o layout que estamos preparando.

    O Site do tableless é um site do pessoal da Visie. Nisso, sem dúvidas, queremos que todos saibam.
    Mas agora, mudando um pouco de assunto. Ano que vem a postura aqui no Tableless vai ser bem diferente. Antes, eu pensava duas vezes antes de falar da Visie aqui, porque há sempre um pentelho ou outro que dá peti porque acha que é propaganda. Ano que vem, vou simplesmente ignorar esse tipo de atitude. A Visie é uma empresa minha. E nada mais natural que eu promover eventos e cursos da minha empresa no meu blog/site. Ué.

    Sobre a área branca do lado: sim gente, é assim mesmo! ;-)
    Chama-se área de respiro.
    Vai demorar para eu colocar alguma coisa ali.
    A navegação é toda concentrada nos 3 box lá em baixo. Navegar na internet é rolar páginas, explorar os artigos, links e todos os cantos do site. Sem dúvida, isto acontece nessa nova versão do Tableless.
    É por esse motivo que não há menu no site. Até segunda ordem.

    Ahh, sobre 800×600. O site é totalmente acessível para resoluções maiores que 1024. Um camarada que tem problemas de visão, por exemplo, e aperta o CTRL+ do Firefox para aumentar a letra, não está nem aí pro Layout.
    E sim, tem tudo a ver com meu público alvo. Aqui, desenvolvedor que usa 800×600, não vai ver o site direito. Não sei nem porque o desenvolvedor usa 800×600…
    Do mesmo jeito que no IE, não há imagens semi-transparentes. Eu devia deixar o layout quebrar no IE.

    Mesmo assim, em resumo, adorei a nova forma do tableless. Mas ainda tenho dúvidas com esse cinza dos comentários. Vou mudar. ;-)
    Contudo, tenho uma lista enorme para mudar aqui no site. Melhorar por exemplo, essa caixa de comentários que para mim, tá pequena. ;-)
    Tratar melhor as imagens da home para que não fique com qualidade tão ruim. Elas estão demorando para carregar? Se não, posso me preocupar menos com a velocidade de carregamento da imagem.

    ;)

  • Fabiano

    Gostei bastante da página inicial do blog, ficou bem elegante. Mas eu tomaria mais cuidado com os tons de cinza, pois em alguns motiroes o texto pode simplesmente sumir.

    Quanto a mudança do logo, apesar dele não possuir nenhum significado, acho que le já é uma ‘marca registrada’

  • Fabiano

    Gostei bastante da página inicial do blog, ficou bem elegante. Mas eu tomaria mais cuidado com os tons de cinza, pois em alguns monitores o texto pode simplesmente sumir.

    Quanto a mudança do logo, apesar dele não possuir nenhum significado, acho que ele já é uma ‘marca registrada’ do Tableless.com.br e deveria ser matido. Como já foi sugerido em outro comentário, seria mais interessante uma mudança sutíl.

  • Fabiano

    Gostei bastante da página inicial do blog, ficou bem elegante. Mas eu tomaria mais cuidado com os tons de cinza, pois em alguns monitores o texto pode simplesmente sumir.

    Quanto a mudança do logo, apesar dele não possuir nenhum significado, acho que ele já é uma ‘marca registrada’ do Tableless.com.br e deveria ser **mantido. Como já foi sugerido em outro comentário, seria mais interessante uma mudança sutíl.

  • Elias

    mas o que um cara com problema de visão vai fazer aqui?????????????
    wtf!!!!!!!!!!!!!!!!!!!!!!!!!!!
    ele é um designer? um programador? ou o superman?

    afff….

    é muito mais fácil um programador usar 800×600
    do que um kra com prolemas de visãro vir aqui explorar os seus artigos, por isso eu digo completamente redundante… descartar usuários por cégos????
    acho q a proporção é gigantescamente maior! =)

    Acho vc, Diego eis, um profissional muito qualificado, mas eu acredito que nesses quesitos há alguns erros na arquitetura da informação, tal como, posso citar outro exemplo: as imagens gigantes que vc usa na home.
    eu acho que elas não funciona muito bem com a informaçao com que o Tableless(estou falando do tableless em) tem que passar.

    Outra coisa que tbm eu acho q foi um erro fatal, foi mudar de forma muito brusca o posicionamento das informações, aqui havia muito(e há) muitos usuários, e esse tipo de atitude pode “desencoraja-los” .

  • Elias

    ainda esqueci de mencionar sobre a paleta de cores aqui, mas pelo que vi, ja mencionaram.

  • Bruno Francisco Santos

    sei lá, parece que o povo gosta de criar ‘caso’ por aqui.
    é tão dificil assim alguem navegar com o menu embaixo?
    qual é o problema de colocar imagem grande na pagina inicial!?!?!
    acho que vocês têm que quebrar alguns paradigmas e começar a pensar mais em inovações.
    porque pelo menos pra mim, um dia o ‘arroz-com-feijão’ enjôa.

  • http://nosite Emiliano Eloi Silva Barbosa

    Sem palavras!!!!! Estou boquiaberto, caro Eis! Sem palavras!

  • http://www.parametrodafesta.com Ranzi

    Olá!
    Inovar é sempre um diferencial e um “peitaço”. Abrir discussão sobre o assunto, mais ainda, entretanto, a colaboração do pessoal é muito importante. Gosto de verificar que o “blog” está crescendo e ficando gente grande, com estilo dos “bonitos de se ver”.
    Manda ver nas alterações, e se não ficar bom, a gente fala!!
    (ah, e não troca o logo ;) )

    Abraço,

    Ranzi

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

    Continuo não concordando contigo, Elias. Vou ver se escrevo um post sobre isso.

  • Elias

    ok eu intendo, mas não to falando isso pra “causar” não, tudo q eu disse tem fundamento.
    seria uma critica construtiva

  • http://www.tyasske.com Tyasske

    Já que tocou no assunto do cinza dos comentários Diego, eu trocaria por um mais escuro, só pra dar mais ênfase no texto. E talvez separaria cada comentário com mais espaço. Mas não vejo grande problema com o atual.

    Ah, me empolguei com o novo logotipo, e fiz um só pra desencargo de consciência… Coloque o dedo aqui. (se usar touch screen heh)

    Nele tentei colocar o logotipo atual, pra não se perder toda a referência, e fiz um concept de uma tag div, que foi o princípio e é a base para o uso do tableless. Só pra brincar mesmo.

    Mas a idéia acho que é legal, dava pra fazer um tipo de concurso entre os leitores pra ver quem faz a melhor, e daí se sair algo que presta, usar. rsrsrs

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

    É, Diego.. o cinza dos comentários ficou esquisito mesmo. Principalmente o efeito :hover dele.

    Além disso, o degradê roxo/transparente que tem nos links dos boxes aqui em baixo tá totalmente fora das cores do site. ;)

  • Jan

    Diego,
    gostei muito do novo layout!
    Só vi alguns problemas (testei no FF, IE6, Opera e Safári (Windows):
    1º – Ta com uma barra (scroll) Lateral ao lado da imagem na home (FF e Opera)
    No (IE6) tem (scroll) lateral e embaixo.
    No Safári ta tudo perfeito

    2º – Senti falta de um link para “contato” – queria avisar do problema do scroll e não consegui tive que colocar aqui mesmo (se bem que acho que era o lugar certo)

    No mais acho que o cinza (mais escuro) daria um contraste melhor com o texto (opinião pessoal)

    E sempre achei o logo MUITO BOM (não me pergunte o porquê)!

    Mas uma vez o resto achei ótimo (o Tableless tem que ser um laboratório … tem que testar “novas formulas” porque senão para mim, perde o sentido).

    Parabéns!
    Um grande Abraço
    Jan

  • http://www.s3web.com.br Eduardo Penna

    Achei bem interessante o novo layout.

    Acrescentando à lista de bugs, no IE7 tem uma margem no menu principal de uns 4px entre uma li e outra.

    Abraço

  • Marco

    Simplesmente para um blog esse layout não ficou bom. Informação difícil de achar e confusa.
    Na home de um blog a primeira coisa que procuro são os posts, neste layout ficou difícil de saber onde estão, parece mais um site comercial, que está vendendo algum produto (“vendo pallets reciclados para cercar a sua casa”)
    Pra que um “respiro” que mais cega o leitor com o contraste que causa com os comentarios e o background?
    Comentarios, falta contraste para a leitura, cinza claro com branco, horrível.. no hover melhora um pouco.
    Conclusão, podem achar o layout bonitinho, mas para um BLOG ele NÃO FUNCIONA!

  • http://www.sadjow.com Sadjow

    Vocês deviam colocar algua coisa como a lista e posts. No lugar desse espaço branco do lado esquerdo do post.

  • http://www.rodrigoghedin.com.br/ Rodrigo P. Ghedin

    Ruim. Deixou de ter cara de blog, para ficar com cara de nada… Informação difícil de ser encontrada, home com um pedação inutilizado (imagem à direita), posts com essa barra branca inútil, espaço para comentários cinza-nada-a-ver…

    Mas o pior, e o que mais me chamou a atenção, nem são os detalhes mencionados acima, mas sim a falta de perfeccionismo, algo elementar em se tratando de tableless. Alguns exemplos:

    - Imagem do rodapé em baixíssima qualidade (dá pra ver os pixels borrados em volta das letras);
    - Falta de padronização nas fontes (encontrei três: Georgia, Verdana e Arial);
    - Detalhes do CSS passaram batidos (vejam as listas nos posts que há possuem);
    - Barra de rolagem horizontal no post da home, no Opera.

    Só para citar alguns…

    []‘s!

  • http://www.rodrigoghedin.com.br/ Rodrigo P. Ghedin

    * a barra na home, no Opera, é vertical.

    []‘s!
    Rodrigo P. Ghedin.

  • http://www.samoliveira.com Sam Oliveira

    Fala Diego!!

    Cara, seu site é bacana demais, bem como os motivos que o levou a construí-lo a administrá-lo – o portuga tá polido demais… rsrsr – o fato é que vc mencionou trocar o logotipo do site… aqui, faz isso não! Ele tem o espírito do tableless, descomplicada e objetiva e o espírito do site, é básico! Pense nisso, ok? No mais, obrigado… aprendo muito contigo, vlw!!

← Older Comments