October 11, 2013

Common web design issues in Hindi blogs हिंदी ब्लॉग डिज़ाइन में खामियां

updated in October 2018

We have talked in detail in the linked post about the peculiarities of Hindi blogging and Hindi bloggers. In the present one, we'd share some very common web design and readability problems we found on Hindi blogs. 

We feel bad when we find that many Hindi bloggers ignore some very elementary web design aspects and it makes their blogs shabby, unprofessional, kiddish, unreadable... sometimes even ugly and irritating. 

It is ironical that many young ones who start their blogs in Hindi to earn from the blog do not have good appreciation of design concepts. They feel that their blogging would succeed on the strength of search engine optimization (SEO) tricks that they learn from others, and some of them succeed too. We would advise bloggers who want to make an earning from blogging in Hindi not to go for such shortcuts. SEO is useful and desirable, but when the blog is rich in content and good in design.

Let us show some common web design and readability issues by real examples. We have, however, masked the blogs' identity by smudging, blurring or shading some parts. We have given links to posts on ITB on related aspects.


Hindi blogging
A

A. The first image has screen shots of two blogs. The main shot shows a large number of elements all around with hardly much real content. The inset is a blog in which the opening screen has a huge photo and the link to main blog is hidden at the bottom - and this is not a photoblog.

ITB's view: Don't clutter the blog. Give prominence to the main content. Show up the best or the most current content in the top 10 inches of the blog.
For advice on these matters, you can visit these ITB references: 

B. In the image below, the top screen shot is a post supposed to be in Hindi but when it was posted by the blogger on the blog in native font, it became abracadabra. The lower [red] text is a part of the huge label list at the bottom of a blog. The text [blue] in the right column is a portion of a massive label list in a sidebar.

Hindi blog design
B
ITB's view: In Hindi blogs, use Hindi in Devnagri script and in Unicode font, not Roman script or native fonts. Use labels wisely; when the label list is too big, it not only loses its utility it badly clutters the blog.

ITB detailed tips on using labels/ tags/ categories: use labels effectively   

C. Have a look at the screen shots of text as it appears on two blogs. These shots show spelling errors or matra issues, indicated with arrows.

Blogging in Hindi
C

ITB's view: Before you push the 'publish' button for a post, have a final look at grammar, punctuation [especially the usage of ending marks and indentation] and matras [especially कि/ की and bindu as in है/ हैं ].


Hindi blog designs
D



D. The next image is a collage of four columns taken from different Hindi blogs. Note the first one: it has a thin columns that cannot even list the month-wise archives properly. There is a widget under it [a red arrow pointing at it], which does not open as it cannot be accommodated in the column. In the second one, the sidebar is comparatively wider but is so much filled with text that you cannot comfortably read it. The third shot [dirty yellow] has a sidebar hanging beyond the main content and the blog's bottom is full of badges and an empty looking social widget. The fourth one has enormous blank space [grey] and a few links and widgets scattered here and there. 

ITB's view: We have seen very long and thin sidebars in a large number of Hindi blogs, including those listed in the Directory of Best Hindi Blogs. Sometimes the sidebar hangs down much beyond the main content. We advise that you keep a decent width to the sidebar(s) and keep only those widgets in the sidebar which add value to your blog. Do not over-stuff the sidebar(s) with text and long lists.
Many bloggers stuff long text and long lists, blogrolls, badges etc in the sidebar which makes the blog look unkempt and childish. Widgets that do not open or go beyond the sidebar also spoil the looks. Blog's bottom is not a sink or dustbin; it should be kept neat and clean, and it should be used purposefully. 
ITB reference on good use of widgets/ plugins: using widgets with impact  

top Hindi blogs designs
E
E. This collage has three parts. The top left screen shows a huge popup covering the entire page. The rectangle below it shows a post that is an image of the blogger's article published in a magazine, which is not readable. The third shot, in blue, is an example of (i) text that is unreadable due to poor contrast between the text and the background (i.e. black text on dark blue background), and (ii) long sidebar that goes on and on. 

ITB's view: Pop-ups are OK if they serve a purpose, for example, asking the visitor for some action that will help him in some ways. Even there, pop-ups should not be too big and should go away if the visitor does not take any action in 5 seconds or so. 

Use scanned images for text only when it is unavoidable. 

Hindi blogs
F
F. The collage above has four screen shots. Look at the readability of each of these portions: light blue text on green; black on blue; light text on background that has text and also nearly the same color value as that of the text; and [at the right bottom] text and background of almost similar color.

ITB's view: Text is there to be read, so do not ignore text color in relation to the color of the background. Avoid experimenting too much with text coloration. [More on this after image 'G'.]

ITB has a detailed post with tips on how to choose text color for blogs and websites: taking care of text color  

  G. This picture is even more interesting when it comes to reading and use of text colors. Look at the top pink bar and notice how the text becomes unreadable because of wrong choice of colors. In the two left columns, do you notice the use of bright green, pink, cyan, orange and yellow colors? 


Design Hindi blogs
G

Have a look at the Chrome warning. Your visitors are likely to get such warnings if you put on your blog links and widgets that have malicious code. Will a visitor getting such an alert visit your blog again?

ITB's view: Let us repeat that being playful with colors is OK, but we should not take too much liberty with TEXT colors. Whether in text or otherwise, avoid using garish colors, especially the primary colors - red, green, yellow and blue. In blogs and websites that has a large amount of text content, one should use a sober color scheme in which text is eminently readable. 

Text should also not attract attention to its looks such as curious font, variations in text size, and too bright and gaudy colors.

We have a detailed post telling us how much is too much when using colors on blogs/ websites: when a blog is too gaudy.

Well, we have talked recently about the risk of putting malicious code on the blog. This is not a design issue but we put it here to illustrate that widgets must be chosen with care. You can visit this ITB references if interested in knowing about bad code that can hurt your blog: beware of harmful code     

Other annoying issues we found on Hindi blogs: 
  • Use of too small or too big text.
  • Too big footers after each post, giving details of other blogs of the same blogger etc.
  • Use of photos of sizes that are too smaller or bigger than the width of the column in which they are put.
  • Childish use of text inside title images.

यह पोस्ट अंग्रेजी में है, लेकिन चूंकि ज़्यादातर बातें चित्रों के माध्यम से समझायी गयी हैं, हमें आशा है कि हिंदी के ब्लॉगर्स उनका लाभ उठा सकेंगे. हिंदी के बारे में बड़ी पोस्टें हिंदी में नहीं लिख पाने के लिए हम क्षमा चाहते हैं.