Tuesday, September 4, 2012

Basic Layout Considerations for Your Blog

The layout of a blog is extremely important, and should be one of the first things to consider, aside from what you are going write for it. (I tend to use similar layouts and themes for specific blogging platforms.) Many blogging platforms allow you to change the appearance and layout of your blog via directly editing the HTML or the use of WYSIWYG editors. The following tips are things you should consider when creating a layout for your new blog.

Use “negative space” to separate your content.

One problem I have noticed on blogs with multiple columns is that the columns are smashed closely together with no room to differentiate the side columns from the main text. This is messy, and often makes the body text difficult to read. Putting space between the columns divides them into sections and makes the content much easier to read. (For an example of this, take a look at your local newspaper. Note that there is a main body of text in the middle with a space separating the blocks of text, and then additional columns. Many websites with written contend follow this format.) You can also sub-divide blocks of text further by using borders and background colors.

Adjust your columns so that images and other content will fit.

Another problem I have seen a lot of is images that “jump” outside their column into the body text because the images are too big for the column. If the images you are using in the columns are your own, resize them in Photoshop or some other graphic editing program. (You can just have the image appear smaller using code or your WYSIWYG editor, but this does not actually change how much space the image takes up, and can also cause the image to appear grainy or pixelated.) If the image is an ad, you might still be able to change to size by tinkering with the code, but if that does not work, you should change the size of your columns, or see if you can find an ad that fits the dimensions of your column.

Use readable font.

This would seem to be a “no brainer” tip, but I have seen a lot of sites where the text was in all italics, with non-contrasting colors. Readability is the primary thing you want to think about when creating your blog. Pick a font face that is designed for the web in a size that is easy to read, on a contrasting background. Pair lighter colors with darker contrasting colors for maximum readability. (Do not use light gray on white back grounds or bright red on bright blue. If you are not sure whether something is readable or not have other people check your blog for readability.)   

Some suggested web fonts can be found here. I tend to prefer Arial followed by Georgia. If you are using more than one font face, make sure that they look good together and have a professional appearance. Avoid using “novelty” font faces like Comic Sans.  

Become familiar with HTML.

Even if you are using a What You See Is What You Get template designer, you should attempt to become familiar with basic HTML and CSS, even if you are not going to be creating your own code. Becoming familiar with and using HTML will be helpful in the long run, especially if you use Google Adsense or an Affiliate program to monetize your blog. (Knowing where to stick bits of code is often very useful in these cases. So is being able to fix the problems that arise if you put something in the wrong place, or accidentally delete a tag.)

Test your blog or site with multiple browsers.

Different browsers “read” the HTML and CSS of a particular page differently. This means that your blog might look very different in Firefox as opposed to Chrome or Internet Explorer. Always test your page to make sure that the appearance of your blog is consistent across multiple browsers.   


I am going to recommend two books. The first is Web Style Guide, 3rd Edition by Patrick J. Lynch and Sarah Horton. This was a text book for a web design course I took, and it is pretty much terrific. It is easy to read and extremely useful. Another book I am recommending is Design Fundamentals for New Media by James Gordon Bennett. This is another text book and is geared more toward graphic design than web page building, but a lot of the rules of thumb still apply. Design Fundamentals is a little pricey, but worth the money if you can get it used. If you are interested in learning more HTML (or CSS or Java) Check out the W3Schools website.