Look around the design slice of the blogosphere and you’ll see several discussions promoting the use of grid-based design/ framework for web pages. Grid-based design isn’t really new, as the concept has been long-used by desktop publishing for print design. But as you probably know, it’s been hard for many years to have any modicum of control over the look of web pages.

CSS (Cascading Style Sheets) helped changed that somewhat, and the new standard, CSS-3, will further that effort. There are still the stragglers, such as Microsoft, who refuse to use real standards and make up their own. They make page design a pain.

Without CSS, however, grid-based design for web pages that makes liberal, innovative use of visual content would be very hard if not impossible. (Table-based design means larger file sizes for pages.) If you’re considering a redesign for your site, here are a few reasons to consider grid-based design.

1. Formulaic technique.
   If you can add, subtract, multiply and divide, and understand basic CSS elements, you can set up your own grid framework. Or just simply tweak an existing framework like Blueprint.
2. Versatility.
   A grid-based design affords an enormous amount of versatility and position control of page elements.
3. Subtle visual impact.
   Being able to position design elements on the web page where you actually want them will of course allow your pages to have the visual impact you want. And because of this, the visual impact can be a lot more subtle and less blocky than the alternative (non-grid framework).
4. Portability of framework.
   Since a grid-based design framework is accomplished using standard CSS code, it’s portable. You can re-use it for any website you like.
5. Easy customization of framework.
   Port your existing framework to a new site and make easy customizations by tweaking the grid parameters. Some people prefer a grid column of 50 pixels and gutters of 20 px, others like larger columns. Use what works for you, but remember that if you want standard column widths for page elements, to satisfy common ad and banner sizes, there are only a few combinations of grid column and gutter widths.
6. Minimized development time.
   Once you have a framework in place that is versatile for common column widths, it becomes very easy to develop new page templates. Together with the last bullet point, this could mean reduced website project costs.
7. Workaround CSS hacks.
   There are some stinky browsers (*cough* Internet Explorer *cough*) that refuse to play nice, even after 11 years or so of development time. Instead of using real browser/ CSS standards, they make up their own. This is a serious source of hair-pulling and headaches for designers. A framework allows you to define consistent CSS browser hacks for reuse.
8. Reset elements.
   A grid framework can ease the mass reset of CSS elements.
9. General consistency.
   Both visual elements and typography can be consistent, which adds visual coherence.

Despite these benefits, that doesn’t mean everyone likes or recommends grid design. Some people feel it’s restrictive. My feeling is that grid-based design can hardly be as restrictive as not having any framework for web pages at all. You’ll have to judge for yourself.

Visual elements of a better website go beyond just a good logo design and includes formatting the text of your articles. If your website/ weblog’s pages are looking a little text-heavy and dense, there are some relatively easy ways to improve your look without having to be a typesetting or CSS expert. The rules of typesetting for computer screens are not that different than for print, but there are some nuances, and you have the benefit of special HTML tags and CSS code to make life easier en masse.

1. Font size.
   Try for 11 or 12 pt as your base body text font. Not all your readers are in their 20s. Eyesight does start to slip, albeit slowly, after 30. The difference is that a computer screen is much farther from your face than the average book. So you have to factor in that distance. Not doing so guarantees you’ll lose those readers who don’t know how to increase font size on their browser. Even that is unreliable because some themes/ templates do not handle that well.
2. Font family.
   The problem with computer screens is that very few fonts look good on them. Older research by Microsoft shows that Verdana, a sans serif font, works well for body text on screen. Some designers say that any font works if it’s large enough, but serif fonts can look really blocky onscreen. Compare this to print, where serifs such as Times Roman are preferred.

   On the other hand, serif fonts such as Georgia are okay for onscreen headings. Jim Whimpey suggests that only three fonts look good onscreen: Verdana, Georgia, and Lucida Grande. Poynter Online also suggests Trebuchet. These four tend to be available on most home computers, so most readers will see text render they way the author meant them to be.

3. Line leading.
   Leading refers to the amount of vertical space used for each line of text in an article. The general rule of thumb is that increase in leading should be proportional to increase in width of the line of text. This is one primary reason why you should avoid “fluid” width web page templates/ themes, despite the fact that owners of gigantic monitors seem to love them. Keep in mind that even if readers are not aware of it, too little leading makes for reduced concentration for longer articles, and can even give some people headaches. You can control leading in CSS code: line-height: 1.25em;.
4. Character tracking.
   Space between characters is important. Characters should not touch, but neither should they be overly far apart.
5. Single space after punctuation.
   Word processing and weblog software handle spacing differently. Use only one space between sentences.
6. Paragraph spacing.
   In addition to line leading, you can control the amount of vertical space between any two paragraphs. This can be done in a number of ways, including tweaking your paragraph CSS code.
7. Right-ragged or justified text.
   Whether you use right-ragged (aka left-aligned) or fully-justified text depends on a couple of factors: the width of your articles and the length of the average word in your writing. Try both types of justification with a number of articles and see what looks better.
8. General whitespace.
   Not everyone agrees that lots of whitespace is good. It’s generally fine in print, and is a good idea onscreen. However, too much whitespace surrounding text can also make the text look isolated. Generally speaking, you can control whitespace around text and other elements using “padding” in CSS.
9. Attractive blockquotes.
   If you tend to quote other sources regularly, making blockquotes look better takes a few simple tweaks in CSS. This includes:
   • Adding lines - with or without color.
   • Using a different font.
   • Using italics.
   • Adding a light colored background.
