• 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.

Related posts:

• Get An Awesome Twitter Follow Badge
• I’m Twittering
• New Redesign Live At Kontactr.com
• New Popular Twitter Followers
• My New Twitter Background

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.

Related posts:

• Weekly Wrap-Up
• Welcome To Got Chance
• Customizing Kontactr Form
• How To : Simple javascript Subscription Form
• ShoppingAds – New CPC Ad Network

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.

Related posts:

• What Am I Upto These Days ???
• Why I Encourage Lorem Ipsum
• New Design for Got Chance
• New Design Goes Live
• Open For Guest Bloggers

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:

text-align: justify;

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

Related posts:

• Post Level Text Link Ads
• Customizing Kontactr Form
• At last, GotChance.com is Online
• Do You Allow Generic Comments On Your Blog ?
• Wordpress Plugin Wednesday – Update URLs

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

Related posts:

• Using The Same "Unique" Theme On Related Blogs
• 3 Simple Screen-Color Picker Tools
• When To Use A Magazine Theme ?
• The Morning After vs. Your Revolution
• WP Zipper Extends to add Themes

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

Related posts:

• Creating Easily Color-Variable Themes
• WPPW – ©Feed
• WPDesigner reviews Unique Blog Designs
• New Wordpress Theme : Sacred Blue
• 5 Reasons Why Users Leave your Blog/Website

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…

Related posts:

• Why I Encourage Lorem Ipsum
• New Design for Got Chance
• A Redesign In The Works
• Aquaria – Wordpress Theme
• My C++ Mario Game And 3D Design

After a long time, I’ve finally put up my home page at GotChance.com. The basic color scheme I took from my previous website NitrogenDesigns.com which I am closing down. In this post, I’ll list down the scripts and softwares that I used in the process of making of GotChance.com

Desktop Apps :

• PSPad Text Editor – all the coding work
• Adobe Photoshop – all the design work
• Mozilla Firefox – just testing (primary)
• Google Chrome – testing, but secondary
• Internet Explorer – testing, also secondary
• EasyPHP – to run the php scripts on my local pc
• TweakPNG – to fix the IE-PNG bug
• foobar2000 – just to ease my ears while I worked :P

Others :

• Prototype framework
• Lightbox gone wild
• SimplePie RSS Parser
• PHP, XHTML, CSS

If you wanna know how I did something, feel free to ask in comments. I’d be glad to make a write up.

Related posts:

• Weekly Wrap-Up
• GotChance.com – Our new domain
• Chrome Is Becoming My Primary Browser
• Google Acquires Zenter
• Will i win a 24″ LCd Monitor ?

Block Magazine

Block Magazine is a paid theme by Adii and is sold at UBD. magazine-style theme. After seeing themes like The Morning After and Revolution News themes, i have to say that there is nothing special in this theme. As in the Your Revolution theme, i don’t like the colors. Too flashy. I like the way the Recent Posts, Popular Posts and the Recent Comments are displayed. That saves good space. The “Welcome” block on the top right, sorta degrades the theme’s quality. I’m not going to go deep into discussing this theme. There is nothing special in this theme when compared to Adii’s nex Premium News theme. That is a really nice one.

Revolution News Theme

Revolution News theme is a paid magazine-style theme by the popular Wordpress themer Brian Gardner. This theme basically comes in three flavors : Magazine, News, Sports. But, all the three have a magazine-style layout. Each of them costs $100 with a single-domain license. I wouldn’t say the price is too high. But, it could have been better.
Coming on to the theme itself, the colors are very pleasant on the eyes. Very clean layout. I like all the three styles’ layout. The “Subscribe” button could have been made better. The category pages follow a layout similar to the homepage and looks nice. Nothing much to complain about in this theme and that too without using it.

Pros

• Good ad position
• Clean layout and colors
• Different styles available

Cons

• The price…
• The basic stylesheet (link style etc..) is kinda boring. Could have been more Web2.0-ish

Related posts:

• Comparision of 6 Magazine Wordpress Themes
• When To Use A Magazine Theme ?
• The Morning After vs. Your Revolution
• 10 Sites You Can Develop With Wordpress
• WP Zipper Extends to add Themes

The Morning After

The Morning After is a free magazine-like theme by Arun Kale. The theme was created based on a brief survey on the WordPress forums about what people would want to see in a unique magazine-style theme. To my knowledge, it is the first magazine-style theme to be released(see below). Not only the first, it is my favorite. I use this personally on one of my sites and i’m loving this. This theme has many features that are essential for a magazine. Especially, i really appreciate the use of Custom Fields. I love the way the posts are displayed on the homepage, and the recent posts section. The Morning After doesn’t fall behind on the post display page also. It is very nice too like a professional magazine. If i wanted to choose a magazine-style theme and didn’t have money to spend, i’d definitely choose The Morning After. To look at an excellent implementation of The Morning After, go to PopSofa.com

Pros

• Excellent Layout
• Very good use of Custom Fields
• Integration with Email Posts Plugin (a typical magazine feature)

Cons

• Colorless. By default it is fully in grayscale

