Design

Blueprint To Deal With Your Blog Design

Its often tempting to make things perfect. In making things perfect, we start the lazy habit of procrastination.

In psychology, procrastination refers to the act of replacing high priority work or actions or tasks with low-priority actions, and thus putting off important tasks to a later time.

Small Case Study!
I had a client who was so tied up in making her blog look exactly the way she wanted it to look, that she didn’t have 3 articles up on her blog for a month or two. And after having 8 articles and spending day and night(with lot of excitement) tweaking the theme she felt like, blogging isn’t for her! She had great expectations. She had read a lot of success stories for years. After a long procrastination she had finally taken action and had registered a domain and bought a hosting account, and had published 8 articles on her blog. Owff…that’s a lot of work, isn’t it 🙂

It can happen to anyone
Procrastination isn’t anyones asset. It can happen to anyone. Many times we advice a lot, and we ourselves procrastinate. The best way to deal with all these is to plan before hand. Now planning and procrastinating doesn’t help!

Plan And Take Action
Make design changes along the way..along with blogging. Don’t think you will finish the design aspects of the blog once for all and after that start with blogging. If you think so, then you may never start blogging; the actual content generation process. Because, no design can be perfect. You will comeup with some design changes once in a while, more often in the beginning days of your blog. Its so overwhelming and distractive to keep making the changes, tweaks, optimization.

After a long period of procrastination, we somehow manage to sit down and start writing something for the blog. Suddenly a design issue starts interrupting our mind. Immediately we leave writing and start to fix the design issue. After we finish with that, we start browsing some blogs and immediately fall in love with some design elements – like a social media button. Now we want it on our blog too. Start with figuring that out. At the end of the day, you will still be procrastinating!

It seems like you have been working all day long, but at the end of the day it’s about results or the outcomes of your action that matters. My advice would be to reserve certain period of time for the most important activity for your blog or business. Do it with full focus. If you choose to work 3hrs or 2hrs a day? Make sure you only work on one big thing, the most important thing, with full attention.

“Most people have no idea of the giant capacity we can immediately command when we focus all of our resources on mastering a single area of our lives.” —- Tony Robbins

So, am I suggesting to forget all other things and only concentrate on content generation? No, not exactly!

First of all, people subscribe/read your blog and they are here for content. If the content is good enough, they will stick around. But what if the design is too good, but there is no content for a long time.

So my advice would be to, start blogging immediately and make design changes once in a while.

Here is my blueprint:
You can’t fix a day in the week or month to think of design changes, tweaks, optimization etc. Because, on that day you may not be able to come up with creative design ideas.

So, what I do is, keep a note book or a file on my computer wherein I write down the design changes, tweaks, optimization ideas that strikes my mind every now and then. I also make sure to prioritize the listed items. I put the most important and urgent task at the top of the list. This file is dedicated to the look and feel of the blog. For new blogs, you can choose a day in 2 weeks or a day in a month and start working on the design, tweak/optimization works one at a time from the list. Make sure to implement as many changes as you can from the list.
If you could do only 10 out of 25 items that day, then postpone the other works for the next schedule. This way, you will make sure that the most important changes has been accomplished.

If some design tweak requires help from others, then mail them or post on any online forum and keep it pending and carry on with the rest of the things in the list according to the priority.

This way, you will be spending most of your time on the major aspect of your blog, that is “CONTENT” and you will not be neglecting the rest of the things that make up a good user experience on your blog.

Even if your blog is established and has a good looking design and usability factor, make sure to take a day in a month and do some improvements on it. Often times we get lazy to edit the theme and put on some code, affiliate link or help link etc. Make sure you don’t procrastinate any more with your blog/business. Don’t take it granted, make sure you work for it. Don’t forget, the subscriber count you see in your feedburner account are real people watching/reading your blog!

PS: So, should I say this: “Content Is STILL King!“

Top 10 Sure Principles for Effective Web Designing

This is a guest post by Buytemplates. If you want to guest post on this blog, check out the guidelines here.

1. Clear, easy web-pages:
The first step to make a website effective and striking at the first glance by the user is to make the webpages clear. The Krug’s Law of usability focuses on this very aspect—that it becomes very obvious to the user on how to utilize the website, and achieve his objective.

2. Catch the User’s attention:
It is important for the website, if used for advertising, to use techniques like emboldened fonts, moving texts, marquees, graphics, and Flash videos, images to grab the attention of the user and concentrate it on the key topics. However, it must be kept in mind that user is not confounded with too bright and confusing meshes of objects on the screen. Use this technique moderately to gain success.

