Mar 10, 2014

Icons in Web Design



Seen this image above right? I guess every one on earth understands the difference between the two in the bottom image. One indicates Gents and other, Ladies. The icon speaks it out. That is exactly what I am trying to say in this post. 

Right from the ancient civilisations, symbols were a good form of communication. Most of times a drawing of Bison, communicated to the other humans in the tribe that there was a Bison around. Rock paintings, cave arts, which later developed into Petroglyphs, all can now be considered as various symbols of communication. Such symbols can now be now called icons, and there are in  fact the easiest form of communication.

Use of Icons in Web
In the same way icons/symbols are widely used in the web space as well. To put it straight, here:
--> indicates 752 "likes" 
  --> indicates 10 "comments" 

In fact in the web space, icons are rather used as easy tool to attract people towards the content. If your website has the idea of converting a noun into a verb( like how Googling became a verb), then try your best to have designed icon for it. Erm, it all depends on the way how you use it.

Advantages of Icons
  • Effective use of icons enhances the visual experience of your Blog/Website
  • Saves space. Instead of putting in a full "TWITTER" just  will do. This looks really good and is helpful in your contact page, email signature, etc
  • Shows the amount of detailing in your website.
  • Enables faster navigation for the user, hence chances to get the website registered in the users' minds are more.
In every sense, icons if used in the proper way would bring you proper results.



Nov 24, 2011

Feel the difference: Recap


'Feel the difference' was introduced as a segment that shows the readers the elements or features that i found interesting while reading other blogs. I would like to recap some of them.

Sort by Feature - In 'Physorg' one can sort the posts based on the date of posting, popularity, etc.

Reading Time - In 'Software Critics' you can select the length of the article depending of the amount of time you have.

Turn off advertise - 'DailyKos' allows you to turn off the advertisements for a small amount of fees.

Randomise Button - This button in 'Buzzfeed' randomises the selection of posts.

Felt the difference?? 

Mar 8, 2011

Poor man’s blog titles and SEO


In the earlier article I talked about how to make Search engine friendly Blog Titles. I explained how blog names should be selected, how keywords should be integrated in your Title Meta tag and even put down an ideal length for your blog title. All these techniques will help you to optimise your blog title for the search. Another tricky way of optimisation is by making Poor man’s blog Titles.

I am sorry. Poor man’s blog titles do not mean that the blogger is poor. I’ll. I love the actor Benicio Del Toro for his performance in many films. He is an Oscar winning actor from Puerto Rica. But, when you look at the picture you’ll find that he reminds us of Brad Pitt. For that reason he is called the poor man’s Brad Pitt.

Benicio Del Toro might not be getting his resemblances to Brad Pitt purposefully but there are many blog that have adopted names and appearances that are similar to that of a popular blogs and websites. Problogger and FreeProblogger is a fine example. When anyone searches for Problogger the latter will show up in the list of first 10 results for sure. You would have understood why I called this poor man’s blog titles. Though this is a technique, i don't think it can be called as a gentleman's technique.

Have you ever come across such blogs whose name resembles to that of a popular blog?

Mar 4, 2011

How to make Search Engine friendly Blog titles


The present form of blogs was evolved from daily diaries. It started to take shape when ‘Open Diaries’ an online diary platform added the option of commenting into it and started to make it participatory. You can read more about this in the History of Blogging. Anyways my topic is not this. As far as you are not intending to keep your blog to its crude form of a diary but want people to see it, then you really want to optimise your blog for the search.

First step for SEO

The first step for SEO would be to make your blog title search engine friendly. It would be great if you get it right from the very first stage. I think if you are about to start a blog and you are looking for a name, then you select names that itself become a keyword.

For example, Tips for new bloggers, Digital Photography School. These titles themselves serve the purpose of a keyword.

Keyword in title

If you are keen to have a creative name or if you have already started a blog, try to get a related keyword or two into your title Meta tag.
Format:
Blog Title - Prime Keyword

It is what you write in the title Meta tag that will be shown in the search results. For example: Check out Blog Your Voice in the Search Result. The name would look like this in the title bar.

But be aware of the length of the title.

Ideal length of a title Meta tag

The ideal length of a blog (website) title is 80 characters. This is because most search engines would only read the first 70 characters of the title. The portion after that would be truncated. So add your keywords in the title Meta tag, but look out for the length as well.


Another way of optimising the title- that is not advised- is to have Poor man’s blog titles. Read more about Poor man’s Blog Titles in my next article. 

Feel the Difference | March 2011



Feel the difference was a fresh segment introduced in ‘Blog Your Voice’ last month. As I had explained before, ‘Feel the Difference presents before you, 4 different elements or features that I observed in other Blogs during the previous month. It is not meant for us to flick those ideas that we see around the web, instead I appreciate their creativity and present it before you.

If you had missed out this segment last month do check out:

The 4 elements or features in which I felt a difference this month are:
Life is really fast and busy nowadays. The first things that any visitor who visits your blog checks are whether the article has something interesting in for him and then how much time he would have to spend for reading the whole post. ‘Software Critics’ a blog that writes software reviews has this element right at the top of every post. It tells you the approximate time that you could take to read the whole article. If the reader is been told the particular article takes a lot of time, he is also advised to bookmark it if he has no time to read it then and there. This is a way to show care and loyalty to your visitors.


