Erick Souza

Sete dicas da W3C para otimização de websites. Apesar de não ser uma tradução, é o que a W3C recomenda em seu site.

1- <title>: O elemento mais importante de um Web site

O elemento <title> foi projetado para informar do que a página se trata em poucas palavras, em casos como:

• Barra de título da janela.
• Favoritos dos browsers, os bookmarks.
• Lista de resultados de sistemas de busca.

Um bom título

Atenção para os títulos que não descrevam nada

Títulos como <title>meusite.com.br</title> ou <title>Seção 1</title>, não indicam nada, por exemplo, em um resultado dos sistemas de busca.

Há também títulos que fora do contexto não são entendidos, como por exemplo, <title>ES - Guia -Introdução</title>

Seja mais descritivo, não esquecendo de o fazer em poucas palavras: <title>Guia do Design de Websites - Introdução</title>.

Não crie títulos muito longos

Use de 60 a 80 caracteres para descrever o título, pois este é o número mais indicado em muitos títulos de janelas, menus, etc.

Você pode detalhar e colocar um título mais agradável no cabeçalho de nível mais alto do seu documento, por exemplo: <h1>Top 10 - Guia de Usabilidade de Websites</h1>.

Observe que existe uma ligações do título da página com o cabeçalho do texto, as palavras “Guia” e “Websites” são as ligações. Isto é muito importante para uma melhor indexação nos buscadores.

2- Não use “Clique Aqui” como rótulo de links

Ao inserir um link em sua página, utilize um rótulo breve e significativo, desta forma:

• Fornece alguma informação quando lido fora do contexto. Se for impresso por exemplo.
• Descreve o que o link fornece.
• Um texto mais agradável.

Exemplos
Evitem sentenças como estas abaixo:

Para baixar o Opera, clique aqui.

Para baixar o Opera, acesse o Opera Website, e começe já o download.

Use algo como:

Baixe o Opera Browser.

Note que a palavra “baixe” esta fora do hyperlink, pois a W3C não recomenda verbos em links.

Então melhor que:

Me informe sobre o Opera.

Prefira usar:

Me informe sobre o Opera: um browser mais rápido, seguro e com muitos recuros extras.

3- Use o <h1> para o título principal

No html o <h1> deve ser usado para o título principal da página.

• Se a página for sobre o iTunes, além do título, no cabeçalho de nível mais alto, o <h1> deve conter a palavra “iTunes”, isto lhe indexará melhor em sistemas de busca, como o Google.
• Diversos programas montam um índice da página através dos cabeçalhos.

Mutios são motivados a utilizarem a partir do <h2>, pelo fato da fonte do <h1> ser muito grande, e este é um erro, pois prejudica a estrutura do documento.
A questão do tamanho da fonte é fácilmente resolvido utilizando Folhas de Estilo.

Estruture suas páginas usando dos cabeçalhos disponíveis, pois além das vantagens de indexação, quando visualizado sem o CSS, por exemplo, o documento continua acessível.

4- Não se esqueça de adicionar um <!doctype>

Doctype?

Não existe apenas um tipo de Html, são vários, HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict, e muitos outros. Todos estes Html são especificados pela W3C, onde são definidas as estruturas, elementos e atributos válidos para cada tipo de Html.

Tal definição é chamada de DTD, “Document Type Definition”.

Para processar um documento, ferramentas como Web Browser, precisam saber qual DTD, o documento esta usando, este é o motivo pelo qual um documento começa com uma DTD, como esta abaixo:

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Dado sua sintaxe, uma DTD é chamada frequentemente de “Doctype”.

Quando utilizado, esta declaração deve ser inserida na primeira linha do documento.

Por que?

Por que especificar um Doctype?

Porque esta é uma informação necessária para que os browsers saibam qual Html seu documento esta usando, e assim o processar corretamente.

Todavia, o mais importante na declaração de um Doctype, é que desta forma boa parte dos browsers não necessitarão em ficar tentando adivinhar como rendenizar o documento, desta forma o processo de entendimento, e consequêntemente da apresentação serão mais rápidos e livres de erros ocorridos em documentos que não possuem uma declaração Doctype.

5- Use <link>s em seu documento

O Html nos dá a possibilidade de adicionarmos informações externas relacionadas ao arquivo. Estes recursos podem incorporar Folhas de Estilo (CSS), ajuda para a navegação, linkar um RSS, informações para contato, etc.

A Tag <link> é usada para adicionar informações no cabeçalho, e é inserido na seção <head>. Também são usadas por User Agents (browsers) e outros aplicativos.

