O processo de criação de um site

Tudo o que um site precisa

Neste meu primeiro artigo vamos passar por cada um dos itens que eu sigo para desenvolver um site. Usaremos esse meu, yuricordeiro.com.br, como referência. Vamos destrinchar o racional de cada etapa com o que foi feito na prática.

Se aplica para todo site? Não. Se o seu é um e-commerce, por exemplo, faltam itens nessa lista. Mas para a grande maioria é um bom ponto de partida. O que você vai ver neste artigo:

1. Mapa do site (quais páginas ele vai ter)
2. Disposição dos elementos (o que vai em cada página)
3. Arquitetura da informação (como as páginas e elementos se relacionam)
4. Conteúdo (os textos e mídias apresentados)
5. Layout (o visual)
6. Função (o que tem dentro tem que funcionar)
7. Eficiência (tem que ser rápido)
8. Arquivos de suporte (os xmls e txts da vida)
9. Acompanhamento (as ferramentas que plugamos para medir desempenho)
10. Otimização (SEO e melhoria contínua)

Mapa do site

O mapa do site é a primeira decisão do projeto, e a mais barata de mudar: quais páginas o site vai ter. Faço isso antes de escrever uma linha de conteúdo ou de código, porque é ele que define o tamanho do trabalho. É a planta baixa antes de levantar parede.

A pergunta que guia é uma só: qual o objetivo do site, e o que o visitante precisa para agir? O meu existe para me apresentar como consultor, mostrar o que faço e abrir um canal de contato. Com isso na mão, o mapa ficou enxuto, em três páginas:

• Home: concentra a apresentação, o sobre, os serviços e a chamada para contato, tudo numa página só, rolável.
• Artigos: onde moram textos como este.
• Contato: página dedicada, com formulário.

Repare que Sobre e Serviços não viraram páginas próprias. São seções da home, acessíveis na rolagem. Para um site de apresentação isso reduz fricção: o visitante desce e tem o essencial, sem esperar página nova carregar.

Só promovi algo a página separada quando havia motivo concreto. Os artigos precisam de uma URL própria por texto, senão o Google não indexa cada post como página independente, e o blog perde a razão de existir. Contato ganhou página porque tem um formulário a hospedar, trabalho que não cabe numa âncora da home.

A regra que sigo é simples: página só entra no mapa quando tem função clara. Página sem função é peso morto. Mais uma coisa para manter, indexar e medir.

Disposição dos elementos

Definido o mapa, a próxima pergunta é o que vai dentro de cada página, e em que ordem. Aqui eu ainda não penso em cor, fonte ou imagem. Penso em blocos, e na sequência deles. É o esqueleto antes da pele.

A ordem não é aleatória. Ela segue a pergunta que o visitante faz, na sequência em que ele faz. Na home do meu site, de cima para baixo:

1. Topo: meu nome, uma foto e uma frase que diz para quem eu trabalho. Em três segundos a pessoa sabe se está no lugar certo.
2. Sobre: quem eu sou e por que confiar, da Globo à consultoria de hoje.
3. Serviços: o que eu de fato faço, em lista, do mais técnico ao mais amplo.
4. Contato: como me chamar, depois que o resto já justificou o chamado.

Quem, por quê, o quê, como. Apresentar o contato antes de apresentar o trabalho seria pedir a ação antes de dar o motivo.

O mesmo raciocínio vale para as outras páginas. Na de contato, o formulário vem primeiro, porque é a ação principal de quem chegou ali, e o e-mail fica como alternativa logo abaixo. Em todas as páginas, dois elementos são fixos: o cabeçalho com a navegação, sempre ao alcance, e o rodapé com a assinatura.

A regra aqui: cada bloco ganha o lugar pela urgência que tem para o visitante, não pela importância que tem para mim.

Arquitetura da informação

Se o mapa diz quais páginas existem e a disposição diz o que cada uma contém, a arquitetura da informação diz como tudo se conecta. É o que transforma um punhado de páginas soltas num site que faz sentido, para a pessoa e para o Google.

Ela aparece em três camadas.