10. Callouts.
    In print, callouts - aka pullquotes - were used to fill column space. If you have two or more columns in your typesetting, you don’t want a big gap at the end of the rightmost column. Callouts served to take care of this. They also add a bit of visual texture, and work quite well onscreen, if handled properly.

    Here’s a rough guide to callouts using CSS - works for most weblog platforms. Chris Pearson also has a more indepth discussion of how to do pullquotes, which includes using blockquotes, divs and spans. Pullquotes are a direct quote of actual text in your article. Callouts need not be.

11. Harmonious color palette.
    If you’re a non-designer like myself, you may be able to tell when colors look good together but don’t know how to get there. Color Theory has a lot of rules, and can take years to master. ColorBlender is a nice, easy tool for generating a set of six colors patches that are harmonious. Each resulting palette’s color codes are given in both RGB and Hex.
12. Headlines.
    Improving your web pages can be as simple as modifying your article headlines. Or simply using sub-headlines. To do the latter means writing articles that can be sectioned off. Headline tweaking can include
    • using different HTML headline tags,
    • using a different font,
    • uppercase letters,
    • text color, or
    • more space between characters.
13. Custom comment blocks.
    If your site allows visitors to leave comments, consider customizing the comment blocks. This could include
    • alternating indentation,
      a font different from the article’s body text,
    • lightly colored backgrounds
    • numbering of comments sequentially,
    • alternating text colors in consecutive comments,
    • special icons (scroll down to the comments),
    • avatars, and
    • photos.
14. Bullet lists.
    Bullet lists are an ideal way to break up text visually. This in turn allows readers to quickly scan and absorb a lot of information, provided your bullet lists are used properly.
15. Colored links.
    Hyperlinks can be customized in several ways:
    • Remove the underline.
    • Change the color of the underline and/or the anchor text.
    • Change the color of visited links
    • Use a different color when a mouse cursor hovers over a link.
    • Add a light background to the text, possibly on hover.
    • Add a border.

    All of these add visual texture to text. You can even use several of these simultaneously on the same page.

There is of course more to website page improvement than just these tips, which have only touched superficially on the how-to aspects. However, they give you some options you can explore further. A deeper understanding will require some knowledge of CSS code, which we’ll touch upon in future articles.

After some consideration and research, you’ve decided to that your business should have a weblog. Creating and managing a weblog is very similar to publishing and editing a magazine, which requires planning and execution stages. Here are some stages that you should go through to setup your business weblog, aka blog.

1. Choose a domain name.
   Ideally, you want an easy to remember domain name, preferably one based on your company name. Ajaxwhois is a nice, quick way to check availability of a domain and its TLD (Top Level Domain) variations. E.g., example TLDs are .com, .net, .org, .us, etc.

   On a related note, there’s money in domain names. If you already have a website, your blog should be set up on the same domain. However, you could buy a few relevant domains based on keywords important to your business and have them “point” to your primary domain. [More about this in the future.] If you choose well, you might even flip them for a profit in the future. Though at this stage, you shouldn’t buy existing domains at a premium - just register new ones.

2. Plan your blog team and content.
   Because a business blog is different than a personal blog, it requires a team - however small or large, guidelines for content and its approval, as well as a schedule and editorial calendar. The latter is not strictly necessary, though aiming at a series of articles instead of typical blog posts may be more effective.
3. Setup.
   If you need some help, Daily Blog Tips provides an index of forty articles relating to setting up a WordPress blog - including configuration, themes, validation, plugins, and analytics.
4. Start writing.
   Ready to go? Start writing and posting, based on your schedule and editorial calendar.
5. Maintenance.
   Maintenance is one thing that was never part of a print publication. For a blog, however, it’s necessary. Remember to backup your blog regularly, as well as the files on your web server.
6. Measurement and analysis.
   Print publishers always measure their reach, number of subscriptions, number of copies sold per issue, and other metrics. Web publications require similar metrics, followed by analysis. Proper analytics helps determine the effectiveness of your weblog.
7. Improvement.
   What is analysis if you don’t apply it? Improving your blog should be part of your schedule. This could be as simple as adding more relevant content and choosing better fonts, or applying a full-blown SEO (Search Engine Optimization) campaign.

This article kicks off a multi-author series on how to build a better website (or weblog). There are four key elements, VICA, that we’ll focus on, as shown in the diagram at right and the bullet list below. (All definitions are for this site, so they may vary slightly from other definitions.) The series will include tutorials and video screencasts, when appropriate.

1. Visual Design.
   Visual design includes elements such as page templates/ themes, logos, page banners, fonts, headings, leading (line spacing), color, icons. My favorite weblog that applies these elements well is Chris Pearson’s Pearsonified. There are also numerous “CSS gallery” sites that we’ll cover here in the future.
2. Infographics.
   Infographics is part of data visualization and also part of overal visual design. However, it requires applying different techniques than the elements mentioned above in Visual Design. If you have data set, how can you represent it with some sort of diagram to make it more appealing and easier to absorb that a table or chart? Some great sites to check out are Infosthetics, David Armano’s Logic+Emotion, and Idagram. Make sure you go through all the pages on each of these sites. Another recent phenomenon is Edward Tufte’s Sparklines, which offer a convenient, easy to follow way to visualize numeric data. The diagram at right is a simple example of an infographic.
3. Content Formatting.
   Content formatting is an extension of visual design, but does not necessarily require any illustration or CSS code tweaking, but may require a bit of HTML. For example, taking a long article and using a numbered bullet list makes the content easier to follow and absorb. So do using HTML headings.
4. Analysis & Promotion.
   If you build it, will they come? That’s the question thousands of business owners ask about their websites. Unfortuately, the answer is probably “no”. So another aspect of improving your business website is to analyze what it offers readers, what they take away, and what you can do it improve their experience, including how to help them find you.