Few days back, i wrote a post about a Twitter badge, that looks like Uservoice’s Feedback button. However, there were certain limitations in using it :

• The image is hosted on their server, not yours.
• It includes a small “?” link that leads back to their website.
• It relies on Javascript. Won’t work if javascript is disabled.
• Limited to the texts “Follow us”, “Follow”, “Follow Me” and “My Twitter”

When Mike left a comment asking if it was possible to get the image hosted on our site, i decided to write a quick tutorial on how to put such a badge on your site without relying on external site.

Personally, I hate to follow tutorials without knowing the outcome. So, check out the DEMO to see what you’ll be creating.

Step 1 : The Markup

The markup is really simple. Just link your image to your twitter account and wrap it inside a div with an id, as follows :

<div id="twitter-badge">
	<a href="http://twitter.com/shrihari"><img src="twitter.jpg" alt="Twitter" /></a>
</div>

That code should go just before the closing body tag : </body>.

Step 2 : The CSS

The CSS is also amazingly simple. Firstly, you need to make sure the an image with a link has no ugly border around it. If you’re using Wordpress, chances are high that your theme author has already done this, unless you’re using some spammy theme. Next, you need to fix the position of the image.

img, a img { border: 0; }
#twitter-badge
{
	position: fixed;
	left: 0;
	top: 200px;
}

If you want the image on the right side, you’ve to replace left: 0; with right: 0;

Check out the demo here. If you’ve any questions feel free to drop them in the comments.

In this post i’m going to deal with a simple User Interface concept in web designing. The part i’m going to deal with is Forms. More specifically Login Forms. They are found in almost every other website that you’ll come across. Also, they’re one of the most used elements of the websites that use them. Though i use “Remember me” feature on almost all the websites i use, there are people who don’t use it. For them, the login form needs to be the most usable. I’ll give you some tips on how to improve your login form’s usability. (Note : I’m not a usability expert)

KISS : The Markup

<input type="text" name="username" />
<input type="password" name="password" />
<input type="checkbox" name="remember" id="remember" /><label for="remember">Remember me</label>
<input type="submit" name="login" value="Login" />

Keep the markup as simple as possible. The above is one of the simplest markups. If you use email address for logging in, keep the input box’s names relevant like “email” “email-address” etc. Sure, names like “my-site-e” “my-site-login-field” will work. But, Google Toolbar and the like will not be able to “AutoFill” the form. This is a huge usability mistake.

Preserve The Form Order

The order of the form elements goes as above :

1. Username/Email address box
2. Password box
3. Remember me checkbox (if available)
4. Login button

Don’t insert other elements like “Forgot password ?” “Resend Activation” “?” links in between these elements. Place them after the Submit button. But, why ? The usual behaviour of users when they encounter a login form is :

1. Enter the username/email address
2. Hit [Tab] and type password
3. Hit [Tab] and hit [Space] to check the Remember me box (if available)
4. Press Enter to login

When you insert other elements in between, they’re selected by hitting tab. So, users are forced to click-focus on the next element, or hit [Tab] repeatedly. This really spoils the usability. Check out Blellow’s login form, which breaks this order. (In fact, this is what triggered me to write this post.)

AutoFocus The First Field

When you reduce the work of the user, you increase the usability. 99% of the users use the login form for logging in. So, it makes sense to automatically place the I-beam in the first input box on the login page. Examples that come to my mind are Google, Digg, Facebook. Click on the login link and the cursor will be already placed in the username field. It can be easily achieved using jQuery. Here’s how :

$(document).ready(function() {
	$("input[type='text']:first", document.forms[0]).focus();
});

The above code will focus on the first text field in the first form on the page. If you’ve some search form or other form before the login form, you’ve to adjust the index of document.forms[n] accordingly.

Hope the post was useful. As i stated previously, I’m not a usability expert. So, if you have some more tips to improve a login-form’s usability, share with us in the comments.

In my last post I mentioned that I’ve been learning Game programming in C++ and also 3D design using Blender. Chris commented on the post suggesting that I post my works on the blog and thats exactly what I’m going to do in this post. I’m a master neither in the game programming nor in the 3d design. So forgive me if my work is amatuerish.

Mario

This has been tested on Windows XP and Vista. But hopefully it should run without a problem on older versions as well. This just includes the first level environment that i created using Mappy. Also, this doesn’t include any interactions with the environment. I’ve also included the source code. So, you can take a look at it too and also use it for your own works. Licensed Open source :P.

3D Design

This may look very very noobish. But after all this is my first go at 3D. I followed this online tutorial to achieve this. Very eager to hear your comments on this one.

If you’ve been reading GotChance for a while, you’d know that I used to have Justified text alignment on the content of blog posts. I had always thought that it was cool to have the right and left margins set evenly. But I was wrong. I came to know that Justified alignment was difficult to scan, read than a normal left-aligned text.

Another problem with Justified alignment is the "rivers" as you see in the picture to your right. They are some continuous gaps that run down the paragraphs, which make them visually less appealing. Considering all these, I’ve switched over to Left-aligned text.

