Do you have the habit of hitting the search button multiple times even before it loads the search results? Well… I used to do that and so do many other users. Clicking the search button multiple times results in additional server requests and slows down the page’s loading time.

Why do users click again?

Because they are users! They aren’t developers who understand what happens in the back end.

Its our job as developers/designers to let the user know that the results are being loaded and to ask them to wait until it loads.

How do I do it with just CSS?

Its pretty simple. Click and hold the search button below and see.

I am sure, I don’t have to explain how it works for the experts, but if you are novice continue reading…

The trick is to use CSS sprites and show the animated loader image while the user clicks the button(on focus), indicating that the page is being loaded. You can download the sprite here.

Now, how do I avoid multiple clicks?

Its impossible to disable a button just with CSS, but we can ask the user to wait by replacing the hand/pointer with a “wait” cursor. So this is how the final CSS code looks like.

CSS
01
02
input.submit{
03
width:16px;
04
height:16x;
05
display:block;
06
overflow:hidden;
07
text-indent:-999px; /* To remove any default text on the button*/
08
line-height:16px; /* required for safari */
09
background:url(search-sprite.gif) no-repeat 0 0; /* This will display the search icon by default */
10
cursor:pointer; /* Hand cursor for the normal state */
11
border:none;
12
padding:0;
13
}
14
 
15
input.submit:hover{
16
background-position: 0 -16px; /* This will display the dark search icon on hover */
17
}
18
 
19
input.submit:active{
20
background-position: 0 -32px; /* And finally, this is the one that shows the loader */
21
cursor:wait; /* Shows the wait cursor on click */
22
}
23

If you really want to disable the button, check out this JQuery solution. And, don't forget to put in your thoughts and ideas.

Recently, while working on some client projects, I noticed a few requirements(I know there are many) that were common. I strongly feel, this will be useful for your next web project.

1. Empty form field value on focus/click

This is a very common requirement. You would have noticed form fields that have a value by default which disappears when you click/focus on them. When you click outside, the value appears again.

Javascript
01
02
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
03
</script>
04
 
05
<script charset="utf-8" type="text/javascript" src="jquery.emptyonclick.js"></script>
06
 
07
<script type="text/javascript">
08
$(document).ready(function(){
09
    $('.emptyonclick').emptyonclick();
10
});
11
</script>
12

2. Truncate lengthy text with either a "more" button or 3 dots at the end

I am sure that most of you would already have faced this issue, especially with lengthy breadcrumbs. You don't have to run behind and bother a programmer anymore for a solution.

Truncate is an awesome jQuery plugin that helps you achieve this in seconds. Download the plugin and include the following code within the head tags

Javascript
01
02
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
03
</script>
04
 
05
<script charset="utf-8" type="text/javascript" src="jquery.truncate-2.3.js"></script>
06
 
07
<script language="javascript" type="text/javascript">
08
$(function() {
09
    $(".classname").truncate( 60 );
10
});
11
</script>
12
 
13

Replace the .classname with the class name of your HTML element that contains the text. Also, the number 60 in the code above is the maximum number of characters you would like to allow before truncating. Replace that with your value.

Adding a "more" link at the end of the text is another cool usage. You can find more about the usage here.

3. Adding classes to the first and last list items

I don't think there will be a HTML/CSS developer who haven't abused wordpress for not adding first and last classes for their lists

Just imagine a menu that needs a different background for the first and last list item. You'll find this handy when creating themes for a CMS like wordpress where you have no control over the HTML code.

After spending a few minutes on google, I found this snippet

Javascript
01
02
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
03
</script>
04
<script type="text/javascript">
05
$(function(){
06
  $("li:first-child").addClass("first_item");
07
  $("li:last-child").addClass("last_item");
08
});
09
</script>
10

This can also be achieved using the :first-child and :last-child CSS pseudo-classes.

Step 1: Bookmarking the gallery forms

Step 2: Prepare a list of all possible form fields

Step 3: Using InFormEnter to fill the forms

Step 4: Prepare your images for submission

Step 5: Start Submitting… Enjoy!

This was created digitally using Fireworks and Photoshop and is something along the lines of the design of IndoFolio. I hope it will enrich your desktop. Its available for 1024×768 (standard) and 1280×800 (wide) resolutions. An Iphone version has been included as well.

The wallpaper is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 India License and mainly should not be used for print.

Preview

Wishing you all a prosperous and productive year ahead!

I’ve compiled a list of websites that accept logo submissions, along with the link to their submission forms. The ranking and other details of each site has been included as well, for your ease.

