Um dos problemas que encontramos quando vamos desenvolver sites em cima de layouts produzidos por pessoas com pouco ou nenhum conhecimento de Recorte CSS (o que é usado hoje para deixar um site em “formato” de site, e não imagem), é que algumas diretrizes não são seguidas, e isto cria um problemão para a equipe de desenvolvimento (nós), e muitas vezes para o cliente (sabe quando a empresa de design liga dizendo: “Veja bem, isto que você desenhou aqui… não vai dar!”.

Sendo assim, Segue então algumas diretrizes de desenvolvimento de layout para Web, espero que ajude em uma possível parceria com uma empresa de desenvolvimento.

Obs: alguns comentários têm a ver com Arquitetura do Site, que é uma etapa antes do desenvolvimento do layout, mas que acaba sendo realizada em conjunto, então achei importante colocar junto nas mesmas diretrizes.

1 – Hoje em dia já temos mais de 80% das resoluções de site acima de 800×600. Ou seja, a largura do seu site deve ser ajustada para 1024px. Ou seja, recomendamos que use a largura máxima de 998 px, que é o suficiente para bordas e barras de rolagem.

2 – E por falar em barra de rolagem, sites com altura fixa e barra de rolagem interna (ou até mais de uma barra de rolagem na mesma página) são muito ruins para a navegação, e depois, como o conteúdo do site vai mudando ao longo do tempo, todo aquele planejamento que você fez para as fotos encaixadas milimetricamente com o texto, a hora que o cliente resolver mexer no texto para acrescentar ou tirar algo, vai desregular tudo. Lembre-se, sites crescem. Então é melhor planejá-los pensando nisso.

Obs: Claro, se você estiver fazendo um Hotsite (site temporário), para um evento, que vá durar só 3 meses, e a programação não vai mudar de última hora (lenda), fique à vontade!

3 – Tudo o que puder ser feito em formato texto, deve ser transformado para texto, utilizando fontes padrão, presentes em qualquer sistema operacional (Arial, Times, Verdana, Georgia). Motivos:

3.1 – Os buscadores (Google, Bing, Yahoo, etc..) apenas conseguem enxergar aquilo que está em formato texto em seu site, então tudo o que tiver feito como imagem terá de ser definido pela equipe de programação, o que é muito melhor quando já é um texto

3.2 – Imagine que daqui um tempo você precise acrescentar um novo item no menu de seu site, será muito mais fácil usar apenas código-fonte para gerar mais um botão, do que ter que recriar o botão todo novamente

3.3 – Hoje em dia, o mercado muda muito, por conseqüência, os sites devem ir se ajustando a estas mudanças, então, se você produzir os itens de menu em texto, fica muito fácil do cliente gerenciar estas mudanças na própria área administrativa do site, agora se for um botão em imagem, e ainda com uma fonte estranha (que depois de 6 meses você talvez nem tenha ela mais em seu computador), estamos enrolados!

4 – Se você insistiu em usar fontes fora do padrão, pedimos apenas que não se esqueça de enviar junto com o arquivo-fonte (Corel, Photoshop, Fireworks ou Illustrator), pois nem todo mundo tem a Garamond Royal Reck Schanuser Planter-Font instalada. (Principalmente se você COMPROU a fonte).

5 – Se mesmo sabendo que existe o Illustrator você ainda usa o Corel Draw, OK, escolha sua, mas antes de salvar o arquivo que vai mandar para a equipe de desenvolvimento use o comando CTRL+F2 para limpar o “lixo” que o Corel gera a cada mudança. Use esta técnica e não vai mais demorar 15 minutos para abrir arquivos de 1 MB, ou mais de uma hora para arquivos de 500 MB.

6 – Quando for finalizar um layout para ser enviado para a empresa de programação, não travar o programa para exportar, e procurar sempre organizar o arquivo em camadas, que podem ser depois desmontadas por quem vai fazer o recorte do seu layout, e transformada nos elementos que irão para a versão dinâmica do site.

7 – Quando enviar o site, lembre-se que não basta a página principal para o profissional de recorte descobrir o que vai ter nas outras páginas do site. Procure desenhar TODAS as páginas (inclusive aquela quando o cara clicar em MAIS NOTÍCIAS), até por que, as vezes você dá o nome a uma seção de Destaques e imagina que vão aparecer as modelos do site em destaque, mas o programador pode achar que é um cadastro de articulistas em destaque. E eu não quero ver o Arnaldo Jabor de biquini.

Sub-seção especial: Animações em Flash!

Outra situação muito comum é o cliente (ou até a criação da agência) querer fazer uma versão mega-maxi-ultra-flash-animado-piscante do site. Nada contra as coisas em um site chamarem atenção, mas vão aí alguns comentários (pois há outros meios que não piscar ou fazer wooosh!):

1 – A tecnologia Flash permite os efeitos mais animação. Quando falamos de usabilidade na internet o efeito de “transição” entre as páginas é péssimo, principalmente para o visitante que entrou no site para buscar alguma informação útil. Eu sei que as vezes pode parecer, em sites normais, que eles estão meio caidinhos, mas aquilo agiliza muito a busca pela informação no site. Conheço e sei o efeito que a animação em flash provoca no DONO do site, que gosta de ver seu negócio piscando, se mexendo e flutuando, mas quem visita não é admirador de vocês, é alguém que quer contratar o serviço.

2 – O fato de se usar o flash, deixa o site muuuuito demorado para carregar, o que incomoda totalmente o visitante, e se ele tiver em bandas lentas (menos de 2 MB), o site demora uma eternidade para carregar. Isto para abrir, pois depois, para carregar cada página no site, outra eternidade.

3 – Um outro detalhe é que o site feito em flash é pouco flexível, ou seja, a possibilidade de atualização das informações é custosa, pois toda vez que você tiver que mudar fotos ou textos no site, precisará da empresa que desenvolve (que não trabalha de graça). Já no modelo de programação em HTML (com banco de dados), há a possibilidade de atualizar praticamente TODAS as fotos, textos e notícias do site, através de um portal que agiliza muito para abastecer este conteúdo.

4 – Um outro aspecto mais técnico, é que os buscadores (Google, Yahoo, Bing, etc…) têm um problema gravíssimo com sites feitos em flash, e quando ele tenta encontrar informações daquele site, para colocar o site como resultado de busca, não aparece bem. As vezes procuramos no Google por empresas usando como termo de busca o próprio nome da empresa, e ela nem aparece. Se a empresa não aparece bem para seu próprio nome, imagine para palavras-chave relacionadas à sua empresa, buscadas por pessoas que não necessariamente te conhecem.

5 – Um outro aspecto é a Música no site. Eu sei que parece que fica legal, mas na 3a vez que a pessoa entrar no seu site ela vai querer morrer, e não vai aguentar ouvir aquela música que ele amava, nem no rádio. Falo por experiência, de váários sites que a pessoa insistiu na música (normalmente do U2), e deu dois meses, quis tirar fora…

6 – Outra coisa é o preço mais abusivo do flash, que por dar mais trabalho e ser menos flexível, demanda um prazo maior e um custo também. Sem contar que cada alteração gera também novo custo.

7 – E não podemos esquecer do efeito: “ACABEIDECOMPRARUMIPHONEÉAMELHORCOISADOMUNDOAGORAQUEROMEUSITEIGUAL”. Lembrem-se, o Iphone é um telefone, não um site.

Espero que estas diretrizes ajudem, e espero mais ainda por respostas e discussões e INCLUSÕES em cima destes pontos citados.

Não se esqueça de conhecer nosso portal completo de informações sobre Administração e Gestão.

Textos Relacionados:

1. Como programar pensando no SEO
2. Por que trabalhar a Otimização para Buscadores (SEO)?
3. Guia de SEO para iniciantes do Google – Série A Página Perfeita
4. Como desenvolver um site otimizado para buscas?
5. Principais Sites de Busca
6. Como otimizar as imagens de meu site para SEO
7. Como fazer os melhores textos âncora (link text) para SEO

<META DESCRIPTION>

Segundo o Guia do Google:

Na definição do Guia, “a meta tag de descrição <meta name=“description”> dá ao Google e outros mecanismos de pesquisa um resumo do assunto dessa página. Se o título da página consiste em uma palavra ou frase, a meta tag de descrição poderia ser uma frase ou duas ou até mesmo um breve parágrafo.”

Práticas recomendadas:

• Resumir com precisão o conteúdo da página;
• Utilize descrições únicas para cada página.

Evite:

• Escrever uma meta tag de descrição que não tenha relação com o conteúdo da página;
• Utilizar descrições genéricas como “Esta é uma página da internet” ou “Página sobre figurinhas de beisebol”;
• Preencher a descrição só com palavras-chave;
• Copiar e colar todo o conteúdo do documento na meta tag de descrição;
• Utilizar a mesma descrição em todas as páginas de seu site ou em um grande grupo de páginas.

Agora sim minhas dicas:

• É um fator importante para bom ranking;
• A descrição será o resumo do seu site na página de resultado de busca;
• Use de 25 a 30 palavras (160-180 caracteres);
• A descrição deve ser relevante em relação ao conteúdo do site.

Artigo original: Otimização para Buscadores.

Textos Relacionados:

1. Como fazer os melhores textos âncora (link text) para SEO
2. Desenvolvendo a Página Perfeita (pelo menos para o Google)
3. Guia de SEO para iniciantes do Google – Série A Página Perfeita
4. Como otimizar as imagens de meu site para SEO
5. Como usar bem os cabeçalhos (H1 e H2) para SEO
6. Como programar pensando no SEO
7. Como estruturar meus diretórios para SEO

Recomendo a leitura do Guia, pois obviamente há lá informações que não coloquei aqui. O guia fornece também diretrizes que são muito saudáveis não só para os buscadores, mas também para os visitantes visualmente desamparados (vulgos cegos).

Na época do meu post, algumas pessoas reclamaram que eram diretrizes soltas, apenas para quem já entendia de SEO. Sendo assim, desta vez passeis as diretrizes para iniciantes do Google, e agora acho que o post ficou mais completo.

Como o post ficou muito longo, resolvi fazer um separado para cada uma das variáveis, começando por um dos itens mais importantes:

Como fazer um Título

Segundo o Guia do Google:

Na definição do Guia, “a tag título <title> informa tanto os usuários quanto os mecanismos de pesquisa qual o tema de uma determinada página. A tag <title> deve ser colocada dentro da tag <head> do documento HTML. Idealmente, você deve criar um título único para cada página do seu site”.

Práticas recomendadas:

• Descreva com precisão o conteúdo da página;
• Crie tags de título únicas para cada página;
• Utilize títulos descritivos e curtos.

Evite:

• Escolher um título que não tenha relação com o conteúdo da página;
• Utilizar títulos padrão ou genéricos como “Sem Título” ou “Nova Página”;
• Usar uma única tag de título em todas as páginas de seu site ou em um conjunto grande de páginas;
• Utilizar títulos extremamente longos e poucos úteis para os usuários;
• Preencher o título com palavras-chave desnecessárias.

Agora sim minhas dicas:

• É um dos fatores mais importantes para um bom ranking nas buscas;
• Este título que os buscadores irão colocar no link para sua página;
• Seja direto e objetivo;
• Utilize de 3 a 9 palavras (60-80 caracteres);
• O título da página deve ser relevante em relação ao conteúdo do site.

Não perca os próximos posts da série.

Artigo original: Otimização para Buscadores.

Textos Relacionados:

1. Desenvolvendo a Página Perfeita (pelo menos para o Google)
2. Como fazer uma Descrição META DESCRIPTION Perfeita (SEO)
3. Como otimizar as imagens de meu site para SEO
4. Como usar bem os cabeçalhos (H1 e H2) para SEO
5. Como programar pensando no SEO
6. Como fazer os melhores textos âncora (link text) para SEO
7. Guia definitivo com as TOP 12 Ferramentas Gratuitas para obter mais seguidores relevantes no Twitter

As pessoas que estão à procura de joão de barro querem ser levados diretamente para uma página sobre o pássaro. Parece óbvio, mas muitas pessoas ainda se perdem neste conceito. Você pode estar pensando: “é claro que você nunca iria enviar alguém que busca joão de barro para sua página de casa de barro, mas você já pensou em otimizar sua página de chegada (landing page) para buscar o tráfego por joão de barro?

Nem tudo o que você pode fazer de SEO é restrito à sua página principal e, se feito corretamente, a maior parte do seu tráfego provavelmente virá das páginas internas.

Artigo original: Otimização para Buscadores.

Textos Relacionados:

1. Blog Otimização para Buscadores
2. Otimização On-Page
3. Diretrizes de layout e criação para sites
4. Guia de SEO para iniciantes do Google – Série A Página Perfeita
5. Pesquisa e Escolha de Palavras-Chave
6. Como otimizar as imagens de meu site para SEO
7. Como estruturar meus diretórios para SEO

Artigo original: Otimização para Buscadores.

Textos Relacionados:

1. Por que trabalhar a Otimização para Buscadores (SEO)?
2. Otimização On-Page
3. Guia de SEO para iniciantes do Google – Série A Página Perfeita
4. Ferramenta para checar redirecionamento amigável para SEO
5. Como desenvolver um site otimizado para buscas?
6. Guia definitivo com as TOP 12 Ferramentas Gratuitas para obter mais seguidores relevantes no Twitter
7. Diretrizes de layout e criação para sites