Todos nós sabemos a importância de causar uma boa primeira impressão e que não existe uma segunda chance para isso.
A primeira impressão é um dos principais fatores de permanecia de um visitante no site, ela só perde para o fator “recomendação”, quando um amigo de confiança indica um site, o visitante tende a passar alguns segundos em alguma atividade especifica ainda que a primeira impressão não seja boa.

Levando em conta a primeira impressão do visitante como fator determinante para o tempo de permanecia, imediatamente entendemos a importância da Home Page para garantir um resultado positivo.

O que a sua “Página Inicial” diz sobre o site? Ela é suficientemente esclarecedora? Ela transmite a atmosfera que o visitante espera estar no momento que busca o seu produto ou serviço? Ela consegue despertar o interesse para que o visitante queira se aprofundar na visita? Carrega rápido o bastante? O tempo que o navegador necessita para renderizar as informações relevantes para o visitante é ideal?

Características de uma Home Page eficiente

Veja a seguir algumas características importantes para garantir que a sua home seja eficiente. Observe que são apenas recomendações e que, a aplicação de todas elas não garante o sucesso de um site, existem muitos outros fatores envolvidos, como cores, imagens, conteúdo de qualidade, etc, e ao mesmo tempo alguns projetos permitem que vc ignore algumas ou todas essas recomendações.

Tic-tac, tic-tac, tic-tac… Vc tem apenas 7 segundos

Pesquisas indicam que os primeiros 7 segundos definem se o visitante vai permanecer no seu site ou não.
Mesmo nos sites mais rápidos, o tempo de carregamento leva em média de 2 a 3 segundos sendo assim, restam apenas 4 segundos para que você consiga transmitir a sua mensagem.
Para garantir que a sua página seja atraente, reduza o tempo de carregamento da página principal. Quanto mais rápido ela carrega, mas tempo você terá para conseguir atrair o seu visitante.

Veja a seguir algumas dicas de como melhorar o tempo de carregamento de um site.

Pingdom Tools

O site Pingdom Tools oferece informações importantes sobre o tempo de carregamento de cada arquivo do site. Por causa dele eu fiz algumas mudanças importantes eliminando arquivos pesados que não estavam sendo usados e também arquivos não encontrados.

Ele mostra em amarelo o momento em que é feita a requisição do arquivo até o momento em que inicia-se a conexão, em verde o tempo que demora entre o momento que se inicia a conexão até o inicio do download do arquivo, e em azul o tempo de download da página.

Sendo assim, se as barras amarelas e verdes estão muito longas é bom verificar se o seu servidor realmente tem um bom desempenho e se a barra azul for muito longa, melhor rever o tamanho dos seus arquivos.

Diminuindo a quantidade de arquivos:

Como vc pode ver pelo  Pingdom Tools , cada arquivo que a sua página solicita passa por dois processos antes de ser efetivamente carregado: a requisição e a conexão, sendo assim, podemos concluir que agrupando múltiplos arquivos em um só, o tempo de carregamento da página deve ser reduzido. Vou mostrar duas situações básicas:
1 – Se vc tem um menu ou botão que muda quando se passa o mouse (hover) e cria uma imagem para o estado normal e outra para o estado ” hover” , o servidor fará duas requisições e duas conexões, uma para cada imagem e ainda somaremos a isso o tempo de carregamento de cada uma. O ideal seria juntas as duas imagens em uma só e trabalhar com posicionamento. A imagem ficará maior e conseqüentemente mais pesada, no entanto faremos apenas uma requisição e uma conexão.  Não sabe como fazer isso? O Rodrigo Medeiros explicou muito bem no artigo “Mudando o background-image no hover”

2 – Em se tratando de arquivos css externos , algumas classes e propriedades podem não ser usadas em todas as páginas e por isso nos vemos tentados a fazer arquivos separados. Por exemplo, porque eu deveria inserir o css de formatação do “formulário de contato” da página “contato” no mesmo css que é usado na home  “home” ou nas outras páginas do site? Faz sentido criar um arquivo especifico para esses casos, mas também devemos lembrar que isso aumenta o tempo de carregamento da “Página de Contato” pois teremos que carregar um novo arquivo.
Lembrando que arquivos CSS são cacheados automaticamente, ou seja, ficam gravados no computador e não são recarregados a cada nova requisição, talvez seja interessante termos toda a formatação em um único arquivos que será carregado uma única vez.

Mas então você vai pensar: “Ora Daniele, mas você não está falando sobre a necessidade de termos uma ‘Página Inicial’ rápida para garantir que o visitante encontre a informação que procura nos primeiros segundos?” Sim, eu estou, mas tarde eu vou explicar que muitas pessoas entram no seu site pelos mecanismos de busca, e por isso acabam caindo em outras páginas as quais também vale a regra dos 7 segundos, não adianta reduzir o tempo de carregamento da “Home” aumentando o tempo de carregamento das outras páginas.

Trabalhando com “url amigáveis”

