Skip to content

Tips needed on designing blog header

Post this topic on X

In Blogging Beginners

The IndiBlogger forum is now a read-only archive. Every public discussion is still here to read, but new topics and replies are closed.

TF Carthick
from Bangalore |

I wanted some ideas from people on how to go about designing a blog header. I feel blogs look more professional with an image or logo along with name and tag line. Whenever I see my blog header with just name and tag line, it feels empty.

Want to know what people think. Is it just my view or everyone feels a blog looks more cool with an image in the header?

And how they designed the header? Simple editing of some images from internet or more specialized tools like canva or somerhing or did someone pay an artist/designer to design for them? (It is a one time cost. So for something that is really cool, I can pay upto 1000 Rs.)

Also on the flip side, since header is an additional image on the blog, will it impact loading time.

Please note - all my queries are with respect to a blogger blog.

Replies 1 to 9 of 9

Bushra M
from Bangalore |

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 Smile Go for it! Better still, tell me how you want yours, i'll make one for you, free of cost ofcourse! Wink

TF Carthick
from Bangalore |

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. 

Ranjith
from hyderabad |

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 Foot in mouth

TF Carthick
from Bangalore |

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

Ranjith
from hyderabad |

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) CoolTongue out 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. Innocent

TF Carthick
from Bangalore |

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

Shivam Ralli
from Ghaziabad |

r http://prntscr.com/62meov :))

Ranjith
from hyderabad |

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

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

Ranjith
from hyderabad |

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

TF Carthick
from Bangalore |

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

Ranjith
from hyderabad |

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

Girl Parth
from Mumbai |

Have a look at corporate headers

Arti
from Mumbai |

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. Smile

TF Carthick
from Bangalore |

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

CyberKID
from India |

:-O 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.

Ranjith
from hyderabad |

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

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

CyberKID
from India |

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

Ranjith
from hyderabad |

No one wants to Tongue out

But good essay Laughing

CyberKID
from India |

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

Ranjith
from hyderabad |

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

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. Foot in mouth

CyberKID
from India |

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.

TF Carthick
from Bangalore |

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

Someone is Special
from Bangalore |

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

TF Carthick
from Bangalore |

Thanks for the offer, SIS.

TF Carthick
from Bangalore |

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.