Oftentimes, when we as web designers are working with CSS, we have a look in mind and we are looking for ways to accomplish that work.  It can be easy to load up a page with a large number of different <div> tags in order to achieve the "perfect" layout.  It can also be easy to find or purchase a design and then apply it to your site with little need to know exactly how it is achieving that design. 

However, when we take these approaches we can often run into problems if we want to make simple style changes.  Therefore, we want to follow these four rules to keep our CSS manageable throughout our sites:

1. Use CSS Conventions - Use ids and classes appropriately so the elements can be easily identified and managed.
2. Build From A Standard Layout - Try starting from a base template (i.e. 2-column fluid, 3-column fixed), and build from there.  This will help with both cross-browser compatibility and ease of CSS changes (because many distinct looks can be achieved from these basic layouts).
3. Organize Your CSS Files - Try to keep your CSS files organized, with related items close together.  For example, try keeping ids and classes separated, and group sub-elements with their base element.
4. Separate Your CSS From Your Pages - If you don't already, keep them apart.  They're not like peanut butter and chocolate in your Reese's Peanut Butter Cups.  Keeping your CSS in a separate file will reduce the amount of maintenance needed when changes are made.

If you can follow these simple rules, then you will definitely help your cause when it comes to maintaining the look or your website.

Subliminally, the color scheme of your website can often leave as much of an impression on a visitor as the layout can.  A harsh or lackluster color scheme can often leave visitors wanting more, or simply being turned away.

When I went to go look for a new color scheme to use for the redesign of If Jesus Had A Website, I wanted something similar (green based), but new and refreshing.  At first, I wasn't sure where to look, but I then came across the ColourLovers site, and in particular, an article on color palettes inspired by famous artwork.

Immediately, it struck me as a great idea.  Why not use great art as an inspiration point for web design?  Even if your church already has a color scheme for it's logo or letterhead, it can be a great starting point for the color scheme of your website.

But if you're looking for somewhere to start, try browsing sites like ColourLovers and find what inspires you!

We've probably all done this before. Ya know, make a link that nobody knows what its for until they click it, like if you write "you should really read this" or "try this". I know I have on many occasions.

And one of the first rules of optimizing web sites for search engines is that if it isn't clear to people, then it won't be clear to a program.

The problem with the kind of links used above is that they don't benefit the linker or the linkee. The person making the link doesn't make it clear to their readers or search engines how the link relates to the rest of their content. The person being linked to may get some traffic, but the search engines actually get less of a feel for the content of their site because there is no key text within the link. It would be better to write something like "hey, I found this great sports site" instead.

However, you can go too far with adding keywords to a link. For example, if I told you that I found this great article about the Yankees being beaten by a rookie pitcher last night over at ESPN, the worldwide leader in sports which is a great site in my opinion, if perhaps a little busy...well, actually the site is better for it's updates and videos than most of it's content, but it's useful nonetheless, that might be a little much. At that point, there are many words thrown in there that do not even relate to the link in particular, leaving your readers wondering if you know what you're doing, and watering down the accuracy of the search engines understanding of the linked page.

In the end, it's best for everyone involved to keep your links clear and concise. Not only is it more clear and useful for your visitors, but it helps for good search engine optimization as well.

When it comes to site design, oftentimes one of the most overlooked aspects of the site is the pieces of which it is made. While there are usually numerous ways to get a certain look for a site, they often have different reflections when it comes to how they are perceived by search engines. One great example of this is the set of header tags.

Header tags (h1, h2 and so forth) are designed to highlight titles and sections in your page, much like different headings are used in a written report, essay or book. You've probably seen them used in this way before, and they help the human eye and brain determine key points and the flow of the writing. They're designed to serve the same purpose in your web pages.

However, the problem often comes when people use header tags for display purposes instead of content organization. For example, someone may want to have all of a certain type of text, like an e-mail address, displayed in a certain style. However, instead of using a proper CSS class for a link tag, they use a header tag because it's easier to write and follow for them. They don't think anything of it because the page displays the way they want.

The problem with this approach is that search engines give these header tags more weight than other text. Therefore, they could have a whole page about their VBS programs, but a search engine may see that page as being more about e-mail addresses than VBS. Therefore, their page isn't identified as relevant to VBS searches, meaning the page is less likely to be visited through a search.

The general lesson here is to use HTML tags for what they are designed for, and this lesson may not be more applicable than when it comes to header tags. Use them to highlight page and section titles, and you'll likely see the benefits when it comes to the search engines.

At work today, I used the men's room and while washing my hands, I noticed that the counter that the sinks were in was collecting water. While the room still had nice aesthetics (for a corporate bathroom, at least), the engineer in me was irked. The functionality of the room was not correct, and my mind went about thinking how it should have been better designed for functionality.