PS: The ranking details are provided just to give you an idea on how popular each website is. The information may vary from day to day.

Only three in the list requires registration to submit your logos

Logo From Dreams
Alexa Rank: 147286
Page Rank: 5
Famous in Countries: China, India, USA and Spain

Graphic Design Blog
Alexa Rank: 36183
Page Rank: 5
Famous in Countries: Pakistan, USA, India and Germany

The Design Inspiration
Alexa Rank: 17800
Page Rank: 5
Famous in Countries: USA, China and India

Logo Moose
Alexa Rank: 61436
Page Rank: 4
Famous in Countries: Pakistan, India, Indonesia, USA and UK

Logo Faves
Alexa Rank: 58238
Page Rank: 4
Famous in Countries: USA, India and Germany

Logo Critiques If you are actively looking for critiques, submit your logo here.
Alexa Rank: 312761
Page Rank: 4
Famous in Countries: USA and India

Type Based Exclusively for typographic logos.
Alexa Rank: 1526872
Page Rank: 4

Logofi
Alexa Rank: 240770
Page Rank: 4
Famous in Countries: Pakistan, Germany, Turkey, USA and India

Logo Fury
Alexa Rank: 166771
Page Rank: 3
Famous in Countries: USA, India, UK, Italy and Australia

Logo Galleria
Alexa Rank: 403497
Page Rank: 3
Famous in Countries: India, Indonesia and USA

Logo Gallery
Alexa Rank: 594609
Page Rank: 3
Famous in Countries: India, Malaysia and Indonesia

Logo Gallery Design
Alexa Rank: 1929224
Page Rank: 3
Famous in Countries: India

Logo Gala
Alexa Rank: 222652
Page Rank: 3
Famous in Countries: India, USA, Israel, Pakistan and Croatia

Logo Talkz
Alexa Rank: 754413
Page Rank: 3
Famous in Countries: Romania, USA and India

Czech Logos
Alexa Rank: 4,669,960
Page Rank: 3

Logoed All you need to do is submit an email to the admin
Alexa Rank: 1049291
Page Rank: 2

The Logo Mix
Alexa Rank: 1325361
Page Rank: 1
Famous in Countries: Germany

Logo Nest
Alexa Rank: 840171
Page Rank: 0
Famous in Countries: Canada, India, USA and UK

Registration required for the following sites

Creaticca
Alexa Rank: 11958
Page Rank: 6
Famous in Countries: USA, India, Germany and Pakistan

Logospire
Alexa Rank: 125330
Page Rank: 5
Famous in Countries: Turkey, USA, Belgium, Germany and India

Logo Pond
Alexa Rank: 11244
Page Rank: 3
Famous in Countries: USA, China, Germany and India

Before submitting to these websites just make sure that your logo is perfect!

Before reading further, I would suggest you to check the PR of your twitter profile page. Also try checking the PR’s of the giants. I’m glad to see Google Page Rank impacting the public social media profiles of services like twitter.

So what is Google looking for? Check out this quote from Marketing Professor.

What is Google Looking For?

* Credible inbound links from sources with credible inbound links
* Quality thematic content in their Twitter stream (jumping from dog training to affiliate marketing, to dieting in your twitter stream may get different results than sticking to one theme or topic of discussion… key phrases).
* Outbound links to credible sources.

It wouldn’t surprise me if they are also looking at social measures (retweets, locations, and @ replies).

The tips mentioned below are based on my experience, I would love to hear your suggestions (especially from SEO experts).

1. Quality of your tweets

Sharing quality links is of course the first and foremost thing. If you don’t share your followers wont care! If you want to gain the attention of bloggers, try your best to tweet things that are relevant to your area of expertise. If someone is following a designer on twitter, that obviously means they are expecting him/her to share design related stuff. TwitterGrader is a nice tool to evaluate your performance in the twittersphere.

Bloggers often post round ups about the best Tweeters in a certain niche and following are a few examples of such posts.

2. Adding a Follow Me button in your website

I am sure, most of you would have already done this. But if you haven’t, include a follow me button in your blog/website and also show your recent twitter updates. So that makes one profile link, for google spiders to crawl through

3. Create an attractive twitter theme

All you need to do here is follow them on twitter and post a tweet.

Follow the same process here.

And the one below can be considered as a milliondollarwall for tweeters.

Know what? I’ve worked on this project Posting your profile is absolutely free.

4. Post your profile on other Social Networking sites

5. Submit your profile on Twitter Directories

What does that mean?