A navegação é a primeira. O menu do meu site tem três itens: Home, Artigos, Contato. Sobre e Serviços não estão lá de propósito, porque vivem dentro da home; colocá-los no menu seria prometer página que não existe. Menu bom é mapa honesto, mostra só o que dá para alcançar.

Os links internos são a segunda. São as pontes entre páginas: a chamada de contato na home leva à página de contato, o serviço de sites aponta para onde esse serviço de fato mora. Cada link existe para encurtar um caminho que o visitante percorreria de qualquer jeito.

A hierarquia de títulos é a terceira, e a mais invisível. Cada página tem um único título principal, o H1, e os demais blocos descem em H2 e H3 numa ordem lógica. Isso não é capricho de código. É como o leitor de tela e o buscador entendem a estrutura da página, qual é o assunto principal e quais são desdobramento. Um site pode parecer organizado e ter uma árvore de títulos bagunçada por baixo; aí a organização é só aparência.

A regra: a arquitetura é boa quando ninguém repara nela. O visitante encontra o que quer e nem percebe que foi guiado.

Conteúdo

Aqui mora o motivo de o site existir. Layout, navegação e código são moldura; o conteúdo é o quadro. Ninguém volta a um site por causa da fonte bonita. Volta pelo que ele diz.

Escrevi tudo em primeira pessoa, porque é uma consultoria de uma pessoa só, e fingir corporação seria mentir para o visitante. O texto do sobre não enfileira adjetivos a meu respeito; conta o que eu fiz, da coordenação de SEO dos portais da Globo à consultoria que toco hoje. Fato pesa mais que elogio próprio.

Cortei o vocabulário de venda inteiro. Nada de solução inovadora, resultados extraordinários, transforme seu negócio. Esse tipo de frase enche linha e esvazia confiança. Quem entende do assunto desconfia na hora. Prefiro dizer o que faço em palavras secas: auditoria técnica, consultoria recorrente, e o que cada uma entrega.

Tem SEO aqui também, e ele é menos misterioso do que parece. Um título que diz do que a página trata, texto direto, cada página sobre um assunto. Escrever bom conteúdo para busca é, antes de tudo, escrever com clareza para a pessoa. No fim, o Google premia a mesma coisa que o leitor: a página que responde melhor à pergunta que ele tinha.

Sobre mídia, fui econômico. Uma foto minha, de verdade, no topo. Gente confia em rosto. O resto do peso fica no texto, que é o que eu quero que seja lido.

A regra: escreva para a pessoa primeiro. O buscador vem junto, quase sempre, quando o texto é honesto e claro.

Layout

Agora, sim, o visual. Reparou que ele só aparece no quinto item? Não é acaso. Layout sobre estrutura torta é maquiagem em cima de osso quebrado. Primeiro a coisa funciona e se organiza; depois ela fica bonita.

E bonita, aqui, quer dizer uma coisa só: que serve à leitura. Toda escolha visual do meu site saiu dessa pergunta, não do meu gosto.

A tipografia usa fonte serifada, dessas de livro, porque o site existe para ler texto longo, e serifa cansa menos o olho em parágrafo corrido. O corpo vive numa coluna estreita, de mais ou menos setecentos pixels. Linha curta demais pula muito; linha larga demais faz o olho se perder na volta. Existe um ponto confortável, e ele é bem mais estreito que a tela inteira.

A paleta é sóbria de propósito: fundo quase branco, num tom quente, texto quase preto, e uma única cor de destaque, um verde-petróleo. Uma cor só, e com função: marca o meu nome, os links e os pequenos sinais de seção. Cor que não significa nada vira ruído. Prefiro o silêncio visual que deixa o conteúdo falar.

Cheguei a testar uma versão mais radical, quase internet dos anos noventa, crua e sem ornamento. Era honesta, mas árida demais para passar tempo lendo. O equilíbrio ficou no meio: sabor de papel acadêmico, conforto de leitura moderno.

A regra: o melhor layout para um site de texto é o que você não nota. Ele tira o atrito da frente, e some.

Função

Site não é só vitrine. O que tem botão tem que apertar, o que tem campo tem que enviar, o que promete ação tem que cumprir. É aqui que a página deixa de ser cartaz e vira ferramenta.