Exemplos

<link rel="Start" href="/webstandards/" />
<link rel="Prev"  href="/webstandards/CSS/" />
<link rel="Next"  href="/webstandards/feed/" />

Estes links ajudarão na navegação de certos User Agents.

• Start: Onde o artigo começa.
• Prev: O artigo anterior, no exemplo é a página sobre CSS.
• Next: O próximo artigo, no exemplo é a página sobre Feed.

Uso atalhos de mouse no Opera, e quando colocam estas referências, em galerias por exemplo, a navegação fica muito fácil.

<link rel="Contents" href="/webstandards/indice.html" />

Índice da seção.

<link rel="Help" href="/help.html" />

Ajuda: dá a possibilidade de você adicionar uma página de ajuda para seus visitantes.

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />

Desta forma você pode oferecer um link do RSS do site para seus visitantes. Em browsers modernos, é exibido um link na parte direita ao lado da URL do site.

<link href="mailto:contato@meusite.com.br" rev="made" />

Uma forma de contactar o autor.

<link rel="stylesheet" type="text/css" media="screen" href="/css/estilo.css" />

Especifica um Folha de Estilos para a formatação do site. No exemplo foi especificado que o stylesheet é para o render da tela. Poderíamos ter outros stylesheets para outros meios.

<link rel="alternate" href="/webstandards.en" hreflang="en" title="English Translation" />

Fornece uma tradução do arquivo original em outro idioma, no exemplo em inglês.

6- Se você definiu a cor para um, defina para todos

A grande maioria de sites definem cores para o texto, mas não definem uma cor para o fundo, ou vice-versa.

Seus visitantes podem ter um esquema de cores definido diferente do padrão, e que desta forma podem prejudicar tanto o design, quanto a legibilidade do site.

Há algum tempo, estava testando algumas modificações em meu sistema operacional, e enquanto navegava, notei que as alterações incluiram uma nova cor para o fundo das páginas, o cinza. Pude ver que uma boa parte dos sites que visito, focados para desenvolvedores, não possuem uma cor definida para o fundo, minha navegação se tornou algo estressante, e para minha sorte, as alterações citadas eram temporárias e já as removi, mas nossos visitantes não tem a menor idéia do que pode estar causando um problema desses.

A regra é: Definiu a cor para um, defina para todos.

Recomendações

Esqueça a tag <font>, use CSS.

A maneira apropriada de se definir as cores em um website, é o uso de Folhas de Estilos. Esta prática é fortemente recomendada, pois o CSS é mais flexivel, torna as atualizações mais fáceis, e com um CSS externo, economizamos em taxa de tranferência, pois o site todo acessará o mesmo CSS, que é armazenada em cache. As propriedades do CSS são “color” e “background-color” ou simplesmente “background”.

Exemplo

body {
background: #fff;
color: #000;
}

a {
background: white;
color: blue;
}

a:visited {
color: red;
}

7- Atenção para o tamanho das Fontes

Um tendência entre designer’s, é acreditar que fontes pequenas dão ao site um visual mais elegante, o que resulta no uso de fontes muito pequenas, tornando a leitura muito desagradável.

Infelizmente, isto pode piorar devido a diversidade das plataformas usadas para acessar a internet, não podemos nos esquecer que o uso de dispositivos móveis vem crescendo cada vez mais.

Este é um problema básico de usabilidade e acessibilidade, um bom projeto não deve requerer que o usuário reduza ou amplie o tamanho da fonte, mesmo porque são poucos que sabem como proceder.

Recomendações

Esqueça a tag <font>, use CSS.

Um bom uso da propriedade “font” do CSS

Algumas dicas de como formatar os textos em um site, o mantendo legível usando a propriedade “font”, do CSS.

• Não especifique o tamanho da fonte em pt ou outras unidades absolutas. Em diferentes plataformas, quando rendenizadas, não podem ser redimensionadas pelos User Agent.
• Use unidades relativas, como porcentagem, ou melhor o “em”.
• Evite utilizar menos de 1em, exceto talvez para indicações de copyright, ou semelhantes.
• Se optar por usar um tamanho de fonte pequeno, selecione uma família de fonte altamente legível.
• Fontes pixel devem ser evitadas, principalmente em textos. Quem realmente tem o hábito de ler, sabe o quanto fontes pixel são ilegíveis e casativas.

This entry was posted on Sunday, January 22nd, 2006 at 18:16 and is filed under Geral. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.