Thursday, September 13, 2007

Blog Design - 25 KISS techniques

I have had blog design on my mind for a few days in lieu of having the time to actually design something for my impending move to Wordpress. I came up with some wild, wonderful and complicated ideas only to end up reminding myself of the KISS principle - Keep it Simple Sue. I brought myself back to earth and reverted back to more basic web design principles and the particular needs of a blog site.

These concepts apply whether you are designing a blog from scratch or trying to choose a pre-made template.

Keep it Scope Sensitive

  • 1. Consider your blog's goals and target audience, what is its purpose and focus.

  • 2. A personal blog tends to have more design leeway than a business blog which often needs to follow certain professional conventions.
  • 3. Consider the age and sex and interests of your audience whichcan influence the whole tone of your page with regard to color, image and layout .

audience


Keep it Styled Simply

Reading on the web is not particularly easy on the eyes. A design take account of styling for readability .

  • 4. Choose fonts, font sizes and colors that are easy on the eye. To state the obvious, a blog page contains a large amount of text and each page, be it archive or post pages, are the same. Blogs do not have the luxury of being able to use splash pages or images to catch and keep readers attention, the words are paramount.

  • 5. One thing that amazes me is that as screens get larger and resolutions higher there is a tendency for smaller text. This is more noticeable in blogs that have an eye on making money online and advertising. Wanting to follow SEO recommended techniques for which elements should be in the optimizd position, they cram as much as possible into the top page area that does not require scrolling. There are some good reasons for this 'fold' area, in regards to how the eye scans a page, but go overboard and readability suffers. The quality of your posts is the drawcard to keep readers interest and to bring them back. Keep your content interesting and readers will happily scroll to read your posts.

  • 6. Use white space to help guide the eye rather than confuse it with clutter. Space out lines and paragraphs, do not crowd them

  • 7. Columns are used in newspapers and books for a purpose - to allow your eye to scan lines easily, without causing undue strain. Wide content areas do allow more of your post to be visible without scrolling, but the difficulty in reading may not keep your eyes, or your mind, focused for long.

    Widescreen monitors and full width flexible layouts increase the problem. You do not have to have your windows maximised of course, but having to change window size can be offputting. I personally find that having other windows, or even my desktop background showing, behind a reduced sized window is distracting. In general spend significantly less time on full width sites than others.
    On the other hand 800x 600 screens are becoming outmoded, making it less necessary to use the narrower layouts. A good stats utility will show you what resolutions your readers are using. You can use the extra area allowed by wider window sizes to add a third column to your blog rather than make your post area too wide.

website designs

Keep it Sensibly Systematic

Consider the placement of individual page elements:

  • 8. Follow blogging conventions so that readers intuitively know where to find things.

  • 9. Study other blogs so that you can develop a picture of this, particularly in regard to your sidebar.
    Archives, categories or tags, subscription and contact options should be easy to find. Place them in a prominent position in your sidebar. Work out what other things readers of your blog may be interested in. For example, you may have other blogs or sites that they like to visit too. Don't make your readers hunt for these, as they are likely to give up and head off somewhere else.

  • 10. A current trend is to make greater use of the footer. Ensure that long sidebar content does not make important information hard to find on individual post pages, where the footer may be well below your content. Anchor links to your footer placed near your post may be a way round this

  • Take care with the proportions of site elements ensuring your content does not get lost. Look at the size of headers, sidebars and sidebar elements in relation to the overall layout.

  • Ensure easy navigation around your blog pages, making everything as easy to find as possible.


Keep it Simply Stunning

Taking account of readability, blog conventions and sensible layout, your blog design concept will be now be plain but well organized. Now you can think of adding styling elements that will distinguish your blog and mark it as yours; but do not compromise your basic planning principles.

  • 11. Browse showcase and blog directory sites for ideas - take screenshots or bookmark them for later reference. If you wish to discover how certain elements are styled, use a utility such as the Scrapbook extension for Firefox to do a quick download of the page or look at the sites source code.

  • 12. Always remember that you are designing for a blog and unless you are aiming for a young, My Space kind readership, avoid gaudiness glitter and glare.

  • Use your heading and logo to make your blog distinguishable but do not make it so large that readers need to scroll too far to reach your top post.

  • 13. Keep in mind that images in posts are attractive and help break up the large amounts of text in your content area. Keeping the rest of your design clear and clean means that these images draw focus and interest to your posts. You have more freedom in post image, color and size as you don't have to worry about clashing with surrounding images and colors.