Your Revolution

First of all i’d like to tell that i have no personal vengeance against Adii and this post is truly unbiased. The first thing that stuck me when i saw Your Revolution was its color. It was too bright and was a heavy strain on my eye. Of course, i complained that The Morning After was colorless. But, i didn’t want this much color either. Anything like the Revolution News Theme will be optimal. Coming back to Your Revolution, i’d tell that it gives less emphasis for the posts on the frontpage. That is, the first and the second column on the frontpage are equally wide. But, its is logical that the first column needs to be wider than the second.

Your Revolution gives excellent position for the 300 x 250 advertisement, which was absent in The Morning After. Your Revolution’s single post page look impressive too. Though Your Revolution’s category page is nice, i like The Morning After’s better. Also, Your Revolution has a poor header design which is a big drawback. To conclude, i’d say that Your Revolution isn’t worth your bucks when The Morning After is available for free.

Pros

• Good Positioning for Advertisement

Cons

• The color scheme
• Poor header design
• The “Can-do-better” type of layout

UPDATE : Sorry to have mentioned that The Morning After was the first Magazine-style theme. Its looks like Mimbo Magazine theme was released before The Morning After. Sorry for the mistake. Thanks for letting me know Darren.

Related posts:

• Comparision of 6 Magazine Wordpress Themes
• Block Magazine and Revolution News Themes
• When To Use A Magazine Theme ?
• New Popular Twitter Followers
• WP Zipper Extends to add Themes

As of now, i’ll post the list of them. I’ve ranked them in terms of look, feature, quality and others.

1. The Morning After – Free
2. Revolution News Theme – Paid – (wanted to rank this the same as “The Morning After”. But “The Morning After” won over because it is Free)
3. Mimbo Magazine Theme – Free
4. Block Magazine – Paid
5. Your Revolution – Paid
6. Jello Wala Mello – Free

I’d like to tell that, the ranking mentioned in this post is in no way influenced by my previous post. I’ll write more about these themes in my upcoming posts.

Related posts:

• Block Magazine and Revolution News Themes
• When To Use A Magazine Theme ?
• The Morning After vs. Your Revolution
• 10 Sites You Can Develop With Wordpress
• Aquaria – Wordpress Theme

• NateWhitehill.com
• JohnChow.com
• MikePedersenGolf.com
• JohnTP.com
• Darin.cc

Do you think they are Unique ? Of course, they aren’t. They are just small variations of each other. So are they worth $799 ? Definitely they aren’t. Even i’m a wordpress theme designer and i know how much custom themes are worth. I do unique custom themes from $200. But i just don’t do it like UBD because i don’t have enough free time. I just do some freelancing.

Coming back to Small Potato’s review, i’d support his review 100%. He has wrote what he had thought and there is nothing wrong in it. I don’t like the way Adii has responded in the comments. Every blogger has every right to publish anything in his blog. I experienced the same when i wrote negative reviews (here & here) on my Contest Blog.

The comments section of the post is really interesting. There is very interesting conversation between Adii and SP.

Also, as SP points out, the UBD themes are not of good quality. The are, of course, Poorly made gradients. For eg, check out Darin.cc. It reminds me of designs i used to create when i was 14 years old. Childish. To finish off, what Small Potato did is nothing wrong. And Unique Blog Designs does have to change this. They need to be unique. I wouldn’t be wasting my $800 for a copy-cat-like theme.

Related posts:

• Comparision of 6 Magazine Wordpress Themes
• 4 Reasons to avoid Paid Reviews
• Become a Writer
• Opening Advertising Options On GotChance
• Why I Encourage Lorem Ipsum

1) GPhone is coming

TechCrunch pointed out to a news article on Rediff, that mentions that the Google Phone (GPhone) might be out in a fortnight. The article also states that Google is in talks with a couple of Indian mobile service providers, which is absolutely fantastic. And, for this reason, GPhone may hit India before iPhone does and will be more popular than iPhone among Indians. This is what makes Google different. They see India as a potential market, whereas the others don’t.

2) Orkut ReDesign

This one is more official than the GPhone article. The orkut blog announced today that there is a redesign under the works. They will be releasing it to groups of users in the coming weeks. This is awesome too. As everyone knows, Orkut is the most popular social network in India and Brazil and i’m a fan of it too. But, why ? It has a more of an Indian touch. I don’t know how else to explain.
This redesign is definitely going to be a successful one. So far, the comments about the design are positive.

UPDATE : Google Discovery has more pictures of the new design. Vinay claims thats the new design has been enabled for him. He has some screenshots on Flickr. Can’t wait to have it on my account.

Related posts:

• All New GotChance.com
• Block Magazine and Revolution News Themes
• Google’s animated Homepage
• OMG – Yahoo’s new celebrity site
• Comparision of 6 Magazine Wordpress Themes

If you have any comments or suggestions on the new design, feel free to share them with me.

Related posts:

• My Odiogo Podcast
• Why I Encourage Lorem Ipsum
• Become a Writer
• Welcome To Got Chance
• New Design Goes Live