No meu site a parte interativa é enxuta, mas é também a mais importante: o formulário de contato. É por ele que um possível cliente fala comigo. Um formulário que parece enviar e engole a mensagem no caminho é pior que não ter formulário nenhum, porque a pessoa acha que falou comigo e fica esperando uma resposta que eu nem sei que devo.

Então ele faz, nos bastidores, mais do que aparenta. Valida o que foi preenchido antes de aceitar. Manda o e-mail de verdade para a minha caixa, já com o endereço da pessoa configurado para eu responder num clique. Barra robô de spam com uma armadilha simples, invisível para quem é gente. E, no fim, devolve uma confirmação na tela, para a pessoa saber que a mensagem saiu. Cada um desses passos é uma engrenagem que pode falhar calada.

Tem também as funções pequenas, que ninguém elogia mas todo mundo sente quando faltam: o menu que abre e fecha no celular, o cabeçalho que some quando você desce para ler e reaparece quando você sobe para navegar.

Por isso este item tem uma regra mais dura que as outras: função não se testa no olho. Eu mando uma mensagem real pelo formulário e confiro se o e-mail chega, do começo ao fim, antes de dar como pronto. Funcionalidade não testada é só uma promessa.

Eficiência

Um site bonito que demora a abrir é um site que ninguém espera. A pessoa fecha a aba antes de ver o seu trabalho, e o Google, que mede velocidade, te empurra para baixo no resultado. Lentidão custa visita e custa posição. As duas de uma vez.

Velocidade não se conserta no fim, com um truque. Ela vem das decisões de base, lá do começo. A minha foi radical de propósito: o site é feito de HTML, CSS e JavaScript puros, sem nenhum daqueles frameworks que viraram padrão. Framework é conforto para quem programa, mas cobra o preço em peso que o visitante baixa. Para um site deste tamanho eu não precisava desse conforto, e cortar isso já deixou tudo leve por construção.

O resto são cuidados na mesma linha. As fontes ficam hospedadas no próprio site, não puxadas de um servidor de terceiro, o que evita uma ida e volta na rede e aquele texto que pisca trocando de fonte ao carregar. As imagens estão em formato moderno, mais leve para a mesma qualidade. E o site inteiro vive numa rede de entrega distribuída, perto de quem acessa, então abre rápido de qualquer lugar.

O efeito colateral feliz é que site rápido é mais barato e mais simples de manter. Menos peça, menos coisa para quebrar. Leveza não é só performance, é higiene.

A regra: rapidez se projeta, não se remenda. Escolha leve no começo e você não vai caçar peso depois.

Arquivos de suporte

Tem uma dupla de arquivos que nenhum visitante vai abrir, mas que conversa direto com o buscador: o sitemap e o robots. São os bilhetes que o site deixa para o robô do Google na portaria.

O sitemap é uma lista de endereços. Ele diz ao buscador, em texto, quais são as páginas do site que merecem ser vistas. O Google até acha as páginas sozinho, seguindo links, mas entregar a lista pronta tira a dúvida e acelera a descoberta. O meu tem quatro linhas hoje, uma para cada página de verdade, e ganha uma nova a cada artigo que eu publico. Resisti à tentação de encher com campos de data e frequência de atualização que muita gente coloca: num site que eu atualizo na mão, esses campos envelhecem e passam a mentir, e o Google ignora dado que percebe impreciso. Campo que mente é pior que campo ausente.

O robots é a placa na entrada. Ele diz ao robô o que pode e o que não pode percorrer. O meu é generoso, libera o site inteiro, porque não tenho nada a esconder do buscador, e aproveita para apontar onde fica o sitemap. Um detalhe que pega muita gente: bloquear uma página no robots não a tira do Google, só impede o robô de entrar e ler. Se você quer uma página fora do índice, a ordem para sair tem que estar dentro da própria página, e o robô precisa poder entrar para lê-la.

A regra: esses arquivos são pequenos e fáceis de ignorar, e é por isso que tanta gente os deixa errados. Caprichar neles é trabalho de poucos minutos que evita confusão de meses.