What makes Twibies unique?

Question for designers: Did you create a free twitter icon set recently?

Wanna receive an update whenever a twibie is posted?

Why IndoFolio?

I wanted to use a domain name that makes it clear that I am from India and Indo is the most popular prefix used to indicate India. My second requirement was to include “folio” which makes it obvious that this is my portfolio.

Concept behind the design

My name “Gopal” is another manifestation of Krishna who was one of the incarnations/avatars of Lord Vishnu according to Hindu mythology. This inspired me to include other avatars of Lord Vishnu as well. Nothing religious! This was just an attempt to come up with a unique design concept.

Just to let you know, I am a great fan of Russian Art! and was very concerned about achieving an Indo-Russian effect. Though it took me some time playing with Fireworks and Photoshop, I’m happy with the final output.

Softwares Used

The initial draft of IndoFolio was created using Fireworks and was purely vector. Then I took it to photoshop, to burn and dodge a few areas which helped me achieve the “painting” effect. I believe Photoshop gives more control when it comes to burning and dodging.

In the following images, you can compare the Fireworks and Photoshop version of the avatars. I’ve given a one line description about each avatar, for those who are curious

Image Optimization

Optimizing the images was a challenge as I had to maintain the image quality. Transparency being a major thing to consider, I had to convert most of the images to 24bit PNGs. I used some online image optimizers like PNGCrush to reduce the file size.

HTML/CSS Development

This was really challenging as my goal was to create a single page website using these avatars. I planned to use JQuery to make the site more lively, different and user friendly. Using JQuery intensely for a single page website is no sin

After doing some research, I decided go ahead with horizontal parallax. For more details about Parallax check out my previous blog post (I created this post while working on IndoFolio).

So that’s it! I would be glad to hear your comments (good or bad) on IndoFolio.

As you would be aware, I redesigned the PD logo recently and updated my twitter theme based on the new logo. The next thing that sprang in my mind was to design a wallpaper for my readers and here it goes. This one was created from scratch using Photoshop.

Both Standard (1024×768 and 1600×1200) and Wide versions (1280×800 and 1920×1200) has been included in the zip file.

Preview

Please do let me know (via the comments section) if you need this wallpaper in a different resolution

If you are looking for a definition of parallax, here it goes. As far as the web (especially design) industry is concerned, parallax is the arrangement/animation of images in a way that lets you feel the distance between them.

For example, imagine that you are looking through the window of a moving vehicle. You will see the objects closer to you moving faster compared to the distant ones. The sun stays still while the trees, buildings and other objects move.

In this post I would like to walk you through different posts, examples and tutorials that would help you achieve this effect.

This technique was initially used in 2d video games and now mostly seen in single page portfolio websites and website headers.

2. Parallax in use

I would like to show you a few hand-picked websites that uses parallax before I proceed.

Eric J – This is one of my favorite websites using Parallax in the way it should be. The motion of the wheel and the smoke that comes out of the silencer as the scooter moves adds up to the parallax feel.

Markus Neidel – This is an awesome 3d vertical parallax (flash).

Silverback – To see the effect in this site, you would have to resize your browser window and notice the header region.

Umaghet Zeggen – All you need to do is move your mouse (towards any direction).

Squaredeye – Resize your browser window and notice the movement of clouds in the header. A css based parallax.

Dezignus – Move your mouse over the header region (towards any direction).

3. Now, how do I create Parallax?

Let’s see how to create this effect using javascript, flash and other frameworks.

Using JQuery

You’d probably be aware, I am a JQuery fan and for that reason I would like to first list down the methods using JQuery to achieve the Parallax effect.

These tutorials use jparallax – a jQuery plugin to create parallax

Create a Parallax Website Header

Using Mootools

Not familiar with JQuery huh? Here goes a tutorial that uses mParallax a mootools adaptation similar to jParallax.

Another demo using Mootools

Using Scriptaculous

This one uses scriptaculous another popular javascript framework.

Using Javascript – A Vertical Parallax

Using pure CSS

Unlike the ones above, this would work only when the user re-sizes the browser window. This is achieved using css positioning.

A tutorial on how to create the Silverback Parallax (shown above) using CSS.

Examples of and How to Create the CSS Parallax Effect

This is a really interesting one! A parallax illusion with CSS

Parallax using Flash

A step by step tutorial by webdesignerwall.

Creating parallax with flash cs4

Are you an AfterEffects freak?

If so, this tutorial is for you. Create a Realistic Camera Move with Parallax.

So, that’s all about Parallax. I hope this post was informative