Coming back to the title of the post, which alignment should you choose for your website ? There is no point arguing over this one. Definitely, left-aligned text is much better than justified text. So, if, by chance, your blog theme has justified text, it is better to remove it. But, How ? I’ll tell you.

Text if often justified using CSS. If you look through your Stylesheet (.css file), you’ll find some like this:

Just remove that and the justification is gone. Text will assume the default alignment, that is the left-alignment.

In my last post, I presented 7 examples of how the same theme can be used on different blogs and still be kept unique, just by changing the colors scheme. I also said that, as a series post I’ll be posting about the necessary features in a theme to make it easily "color-variable", as I call it.

These are some very basic tips that you might want to keep in mind if you are creating a theme to be used on multiple blogs. Even if you are not a designer, you might want to make sure that your designer follows these, so that you can use the theme on multiple blogs.

Avoid Inline CSS

Inline CSS is not something invalid. But, avoiding it is a good practice in general web development. In our particular case we have to completely avoid inline CSS so that our stylesheet will be the only file we need to edit to vary its color scheme.

Avoid Excessive Use of Images

Its a good practice to avoid images, when you want to edit your color scheme. Because, it’ll save you from the need to edit your images to reflect your changed color scheme. Whenever there is a possibility to use CSS instead of images, do it.

Make The Images Simple

There are places where CSS can’t fill in. In such cases you’ll need images. When you are forced to use images, keep them simple. To make sure it’s color can be changed, open the image in Photoshop or your favorite image editor and change its HUE (Ctrl + U in Photoshop) to see if it looks good in other colors.

Pick Color Schemes Wisely

Not all colors schemes can be easily varied. If you are using a set of 10 colors in your design, sure it can look great. But, it is not that easy to change the color scheme. So, if you want to keep it simple, it is best to follow "Your Color + White" scheme. That way, there is not much to change.

These are really simple steps to follow if you follow them from right from the beginning of your design process. Make sure its not too late.

There is another post coming up in this series. In that post I’ll deal with how you can create virtually more than 1000 themes using a single design, just by varying the color scheme. And, doesn’t it take even better if I say that the color scheme can be chosen from the admin panel, instead of installing different themes. Stay Tuned.

Series Posts :

1. Using The Same “Unique” Theme On Related Blogs
2. Creating Easily Color-Variable Themes

Ever wanted to use the same theme across different blogs that you own ? This is often done by blog networks. There are some reasons why they do it :

1. To reduce the cost, by not having a designer design a separate theme for each blog.
2. Branding.. When people see the same theme (with some variations) on different blogs, they’ll know that there is some relation between them.

Not just blog network, even you can do the same. If you are interested in blogging on more than one topic, you can start different blogs. You can use a single theme, with color variations.

To get a better idea of what I am talking about, I’m posting here 7 Great examples of such practices :

Envato Network

This is my favorite network that uses the variations of the same theme. All of them look as if unique. But indeed they are variations of a single design.

• Net Tuts
• PSD Tuts
• Vector Tuts
• Audio Tuts

Apricot Media

The network itself has more than 5 blogs. But, only 2 of them use the same design.

• WP Hacks
• Celiac Disease

Daily Blog Tips

• Daily Bits
• Daily Writing Tips
• Daily Blog Tips

Gawker Media

A very big network. For example I’ve shown three here. A very good example.

• Gawker
• Life Hacker
• Gizmodo

TechCrunch

A very popular network with a very nice design.

• Tech Crunch
• Mobile Crunch
• Tech Crunch IT

b5media

One of the biggest blog networks with over 200 blogs. All use the same design with logo and color variations. Also, the “b5media stripe” on the top conveys the relation between each other.

• Play Gadgets
• Cell Phone 9
• Windoes Vista Weblog

EnGadget

Since the left side of the header is rather plain, I’ve shown the right side in this image. Another great example.

• EnGadget
• EnGadget HD
• EnGadget Mobile

Hope you enjoyed this. This will be a series post. In the next post I’ll deal with the necessary features of a theme to make easy and suitable for color variations. Stay tuned.

Series Posts :

1. Using The Same “Unique” Theme On Related Blogs
2. Creating Easily Color-Variable Themes

After two days, the new design for GotChance has gone live today. If you are reading GotChance via RSS, you might want to come over to the blog to check out the new design.

Some of the features of this new design :

• Pretty much, I’ve retained the color scheme from the old design since I love blue very much. I’ve changed the color of the sidebar to a light brown.
• Simplified Header : The header now has no images other than the logo. This improves page load time.
• Rich Header : Instead of having a plain header with just the navigation links, I’ve included more in the header : 1) A photo of me :D 2) Popular Posts and 3) Subscribe Box
• Looots of icons : I’ve used a lot of icons in this design for many purposes. All the icons are from famfamfam’s Silk icon set.
• Sharing options after post : Now, there are direct social sharing options after the post. And also a subscribe box :)
• Rich Footer : Also, I’ve added more information to the footer too, as you can see.

And, as I said, I a learnt some new stuff in this process. I’ll share them in my next posts. Stay tuned…