August 29, 2011

Pictures can make or mar a blog: use them creatively for best impact

Updated in May 2017
On websites/ blogs/ social media accounts, we use pictures in various forms - photos, sketches, paintings, computer graphics, backgrounds and just background colors. We believe that images make the website beautiful and add value to it.  But, do we ask what, which, how many, why, how and where before putting images or we just put a photo there because a photo is better than no photo?  

Let's focus this discussion on blogs. If we use a picture on the blog with due consideration to various factors, the picture will definitely give great value to the blog; otherwise, it might even make the blog unattractive, add clutter or reduce the readability of blog. 

In this 3-part series, Indian Top Blogs discusses the subject from different angles and gives you tips to intelligently put images on your blog. The first post is  on technical aspects of images, the second on quality aspects and image processing for blogging, and the last one on matters relating to image placement etc inside a blog.

This post is devoted to technical aspects of images in layman’s terms.
 

Picture, image and graphic have been used interchangeably in this series of posts.


1. Which image?

 
The first thing to consider while using an image is whether we have the authority to use it. Bloggers often use photographs taken by them on their travels, on growing kids etc, but some also copy photographs from the web and routinely paste them in their blogs. We tend to use photos from the web, on news-events, celebrities and products, without caring to find whether these pictures are copyright protected. Even if the suspicion comes to our mind, we shrug it off thinking that the photos on the web are of generic nature and it cannot be proved that the photo [e.g. of a demonstration] was taken by us or not. We even use graphics that have been prepared by someone with effort and are not of generic nature. 


Please remember that for copyright protected images, we need to seek permission of the owner and pay royalty to him/ her before using them. This is why we have put this as the first point for consideration before using a picture.


2. Image types, formats and file sizes

the letter 'O'-
made of pixels

Digital images are of two main types. The first one is structured the way you see letters in a Word file.  You scale an alphabet 100 fold and it still looks as clear. Such images are called vector images. Others are the normal types, which are made up of small dots called pixels. If you scale these images beyond a point, they look pixelated – made up of tiny colored squares. We’ll talk of this type of images here, technically called raster images

Digital images come in different file formats such as .bmp, .raw, .tif, .jpg, .png and .gif. Cameras usually store photos in .tif, .raw and .jpg formats; .png, .jpg and .gif are the most common formats of web images. 

File-size is the space an image takes on the computer or website. Files used by professional photographers and photo editors are much bigger in file-size because they contain extra information that does not add significant value to images in their display on computer / mobile screen. On the other hand, web images need to be small in file-size so that they load fast on the browser. It is possible to convert a camera photo of 10 megabytes into a medium-quality .png or .jpg file of 100 kilobytes [100th in file-size!]. On a slow internet connection, the 10 mb photo would make your website hang for ever [no blogging platform as of now allows posting a photo of this size], while the 100 kb photo will open without much problem.
100x75 px
1.85 kb
100x75 px
1.23 kb

So, for uploading on the web, save images in .png or .jpg formats if they have a lot of color mixing, such as photographs. For simple sketches, cartoons and drawings with a few distinct colors, go for .gif format. Keep the image's file-size as low as possible by cropping (=cutting from sides) and re-sizing the image and saving it at a low but acceptable quality. We have put here five pictures that look almost the same in quality and visual size, ie. 100x75 pixels. Notice, their file-sizes range from 1.23 kb to 13.83 kb.

100x75 px
13.83 kb
100x75 px
11.89 kb
100x75 px
6.18 kb

3. Image sizes


The visual size of the image is measured in pixels, not bytes. A square picture of 1000x1000 pixel size is 100 times as large as a picture of 100x100 pixels at the same screen resolution of the computer monitor. To check the size of an image on a website, right click on it and you will find 'image information' option. If your browser does not permit that, save the picture in your computer and find it by hovering mouse cursor over the picture's icon or right clicking the icon.

Re-size images using an image viewing program [or if you are comfortable with that, an image editing program] and not leave it to the blog platform to do it for you. You will have much more control on editing if you do it on your computer rather than on the blog. [Some blog platforms now allow you to use an online picture editing tool, and it is good enough for blogging purposes.] As we'll tell you later, these simple edits can improve the quality of pictures and reduce their file-sizes remarkably.

4. Image shapes

 
Coming to shapes, different web spaces demand images in different shapes. 3x2, 4x3 and 5x4 rectangles are the commonly used image shapes but the final shape would depend upon the dimensions of the space in which you are placing the image, isn't it? A big background image covering the screen may need to be much wider than tall. The photo for the blog title background will need to be a thin strip, about 1000 px wide but only 80-200 px high.

Next: main image attributes and image editing


All image related posts on ITB including image editors, social media image sizes, alt attribution for SEO, and use of text in images

August 20, 2011

Blogger tips - II: blogging efficiently, tastefully