css zengarden

Keep it Smartly Shaded

Consider your colors carefully taking account of:
  • 14. Readability - text color should clearly stand out
  • Use strong color contrast for text and text background - use darker text on light backgrounds or vice versa

  • 15. Consider the preferences of your audience and what fits with your blog's purpose.

  • 16. Delineation of Page Elements - Different colored backgrounds text can divide your page up; to draw focus to areas you with to highlight. Take care that colors do not draw attention away from your content.

  • 17. On centered designs keep the background color or image toned down or in harmony with your other background colors.

  • 18. Gradients used carefully can jazz up a page without taking it over; the darker color in line with your heading, the lighter color with your post content.

color-wheel

Keep it Search Engine Savvy

  • 19. Choose a site title that is relevant either to your topic or identity.

  • 20. Consider which keywords to use as metatags, in your title, description, sidebar headings, navigation menus and category lists.

  • 21. Add "alt" (descriptive words) to your site images.

Googlebot

My graphical representation

of the Googlebot

Keep it at Supersonic Speed

  • 22. Only include javascripts, widgets and 3rd party coding

  • elements that are absolutely necessary - Work out which social networking and subscription sites that require you to place code on your site are really of use to you and leave the rest off. Jazzy image effects may be visually appealing but can slow a page down considerably.

  • 23.Take care with the amount and size of images used in your template and posts.

  • 24.Use image size reducing tools to create graphics that are as small as possible in pixel size while retaining their quality. (Article to follow on this one)

  • 25. Consider creating a seperate page for some slower loading elements - eg create a page for your award images. This unclutters your sidebar as well as improving page load time.

concorde jet

Have I taken all of these factors in consideration with the design of the blog as it is now? Not completely. This is my aim for my upcoming makeover.

Reading Resources

General:

Specific articles

tag alexa

7 comments:

Kim said...

this is such a terrific post Sue.....
great pointers....I will have to check each one off I go ...as I am always changing and re-arranging my blog
Looks like interesting reading there with all the links that you have suggested..thanks for that :D

Colin said...

Hi Sue,

Great article and well put together. I need to start tidying mine up a bit as it's starting to look a bit 'scrappy' in places lol.

I have tried various Wordpress themes but am happy with the 3 column layout which suits my needs, but obviously this varies from one user to another.

Re: RSS...some of them almost take over such a large portion that people simply won't bother subscribing. It's nic ehaving choice, but also knowing where to draw the line with a bit of common sense helps.

Have a great day :)

Sandy Carlson said...

Good one, Sue! Thanks for the resources at the end of this post. Really, aspects of document design carry right into web design.

My parents, who are in their 60s, are new to computers, but they already have the disease most of us suffer from: "Right now is ten seconds ago."

When I sit with them and we tool around the Internet, their frustrations and questions teach me what kind of revisions I need to make in terms of designs, widgetry, and the like. So I think the best design tutor is your nearest senior citizen!

Jayne said...

Some very good suggestions here!

Thanks!

Sueblimely said...

Thanks for all your generous words. This post did take me quite a while - mainly because I wrote it from the recesses of memory and then had to go and find posts that gave further details.

I agree Colin, your blogs contain a lot of valuable info and are suited to the 3 column layout. I just noticed your Free PC Security Blog has Google Rating 5 - well done and well deserved.

Good one, Sandy. Could you send your parents over here to do a critical appraisal of my blog please :-) I sometimes use my son for design critique - he is studying software engineering and marketing at uni - he tells me things like "you can't use that font, it is so 90's".

Sueblimely said...

PS, Colin - my new RSS button is too big but I need to rework it in photoshp to make it smaller or it goes raggy. One more job to add to the list.

Franco Yong said...

Hi Sue..Thanks for coming back to visit me. I saw an interesting entry of yours in your blog. I'm going to create a link back to my http://ebizuniversity.blogspot.com. Once again, thanks for sharing.

:-)

Franco