Não vou explicar o que é ou para que servem, pois o Bruno Torres  já explicou muito bem no artigo “Gerenciamento de URLs – Criando URLs amigáveis“, o que é importante saber é que essas URLs Amigáveis sempre deve terminar com uma barra (/). Por exemplo: ao invés de colocarmos http://www.danielevsilva.com.br/blog, devemos colocar http://www.danielevsilva.com.br/blog/. Isso é necessários porque quando o servidor recebe uma requisão que não especifica qual é o tipo de arquivo que ele irá abrir, antes de iniciar o carregamento, ele fará uma checagem em todas as extensões possiveis (.htm, .html. jpg, .gif., etc etc) isso leva alguns milisegundos, mas pode fazer diferença. Colocando uma barra no final, ficará claro que se trata de uma pasta e a resposta será entregue muito mais rapidamente. * fonte: http://www.wordpressthemes.com.br/7-dicas-para-carregar-seu-blog-em-wordpress-mais-rapido/

Otimizando o tempo de carregamento em sites usando WordPress

Se como eu, vc utiliza o wordpress como ferramenta de gerenciamento do seu site ou blog, existem algumas informações que vc deve considerar:

Limpeza do seu banco de dados: O WordPress 2.9 possui um recurso de limpeza e otimização do banco de dados, para isso basta adicionar a seguinte informação no seu “wp-config.php”:

define('WP_ALLOW_REPAIR',true);

Em seguida acesse: http://seu_site/wp-admin/maint/repair.php e siga os procedimentos.

Arquivos não encontrados: Para cada arquivo não encontrado no site, o wordpress gera uma página de erro 404. Ou seja, você uma super-otimização no seu site, mas esqueceu de eliminar uma imagenzinha que estava lá naquele css esquecido, no momento que o WordPress se depara com uma requisição aquela imagenzinha de menos de 1kb, ele interrompe o que está fazendo, gera uma página de erro 404, e em seguida retoma a sua atividade de carregamento da página. Tá… Isso leva só alguns milisegundos também, mas pode comprometer o carregamento. O Site Pingdom Tools ajuda a identificar esses arquivos, depois é só elimina-los ou corrigi-los.

O Gilberto  “Knuttz” escreveu uma solução bem interessante no artigo “Acalmando o WordPress – 404 amigável“.

Favicon: Uma das requisições que o wordpress sempre faz, é para o Favicon, aquela imagem que é exibida ao lado da URL ou do Titulo da sua página em alguns navegadores. Sendo assim é importante você sempre criar um favicon.ico para o seu site em wordpress, do contrario ele vai gerar um erro 404 para esse arquivo também. Não sabe o que é isso ou como fazer? Veja o artigo “21 melhores geradores de favicon da Internet“.