3. Impressive Content:
The content of the website is actually what the user ends up reading ultimately, and hence, is one of the most influential factors for effective websites. The content should be to-the-point, easygoing, impressive in readability, and clearly understandable. Use of objective language, plain and clear statement which are at the same well written enhances the appeal of the website.

4. Concentrate on Functionality:
Users like to know clearly what functions the website offers. Displaying One-Two-Three step procedures for the users, by breaking up a task, has proved to be very effective to guide the user in a simple friendly way towards his goal. Clearly establish what the user’s next step would achieve.

5. Respect the User’s Time:
Websites which take the users to long time-consuming procedures for their own purposes, or play with the user’s patience generally tend to annoy the user. Requiring the user to fill out long details and make accounts before allowing him to do general tasks is an unnecessary task and negatively impacts the website.

6. Simplicity is still the golden rule:
Keeping the website simple is strongly recommended. This is because users enjoy navigating through simple websites in which they don’t have to comprehend much. From the color scheme to the boxes to the page structure, don’t overdo or overcomplicate things.

7. Special Effects:
Keeping it simple and using special effects at the same time is an art. Most websites incorporate special effects like Watercolors and Transparency into their web-design.

8. TETO:
This is a popular technique to keep checking and properly maintaining the website. TETO, or Test Early Test Often, which recommends regular testing and debugging of the website, so as to keep a check on problems which usually tend to occur. Testing is considered as very imperative to website design, since it can solve problems which the designer might not have predicted.

9. Communicate:
A good website talks to the user, providing him with clear concepts and ideas. Use of a clear structure and organization helps a great deal.

10. Optimize Load Time:
Users are annoyed when made to wait. Figure out and rectify if the website takes longer than usual to load. Load time should be optimized for effective websites.

Author Bio:
Buytemplates.net is a web products hub offering scores of inexpensive web templates and brochures. The site presents readymade website templates like SharePoint templates, Joomla templates, marketing brochures, and many more along with an affordable template customization service.

10 Tips For Designing A Better Logo

This is a guest post by Buytemplates. If you want to guest post on this blog, check out the guidelines here.

Designing logos is just like any other design work; to be professional, you will have to pay attention to details. Even a great idea can be ruined if you miss out on some simple things. The following 10 tips will help you make an effective logo for your business.

1. Find out the various mediums where your logo is going to be used, because this will also have a say in the limitations on how complex the logo is. It is not a good idea to have a detailed or illustrated design for a logo that will be placed as embroidery on a uniform, as it wouldn’t be clear.

2. Do as much research as possible. This stage doesn’t actually involve any design skills however it is important as it makes sure that you understand and get to know your client’s products, services, and rivals better; this will also make sure that you don’t finish up with a logo identical to those of your customer’s competitors.

3. Your main concern as in designing the logo is to distinguish your client from competitors and other brands. So your design should be able to distinguish and communicate adequately; it should not be one that attempts to doll up things.

4. You should ensure that logo also works all right in black & white.

5. It is not compulsory that you should demonstrate the firm’s products or services on the logo. This is true especially when customers can identify from the name itself what the business is all about.

6. The logo you design should reveal more about the company’s culture than the industry. This makes sure a more personalized logo that is custom-built. The logo shouldn’t be a generic one that all the companies in a particular industry can make use of.

7. The logo should be made in such a way that it is scalable without missing the detail; it must be identifiable even when scaled down and used on smaller promotional mediums, like visiting cards.

8. Keep the icon simple and straightforward. Your job is to design an icon, not some wall painting.

9. Avoid using all the free fonts on the web for your logos.

10. Don’t be afraid to use a new approach. There is nothing wrong in standing out from the crowd. You don’t have to go with the latest fashion in Logo design.

Beep in mind, fashion keeps changing all the time, but a logo is one that is going to stay forever.

Creating a good logo and unique tag line are important in producing a brand that presents the ideal representation for your firm. If your logo is clear-cut and unique, and if people visit your web site frequently, people will relate your logo with your business. When completed as it should be, a logo is one of the easiest ways to create an impact on your brand name. So remember the above tips and start designing a great logo.

About the Author:
Buytemplates is a notable website that offers professional and reasonably priced web templates for a variety of internet site needs. The website offers resources on Vista Icons and ebay templates along with various other web products for corporate, Business, real estate, entertainment, e-commerce, health, hosting, and much more.

