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 conunto,
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 chamarem atenção, mas vão aí alguns comentários:
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
agueOutra contar mais a música. Falo por experiência, de váários sites que a pessoa insistiu na música, 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.
Espero que estas diretrizes ajudem, e espero mais ainda por respostas e discussões em cima destes pont
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.