Thursday, September 13, 2007

Blog Design - 25 KISS techniques

I have had blog design on my mind for a few days in lieu of having the time to actually design something for my impending move to Wordpress. I came up with some wild, wonderful and complicated ideas only to end up reminding myself of the KISS principle - Keep it Simple Sue. I brought myself back to earth and reverted back to more basic web design principles and the particular needs of a blog site.

These concepts apply whether you are designing a blog from scratch or trying to choose a pre-made template.

Keep it Scope Sensitive

  • 1. Consider your blog's goals and target audience, what is its purpose and focus.

  • 2. A personal blog tends to have more design leeway than a business blog which often needs to follow certain professional conventions.
  • 3. Consider the age and sex and interests of your audience whichcan influence the whole tone of your page with regard to color, image and layout .

audience


Keep it Styled Simply

Reading on the web is not particularly easy on the eyes. A design take account of styling for readability .

  • 4. Choose fonts, font sizes and colors that are easy on the eye. To state the obvious, a blog page contains a large amount of text and each page, be it archive or post pages, are the same. Blogs do not have the luxury of being able to use splash pages or images to catch and keep readers attention, the words are paramount.

  • 5. One thing that amazes me is that as screens get larger and resolutions higher there is a tendency for smaller text. This is more noticeable in blogs that have an eye on making money online and advertising. Wanting to follow SEO recommended techniques for which elements should be in the optimizd position, they cram as much as possible into the top page area that does not require scrolling. There are some good reasons for this 'fold' area, in regards to how the eye scans a page, but go overboard and readability suffers. The quality of your posts is the drawcard to keep readers interest and to bring them back. Keep your content interesting and readers will happily scroll to read your posts.

  • 6. Use white space to help guide the eye rather than confuse it with clutter. Space out lines and paragraphs, do not crowd them

  • 7. Columns are used in newspapers and books for a purpose - to allow your eye to scan lines easily, without causing undue strain. Wide content areas do allow more of your post to be visible without scrolling, but the difficulty in reading may not keep your eyes, or your mind, focused for long.

    Widescreen monitors and full width flexible layouts increase the problem. You do not have to have your windows maximised of course, but having to change window size can be offputting. I personally find that having other windows, or even my desktop background showing, behind a reduced sized window is distracting. In general spend significantly less time on full width sites than others.
    On the other hand 800x 600 screens are becoming outmoded, making it less necessary to use the narrower layouts. A good stats utility will show you what resolutions your readers are using. You can use the extra area allowed by wider window sizes to add a third column to your blog rather than make your post area too wide.

website designs

Keep it Sensibly Systematic

Consider the placement of individual page elements:

  • 8. Follow blogging conventions so that readers intuitively know where to find things.

  • 9. Study other blogs so that you can develop a picture of this, particularly in regard to your sidebar.
    Archives, categories or tags, subscription and contact options should be easy to find. Place them in a prominent position in your sidebar. Work out what other things readers of your blog may be interested in. For example, you may have other blogs or sites that they like to visit too. Don't make your readers hunt for these, as they are likely to give up and head off somewhere else.

  • 10. A current trend is to make greater use of the footer. Ensure that long sidebar content does not make important information hard to find on individual post pages, where the footer may be well below your content. Anchor links to your footer placed near your post may be a way round this

  • Take care with the proportions of site elements ensuring your content does not get lost. Look at the size of headers, sidebars and sidebar elements in relation to the overall layout.

  • Ensure easy navigation around your blog pages, making everything as easy to find as possible.


Keep it Simply Stunning

Taking account of readability, blog conventions and sensible layout, your blog design concept will be now be plain but well organized. Now you can think of adding styling elements that will distinguish your blog and mark it as yours; but do not compromise your basic planning principles.

  • 11. Browse showcase and blog directory sites for ideas - take screenshots or bookmark them for later reference. If you wish to discover how certain elements are styled, use a utility such as the Scrapbook extension for Firefox to do a quick download of the page or look at the sites source code.

  • 12. Always remember that you are designing for a blog and unless you are aiming for a young, My Space kind readership, avoid gaudiness glitter and glare.

  • Use your heading and logo to make your blog distinguishable but do not make it so large that readers need to scroll too far to reach your top post.

  • 13. Keep in mind that images in posts are attractive and help break up the large amounts of text in your content area. Keeping the rest of your design clear and clean means that these images draw focus and interest to your posts. You have more freedom in post image, color and size as you don't have to worry about clashing with surrounding images and colors.

