Tips needed on designing blog header

A good header definitely gives your blog a better look! I have designed atleast a hundred until now so I can say that loading is not a problem at all  Go for it! Better still, tell me how you want yours, i'll make one for you, free of cost ofcourse! 

Thanks a lot for the offer, Bushra. I am looking for something that represents the theme of the blog - Three Realms is about Science Fiction, Fantasy and Historic fiction. I want something that looks beautiful and at the same time looking at it, conveys what the blog is about. Not able to conceive what to put there still.

If you see background of my blog, there are distant stars - that has a science fiction feel to it and also the message of endless scope for exploration. 

Just the blog's name in the header doesn't look good. Either use a logo (like the one on my ALHT blog) or a header image.

You can create a simple header image by taking a photograph that suits the theme of your blog and add your blog's name (using word art) over it using any of the MS Office applications. You can use a photo of your bookshelf (with you standing at one corner of it) for your header image.

Loading time - Any images/JS that you add to your blog will impact loading time. But shouldn't bother much as images are generally cached and the load time will be high only for the first visit.

You can use the following techniques to minimize loading time of your header (or any image of your blog)

• The header image that you create should have the same dimensions as the space in which it will be put up.
• Compress the image.

Now, don't ask me why I have don't have a logo/header image on my Java site 

Thanks, Ranjith - for Three Realms hope is readers will come from Google. So will header image affect loading time greatly for them?

Yes, Page Speed is an important factor in ranking.

And Google Page Speed gave your site a Desktop score of 34/100. https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.karthikl.com&tab=desktop

You should fix the issue with your images. For example, in your 'Storytelling Games' post, the image is displayed at a resolution of 200px X 150px but the original image size is 600px X 450px. Resizng it and compressing reduces it size a lot. 

Optimize images

Properly formatting and compressing images can save many bytes of data.

Optimize the following images to reduce their size by 1.7MiB (72% reduction).

• Compressing and resizing http://2.bp.blogspot.com/…AAAAAABDs/anNFmnkRwk0/s1600/Wargames.jpg could save 411.8KiB (98% reduction).
• Compressing and resizing http://4.bp.blogspot.com/…AAAAAAAABCE/aowvouQ-rT0/s1600/Apollo.jpg could save 229.2KiB (98% reduction).

[...]

Same thing for header image. Its dimensions should be the same as that of the area in which it is displayed and it should be compressed.

Images contribute the highest to decrease in page speed. But that doesn't mean that you shouldn't use images. You should maintain a balance.

P.S. My Java with us site has page speed 91/100. (for desktop)  https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.javawithus.com&tab=desktop

But Page Speed is not everything when it comes to seo or success of a website. 

Thanks for the insights, Ranjith. Let me look at the images thingy and reach out to you if I have doubts.

r http://prntscr.com/62meov 

Shivam The score I mentioned 91/100  is for desktop, not mobile. 

Yes, I need to mke some minor changes - set the blog width to fluid on mobile broswers...

On your three realms blog, you have a Creative Commons widget and you named the widget 'Copyrighted'. Aren't they contradictory? 

Ranjith - Is it so? Basically I want to put that don't plagiarize thingy. How else will I do it?

Not sure. Now I am confused.  I think CyberKID can help us. 

Have a look at corporate headers

I agree that a blog with a header looks more attractive to the readers. Also, it gives a fair idea of what the blog is about so it helps the attention of a reader and encourages him/her to read more.

For my blog, I have designed the header myself with the help of Picasa and the images used are all mine. Browsing random sites helps and you can take ideas and inspiration from them to design your header accordingly.

If you need any help with designing, just drop me a word TF and I will share whatever I know! Happy Designing. 

Thanks for the offer, Arti. Shall get in touch with you.

A nice header is important as is a compelling About page. IMHO.

 How did I miss this one? 

Anyways, regarding your question, if you ask me, I find a blog with a header, more appealing with a blog without one. You necessarily don't need something like a logo or something like that, but, yes, a header image is something you should opt for after due thought.

Loading times are ofcourse important, but how much delay do you think an image of around 500-600kb can cause? A header needs not be a very big image, but atleast should be enough to cover a the entire header part of your blog in terms of the screen width. This means that you should use a header with a width of atleast 1920px (given that most of today's Full HD monitors will be able to properly show the header) The code to automatically resize the header image, as per the screen width can be easily done via CSS, so, that shouldn't be much of a big issue. Image height depends upon you. Though, I like a header height of atleast 240 pixels.

If you want, you can take a look at my blog (MG) to get a feel of a blog with a header (though, this one is a what is called a responsive header slider based on a free plugin called Camera by Pixedelic. I have created a second one with just a header image and the blog's name for my second blog. Here's a screenshot of the header. This one again is responsive, and uses an SVG image file which is just 68kb for an image of such a resolution 1920x320 px (compared to an image file with extension .jpg or png, this is more than 10 times their size would have been). The text over the header is an overlaid text, that is not done on the header background image.

Image

The lines in this image are what are sometimes collectively called abstract art, and you can download one such files to be used freely without any restrictions whatsoever from any of the free vector image provider sites. Since these are vector graphics, you can edit these in appropriate application like Adobe Illustrator to enlarge the images as much as you want without any loss of quality.

This means that you should use a header with a width of atleast 1920px

You are assuming a fluid width blog.  Most of the blogs use fixed widths...

no r, I'm assuming a wide FullHD resolution screen. Yes, indeed most of the blogs are fixed width limited to 1100px though. What if one wants to do away with that limitation, like I do for my blogs :P

No one wants to 

But good essay 

r, they do. I think there will be a very few people who'd like their site to be shown in a 800/900 px area in the middle of a full HD screen with resolution width of 1920 px.

Unless you see your blog/site in an fhd screen, you won't realise what I'm saying. Let me send you some screenshots to compare :P

If we consider IndiTalkers to be a good representative sample, then only you have fluid width blog. 

And having content area width 1000+px is bad according to me. It will be difficult to keep track of the line you are reading when you reach the end of one line and should move to the next line. 

Inditalkers are no good a sample for this.

And, as I have always maintained, onscreen space on a webpage is as expensive as real estate, so you need to use it wisely.

Will look at it, Cyber. Let me first get the image and concept right - then will reach out to you for the technical stuff. I also got to first optimize post images as suggested by Ranjith

A header image is must for the blog, TF. If you need any help in designing the image please ping me on Facebook.

Thanks for the offer, SIS.

Ranjith - Regarding that image thing - I optimized them. What else must I do to increase page loading. Don't understand the other stuff much. Can see some issue with Pinterest - but can't figure how to fix it.