Before I explain the feature I should explain what tynt is. Tynt is a publisher tool that creates backlinks when someone copies text from your blog and pastes it somewhere else. Try copying something from my Blog and Paste in the notepad in your computer, you’ll find that a link will follow the text pasted.
This option is enabled in many blogs but ‘Electronista’ offers you to turn on and off this feature. ‘Electronista’ is a wonderfully designed blog that talks about the latest news on all gadgets. This means that if you turn it off you can freely copy content from the site. This feature again shows the respect for visitors.

The ‘Sort By’ Feature in Physorg allows you to sort the posts by date rank and popularity allowing the selection easier for the visitor. Again it shows care for the visitor.




Blog herald offers a list of their hundred latest updates. They say:

“Hard to keep up with the updates? Then the list below, consisting of no more and no less than the 100 latest updates on The Blog Herald, might be a good place to start.”

I think this helps if your homepage is designed unlike a syndication feed. In such a situation such a link on your menu would help your visitors to follow the latest updates of your blog. The interesting thing that I found in this feature is that it creates 100 straight forward internal links. J


So Which is the feature that you loved the most?

Mar 3, 2011

Greet your visitor based on the referrer site



It is very important in business to greet your customers well and serve them like kings. It starts right from the receptionist in the office. Such greetings often silently show off your professionalism. This professionalism should to be shown while blogging as well. One way is to greet your visitor by the time of the day. Whereas another method is to greet the visitor based on the site that he is coming from.

When a visitor lands on your blog post from a google search wouldn’t it be nice if he is greeted calling a Googler( As shown in the above picture). I am sure that this way of greeting would make every visitor happy. DEMO >> Click here to make a sample search. Select the 1st result from the google query. You will land on an article from Touch|Your|Sound. The page will greet you by calling you a googler.

Now, how to greet blog visitors based on the site they come from.


In Wordpress:
As I have said always one of the advantages of Wordpress over Blogger are its use of plugins. It makes work all the more easy for us. Isn’t it? Like the Apple’s saying, ‘For everything even Wordpress has a plugin’. GreetBox and Referrer Detector are two excellent plugins for this purpose.

Download the plugins from the given links and then install it in your blog and finally activate it. In my personal opinion I prefer the GreetBox plugin because it has more advanced features to switch on and off the javascript and so on.



In Blogger
The same can be added in a blogger blog as well. DEMO >> Techbhroom.blogspot.com is an example for that. Select the 1st result from the query and you’ll find that you are addressed a Googler. Classic tutorial has developed a code for this. Copy the code and paste it an HTML/JavaScript gadget in your Blogger blog.


Now you can start greeting your visitors by their referrer and show that you care for them. Always show that if you want to widen your visitor network. Happy blogging!

Mar 2, 2011

How to greet blog visitors based on time

Did you notice on the top of the posts? I welcomed you and greeted you as per the time of the day. Have you ever wondered how to greet your visitor according the time of the day? Like, Good morning when he turns up in the morning and Good afternoon if it is at noon.

Codefuture has created a form as shown below in which you need to fill and generates the code for you.


Steps on how to greet blog visitors based on time of the day

1. Specify how you are going to greet your visitors at the specified times.
2. After writing all the greeting notes, Click on ‘Make code’ to generate the code.
3. Copy the generated code
4. Blogger users have to add a Html/Javascript widget and the paste the code.
Wordpress users likewise, add a text widget and paste the code

You would want to greet your visitors as soon as they reach your blog. So I would advise you to paste the code on the top of your blog. Show that you care for your visitors and make them happy. 

Feb 27, 2011

10 Featured Post Sliders for Blogger Blogs

This is another post amongst the set of posts about featured posts. I hope you have already read the earlier posts about the effects of a featured posts widget and the list of wordpress plugins for featured posts. This is a list of 10 featured posts sliders that can be used in your Blogger blogs. A demo and the code and instruction for the creating the widget are provided with each option.


Nivo Slider


  • GREAT LOOK
  • RANDOM ANIMATION
  • TEXT OVERLY
  • AUTO/MANUAL NAVIGATION



Mootools Slider


  • GREAT LLOK
  • TEXT OVERLY
  • SMOOTH ANIMATION
  • AUTOMATIC NAVIGATION





Stylish Jquery Featured Post widget


  • FEATURED POSTS LIST
  • TEXT OVERLY
  • COMPACT WIDGET




Easy Slider 1.7


  • BASIC SLIDER
  • TWO TYPES OF NAVIGATION
  • SMOOTH ANIMATION





DreamCSS Jquery Slider


  • GREAT LOOK
  • NUMBERED NAVIGATION
  • TEXT OVERLY ANIMATES




Featured Post Content slider


  • AWESOME ANIMATION
  • TEXT EXCERPT
  • BORDERED PICTURE



Smooth Jquery Featured


  • SMOOTH ANIMATION
  • NEAT LOOK
  • HEADING OVERLY