Blogger is a very versatile platform for blogging. While browsing through blogs for the Directory of Best Indian Blogs and reviewing blogs in detail, we have come across many blogs that would turn much more functional and appealing if the owners used some very simple in-built Blogger features. 

We have discussed some such features in the first edition of Blogger tips. Some more blogging tips follow:
Gracefully invite bloggers to comment.

If you want to give personal touch to your invite for comments (instead of the standard ‘Leave your comment’ message), you can do so by adding your own invite. Go to ‘Settings’, ‘Comments’, and then write your text in the ‘Comment form message’.

You can publish your posts without going to Blogger at all. You just need to send the post by an email to Blogger. You can also provide a mobile version of your blog so that it opens fast on mobiles. Mobile users will have option to see the full blog if they want to. These provisions are contained in ‘Settings’, ‘E mail & Mobile’.
Putting background image can liven up the blog.

‘Design’ followed by ‘Template designer’ gives you many options to improve the look of your blog. The advance features given here can be applied to an existing blog too. Besides changing the template, layout, color themes and background image, you can change the number of sidebars, the way sidebars and footers are arranged, and the width of the main column and sidebars. The background image option is somehow not very clear; you will be shown many background pictures if you click on the background image itself. (You reach there by clicking on ‘Background’.) However, check before applying any of these changes, especially if you have manually done tweaking of the code or you have many widgets.

You can track the number of visitors, sites sending traffic to you, countries from where you get your visitors, etc at ‘Stats’. You can go to ‘Stats’ either from the dashboard or the main menu.

Schaedule the post so that it publishes
at the date and time of your choice.

 

You can schedule the time of publication of your posts. In fact, we have advised scheduling to many bloggers who write good posts when they sit for writing but can't be regular in posting. For scheduling a post, after saving [not ‘publish’ing] the post in the post editor, click on ‘Posting options’ and put the date and time when you want the post to get published automatically. 'Publish' it now and it will appear on the blog only at the scheduled date and time.

Some tech-shy bloggers do not even experiment with ‘labels’. ‘Labels’ is one of the best features available on a blogging platform. This is extremely useful for categorizing posts. You can put categories in a horizontal navigation bar or a sidebar widget. For labeling posts, open the post editor, go to the bottom text-box next to ‘Labels:’, type your category’s names one by one, each separated by comma and single space. To know which categories you have already assigned, click on ‘Show all’. Next time you want to label a post with a label already there in the ‘All labels’ list, click on the label and it will go into the text-box.


Labels help in grouping and categorising posts.
Some bloggers are not sure of the URL of their blog’s feed. Though you can find it by just Googling it, we give below the formula for RSS and Atom feeds of Blogger blogs:

Atom: http://blogname.blogspot.com/feeds/posts/default
RSS: http://blogname.blogspot.com/feeds/posts/default?alt=rss

Our final tip in this edition of Blogger tips is on pasting Word document in Blogger’s post editor. When you create a post on a word processor like MS-Word and copy the text, it copies the formatting and other hidden code along with the plain text. So, when you paste the text into the post editor in ‘Compose' mode, you end up with weird formatting.

We recommend the following solutions:

1. If the text is simple and you don't mind its formatting getting destroyed, copy it, paste it on Notebook. Now copy the text from Notebook and paste it into the blog.

2. Alternatively, save the word file as a text file, copy the contents and paste them into the blog.

3. You can also copy the text and paste it in the post editor in 'Edit HTML' mode. Then go to 'Compose' mode to beautify the text. 

However, if the the text has lots of formatting, which you don't want to destroy, and has tables too, you need a work-around. The following tricks would help you in that: 

4. Copy the entire content and paste it into the body of an email or in Google Doc. Now copy it and paste into the blog.

5. You can use Word’s in-built facility to write blogs if you have 2007 or later version of Word. From the top left-hand corner Word icon, choose ‘New’, then ‘Installed templates’ and then ‘New blog post’. It will allow you to compose a Word document with formatting, tables and photos. Use photo option only if you want to link a photo that is available in some web-collection of yours. It has a facility to publish your blog from Word itself, but if you don't want to use it, copy everything and paste it into the blog. Please remember that posts composed in Word’s blogging facility tend to be heavy in size. 

There are numerous features, growing by the day, that bloggers can use free. So, we feel obliged to come out with more posts on the subject.

Happy blogging! 

August 17, 2011

What has blogging to do with Anna Hazare?

Anna Hazare
In normal times, this blog is not for sharing of political, economic, social and personal views. However, we cannot remain aloof to the happenings in India and in the blogging scene. So, we take a break from our core funtion to salute the spirit of India - the spontaneous outpouring of emotions against corruption and government's arrogant ways - and we appreciate the way social media has supported it.

