Checklist: Antes de colocar um site no ar

Depois árduas semanas de trabalho, seja ele um freela ou resultado de um projeto envolvendo vários profissionais, em algum momento o site precisa ficar online, ganhar vida, aparecer pro tio Google!

site online

Mas não é só felicidade. Não basta pegar os arquivos, enviar pelo FTP e partir pro abraço. Existem uma série de itens que precisam ser verificados e algumas regrinhas que podem ajudar a reduzir a dor de cabeça da publicação de um novo site em ambiente de produção.

Nunca coloque um site no ar em uma Sexta-Feira!

Pode até ser que em algum momento entre o briefing e a assinatura do contrato alguém não se tocou que o dia do prazo final era uma sexta-feira, mas isso é exceção. Ninguém em estado perfeito de sanidade (a menos que tenha prazer em trabalhar fins de semana) aceita o agendamento de entrega para o último dia útil de uma semana. Nunca faça isso!

Verifique todos os links.

Pode ser que uma configuração errada de URL’s em links relativos possa ter feito algumas páginas ficarem perdidas. Portanto, verifique se todos os seus links estão funcionando corretamente. Caso o site tenha uma quantidade muito extensa de páginas, existem plugins para auxiliar este trabalho no Firefox, como o Linkchecker. Experimente.

Verifique a variação do layout em todos os navegadores.

Se você conhece os motores (engines) de renderização, sabe que não precisa testar em realmente todos os navegadores do mercado. Uma dica para ter o CSS bem parecido em todos os navegadores é começar com um CSS Reset, um código CSS que zera todas as propriedades padrões e já deixa, de início, todos os browsers renderizando as tags de forma idêntica.

all_browsers

Eu costumo desenvolver no Firefox e depois fazer testes no Chrome e nas últimas versões do Internet Explorer. Se o código estiver validado e estiver tudo Ok nesses, já dá para garantir uma apresentação semelhante em todos os outros browsers. De qualquer forma, ainda tenho aqui Safari e Opera instalados para ajudar nos testes.

Revise o conteúdo

Cuidado para não deixar XXXX, nonononos e Lorem Ipsuns entrarem em nenhuma parte do site. Faça também a revisão ortográfica, existem dezenas de ferramentas que te ajudam com isso.

Imagens de conteúdo também são importantes, lembre-se (caso use) de usar imagens de banco de imagens sem as marcas d’agua e verifique se todas estão aparecendo corretamente e em suas respectivas páginas.

Outra parte do conteúdo que não pode entrar no ar com errata é o rodapé ou seção de contato. Certifique-se de que todos os endereços e telefones estão atualizados. Algumas vezes o cliente muda de endereço ou telefone durante o desenvolvimento de um projeto longo como este.

Lembre-se do CSS media=”print”

Caso não saiba, é possível colocar um estilo CSS somente para o momento que uma página estiver sendo impressa. É a declaração de media=”print”.

<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />

Alguns divs não possuem nada de interessante e podem ocupar muito espaço numa folha de papel na hora de sair na impressora, então basta selecioná-los com a folha de estilos de impressão e escondê-los com display: none.  Ainda é possível reduzir a quantidade de cores, de colunas ou até fazer todo um novo estilo, só depende da sua criatividade.

Lembre-se do favicon.

É um detalhe super fácil de resolver e que sempre passa despercebido. Um ícone (favicon) para aparecer na Aba do navegador quando o site é carregado pode ser chamado colocando o seguinte código dentro da  tag <head>:

<link rel=”icon” type=”image/x-icon” href=”/favicon.ico” />

E ainda, que tal um favicon quando abrirem o site pelo iPhone?

<link rel=”apple-touch-icon” href=”/favicon.png” />

E o trabalho só começou.

Este é o mínimo para que esteja tudo acessível aos seus usuários e se já está tudo funcionando, sempre tem o que melhorar.

Repare que agora não é só você e sua equipe acessando o site e que já tem muita gente passeando pela interface que foi criada. Aproveite a oportunidade para monitorar o comportamento dos usuários, fazer testes A/B na interface, aprimorar o SEO e manter o projeto em constante crescimento.

E você, acha que faltou alguma coisa? Comente!

Fique atualizado Siga-me no Twitter @richardbarros

13 comentá em “Checklist: Antes de colocar um site no ar

  1. Gustavo 09/04/2010 16:05

    Artigo bastante interessante.

    Responder

  2. Claudio gomes 02/05/2010 09:04

    muito bacana a dica gostei

    Responder

  3. Marcos 12/06/2010 14:07

    Gostei das dicas , sao realmente importantes e devem ser observadas na hora de hospedar o site . Abraco.

    Responder

  4. Cláudio Barbosa dos Reis 26/08/2010 16:45

    Bacana a matéria, o trabalho é bem maior quando queremos realmente fazê-lo com profissionalismo, sem pular nenhuma etapa, pena que as vezes nem todos os clientes reconhecem…

    Responder

  5. samuel 31/08/2010 22:44

    Excelente trabalho, o artigo é foi muito útil e bem explicativo.
    Principalmente pra mim que estou começando no ramo de programação e web design agora!
    O que parece ser fácil pode vir a virar uma dor de cabeça se não acertamos pequenos detalhes.

    Show de bolaa! Ta de parabéns.

    Responder

  6. Josivaldo Lima 02/09/2010 15:45

    Muito bom o arquivo, parabéns pela iniciativa.

    Responder

  7. Alexandre 18/07/2012 12:43

    Você recomendou não esquecer do Favicon, mas no seu site você esqueceu… hehehe

    Valeu pelas dicas! Abs!

    Responder

  8. MARIA RITA DE PAULA 04/09/2014 22:40

    Será fonte de consulta para meu trabalho em Educação Especial. Obrigada.

    Responder

  9. Vera 15/12/2015 15:37

    Muito interessante o conteúdo. Mas meu problema são essas dores. Quando sofri uma crise de lombalgia, o médico me indicou desse colchão magnético . Alguém daqui já usou? Falaram que diminui até insonia.

    Responder

  10. 76Clifford 15/08/2017 19:59

    Hello admin, i must say you have high quality articles here.
    Your page should go viral. You need initial traffic only.
    How to get it? Search for: Mertiso’s tips
    go viral

    Responder

Faça um comentário

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>