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 »

Oi Pessoal… Tá, não briguem comigo, eu ando sumida, mas eu volto…
Bom, nesse momento eu estou no meio de algumas mudanças, estou analisando algumas propostas interessantes, logo logo vou ter novidades…
Por enquanto eu estou um pouco sobrecarregada de trabalho, e tenho recebido cada vez mais pedidos de propostas e orçamentos que eu não tenho tido nem tempo de responder, então percebi que está na hora de começar a montar meu próprio time para não deixar essas pessoas que me procuram sem um atendimento.
Minha ideia é montar um banco de freelas que eu posso procurar em emergências.
Alguns projetos eu vou acompanhar e fazer a ponte e gestão entre o cliente e o desenvolvedor, outros eu vou apenas passar o contato.
Além disso, uma grande quantidade de pessoas me procuram pedindo indicações para freelas e até contratações efetivas, esse banco também vai servir para esse tipo de indicação
Então se vc procura por projetos freelas, nessa semana eu tenho pelo menos 3 propostas. São projetos pequenos então não precisa ser muito experiente, mas tem que ter bom gosto porque eu vou avaliar/aprovar pessoalmente cada trabalho e quem já trabalhou comigo sabe que eu sou bem chata. Mas por outro lado, como falei no inicio, tenho a intenção de montar um time de freelas, mais tarde quem sabe a coisa de certo e possa surgir uma agencia daí… Quem sabe…
As pessoas que já trabalharam comigo sabem também que eu priorizo o time acima de tudo e todos envolvidos poderão contar com o máximo da experiência e apoio que eu posso dar.
É isso
Se vc ficou interessando em participar segue o link para cadastro:
http://spreadsheets.google.com/viewform?formkey=dEdsZ2ZCQW80Q1lvQldQSVpUZVZjRnc6MA

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 »

Vc não sabe pq meu blog está pelado?

Entenda isso aqui

Minha mesa de trabalho
Muita gente já fez. Essa é a minha mesa de trabalho

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 »

De todas as cores, o azul talvez seja uma das mais seguras para se usar em um Web site. Podemos aplicá-la a quase todo o assunto, simplesmente porque o azul é uma das cores mais admiradas pelas pessoas. Pode ser forte e firme ou suave e amigável. Nunca ouvi falar de alguém que não admira ao menos uma tonalidade de azul.

A Técnica

É excencialmente uma cor fria. Mas a medida que acrescentamos sombra ao azul, ele se torna mais quente, sendo assim quanto mais escuro o azul, mais calor ele transmite podendo até deixar de ser uma cor fria.
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 »

Oi Pessoal, mais uma vez estou na luta pra encontrar um profissional bacana pra minha equipe de web aqui na agência. Dessa vez estou procurando um conhecimento mais específico: pessoas com conhecimento da plataforma wordpress ou outro CMS como gerenciador de conteúdo.
Agora os meus requisitos básicos: Preciso de alguém com talento e interesse em ser web designers mesmo, descartando toda a turma de designer gráfico que quer fazer bico de web e semelhantes.
preciso de interesse e conhecimento de mercado.
A agência trabalha especificamente com criação e estruturação, envolvendo AI, webstandards, flash+AS, toda parte de programação é terceirizada com outra agencia da área, então não temos interesse em programadores.
Ficamos em São Paulo-SP, e só contratamos para trabalho integral. só trabalho integral na agencia! NÃO TEMOS INTERESSE EM TRABALHOS EXTERNOS!
A remuneração vai ser analisada (com justiça) para cada caso.
Os interessados, por favor, entrem em contato pelo e-mail daniele@allclickdesign.com.br
Quem quiser saber mais sobre os trabalhos do grupo (pool de quatro agencias) basta acessar os sites:
www.b2brasil.net
www.dgrau3.com.br
www.allclickdesign.com.br
www.estudiolumiar.com.br