Blogging is often not as instant and intimate as Facebook and Twitter. Yet, when we Googled the blogosphere for views on the present movement against corruption, led by Anna Hazare, we were dumb-found. Many blogs have come up with Anna Hazare and corruption in their URL; many thousand blogs have published posts on their blogs; a generic search on Anna Hazare on the web today resulted in 14.5 million items (1.8 million of them on blogs); a random click on Indian social and political blogs shows enormous sharing of anger.

The India Against Corruption. org website shows stupendous role of social media in the movement. 13 million people have sent missed calls on a given number; 320 thousand people like their Facebook account; their twitter account is being updated evey few seconds and has over 33 thousand followers (at 2 pm on 17th August). The juggernaut rolls on!

So, we at IndinTopBlogs salute the spirit of India, especially the youth of India. We also salute the spirit of the social media! Happy blogging!

August 12, 2011

Simple but very useful blogger tips - I

During our blog reviews, we have noticed that many bloggers do not use simple features available in blogging platforms, especially Blogger, that can improve the presentation of their blogs many times. This, without any knowledge of web languages or difficult procedures.

Maybe, some of the bloggers haven’t thought of these tools and some haven’t realized how even very small actions such as breaking a long post can add value to their blogs. Some might not know whom to ask questions that look patently silly and stupid. So comes this post.

Let's go straight to the tools available on Blogger/ blogspot.

 If you are not using the updated editor, you are missing a number of functionalities such as posting many images at once and resizing them. To use the new editor,  select ‘Settings’ from the main menu, then go to ‘Basic’. At the bottom of this sub-menu, click on ‘Select post editor… Updated editor (Recommended)

Updated editor gives many blog editing features.
You can upload several images in one go, either from your computer or a website or your own web-collection. You can then resize them, add caption, and easily align them with text – you just need to click on the photo in the post editor window, and the options will pop up below the photo. You can perform these actions only in the Updated editor.

You can put a favicon on your blog so that it shows up on the addressbar of the user’s browser. Favicons are 16X16 pixel images and need to be sharp enough to look good even in this small size.

A favicon gives identity to your blog; it's your blog's logo.
You can create favicon images free on the web or on any image editing software. If you upload a simple graphic of square shape [of a bigger size, say 100x100 px] to this favicon widget, it will itself convert it into a favicon and post it too. If you want further guidance, do send an email to us [no charged service or trap to buy something!]

You can easily break a long post at a point of your choice. Use the ‘Jump break’ icon next to ‘upload video’ icon on the post editor. We have used this feature in this very post. You need to click on ‘Read more’ below to read the rest of this post.

August 10, 2011

New website! Indiantopblogs

Hi

We have migrated to our own .com site from the .blogspot.com

For some time, we will suffer from poor visibility on the net, but with support from our visitors and those associated with us by way of ranking, listing or blog review, we'll soon overcome that. In return, we'll try to serve you better and your association will start helping in your own visibility.

You can reach us at
http://indiantopblogs.com
http://www.indiantopblogs.com
or simply typing indiantopblogs.com

Best of blogging!

Do wish us good. We'll return soon with more tips on blogging, and then with blog rankings and blogosphere survey.

August 8, 2011

The humble blog that India has started loving

You will ask why this self-patting?

Because we've made a century of sorts. Let us share the occasion with you.  We have crossed the one hundred blog review milestone this week. In a span of just four months [the rest three months we spent on blog ranking and the Directory of Best Indian Blogs], we have been furiously reviewing blogs at an average rate of six reviews a week. We have about a month's pendency still.

It gladdens our hearts that many bloggers whose blogs we have reviewed have thanked us profusely for our detailed analysis. Some have posted our reviews on their blogs and most of them seem to have retained 'Reviewed by Indian Top Blogs' icon on their blogs though it is not mandatory. It is your love that we cherish the most, and that drives us to keep giving free services, and to fairly assess the Indian/ desi blogoshpere. [If someone is unhappy, he or she will sure give a nasty comment on this very post, no? We are keeping our fingers crossed. We burnt these very fingers after bringing out the directory.]
Indian Top Blogs -plain vanilla, but India loves it


What gives us a big thumb up is that within this short time, this humble blog has reached Google Page Rank of 3/10 and Alexa ranking of under 5,50,000. That, without any SEO except some socialisation and marginal tweaking of links, etc! This blog is also our test of whether sincerity, hard work, quality product and perseverance can take us to a great website ranking. [We know of at least one global top blogger who is supposed to have reached that position with these attributes.]

Let us also share with you that as we grow in Google PR and other global rankings, any link going from our blog adds value to your blog. So, all the blogs ranked by us, those in the Indian blog directory and those commenting on our posts too benefit from our success. This is what SEO experts tell, not we.