Image Rollover Effect – using Simple HTML

When visitor roll mouse pointer over a image, s/he will see a different image, when s/he moves mouse pointer out of the image focus, s/he will see the previous image. This is called RollOver Effect. This method is mostly done using JaveScript. It is used mainly on images, while building menu etc.

Yesterday I had written an article about OnlineProfits re-lauch and I had used rollover effect to one of the images there, and some people asked me how I did it(Simple Ans: See the source code 😉 ).
So here is the simple code to achieve this design effect:

<a href="Destination Address" 
ONMOUSEOVER='thinkwithsatish.src="ImageURL-when-mouseover" ' 
ONMOUSEOUT='thinkwithsatish.src="ImageURL-when-mouseout" 
'><center><img src="ImageURL-to-be-shown-by-default" 
NAME="thinkwithsatish"/></center></a>

Explaination:
ONMOUSEOVER and ONMOUSEOUT are valid JS effects. Since all most all browsers support JS, this works fine.

Give a name to the actual image to be displayed:
<img src="URL-of-default-image" NAME="thinkwithsatish"/>
I have named above tag src as thinkwithsatish. Now Refer to this name by using ONMOUSEOVER and ONMOUSEOUT commands.

ONMOUSEOVER='thinkwithsatish.src="ImageURL-when-mouseover" '

ONMOUSEOUT='thinkwithsatish.src="ImageURL-when-mouseout" '

Hope the rest of the code is self explanatory.

Code in action!:

Now you can test it by taking your mouse pointer in and out of image area. If you don’t see any changes, place the mouse pointer over the image for some time – because in some cases, it takes some time to load.

I see that, it works perfectly in Mozilla FireFox, Internet Explorer and Chrome. I haven’t tested it in other browsers. And interestingly, I saw it working even in RSS feed!

Many people use content management system software like WordPress, to publish their content. So in order to include a RollOver effect using JavaScript means – editing the header part or installing a plugin which does the job etc. So instead we can incorporate this simple coding to get the design effect.

Design Tip: This is just the coding/programming part. To get the effect on the design, you must choose such images which will have good effect on users mind. So choose the images wisely.

I am not sure, how helpful it is to you. But it surly helps me sometime to get some minimal design effects on my WordPress blog posts.

Are You Puzzling Your Visitors/Readers? Check List

It was completely different, if you were already a big brand or a celebrity. People will be mentally connected to you and will bare the inconvenience and do the things which you want them to do! But if you are like most of us, then you will have to think from users perspective.

This is exactly what comes to my mind when I visit a website/blog which is filled with many “call to action!” – Are You Trying To Puzzle ?

For example, there are many News websites and entertainment websites which are so confusing that, we bloggers can observe them and take advantage of it, by not doing such things on our blog.

Some of the puzzling things
1. Display half a page or so – ads!, and some dozens of sponsored links above the fold.
Displaying a lot of coupon codes/discount coupons of various products(which may be invalid), to gain search engine visitors to those keywords.

what-to-do

2. Some 15 to 20 social media widgets – for you, to inform your friends, family and their dog about the website.
And some more widgets to join their fan clubs – 1 fan club is a good idea. 2 is ok. Anything above 3 or 4 is a bad idea.

3. Some flash ads and animated .gif banners.

4. Few pop ups and pop under and not to forget text link ads(like kontera – which you may see on our blog too! , Infolinks etc).

5. And its quite common that, they will be having many CPM ads on their site, and so they need us to refresh the pages and visit various pages on their site – and its easy, break the single article into two(or even more) and link to it at the bottom of the first article, and link back to the 1st page from the 2nd page, so on.

6. Having a pop up, asking you to signup for a news letter – and the popup having no exit option!

7. Some audio/video(some time, sponsored audio/video), auto-playing! and the visitor searching all the open tabs for the possible culprit(to shut-it-down).

8. One or the other contest going on, and you participating in it with half a mind, because the prize is so valuable but you haven’t seen them announcing a winner. When announced, there will be no clue about the winners existence.

9. And a funny thing – I saw a Twitter widget integrated on one of the famous entertainment site, which shows the recent tweets of some one at their office. I thought, they want to give some real time entertainment news to their visitors. But when I observed it closely, all the previous tweets from almost months were tweeted by some bot(automatic tweets!), and most tweets were out of topic. Ex:- I increased my Twitter followers by using this service, check them out. bla bla bla.