Once again, I had found another example of appearances trumping function.

I know I've written about this before, but I'll keep harping on it because it's important. In order to reach out to the masses effectively, a website has to have a complimentary balance of aesthetics and functionality. If a site is too functional, it cheap, old or boring. If a site is too artistic, it can be hard to get anything useful out of it.

Shortly after I let go of my frustrations about the functionality of the men's room, I came across an article put up by Dean Peters called Too cool for Old School - Sonrise Baptist Church Newnan, GA where he was questioning some of the artistic decisions made regarding the site. While the site looks terrific, he points out a number of flaws with the design that may actually keep people from their church instead of drawing them to it.

Add that to Why Your Fancy Web Site Sucks from Church Marketing Sucks last month, and you'll see that this is a far too common problem.

The next time you look at your church site, try using Dean's piercing questions when looking at it:

1. How easy is it to add and/or modify new features?

2. Has any consideration been given to the visually impaired?

3. How much navigation needs to be explained to new users?

4. Has any consideration been given to a mobile version?

5. Has any consideration been given to an alternate path for those w/out Flash, audio speakers and/or dial-up access?

Then ask yourself, "does our site live up to what we need it to?" If not, it may be time to go back to the drawing board.

As I sat and watched the town fireworks on the 4th of July, a thought popped in my head. Here I was, among many others, enjoying the brilliant colors, loud noises and powerful blasts of the pyrotechnics, which faded so quickly. Yet, they were an extremely enjoyable spectacle. Why else would we have to fight crowds to see them? But what if fireworks were shot off every night? Besides our taxes being raised roughly 20% to cover the cost, we'd quickly get bored, and probably even annoyed, by them. Part of what makes them special is their relatively rare occurrence.

As a celebration of our independence, fireworks are very temporary and not very meaningful. That's why we have monuments, like the new WWII memorial, Mt. Rushmore, and all of the other monuments scattered across the nation. They are buildings, sculptures, structures or places that honor an individual or group, and they are relatively permanent and typically have some meaning behind them.