What do we expect in return from our visitors, well-wishers and those who submit their blogs to us for review?
Nothing except this -
A commitment that you - a visiting blogger, whether you have a blog on our roll or not - will keep blogging, and writing quality posts.
A commitment from bloggers and non-bloggers alike - that you will promote quality blogs.


August 2, 2011

Is the best content of your blog in these 10 inches?

Updated in November 2015.

What is the most important part of any website


The posts, the title bar, the post headers, the colorful theme with cute caricatures that you applied to the blog recently, the next-gen animation , the scroll…? The powerful text that keeps your blog apart from others? The comments that your friends make on your posts? What's that you like the most about your blog?

Yes, all these are important; the content, the widgets, the design, interactivity, the landing page, advertisements, social buttons. One consideration, however, is of utmost importance whatever you think beyond content / widgets etc. It is the top 10 inches of space on your blog – the part of your blog that shows up when people open it in their browser. It tells the world who and what you are. To your regular visitors, it is your ‘Nice to see you again’ placard; to a stranger, it’s ‘Hi, welcome. Meet your friend’ poster. 

When you open a blog, what you see at first on the screen is the top of the webpage. [They call it 'above the fold' in newspapers.] You need to scroll down to see the elements that do not show up in the top frame. Isn't it? Yet, when we review blogs, we find that most bloggers pay no heed to this single most important aspect of website designing.

Remember the placard thing we said above? If you show the placard/ poster but do not immediately tell the visitors what is on offer on your blog, they will pass by. If as a seller/ friend/ service provider you tell them your offer but ask them to climb stairs to reach your door, they’d prefer to go to the shop/ house/ dormitory that is in front of them without the need to climb stairs. In the case of websites, they’d do so without blinking, as the next door in the www is just a click away.

So, what are we arriving at? We are repeating what we said before, so that you don't miss the point.

In simple terms, you need to showcase your best in those top few inches of screen space. People will scroll down if they want to, but you cannot force them. Even if they love your blog, they will feel irritated every time they need to scroll down the page to find the gem they need to see.

A proper design does not necessarily mean a riot of colors and flowers and animations – though in some cases, these might be suited the best. In all cases, the design has to be appropriate for the type of blog, writing style and content, and visitors’ profile. [That explains why we have given weightage also to design in our blog ranking.]

What’s the most appropriate website design for the top 10 inches?


The design of the top 10" has to be effective in showcasing your most important assets. For this to happen, the top of the blog must have (a) a well-composed title, (b) pithy description of the blog [should also serve SEO], and (c) an appropriate background for the title space, blog, posts and widgets. It should not be too bland in case of fun blogs and too gaudy in case of very serious blogs. The entire space should look balanced and should not be upset when the posts change. It should not look cluttered. It is even better if you can place a menu-bar with main categories shown below the title.

The title space should brand your blog and the rest of the space should reinforce the brand with content and visuals.

One or more posts must show up in the top 10 inches. At least the post title(s), and a text passage or an eye-catching graphic/ photo or video.

example of a simple blog design
A simple top design
What about the sidebar(s)? You need to put latest posts, latest comments, a label list or some other content that presents some of the most important resources in the blog. 
website and blog design
The most viewed parts 
of a blog

If your blog has more than two columns, put the more important elements in the left sidebar. Generally, instead of putting external links there, keep your own links [e.g. label list] in the left column. 

We have put on the linked post an attention map of websites. It tells us which areas of a website are looked at by surfers more than other areas. Notice that the top, center and left of the top 10 inches of a website/ blog invite the most attention.
blog design
Top 10" of a blog 
with low functionality

Do not waste these 10 inches in a huge title bar that only shows a graphic and the title. Don’t waste the side space on widgets that hardly add value to the blog. Look at the blog on the left and decide for yourself whether this rather colorful blog - with its big title photo, the cute animation strip,  the large video and external links - is any effective in instant communication with visitors. [Obviously, we dare not link this site even after changing its title.]

design of a news blog
A simple news blog
Look at this simple blog on news and analysis. It wins with its simplicity and is very effective in giving a glimpse of its analysis and its archives.

Look at the blogs of top bloggers. You will find that they usually have simple designs. Even when they need to have many widgets, they accommodate the most important ones in the top 10 inches. Why blogs, do look at professional websites. If they are colorful and experimental, there must be some purpose that outweighs other considerations. In any case, no professional website would embellish the blog at the cost of functionality.

A rather extreme example of showing the best on the homepage is websites just as wide and tall as a small screen. In some cases, they have just a welcome message or a big photo or slideshow on the entire page (another extreme) and in some, they fill it up with many links. Such website design, in our considered opinion, is not normal and should be used when it is seen to serve some specific purpose (e.g. announcing release of a new car).

You create the blog or website with love and your heart (and of course, head) into it. But you must not let its design hide what it must show upfront. Good use of top ten inches of the website is one of the best and natural SEO practices that are very effective.