Awesome featured Post slider


  • GREAT ANIMATION
  • TEXT OVERLY
  • GOOD LOOKS






Easiest Jquery



  • GREAT NAVIGATION
  • GOOD LOOKS
  • TEXT EXCERPT







Simple Jquery Content Slider


  • BASIC SLIDER
  • NEAT LOOKS
  • NUMBERED NAVIGATION


DEMO | CODE AND INSTRUCTIONS 


Do add in your suggestions as well. 

Feb 22, 2011

Benefits of an 'Upcoming posts' widget in blogs


Before I start to write anything, I would like you to close your eyes and hear the audio track below.


This is usually the way how an episode of a television serial ends. They would raise the suspense level to the maximum and then stop it there. A marketing technique used to maintain the level of viewership. If the serial is broadcasted on the weekdays it is natural that there would be a good amount of viewers on Monday carried forward from the previous week. The episodes on Monday and Tuesdays would have normal endings, whereas, the Wednesday’s episode would end with a slight note of suspense. Thursdays, again it would end on a normal note but finally on Fridays, the suspense level of serial climbs to the peak. This is a trick used all over the globe to maintain the viewership levels across the weekend.

The same trick can be used while blogging as well. Whenever you seem to feel that you are not able to maintain the level of visitors, an ‘upcoming posts’ widget would really help you. John and Fernandez in the audio track are just fictional characters that I created to convey the theme.

Benefits

1.       Returning Visitors: An Upcoming posts widget enables you to inform the visitors that you are prepared for those posts mentioned in there. It is recommended that you use an ‘Upcoming posts’ widget while you have a dip in the amount of returning visitors.
2.       Increased subscription: Mentioning your upcoming posts will help you increase the number of your feed subscription. The curiosity reflected in the minds of the readers is reflected in the form of numbers; feed subscriptions.
3.      Google: The heading of your upcoming posts would be in the Google’s list way before you publish it. This increases the chance of exposure as well. I usually keep a featured upcoming post in queue at least until three other posts are published and are indexed by the Google. So that the heading of the upcoming post will be cached each time those three posts are crawled.

Upcoming Post Widgets for Blogger Blogs

I use a very simple and a basic widget and I add the upcoming posts manually.  The code that I use is.
< ul style= " text-align: left; margin-left:10px; " >
< li > < img src="  IMAGE SOURCE " height= " 40px " style= " float:left; border: 1px solid #cccccc; padding:1px; margin-right: 3px;text-size: 17px; " / > HEADING < /li >
< hr/ >
< /ul >
I would replace the IMAGE SOURCE and the HEADING each time, that’s it.

Upcoming Post Widgets for Wordpress blogs

For Wordpress users, there is a plugin developed by MrLive. This plugin displays that post headers along with an excerpt for the post which you have scheduled to publish and which are in the drafts folder. Download the plugin here 


I am extremely happy with the results that an ‘Upcoming posts’ widget has given me. It will definitely show results if the suspense factor is used in right fashion at the right time.


Feb 20, 2011

10 Wordpress 'Featured Posts' Plugins- (List 1)



Portraying your featured blog posts becomes an easy process when you use a plugin for that. Here I have mentioned a list of Wordpress plugins which can be used to show the featured post in your self-hosted Wordpress blog.

To use these plugins, firstly download the 'featured posts' which you prefer. Then go to your Wordpress dashboard > Plugin > Add new > Upload the downloaded plugin.


1. Featured Content Gallery

  • TEXT OVERLAY
  • GOOD ANIMATION
  • MANUAL NAVIGATION &
  • AUTOMATIC NAVIGATION







Demo  | Download 

2. Smooth Slider

  • ICON INDICATING FEATURED
  • NUMBERED NAVIGATION &
  • MANUAL NAVIGATION

3. Featured Content Slider

  • NEAT ARRANGEMENT
  • EASY INSTALLATION
  • AUTOMATIC NAVIGATION
  • FAST ANIMATION

4. Nivo Slider

  • GREAT LOOK
  • RANDOM ANIMATION
  • TEXT OVERLAY
  • AUTO & MANUAL NAVIGATION




5. WP Slide Show Gallery

  • LARGE IMAGE
  • THUMBNAILS BELOW
  • TEXT OVERLAY
  • FAST ANIMATION
  • AUTO & MAUAL NAVIGATION






6. Nextgen Slideshow

  • GREAT LOOK
  • GOOD FOR MAGAZINE STYLE THEMES
  • TEXT OVERLAY
  • CAN INCLUDE HEADER
  • INSTALLATION IS DIFFICULT

7. Impnerd Featured Post

  • NEAT ARRANGEMENT
  • STATIC



8. Simpleviewer 

  • GALLERY VIEW
  • GOOD FOR PHOTO BLOGS
  • DESCRIPTION ON LEFT

9. Featurific

  • TEXT OVERLAY FROM TOP
  • GOOD ANIMATION
  • NUMBERED NAVIGATION

10. Featured article plugin

  • GOOD DESIGN
  • NICE NAVIGATION & ANIMATION

Do add in your suggestions as well.