These thoughts then got me thinking about website design (see, I take a day off and I'm still thinking about this stuff!). On the web, many designers often get caught up with the "fireworks" of design: the flashy menu, the abstract designs, the modern layouts. These sites scream "look at me and all my cool stuff", but rarely have enough substance to retain a visitors attention for more than a few minutes. Sometimes they even drive visitors away because their sites take too long to load, like the person who stays at home instead of going to see the fireworks because they don't want to fight the crowds, or because the "cool stuff" becomes old and no longer useful or enjoyable, like the person who gets to see fireworks on a regular basis.

However, when you look at the stalwarts of the internet, like Google, eBay and Amazon, we see a much different approach. These companies put together simple designs and focus on the functionality of their sites. These sites are easy to use and easy to figure out. In fact, the core appearance of these sites hasn't changed in years. They're sites anyone can appreciate almost any day they want to, making them the "monuments" of the internet.

When we design websites, we should be striving to create "monuments". We want our sites to develop a permanence, not to fade quickly into the night. Sure, the "fireworks" and gimmicks can be cool for a short time, but they quickly get old, causing designers to go back and come up with the next big thing. With a "monument" we can work with the core functionality of the site and then create more substance upon it, to make it a meaningful place on the web.

When it comes to website development, there is a constant dilemma that goes on surrounding the question "How good is good enough?" Being as we work with such a pliable media, it's easy to get into the cycle of making things that work, and then build them up to meed demands and standards. However, at what point do we hit the point of diminishing returns?

For those unfamiliar with the law of diminishing returns, it is a economics concept that is used to determine price points for products and services. For every product or service, there is a maximal point of income where the quality of the product and the price a number of consumers are willing to pay are farthest apart.

For an example, you could sell a budget laptop for $500 at a profit of $50 per laptop, and lets say 1000 people are willing to buy it. That would give you a potential profit of $50,000. You could also sell a high-end laptop for $3,000 at a profit of $500 apiece, but then only 50 people are willing to buy it, giving you a profit of $25,000. However, in between you could sell a mid-range laptop for $1200 at a profit of $100 per laptop, with 800 people willing to buy it, giving you a profit of $80,000.

As you can see, as the quality of the product rises, the price consumers are willing to pay also rises. However, at the same time, the number of people willing to buy the product at the higher price typically decreases. Following these trends, there comes a point where producing an extremely high-quality product actually works against the seller, because the combination of profit margin and number of customers reduces total profit.

But yes, this is a post about websites and not about profit margins. As developers, we need to determine the point in which we've made a product good enough to justify the time and resources we put into it. If something requires a lot of our time, but doesn't benefit our work, should we still do it? What is the overall benefit to our end product? What is the cost if we do not do it? These are all questions we have to ask ourselves when we approach our work, since we don't want to subject ourselves to diminishing returns.

When I was in college, PowerPoint was just coming into regular use by most of the faculty for their lectures. To this day I've seen my fair share of them, and I can quickly tell the difference between one that was well thought out and one that was quickly thrown together. In a poorly designed presentation, some of the typical problems will be:

• Pointless Slides - This is the person who is constantly pressing the "next" button because their slides don't have very much substance. They'll go through a hundred slides in a 5 minute presentation, and you're left thinking more about how many slides they actually used than their subject matter.

• Heavy Slides - These are slides that have so much information that you'd think they'd just fall off the screen. Because there is so much there, it makes it very difficult to identify the relevant information on the slide, even if the lecturer highlights it.

• Distracting Slides - Clearly, somebody got a little bored while working on their presentation, so they added their favorite video clip, song or image to the presentation to "spice it up". However, they can break up the point of the presentation if they are not relevant to the topic being discussed. Among the bad ideas: using a Flintstones clip during a palentology lecture.

• Poor Contrast Choices - This presentation usually begins with "Well, it looked fine on my computer at home", but you can't read half the text because of the background chosen. Just one reason why high-contrast is a good thing.

If you're seeing where I'm going, you'll see that many of these same problems can be made with web pages as well. So, here's the tips we can gather from the mistakes of others (and ourselves, in some cases):

• Make Every Page Have A Purpose - Try to avoid linking to a page of links (i.e. a directory structure) unless you need to do so. There are a number of alternatives (including CSS menus and drop-down box directories) that will allow you to do the same more efficiently and effectively.

• Don't Inundate Your Visitors - Avoid overwhelming your visitors with too many options to read and click on, and keep page text to a reasonable length. Some pages may require more text on them, such as an "About Our Beliefs" or "Our History" page, so try and break them down into sub-sections with in-page links at the top of the page for easier navigation.

• Don't Try To Re-Create Homer's Website - Make sure everything on your page has a purpose, and that you're not just using images or other features just because you can.

• Let Me See What You've Got - Lastly, make sure that you put text in high-contrast situations because some monitors don't display subtle color differences particularly well. Just because it worked for you, don't assume that it will for everyone else.

If you're a Seinfeld fan, you've probably seen the episode "The Strike" where Jerry meets an attractive woman at a party, but when they go on a date in a dimly lit restaurant, she doesn't appear nearly as attractive. "Two-face", as she was referred to, could look completely different in different circumstances.

Similarly, we can build websites that look terrific in our favorite web browser, but when we look at them in another browser, they can look completely different and much less attractive (like someone chewed up our hard work and spit it back out onto the page). Because of this, I typically try to keep several browsers installed on my computer to try and cover my bases. Since I work primarily with Windows, that leaves testing my pages in Mac and Linux environments up in the air.

Well, fret no more my friends, as browsershots has come to the rescue. This service allows you to select among 20+ browser and OS configurations and generate images of how your site appears with those configurations. The service can take some time to handle all the processing, but you'll usually get most of the images (which are downloadable) within an hour. For the convenience they provide, the wait it worth it.

For an example, you can check out the latest screenshots of If Jesus Had A Website.

If you're serious about making your church website to as many people as possible (and you should be, especially since the OLPC project runs on Linux) then it's worth your time to set a bookmark for browsershots and check it periodically.

We're now full-tilt into the Christmas season (well, three months in if you follow the retailer's timeline), and maybe you'd like to do something on your site in recognition of the time of year. It's a pretty common practice, and anyone who visits Google on a daily basis can tell you that a minor change, like a logo modification, is noticed by a lot of people. It makes a site seem less cold to know that there's a person who's paying attention behind the scenes.

However, if you're going to make these types of changes, we also have to remember to avoid the Christianeze. We should be trying to do this on our sites to try and make a welcoming place for non-Christians to visit, but this time of year we can apply this to the images we use on our site as well.

For example, there are Christians who feel that images of Christmas Trees should not be used because they have pagan origins, and would not want to place them on the church's website. However, the Christmas Tree is a long-standing part of the traditional Christmas celebration in most households, and someone who was raised celebrating "Christmas" in a non-Christian household could easily perceive the church as being elitist. When we are working to promote an atmosphere of love, being elitist is not an image we want to perpetuate. However, these "comfortable" images should also be included among the more "Christian" images of the nativity, to make sure that the spirit of the season is not lost completely on a visitor.

So this Christmas season, if you plan on making a seasonal design change to your site, try to take time to think about how it reflects upon your church in the community. Make sure you're sending the message that you mean to!