css zengarden

Keep it Smartly Shaded

Consider your colors carefully taking account of:
  • 14. Readability - text color should clearly stand out
  • Use strong color contrast for text and text background - use darker text on light backgrounds or vice versa

  • 15. Consider the preferences of your audience and what fits with your blog's purpose.

  • 16. Delineation of Page Elements - Different colored backgrounds text can divide your page up; to draw focus to areas you with to highlight. Take care that colors do not draw attention away from your content.

  • 17. On centered designs keep the background color or image toned down or in harmony with your other background colors.

  • 18. Gradients used carefully can jazz up a page without taking it over; the darker color in line with your heading, the lighter color with your post content.

color-wheel

Keep it Search Engine Savvy

  • 19. Choose a site title that is relevant either to your topic or identity.

  • 20. Consider which keywords to use as metatags, in your title, description, sidebar headings, navigation menus and category lists.

  • 21. Add "alt" (descriptive words) to your site images.

Googlebot

My graphical representation

of the Googlebot

Keep it at Supersonic Speed

  • 22. Only include javascripts, widgets and 3rd party coding

  • elements that are absolutely necessary - Work out which social networking and subscription sites that require you to place code on your site are really of use to you and leave the rest off. Jazzy image effects may be visually appealing but can slow a page down considerably.

  • 23.Take care with the amount and size of images used in your template and posts.

  • 24.Use image size reducing tools to create graphics that are as small as possible in pixel size while retaining their quality. (Article to follow on this one)

  • 25. Consider creating a seperate page for some slower loading elements - eg create a page for your award images. This unclutters your sidebar as well as improving page load time.

concorde jet

Have I taken all of these factors in consideration with the design of the blog as it is now? Not completely. This is my aim for my upcoming makeover.

Reading Resources

General:

Specific articles

tag alexa

7 comments:

Kim said...

this is such a terrific post Sue.....
great pointers....I will have to check each one off I go ...as I am always changing and re-arranging my blog
Looks like interesting reading there with all the links that you have suggested..thanks for that :D

Colin said...

Hi Sue,

Great article and well put together. I need to start tidying mine up a bit as it's starting to look a bit 'scrappy' in places lol.

I have tried various Wordpress themes but am happy with the 3 column layout which suits my needs, but obviously this varies from one user to another.

Re: RSS...some of them almost take over such a large portion that people simply won't bother subscribing. It's nic ehaving choice, but also knowing where to draw the line with a bit of common sense helps.

Have a great day :)

Sandy Carlson said...

Good one, Sue! Thanks for the resources at the end of this post. Really, aspects of document design carry right into web design.

My parents, who are in their 60s, are new to computers, but they already have the disease most of us suffer from: "Right now is ten seconds ago."

When I sit with them and we tool around the Internet, their frustrations and questions teach me what kind of revisions I need to make in terms of designs, widgetry, and the like. So I think the best design tutor is your nearest senior citizen!

Jayne said...

Some very good suggestions here!

Thanks!

Sueblimely said...

Thanks for all your generous words. This post did take me quite a while - mainly because I wrote it from the recesses of memory and then had to go and find posts that gave further details.

I agree Colin, your blogs contain a lot of valuable info and are suited to the 3 column layout. I just noticed your Free PC Security Blog has Google Rating 5 - well done and well deserved.

Good one, Sandy. Could you send your parents over here to do a critical appraisal of my blog please :-) I sometimes use my son for design critique - he is studying software engineering and marketing at uni - he tells me things like "you can't use that font, it is so 90's".

Sueblimely said...

PS, Colin - my new RSS button is too big but I need to rework it in photoshp to make it smaller or it goes raggy. One more job to add to the list.

Franco Yong said...

Hi Sue..Thanks for coming back to visit me. I saw an interesting entry of yours in your blog. I'm going to create a link back to my http://ebizuniversity.blogspot.com. Once again, thanks for sharing.

:-)

Franco