Pular links da navegação e ir direto para o conteúdo

Publicado em 4 de Sep de 2005 às 18:20

Layout (beta)

Screenshot do beta do layout

Ontem comecei a pôr realmente a mão na massa para fazer o layout do site. Depois de desenhar algumas coisas no Photoshop, comecei a dividir as imagens de fundo e aplicar no CSS.
Projetei o redesign para que tivesse 3 colunas, uma coluna de botões grandes onde coloquei uma lista com os links do blog e do Flickr. Estou testando e na minha cabeça ela teria largura e posição fixa, ou seja, ao rolar a barra de rolagem os botões sempre estarão ali do lado esquerdo. Já sabia que isso no IE não funciona, mas não fazer grandes estragos. A coluna do meio fica o conteúdo (essa seria líquida) e a terceira coluna de links, busca e tal…
Estou com problema mesmo é nessa liquidez da coluna de conteúdo. Pensei que setando uma porcentagem na largura ela se adaptaria dependendo da resolução do monitor, mas na resolução 800×600 colocando valores a partir de 49% para a coluna de conteúdo, a coluna de link e busca vai lá para baixo, já que ela estava flutuando para a esquerda. A coluna do meio deveria diminuir e a outra continuaria do lado direito. E na resolução 1024×768 com os 49% o conteúdo não preenche a tela toda. Preciso pesquisar por aí pra ver como vai ficar isso, por enquanto estou usando largura fixa.
Há também um problema nas transparências das imagens PNG. Sabemos que o IE não suporta, e a transparência dos GIFs não é tão eficiente quanto a do PNG. Não tem coisa mais frustrante do que você projetar uma coisa e empacar com esse navegadorzinho de merda no meio do caminho.
No screenshot dá pra notar o rodapé flutuando no canto direito, mas isso eu já sei como solucionar, é que não cheguei no rodapé ainda no CSS. Também da pra notar o espaço em branco que fica quando se vê na resolução 1024×768, era esse espaço que queria que o conteúdo aproveitasse com o layout com porcentagem. É a primeira vez que tento fazer um layout CSS líquido, ainda preciso pesquisar muito.
ps.: minha quase ex-conexão ainda continuar com problemas para acessar FTP, entre desconectadas e erros foi mais de meia hora pra subir 2 imagens, dá pra acreditar? Não sei se amo mais o IE ou esse provedor.

Você é Desenvolvedor ou Designer?
Leia o blog do VTEX Lab, núcleo de inovação para ecommerce da VTEX. Também escrevo por lá. :)

  • Primeiramente, parabéns pela decisão de hospedagem e domínio próprios.
    Agora vocÊ vai saber realmente o que é liberdade virtual…
    No caso do layout, não se esqueça nunca, 90% dos navegantes da internet usam o maldito MSIE, sendo assim, respeite seus leitores que infelizmente ainda não aderiram raposa salvadora.
    Só uma sugestão, não seria mais fácil encontrar um tema com o estilo que você curta e depois só adaptá-lo???
    Abração e boa sorte.

  • Valeu Neto! Sem dúvida eu vou fazer compatível pelo menos com FF, IE e Opera. Apesar de ter nas estatísticas que a maioria dos leitores daqui usam a raposa.
    Sobre o layout, eu já pensei nisso, mas é que eu prefiro começar tudo do meu jeito mesmo. Eu acabo aprendendo mais e gosto muito de criar, experimentar…

  • Nuss, tentei, tentei, mas não entendi nem 80% do que tá escrito.
    Hehuehueheuhueueheue

    Viva a raposa.
    =D

  • Hm! Tá ficando bom.
    Eu também vou levar umas surrinhas. Se precisar de qualquer tipo de ajuda eu tô disposição.

  • Maneiro seu Blog, muito interessante seus posts, ainda bem que você se livrou do Blogger, eu ainda estou lá, um abraço e continue com seu trabalho.
    :)

  • Danado, conseguiu instalar o WordPress.
    Tô apanhando feio dele e do tal ‘tableless’.

  • Ficou bem legal o Layout!
    Queria saber se vc usa Mac mesmo ou se é skin. Se for Skin, como pego?
    Abraço!

  • Meu…
    Hauheuhaheuhahueae, nem lendo o livro do físico lá, o mundo numa casca de noz, eu fiquei tão por fora.
    Hauheuha

    Sumido?
    Eu tô lá no flickr pô.

  • Jan

    Antes de mais nada, quero lhe parabenizar pela conquista cara, parabéns mesmo!

    Agora vou dar umas sugestões pra ver se lhe da alguma inspiração, só espero que isso não venha a atrapalhar seu trabalho. Bom, notei que no header da sua página tem uns botões (contato, experimentos…) então, será que não rola de você fazer eles funcionarem como abas no próprio site? Você pode até usar várias folhas de estilos, uma para cada aba, só para dar uma mudada e dar uma diferenciada de uma sessão para a outra.

    Sobre as imagens, cara não esquenta com IE e não foque seu desenvolvimento para firefox, não que IE seja burro e firefox seja bom mais é que nem todo mundo sabe disso, então o ideal é você desenvolver sua página para abrir em qualquer navegador bunda ou navegador genio desse mundo blz? Manda brasa nos pngs que eu quero ver as transparências, aliás adoro essas frescurinhas em sites hehehe, fica muito dahora! Sei que é foda fazer mais vc é talentoso, vai conseguir isso na boa.

    Então é isso, meu primeiro comentário foi pra roça pq o firefox deu um pau aqui (verdade!) então comentei tudo resumidamente. Cara, um forte abraço e mais uma vez parabéns!

  • Jan cara, o que você falou das abas por incrível que pareça logo depois que postei isso aqui me veio o estalo de que as abas laterais com apenas dois botões poderiam confundir a navegação, mesmo que sendo os dois focos principais do site, e pensei que poderia jogar tudo lá pra cima num navegação com abas. Comecei a implementá-las no topo da página, ainda não está do jeito que eu quero, como a coluna da direita também não. Mas eu já tava cansado e fui dormir.
    Nesse feriado acho que já coloco no ar a primeira parte.
    Valeu por tudo, pelo post no seu blog, pelas dicas e pela torcida.
    Um forte abraço!

  • Show de bola!!!
    Um dia ainda chego verdadeira “liberdade virtual” como disse o Neto Cury!!! Só achei o seu layout meio escuro demais, mas é só opinião!
    Abraço e sucesso!!!

Sobre

Nascido em 1984 é Desenvolvedor Web autodidata desde 2002. Hoje especialista em Design da Informação pela UFPE é Designer na equipe de UX no VTEX Lab (núcleo de inovação para ecommerce), da VTEX.

Saiba mais