Requisições ao banco de dados desnecessárias:  Como o wordpress é um gerenciador de conteudo desenvolvido para ser usado em qualquer site, algumas informações precisam ser facilmente customizadas, e uma delas é, evidentemente, o endereço do site, . A solução que o wordpress escolheu foi gravar o endereço do site no Banco de Dados, e então cada vez que ele precisa utilizar essa informação ele vai até o banco, pesquisa, e retorna a informação para o site, chamamos isso de requisição ou consulta ao banco. Se vc parar para analisar a quantidade de vezes que o wordpress vai ao banco para solicitar essa informação em cada página é gigantesca, para ajudar a resolver esse problema podems substituir algumas informações dinâmicas por outras estáticas, ou seja, ao invés de inserir as tags especiais (dinâmicas: <?php echo bloginfo(‘url’); ?>)  do WordPress, nós podemos inserir as urls completas (estáticas: http://www.seu_site.com.br).

O Guga Alvez explicou muito bem como fazer isso no artigo “Deixe seu site WordPress mais limpo e mais rápido”

Ufa!

Eu ainda não escrevi nem 10% de tudo o que tenho pra falar sobre assunto, e o artigo já ficou imenso. Vou continuar amanhã

Até mais

21 melhores geradores de favicon da Internet

Antes de mais nada, eu confesso que estou entrando num território muito perigoso, que eu não domino completamente e que não faz parte do meu campo de atuação. Não pensem que eu estou desmerecendo o trabalho de vocês especialistas em identidade visual, simplificando a criação do logotipo aos conceitos abaixo, muito pelo contrario, quero explicar o quanto esse processo é complexo e como a prática é importante. Minha intenção é apenas mostrar algumas coisas que eu aprendi ao longo do meu tempo de trabalho para aqueles que tiveram pouco ou nenhum contato com essa área.
Espero muito receber correções e outros pontos de vista de vcs profissionais da área.
Vamos lá! Continue Lendo »

Uma boa tipografia na web é algo que realmente me impressiona, porque é tão fácil escolher a fonte errada. Eu propriamente acho que nunca fui muito bem sucedida na realização de um projeto baseado em fontes.

Com milhões de combinações possíveis, nós designers acabamos desistindo antes mesmo de começar. No entanto, temos que agradecer a perseverança de alguns de nossos colegas, que por não desistirem acabaram criando as maravilhas que serão listadas no final desse artigo.

Apesar do meu gosto pela analise mais profunda da tipografia, esse artigo tratará apenas da tipografia como elemento fundamental do design: títulos, manchetes e áreas de destaque, etc. Pretendo publicar brevemente algum material sobre “legibilidade na web”.
Continue Lendo »

Desenvolver formulários para web pode ser divertido ou frustrante e exige uma grande dose de persistência e determinação.

O modo como você estiliza e formata seus formulários é crucial para torna-lo aparentemente útil pois na maioria das vezes é preciso convencer o visitante a preencher as informações. Para formul’arios pequenos, basta adapta-los ao site, mas quando se trata de formulários mais complexos onde uma grande quantidade de informações é exigida ter um estilo bem elaborado e fácil de usar se torna o principal motivo de sucesso ou fracasso.

Antes de tudo é preciso entender a importância e o significado de um formulário: eles são hoje a forma mais usada de interação entre usuário e o site, é o modo pelo qual o visitante transmite para o site (ou para os responsáveis) tudo aquilo que ele desejar ver ou fazer. Mesmo quando não aparenta exatamente o tipo de formulário convencional, em algum lugar deve haver uma tag “input” escondida. A palavra “input” tem exatamente esse significado: passar, enviar informações.

Continue Lendo »

(atualizado com novos exemplos)
Projetar seu portfolio é provavelmente a coisa mais frustrante do mundo.

Todos os colegas com quem conversei falam da dificuldade de concluir e das dezenas de vezes que abandonam e recomeçam.

Esse meu site mesmo, que além de blog, serve como portfolio passou por umas 4 tentativas até terminar desse jeito, ele inclusive chegou a ser rosa e com florzinhas coloridas, mas todos as versões estavam mal acabadas do tipo “vamos deixar assim por enquanto”. E confesso que ainda não estou completamente satisfeita com a versão atual, tenho idéias novas pra ele todos os dias…

Continue Lendo »

O motivo de voltar a escrever sobre assunto é porque não me senti satisfeita com a primeira parte, acho que faltou um pouco de teoria, então se este artigo estiver muito técnico para o seu gosto, sugiro que leia o primeiro artigo que trata mais da aplicação de fontes num projeto.

É muito interessante entender como as fontes são compostas e o que diferencia cada tipo, assim é possível compreender melhor porque uma certa fonte causa um resultado mais satisfatório do que outra, e conhecendo melhor os termos técnicos é mais fácil realizar pesquisas e se aprofundar no assunto.

Continue Lendo »

Eu tenho uma pequena relação de links guardados no netvibes separados por temas, quando um desses temas atinge uma certa quantidade de links eu publico um artigo novo. Dessa vez eu não pude esperar para escrever, não depois de ter relido um artigo no FatorW, “Como usar imagens free e não ser igual à concorrência”.

Nós que trabalhamos com criação já estamos cansados de ouvir a velha frase “uma imagem vale mais que mil palavras” e realmente não se pode negar essa afirmação. Cada vez mais a turma responsável pela criação vem apelando para bancos de imagem free para reduzir custos e oferecer um orçamento mais competitivo, mas, com isso, temos o risco de mais tarde encontrar aquela mesma imagem sendo usada pela concorrência ou até mesmo num contexto oposto aquilo que você desejava demonstrar, pois uma mesma imagem pode estar aberta a muitas interpretações, o que pode ser muito perigoso para a marca.

Continue Lendo »

Elementos ornamentais, também chamados de arabescos, vêm sendo usados desde a idade média por tipógrafos e ferreiros, decorando desde de bancos públicos a convites de casamento, e agora, como não poderia deixar de ser, websites.

São elementos belos e realmente podem enriquecer um trabalho quando usado sem exageros. Em alguns casos o projeto pode ser completamente baseado nessas estruturas de contornos florais, linhas onduladas e formas geométricas. Em outros o uso é mais sutil, apenas como elemento decorativo adicionando um toque de sofisticação à página, como no caso do Speakup que usa arabescos num estilo de pixel art apenas para dar peso à alguns elementos reforçando a hierarquia do local.

Continue Lendo »

Elegância e sofisticação não é técnica, nem conceito, nem elemento da criação, é um estilo de desenvolvimento que independe de qualquer conceito pré-estabelecido.

Quando tratamos de moda, normalmente vendemos a beleza em primeiro lugar e em seguida o conceito da marca.

Em primeiro lugar temos que deixar claro que quem usar aquela marca vai estar sempre bonito e atraente e em seguida enfatizar o conceito que a marca (normalmente o estilista) deseja oferecer com suas peças, se é descontração, essa será a linha que vamos seguir.

Continue Lendo »

Sites de uma página estão no topo da lista de conceitos de comunicação eficientes. O nome já diz tudo: são sites que não tem paginação, todo o conteúdo é exibido em uma página só, ou praticamente isso. Em alguns casos, usa-se flash ou iframe, mas é em uma página que tudo acontece.

Ultimamente tenho falado bastante sobre a criação de um portfolio, e esse artigo está diretamente relacionado já que a maioria dos sites que seguem esse estilo são portfolios pessoais, no entanto eu acredito que essa seria uma solução muito boa para alguns sites institucionais em que, muitas vezes, optamos por uma estrutura mais complexa.

Continue Lendo »