10. And what else or what not ? ha…they also have some syndicated contents!

Innocent mistake:
Even though they have all these puzzling things around, not all News/Entertainment sites are useless. There are sites, which have good quality content. But the thing is, they forget their main product. The basic element that they wanted to sell you. That is their content or any of their own product, say a DVD or CD or their magazine.

But when the ad revenue or the other benefits get bigger then their main product they may get distracted and may start puzzling their readers with more of what makes them profitable, for the time being.

Smart Planning and Execution:
I have seen some people not displaying any ads or banners on their site for many years, and finally they release their own product – they take time to bring up a exclusive, quality product, while building a group of target audience. Once the product is launched, some people will surly talk about it on their websites, forums etc.
Similarly when a already messy site adds one more mess to its sidebar, who cares about it? And so the site owner will continue with the puzzling act of make money, instead of concentrating on their product.

Are You A Big Brand or a Celebrity?
It was completely different, if you were already a big brand or a celebrity. People will be mentally connected to you and will bare the inconvenience and do the things which you want them to do! But if you are like most of us, then you will have to think from users perspective.

But then, Some Facts..
Also know the fact that, many of these news/entertainment sites have got premium publisher accounts. That means they earn a major share in the total earnings they generate, unlike the usual 50 – 50 or 30 – 50 or 60 – 50 ratios. Some ad networks even pay 80% to their premium publishers. Because if they can retain some key players, they are sure to retain their loyal followers too. But such sites will have multiple posters and many many many posts in their archive.
Blogs with single author or 2 or 3 authors will have a hard time building such a site. Instead, you can concentrate on building a community around the blog, who can stick around longer. So, you may have to stop puzzling your readers and build the community, authority, trust around your blog/brand.

The final take from this post is:
1. If you have any widgets/banner on your sidebar, then take some time now itself and remove them.
2. I believe, you have some call to action to your visitors. Like news letter signup, buy this button for your product etc. Focus on the main thing(s), rather than wanting your visitors to do all the things which you expect them to do.
3. Avoid forcing your visitors to take certain actions. Let them choose what they want to do and what they don’t.
4. Teach your visitors whats on your blog. Ex:- Twitter had a video explaining what Twitter is all about. Similarly, some people write and educate their readers about things like – What is RSS. What are the bubble links that they are seeing when they hover over certain words – intext ads etc.
5. Label the things properly: Label the things like, subscription form, Search form, News letter form, recent links, popular links, Sponsored link, advertisements etc.
6. choose a good niche and try to be on topic as far as possible. Think, what if your favorite politics blog suddenly started writing only about entertainment and traveling!
7. Let the design of your blog be simple and well structured. And load before your visitor forgets, what he was looking for!
8. Do some testing and know which widgets your visitors use frequently to share the content on your blog. Retain such things and remove the rest.
9.
10.

You may earn a dollar more today by puzzling/confusing/misleading your visitor, but remember, with that intention, you might have already missed a big opportunity. Better late then not, you can take action now and never miss an opportunity in the future.

What do you think of sites which try to puzzle visitors/readers. I have left point, 9, 10 empty. Would love to know your experience, in the comment section.

College Forum Logo/Banner Design

I was looking through many of the contests going on around the blogosphere, and many mails hitting my inbox offering free logo designs. But I am satisfied with my present logo design. Its probably because the present logo of Technotip.org was designed by myself and I might be biased because of that. Anyway, if you feel the logo as not so good, then feel free to comment below this article, so that we can take a closer look.

Today I wanted to share the logo’s/Banners, that I had designed long back when I was studying my degree(BCA — Bachelor of Computer Applications). We had the plan of starting the college forum, and the logo/banner(both logo and banner are same for my college people, they just shrinked the size of the banner and called it as logo! So I will use these two words alternatively, eventhough they are different!) designing responsibility fell on me. At that time I dint know anything about designing, photoshop etc, but still agreed and managed to design some awesome logo’s. It is when I learnt a lot of things about logo designing.

Here are some of the logo’s: It will take some time to load, your patience appreciated. Thanks

The banners are designed with the dimensions: 1024 x 742. So click on the above banners to view full screen.
Also please use the below comment section to comment about the banner design, also mention which one you like the most.

