With the advent of the new Pages feature in Blogger, many bloggers seem to be taking the opportunity to review their blog layouts, clean up their sidebars and generally spruce things up. I often receive technical queries and help bloggers behind the scenes. This blog post sets out some tips for blogs on the Blogger platform:
- Avoid Over-size Banners: While many people read blogs through services such as Google Reader and Bloglines, some will actually stop by your blog. When they do, there are few things more off-putting than a banner image that fills half the page or takes an age to download (remember there are still plenty of readers in Blogland on dial-up!). Aim for a low resolution image with a file size less than 50KB and with a pixel width appropriate to the scale of your blog template. (FYI – my banner image is 20KB, 500 pixels wide and 118 pixels high.)
- Stretch Layouts & Screen Resolutions: some of the well-known templates in Blogger (eg Minima Stretch) use a “stretch” layout which means they change width depending upon the screen resolution of the user’s monitor. The upside is that content fills up the screen. The downside is that what looks great on your screen may look completely different on someone else’s screen and browser. This downside is most pronounced when it comes to banner images. You might make your header image wide to fit your generous monitor and it will spill over the edge at a smaller screen resolution and vice versa. Be mindful that your readers use a variety of screen resolutions.* If you use a stretch layout, consider using a centred banner image floating on a coloured background. The size of your image will be fixed but the background will vary.
- New Blogger Designer Templates – rather than fussing with one of the old-style templates, you might like to swap to Blogger in Draft which offers new, highly-customizable templates with one, two and three column layouts for each template and complete control over the size and arrangement of the columns. Interestingly, all of the new designer templates are fixed width rather than stretch layouts. You can vary this width via Design>Blogger Template Designer>Layout>Adjust Width.
If you wish to add a header image in one of the new blogger templates, go to Design>Page Elements>Header>Edit. Generally speaking, this function will automatically shrink over-size images to fit the optimum width for that particular template. See the bottom of the edit screen for pixel width details.
- Navigation Menu Styling – another advantage of the new designer templates is that they incorporate improved styling of navigation menus if you use static pages on your blog. See, for example, the blogs of Erica Spinks and Linda Robertus.
- Gadgets – if you haven’t looked for a while, check out the expanding range of sidebar gadgets offered by Blogger and third parties. Go to Layout/Design>Page Elements>Add a Gadget
To be on the safe side, download a copy of your existing template (Design/Layout>Edit HTML>Back Up Template). Then have fun playing with all the new design options.
*As part of my stats collection with both Performancing Metrics and Google Analytics, I know that approximately 75% of my readers use monitors with one of the following screen resolutions: 1024×768 (25%), 1280×800 (20%), 1280×1024 (12%), 1440×900 (10%) and 1680×1050 (8%). I venture this usage profile is fairly typical.
Raewyn says
Hi, many thanks for posting this!! I have spent a wet afternoon playing around and given my blog a makeover; thank you for giving me the confidence and tools to do it!!
Esther Aliu says
Brenda, once again, thanks so much. This really helped.