Acompanhamento

Colocar um site no ar sem medição é dirigir de olhos vendados. O carro anda, mas você não sabe se está no caminho, quem entrou nele, nem onde as pessoas pulam fora. Antes de sonhar em melhorar qualquer coisa, instalo os instrumentos que vão me dizer o que está acontecendo. Não dá para ajustar o que você não enxerga.

Plugo três olhares, porque cada um mostra uma fatia diferente:

1. O primeiro é o do buscador: uma ferramenta do próprio Google que mostra por quais termos o site aparece na busca, em que posição, e quantas pessoas clicam. É como eu vejo o site pelos olhos de quem ainda nem chegou nele.
2. O segundo é o do tráfego: quantas pessoas entram, de onde vêm, quais páginas visitam, quanto tempo ficam. É o pulso do movimento.
3. O terceiro é o do comportamento: uma ferramenta que desenha mapa de calor e grava a navegação, de forma anônima, para eu ver até onde a pessoa rola e onde ela trava. É o mais perto que dá de olhar por cima do ombro do visitante, sem incomodar ninguém.

Juntei tudo de um jeito coerente com o resto do site. Em vez de colar um trecho de código de cada ferramenta em cada página, o que sujaria o site e o deixaria mais lento, plugo todas por uma camada central, no mesmo lugar onde o site é hospedado. Liga e desliga ferramenta num painel, sem tocar no código.

A regra: meça desde o primeiro dia, mesmo sem visita ainda. Histórico não se cria para trás. O dado que você não coletou hoje é o que vai faltar quando você for decidir amanhã.

Otimização

Repare que cheguei ao décimo item sem ter dado a nenhum deles o nome de SEO. Não foi esquecimento. Foi para mostrar uma coisa: SEO não é uma etapa do processo, é uma camada que atravessa todas. Ele estava em planejar o mapa e dar URL própria a cada página. Estava na hierarquia de títulos da arquitetura. Estava em escrever conteúdo claro, em deixar o site rápido, no sitemap e no robots, em ligar o Search Console. Quem trata SEO como um passo separado, para fazer depois que o site ficar pronto, já começou errado.

Então o que sobra para este último item, se o SEO já passou por tudo? Sobra o que só existe depois que o site está no ar: a melhoria contínua.

Os itens anteriores são de base. Você os faz uma vez, com capricho, e eles seguram o site. Otimização é diferente: ela não acaba. Com os instrumentos do item anterior coletando dado, eu paro de adivinhar e começo a enxergar. Por qual termo as pessoas chegam, e por qual eu queria chegar e não chego. Qual artigo prende e qual é abandonado no primeiro parágrafo. Onde o visitante trava antes de me mandar mensagem. Cada uma dessas respostas é um ajuste a fazer, e cada ajuste gera dado novo, que aponta o próximo. É um ciclo, não uma linha de chegada.

A regra, e talvez a mais importante de todas: site bom não é o que nasce pronto, é o que melhora toda semana. O lançamento não é o fim do trabalho. É quando o trabalho de verdade, o de ouvir o site e responder, começa.

O mínimo bem feito funciona

Dez passos parecem muita coisa. Mas releia a lista: não tem um item gordo ali. Cada um é o mínimo que um site precisa para funcionar de verdade e entregar o que promete. Tirar qualquer um deixa um buraco que aparece depois.

E isto aqui é o lado simples. Sites modernos carregam uma pilha de tecnologias por baixo: framework, build, banco de dados, camada sobre camada. Não há nada de errado com elas, mas é preciso saber usar, senão você adiciona complexidade sem adicionar valor. Fui pelo caminho contrário de propósito.

O ganho de não pular o básico aparece depois, e é grande. Quando você decidiu antes quais páginas existem e o que vai em cada uma, o site passa a ser desenvolvido com propósito. Cada peça sabe por que está ali. As decisões de base viram âncoras: você desenvolve sem sair do prumo, porque o prumo já estava fincado no começo.

No fim, o mínimo bem feito não é a versão pobre de um site bom. Muitas vezes, é o site bom.