26 de março de 2010

Inspiration Showcase - Sites #8

Design minimalista

Simplicidade é tudo, pelo menos quando se trata de web design essa característica pode fazer muita diferença dependendo do objetivo que determinado site tem. E falando em simplicidade veja mais uma inspiradora seleção, aqora de sites simples, clean, leves como uma pena, ou melhor dizendo minimalistas. Enjoy !


site minimalista
nick-harrison.co.uk/



site minimalista
undesign.it



site minimalista
rodrigogalindez.com




site minimalista
thirtyconversationsondesign.com



site minimalista
corporateriskwatch.com




site minimalista
feltron.com



site minimalista
am-tokyo.jp



site minimalista
beingwicked.com



site minimalista
jessicahische.com



site minimalista
designisblank.com



site minimalista
establishedandsons.com

13 de março de 2010

Usar ou não usar o 'clique aqui' nos seus links, eis a questão !

Veja como a escrita de seus links influencia na quantidade de cliques



Muitos aspectos podem influenciar na quantidade de cliques dos seus links, a divulgação, o visual do seu site ou blog, a paciencia do visitante ;) e pode acreditar, a maneira que você escreve seus links pode aumentar ou diminuir drasticamente a taxa de cliques.(...)

Como assim?

Como exemplo, vamos usar a pesquisa do site dustincurtis.com onde ele exibe várias frases com um link, todas com o intuito de segui-lo no Twitter, cada uma das frases foi selecionada aleatoriamente, sendo que foram vistas por 5000 visitantes únicos, veja as frases usadas e os resultados:

"I'm on Twitter." ("Estou no twitter")
Usando essa frase e a palavra "Twitter" como link gerou uma taxa de cliques de 4,70%.

"Follow-me on twitter" ("Siga-me no twitter")
Usando essa frase e a palavra "twitter" como link gerou uma taxa de cliques de 7,31%

"You should follow me on twitter" ("Você deve me seguir no twitter")
Usando essa frase e a palavra "twitter" como link gerou uma taxa de cliques de 10,09%

"You should follow me on twitter here" ("Você deve me seguir no twitter aqui")
Veja que interessante, usando essa frase e adicionando a palavra "here" e usando ela como link gerou uma taxa de cliques de 12,81%.

Viu só ! Bastou adicionar a palavra "here" ("aqui") na frase e a taxa de clique aumentou bastante.

Vendo esse outro teste só que agora feito pelo copyblogger.com, é exibido tres tipos de links, todos com o mesmo objetivo.

"Click to continue" ("Clique para continuar")
Gerou uma taxa de clique de 8,53%.

"Continue to article" ("Continue o artigo")
Gerou uma taxa de cliques de 3,3%.

"Read more" ("Leia mais")
Gerou uma taxa de clique de 1,8%.

Não só você tem que chamar a atenção de alguém para clicar no seu link, como você também deve esclarecer o que acontecerá se o visitante clicar nesse link de forma objetiva e clara, o que acontece em alguns sites é que o visitante clica no link achando que aconteceria aquilo que está descrito mas na verdade é redirecionado para outra página onde ele tera que clicar em outro link e depois em outro para chagar ao objetivo, isso é chato pra qualquer um. Chame a atenção e ofereça um link direto para aquilo que está descrito e pense bem no uso de uma boa mensagem não muito apelativa. ;)
Aproveitando a oportunidade, fique a vontade para me seguir no Twitter aqui. ;D

2 de março de 2010

CSS Tutorial - Criando um botão flutuante back-to-top (topo da página)

back to top

Olá ^_^, vamos criar um botão flutuante onde o usuário clica nele pra voltar ao topo do blog, mesmo que a página role o botão continua fixo no canto da página, essa mesma dica serve pra você criar um botão de Feedback, Twitter ou o que você imaginar. É bem simples !
Primeiramente o CSS, crie isso:
.botaotopo {
display:scroll;
position:fixed;
bottom:2px;
right:2px;
}
Entre todas essas propriedades, quero destacar aqui o position:fixed ele é responsável por fixar o botão no canto da página.



Agora criamos um link com a imagem, recomendo inserir esse código logo depois da tag <body>:
<a class="botaotopo" href="#" title="Para o topo !">
<img src="http://ENDEREÇO-DA-IMAGEM-AQUI.gif" border="0" />
</a>
Não esqueça de adicionar a class="botaotopo" no link (como acima), e veja que no lugar do endereço do link foi adicionado apenas um "#" pois esse link não servirá para redirecionar para outra página, apenas para o topo da mesma por isso colocamos apenas esse caractere. Substitua o http://ENDEREÇO-DA-IMAGEM-AQUI.gif pelo endereço da imagem de sua preferência.

Atualização(12/03/10)
Recebi alguns comentários de pessoas que estavam com dificuldades para iserir esse botão em seu blog por não ter muita intimidade com o CSS e/ou HTML, utilize esse outro método, é só inserir apenas esse código que já está com o CSS imbutido no link, isira logo abaixo da tag <body>:
<a style="display:scroll;position:fixed;bottom:2px;right:2px;" href="#" title="Para o topo !">
<img src="http://suaimagemdobotaoaqui.gif" border="0" />
</a>