Our College name is B.I.H.E(Bapuji Institute of Hi-Tech Education) Place: DAVANGERE. Forum name: Emulous(meaning: Eager or ambitious to equal or surpass another). Course: BCA

WordPress2.7 Latest Screen Shots

WordPress2.7 is scheduled to release on November 10, 2008.
Here are some great looking design screen shots(may not be a finalized design, there may be some changes to these designs):-

2.7 New Post Screen, Unfinished

2.7 Dashboard(click above image to see full screen image)
Screen Shots Credit

1. For plugin compatibility check.
2. New features of WordPress2.7

Tips,Tricks and hack for blogger blogs

Today’s post is dedicated to all those people using blogger.com. Its a great service which offers free web hosting. I wonder how much bandwidth blogger would provide!
Before trying any of the below mentioned tips/tricks, backup your theme — Goto “Layout” -> “Edit HTML” and click on “Download Full Template”..

Today’s post is dedicated to all those people using blogger.com. Its a great service which offers free web hosting. I wonder how much bandwidth blogger would provide!

Before trying any of the below mentioned tips/tricks, backup your theme — Goto “Layout” -> “Edit HTML” and click on “Download Full Template”..
This article is only for education purpose and I am not an expert in coding blogger templates, so try at your own risk. By changing the default behavior of the blogger blogs, you may be violating their policy. So we make it clear that, this article is only for education/learning purpose.

1. To insert Meta tags:-
Place

<meta NAME='description' expr:content='data:blog.pageTitle + ",Put in your common description tags here "'/>

in between <head> </head> tags.

In the above code expr:content= ‘data:blog.pageTitle’ gets replaced by the title of your current page. So when combined with the common description tags, the description tag becomes unique for each page. Also do not forget to replace “Put in your common description tags here” with some description of your website(this will be common for all pages of your website.)

2. Read more option (show only post Excerpt in the home page):-

Login to your account and click on the “Layout” tab. Then select “Edit HTML”. Check ” Expand Widget Templates”.
Now search for </b:skin> and paste the below code between </b:skin> and </head>


<!-- Style to implement "Read more.." link in all the posts (Start) -->
<style>
    <b :if cond='data:blog.pageType == "item"'>
        span.fullpost {display:inline;}
    <b :else/>
        span.fullpost {display:none;}
    </b>
</style>
<!-- Style to implement "Read more.." link in all the posts (End) -->

Now search for <data:post.body/> in the template HTML and paste the following piece of code after <data:post.body/>


<!-- Code to show "Read more.." Link (Begin) -->
          <b :if cond='data:blog.pageType != "item"'>
              <span>
                <a expr:href='data:post.url' 
style='color:#0000FF; 
text-align:right;
font-weight:bold; 
text-decoration:none' >
Read more..
</a>
             </span>
          </b>
          <!-- Code to show "Read more.." Link (End) -->

Save it. That’s all about coding part of the theme. To show only post excerpts on the homepage, you need to insert <span class="fullpost"> post excerpt.Remaining article will be shown after clicking on "Read more.." link.</span> . Now your articles and blog will look more professional.

3. Hide the Blogger navbar:-

Add this line #navbar-iframe {display: none !important;} before /* Variable definitions

Paste below code inbetween <style> </style> , before </head> .


<!--Code to remove blogger navbar-->
#b-navbar {
height:0px;
visibility:hidden;
display:none
}
<!--End of code to remove blogger navbar-->

4. Post articles from email:-

Goto “Settings”, click on “Email” option. And set the email ID, and start posting articles from your email ID.
Its interesting to note that, you can post upto 10MB of images directly from your email.

5. Bulk image uploader(for firefox users only):-
Use “Drag Drop Uploader” FireFox Addon and upload as many images as you want.

6. Change the default favicon and put your favicon, great for branding purpose:-
Upload your favicon(an image of 16 x 16 pixels or 32 x 32 pixels with .png, .gif, or .ico extension. Use either 8-bit or 24-bit colours.)
Now paste below code between <head> </head> tags.


<link href='Uploaded favicons URL' rel='icon' type='image/gif'/>
<link href='Uploaded favicons URL' rel='shortcut icon' type='image/gif'/>

Book mark this article, as there is more to come, as we investigate and play with Blogger.
We thought of making this a serious post, but it would annoy visitors as they need to navigate to different pages to get what they want. So we decided to keep all things at one place. Hope this article is of some use for some of you. If this article helps you in anyway, then please share this story with as many people as possible.Thanks