Meet Michelle Laycock
As many of you already know, Michelle is my head designer for Blogs By Heather. I asked her to write up an article to share with you on Blog Design. Her 13+ years in professional graphic design allows her to create fantastic blog banners and graphics for you! To learn more about Michelle, please read her story here or you can visit her at www.LaycockDesigns.com.
Question: "How wide do you want my blog to be?"
Answer: I optimize customer blog graphics for a 1024×768 monitor resolution. The reason I do this is because I've done research and looked at statistics. About 92-99% of my customers are viewing my own blog at 1024×768 monitor resolution. Therefore, that is the current "popular" resolution which should be taken into consideration when designing graphics.
Question: What is monitor resolution?
Answer: Monitor Resolution is the display size of a computer monitor based on the number of pixels it can display in width and length. A resolution of 1024×768 means 1024 pixels wide by 768 pixels high.
Customers can decide if they want me to design for a lower or higher resolution and I gladly design to their requested size. However, I always let them know that if they go higher than 1024px wide (making sure to account for scroll bars and borders, etc.) their blog may not look good for the majority of their readers. It may look great on their own computer, but not on their neighbors'.
For example, I once had a customer who asked me to make her blog banner 1220 pixels wide so that the entire banner would fit perfectly in her computer screen. I mentioned to her that I'd gladly do that, however the only viewers of her blog that will see her blog exactly as she's seeing it would be any readers with a monitor resolution of 1280 or higher. That is not the resolution most people are viewing websites with. Those with the lower 1024×768 pixel width won't see her entire banner and blog. They will need to use their scroll bar at the bottom of their browser to read the right side of her blog. Many people will decide it's not worth the extra trouble to read her blog in this manner and she could lose customers and readers. After I explained this to her, she asked me to resize the banner down to fit a 1024×768 resolution so that it is optimized.
Examples
To illustrate this concept, here are screenshots showing how my blog at http://www.LaycockDesigns.com looks at various standard monitor resolution widths. Notice the entire content area of my blog fits without the need to scroll to the right.
For Typepad users who are on the "Plus" account (at $8.95 per month), and using the "Theme Builder" customize option, blog banners should be 870 wide if you want a 200px left sidebar, 500px middle column and 200px right sidebar.
For Blogger and WordPress users, blog banners can be any size but I recommend the width should not exceed 960px. Typepad users on the "Unlimited" account (at $14.95 per month) can have a blog banner of any size, but again, I recommend the width should not exceed 960px wide for maximum optimization.
So far the above banner sizes are for those who want static banners. Occasionally I have customers who ask for a banner that will go all the way across their screen regardless of how wide their blog content is. They want a "Fluid style" banner. With a "Fluid Style" banner, the content area of your blog should not exceed 960px, but the banner will expand and contract so that it always fits the size of any browser resolution it is viewed with. To view a "Fluid Style" banner in action, please visit the challenge blog I designed called "Flutterby Wednesday" at http://flutterbywednesdays.blogspot.com/. Use your mouse to increase and decrease the size of the browser window. Do you see what happens? The banner always fits all the way across the top. "Fluid Style" banners can be used in Blogger, Typepad and WordPress.
When working on your blog design, remember to consider the differences in resolution preferences and make sure your blog banner does not exceed the 960px width. If you do that, your blog will look great for the majority of your readers!
Advanced Templates.I'd like to add just one more additional note to Michelle's wonderful article, and that is that in order to have a Fluid Design in Typepad you need to be at the $14.95/month ("Unlimited") level, and Advanced Templates are needed. This is not recommended for most bloggers who enjoy the visual make-up of their blog when going to Design->Content. When switching to Advanced Templates the only option is Design->Templates. NO more Theme Builder or Content. It is all HTML/CSS modules, and basically your site needs to redone from scratch (as Typepad removed their Convert to Advanced Template option). However, if your Typelists are all made and you do not make many changes to your sidebars, then a conversion will probably not affect you much at all (just monetarily). I charge $75-$100 to do such a conversion. Anyway, we should chat more in depth if you are a Typepad user wanting to switch to Advanced Templates.
Happy Blogging from Heather & Michelle!