One of the difficulties with being a programmer or anyone that works “behind the scenes” – developing, testing, or specifying features – is that no matter how hard you try or how good you are at your job you have an entrenched opinion about the site that you work on because you have made it.  It’s impossible to fully look at it with user’s eyes so no matter how much you think about a particular feature you’re always going to miss something that a user will see.  It’s just natural that you assume certain things are logical when in fact the flow, usability, or design of a page might be extremely confusing or present a high hurdle to all, or even a subset of, your users that can render the page from difficult to use to unusable.

This is where an active community is a boon.

By engaging those users – we use a message board (built on the open source SMF software) and a blog (using WordPress) – you are able to gather information, tips, questions, and insight into the finished product in the wild.  Many times it allows us to find where copy or page flow is lacking and provide instruction to users.  We have certain community leaders (which we call stewards) that many times will use the information provided by us throughout the boards to instruct other users – propagating the knowledge for us.  Other times it allows questions to arise that we may not have thought of and allow us to schedule new features or feature updates to correct deficiencies.  Finally, we may have an instance that we did not foresee or couldn’t create in our test environment and only through exposure to users do we see bugs in the site – basically turning our community into testers.

This is an extremely powerful tool that is not always used on large, non-technical sites – where users who are naturally knowledgeable in the technology will speak up of their own accord.

So how do you empower your users and speak out to them in order to have access to this tool?

1. Provide tools for them to reach out and communicate with you. Besides the normal help e-mail area we have public facing tools that allow users to engage us and the community for answers.  Some of the tools we use are:
   • A wiki for our help section – allowing quick searching of a large, complex living document to quickly provide answers to new users.
   • A blog for community instruction and brand building – also searchable we discuss features in new releases, reasoning behind features, and other items which are not targeted at new users necessarily but require some sort of “stickiness.”  Sometimes a blog post is moved to the wiki to become part of the living help document.
   • A community board for user-user and user-employee engagement – besides help sections where users can question logic or features we also have simply community areas where users can just engage each other, build relationships, and have fun.  This means they are not providing direct value (content) to the site, however, we’ve seen for the most part that it promotes user happiness and, indirectly, that increases productivity on the site.
2. Have employees engage users directly. We have employees from every division practically communicate with users even though we have a department specifically created to do so.  Development members like myself, vice presidents, and even our CEO have communicated with users via our boards and blog.  This builds rapport and trust with users.  It can be frustrating at times and takes away productivity from assigned tasks but the benefits far outweigh that as our users love and respect that they can ask us questions and gain insight that they can’t from other sites – even if they realize sometimes we can’t answer them fully because of proprietary information protection.
3. Be as transparent as possible. Let users “behind the scenes” – they love it.  Let them know why a certain feature works a certain way.  Have fun with users.  Make them a part of the team.  This is especially important in a “Web 2.0” or “user generated content” site as they really are part of the team.  Be honest with them when you can’t share proprietary information and why you can’t.  They’ll respect it.
4. Empower motivated, hard working, driven, intelligent, and / or respected users to take control of parts of the site. One of the programs instituted where I work is our steward program.  Basically it gives users some amount of power of sections of the site.  It might be as small as a leaf channel, larger like a base channel, or in some users cases they have control over our community boards.  Does this open the door for abuse?  Of course.  But communities are self-policing and we’ve had few, if any, abuse issues.  For the most part stewards have gone above and beyond what we’ve asked them to do because they are invested in the success of the site just like we are.  If we fail, they fail.  If we succeed, they succeed.  It’s a powerful motivator.
5. Really listen to their ideas. I’ve participated in a lot of good debate on our boards about current and future features – what users like, what they want, what they feel they need to succeed.  This is ammunition in your pocket.  When meetings are held about features the ability to say “users on the boards requested this” or “some users on the blog mentioned that this feature could really use this little extra thing” is extremely powerful. They won’t always get what they want but many times what they want is “low hanging fruit” that can be a big win.  There’s nothing like a feature that takes 2 days to build and is lauded about by the community.

Most of these should be common sense however most sites ignore their users – thinking them too ignorant or that they are not proficient enough to know what they really want.  Sometimes it’s true – users don’t always have the “big picture” vision to take your site to the next level.  However, they do have the knowledge of the nuts and bolts of your site in order to polish what you currently have.  Many times, it’s much easier and a better return on investment to improve your existing infrastructure instead of simply plowing forward with new features.  While everyone likes the “shiny new toy” if your base is not solid you won’t succeed.

Anyways, that’s my thoughts, opinions and insight after having been a part of an amazing and active community for over 2 years now.

In the end though, the more I think about it the more I come to the same conclusion. The Giants simply outplayed us. They wanted it more. This very thought frightens me.

The Patriots always won because they wanted it more than the other guy. They might have less talent, less speed, lack of star players – it didn’t matter. Somehow they’d pull it through at the end. My fear is that after 3 Super Bowls, after years of success, and after being labeled as the new dynasty by everyone else that they started believing their hype.

We’re used to seeing Brady with the ball, under 2 minutes on the clock, and seeing fear in the other teams eyes. They know he’s going to drive down the field. They know he’s going to pull the come back. They know that their worst nightmare is about to be realized.

The last 2 years we’ve gotten used to a different sight. Brady with the ball, under 2 minutes on the clock, and the other team stopping us.

Maybe it’s just other teams catching up. Maybe it’s parity catching up. I really hope it’s not us losing the core of our team. That hard work, blue collar, underdog philosophy that made us all proud to be Patriots fans. I’m thankful for what the Patriots have given us and for players like Bruschi. I realize we can’t win every year. But to get so close to the perfect season, to the greatest season in football history, to Mercury Morris finally shutting the hell up… and to fall short. I just don’t know.

Sadly, I find myself for the first time in a long time not wanting to watch football. Not caring about the draft. Not caring that we let possibly one of the best cornerbacks in the league go to sign an aging and (playoff) under performing wide receiver. Not looking forward to next season.

I miss that anticipation and love for the sport. I want it back. I fear it’s death on a Sunday in early February when the undefeated became perhaps the greatest disappointment in football history.

I wish I knew where we went wrong.

Random Tidbit:  Being a self-proclaimed – ok maybe publicly proclaimed – geek I found this blog post on why geeks make good lovers to be self-satisfying.  Is it true?  Find out.  Date a geek.

The basic idea of microformats is to design a standard XHTML template for common items – for example a hcalendar for events. That template is then the standard for all items of that type. Since all of those items share common elements – in the hcalendar example a h3 with class = summary would be the event description – they are easily able to be encoded into XML and can be aggregated. So sites or programs could aggregate sites using microformats and parse them into easily understandable and standard (hence web standards) displays.

It opens the doors to easily sharing contact information, events, resumes and people relationships with friends, family or even across the web. There are even, already, some microformat plugins for WordPress and noted blogger and CSS expert Eric Meyer uses them for both his tags and his blog watch. I definitely need to track down a rel-tag plug-in to start getting indexed in Technorati – any suggestions?

I realized I’ve only scratched the surface here. With that in mind I’m going to forgo my usual random tidbit and list some links to sites I found filled with microformats information. Before I do, note that already there have been concerns about identity theft with things like hCards and hResumes so there are many bugs to yet be worked out. It’s a powerful tool though with lots of possibility.

For more microformats information check out the following or my microformats tag on del.icio.us:

• Microformats: What They Are and How To Use Them | Smashing Magazine
• posh – Microformats
• Add microformats magic to your site
• The Big Picture on Microformats
• Markup as a Craft

Getting off my “web standards” soapbox for a moment the main reasons you want to avoid using tables for layout is that they bloat your markup. This makes it difficult to change and update your site and it hurts your ratings in search engines. By using the correct tags you naturally tell search engine spiders what your content is – a keyword rich header, a content rich paragraph or a navigation list. This allows them to better match your site to keyword searches and increase your audience. You also don’t have to change multiple pages of markup when you want to redesign your site – you simply edit your CSS and never touch the markup.

There are some instances where you want to, and should, use a table.  When designing the table you still want to keep standards in mind. In the old days you would use inline tags like “align” or “valign” for td’s and “cellpadding” or “cellspacing” for the table itself. Now all of that can be done through the CSS. Simply place a class on the table – or use the containing element of the table and apply the rules that way.

For example if you have a table inside a div with class “mySite” you could vertically align the td’s simply by using the following rule:

.mySite table td { vertical-align: top }

If you had used valign = “top” on all of those elements and then later on you decided you wanted to change them to centered you would have to go back and either do it by hand or via a find and replace. Using CSS and web standards you could simply change that one rule and affect all of the elements. That is the true power of it.

In conclusion, the most important thing to remember is to only use tables for the purpose they were created for – tabular data. When using them for this also remember to use the least markup possible. No presentational elements should be present – only semantic elements like content and semantic images (one that add value like logos or photos rather than are used for display like rounded corner containers). Also, if you find yourself placing tables within tables reevaluate your markup – you’re probably using this to create layout or presentation and could get away with a single table and CSS to style it.

Random Tidbit: Having trouble selling web standards to your boss?  The Web Standards Project can help.  Plus they have probably the best example of a site using web standards in every facet – which makes sense.

Fixed

What is fixed design? Fixed design is essentially defining a width on a page – no matter the size of the browser window. You can find fixed designs at sites like Helium, CNN and Yahoo. A typical fixed layout has containers, text, images and most other elements defined in pixels.

The main benefit to designers in using fixed layouts is that they have total control over the design. Unlike traditional media outlets – like newspapers and magazines – the web can be viewed through a large variety of devices from cell phones to PDAs to computer screens to widescreen HDTVs. With traditional media you always know how your page is going to appear. With the web, the same page viewed on a cellphone and a computer can appear vastly different – or even 2 computers with different screen resolutions. Fixed layouts give a designer more control over how their content is viewed. Finally, because you are defining the layout of the page you have more freedom with background images – if you notice the examples above all but CNN make extensive use of background images for design.

There are 2 main faults of fixed designs. One is that users with large screens and resolutions viewing sites with small widths have lots of wasted space. This is a bad user experience because you are dictating to the user how they should experience your site. The second is that if a user is using a smaller screen or resolution some of your design might flow outside the window – causing the dreaded horizontal scrollbar. This also creates a bad user experience.

Fluid

What is fluid design? Fluid design essentially allows the user to decide the how the page looks based upon the size of their browser window and display settings – the page “flows” (hence fluid) to fill the entire available space. Fluid designs can be found at sites like Google, Wikipedia and Reddit. A typical fluid layout has containers, text, images and most other elements defined in ems or percentages.

The main benefit to designs using fluid layouts is that they can use all of the space available to them. The philosophy is that you can’t predict the user’s setup so you want to make your design as adaptive as possible in order to increase the user experience. A fluid layout puts the control of the design in the user’s hands.

There are 2 main faults with fluid design. One is that if someone has a very large/small screen or resolution your site can appear “wonky” – extremely long/short lines of text and distorted containers. The second is that fluid design makes it extremely hard to use background images because of container distortion. They require vast amounts of testing in order to function properly – if at all. In the examples above none of the sites use background images extensively – which severely limits your design creativity.

Hybrid/Elastic

A new design not mentioned in the title goes by several names and is basically a hybrid of the two. It uses min and max width (using javascript for IE6) to try and get the best of both worlds. Basically it defines a range of values in which the design can flow – so that you still have some control over the design (like fixed) but users with larger screens/resolutions can expand the width somewhat. 456 Berea St and Digg use something along these lines.

The main benefit of hybrid/elastic is that it gets some of the benefits of both fixed and fluid – users and designers split control over the design. It’s main fault is that like any hybrid it doesn’t do either of those things as well as the original.

So which is better?

If you haven’t figured it out by now, there is no right or wrong answer. The correct choice depends on the purpose of your site and your design preferences. The sad fact is that any choice you make is going to alienate some user. The old saying is that “You can please some of the people all of the time and all of the people some of the time, but you can’t please all of the people all of the time.”

Typically if you have a site with shorter blocks of text and/or you are more Web 2.0 you lean towards a fluid design – utilizing large font sizes to lower the impact of some of it’s faults. If you have a site with long blocks of text – like a news or article/blog based site – then you lean towards a fixed width design.

Random Tidbit: Speaking of design what about Time.com’s 50 coolest websites?

The problem is that all of the browsers interpret (X)HTML – the code websites are written from – very differently and all of them have their own internal style sheets and form controls. What this basically means is that a site designed in one browser can look vastly different in others especially older or non-standards compliant ones like IE6.

There are 3 main ways to deal with browser compatibility issues – having the right tools, designing with web standards, and utilizing filters or conditional statements to feed alternative styles to less compliant browsers.

Tools

The first step to dealing with cross browser issues is to design in a compliant browser. In most cases, the best one to start with is Firefox. The simple reason for this is the vast tools it gives a web designer to pinpoint problems and quickly debug code. Two of the best are the Web Developer’s Toolbar and Firebug.

The Web Developer’s Toolbar gives you the ability to edit CSS on page to test fixes quickly, to outline specific elements, disable cache easily to enable testing (since CSS is cached naturally) and many other useful features outside the scope of this article. Firebug is one of the best design tools available allowing you to inspect elements on the page, see the cascade of styles applied to that element to narrow down bugs or rendering issues, and even allows you to edit the (X)HTML on page so that you can quickly test for different scenarios. Both of these will save you a great amount of time while you are designing your site.

Web Standards

Web standards is the practice of writing (X)HTML using standards compliant code – basically utilizing correct tags for elements, using CSS for presentation, markup for content, and limiting the amount of markup to the least amount necessary to complete the task and provide enough “hooks” for your CSS. Some of the benefits include improved Search Engine Optimization and the ability to re-design your site later on simply by editing the style sheets. The other benefit is the fact that you use CSS for presentation – allowing you to deal with presentational issues relating to browsers easily.

After getting your markup done it’s time to style your site. The easiest way to avoid compatibility issues later is to reset the styles on all elements. This is done because different browsers use different styles for elements. One might naturally put 10px of padding on a p tag and another might put 10px of margin. This is the root cause for many rendering issues found later. A good reset style sheet was posted recently on Eric Meyer’s site.

If you’ve done both of the above then you are now setting yourself up to have the least amount of issues possible. Depending on the complexity of your site it might look exactly the same in most of the browsers – Firefox, Safari, IE7 and (hopefully) IE6. If not, the next step is to utilize filters and conditional statements.

Filters and conditional statements

Filters should only be used when nothing else can. If you have designed in Firefox then at this point you should have no issues in that browser. Internet Explorer will be covered in the next paragraph. Opera has no way to filter CSS to it. It typically has few rendering issues that do not pop up in Firefox though and any that do typically you must live with. The only browser not mentioned is Safari which does have a large user base. In your main style sheet you can define styles to target only Safari by using the following rule:

:: root (parameters) { styles }

So now you’ve covered the most compliant browsers: Firefox, Safari and Opera. The only one left is IE. IE has it’s own set of filters but utilizing them is not advised because they get messy as you have to override main styles for IE6 then in many cases re-override those for IE7. The best practice is to use conditional statements. You simply define additional style sheets – for example looking at the source of this site you’ll see a sheet called mainIE6.css – and put the rules for those browsers in them. Microsoft has defined conditional statements that can then feed those styles to whatever IE version you define and only IE. The standard way to do this follows:

<!–[if IE 6] (style sheet link) <![endif]–>

Other operators beside if include lt (less than), gt (greater then), lte (less than or equal) and gte (greater than or equal). So lte IE6 would target IE6 and below. The operator gte IE7 would target IE7 and above – and so on.

Now you have the tools to correct any rendering issues that might pop up.

In conclusion, the best way to deal with cross browser compatibility issues is to limit the chance for them to appear by using the right tools, standards compliant markup and CSS. Some issues will always appear and the few that do can then be handled by using either filters or conditional statements. Remember always to test in multiple browsers to find the issues. At a minimum your suite should include IE6, IE7 and Firefox. If you have access to a Mac then Safari should be included as well.

Random Tidbit: I really like SEOmoz. I like their article on getting traffic from Digg comments even better – though I’m a bigger fan of Reddit personally.

It’s a process I’ve used since I read up on the Zen Garden. The last 3 sites I’ve done – including my own – were done off a basic template. In essence it was a wire-frame design. And now, if I wanted to update any of them – and I’ve done small ones from time to time – I have enough hooks typically to just add or modify CSS rules. Though this doesn’t work if you go from a simple design, like my site, to a more complex design – with things like rounded corners especially. In those cases you will have to modify the XHTML.

Though it’s simple it’s not a process all beginners can copy though. And it’s an excellent learning tool. So later this week I hope to upload 2 templates – one being the wire-frame and one a more meatier zen garden-esque template. Stay tuned.

Random Tidbit: Along with Web 2.0 has come a new workplace. An article I saw on A List Apart talked about the “Long Hallway” – basically it talks about how in the new workplace designers/developers can collaborate from home offices around the world, building a team with no set office.  It’s something I’ve been thinking about for awhile and very interesting.

Search Engine Optimization (SEO) is comprised of 3 basic elements: good site design, site age and trust, and link popularity.

Good site design basically means two things: designing with web standards and utilizing good keywords and content in SEO important tags.

Designing with web standards means using semantic tags – p for content paragraphs, ul/ol for lists, h1-6 for headers and so on. It also means using the least amount of non-semantic tags like divs and spans to provide hooks in order to style your site with CSS. Ideally, you want to have the least amount of tags possible because a large amount of non-semantic tags makes it harder for search engines to “read” your site and find content, as well as the fact that they only index so much of a page, so if a page is too large and your content too far down it might not be seen at all. Many standard tags like headers, p and lists are block level elements anyways and can by styled with borders, padding, margins and background images eliminating the need for extra divs for all but the more complex designs like rounded corners.

Utilizing good keywords and content is a major part of SEO. First, you must decide what your site is about and what you are looking to provide to users. That will determine your content and what searches you should (and can) optimize for. Second, you must place those in SEO important tags. The highest level and most important is the page’s title tag which displays at the top of the browser. For example, in this article (at the time of this writing at least) the title tag of this page reads “The Basics of SEO.” Having relevant, clear, concise and individual title tags is one of the most important parts of SEO. Each page should ideally have a unique title – for example your home page might be “YourSite.com” and your about page might be “About YourSite.com”, etc. Second is a page’s h1 tag(s) which should be, ideally, similar to the title tag but not exactly the same. Some repetition is good but you don’t want to keyword stuff. Finally, at a much lower level, are h2-h3 elements and, on a much broader level, the actual content of the site. While the actual content is not in important tags, this allows search engines to figure out what your page is about, what keywords you really are targeting, and what should be displayed in search result snippets.

Site age and trust are harder to quantify. Site age refers not to how old the domain name is but how long it has been in the search engine’s index. This is why older, popular domains can fetch a decent price at sale and can unfortunately be, at least for a short time, abused to spam search engines for profit. Trust is typically related to Google and deals with link popularity as well. Most assumptions are that trust is derived from the trust of the site plus (or minus) the trust of sites that link to and from them. The biggest factor here is black hat strategies like link rings having a lot of links to you from sites that aren’t trusted can significantly lower your own trust.

Finally, we talk about link popularity. Besides the negative effects I mentioned before this can actually provide significant and quick returns for SEO. One of the simplest things is to institute social bookmarking/networking icons on your site – digg, del.icio.us, reddit, furl, ma.gnolia, blinklist, etc. These sites, especially del.icio.us, are becoming the new search engines of choice. They are gaining trust because actual humans build the indexes and the tags associated with sites as part of the Web 2.0 movement think of them as social search engines. Many of these sites have high level of trusts so links coming from them, especially if many people bookmark you, are highly valuable. Adding these buttons simplifies the process for your users to help you out and can expose you to new users who might be using those sites to search for tags relevant to you.

Providing high quality content in your niche can also boost SEO because search engines give additional value to links to your site from other sites in the same niche. If you are seen as an authority on that subject, you will naturally gain more trust and move up in the rankings.

Sites that rank high typically do because a search engine can trust them. They have been around for awhile, have lots of links from other sites that are relevant to the terms being searched for, have lots of inbound links total, and have content that is designed to be easily understood by search engine spiders. A good analogy is to think of a search engine like word of mouth advertising. If someone asks you for the best pizza place in town you’re going to recommend places you trust. And if some place you usually recommend changes their recipe or gives you a bad experience, they will lose your trust and not be as highly recommended by you. The same with search engines – if you use black hat or spam techniques, you could hurt your trust for a long time and potentially even be banned. However, if you provide good content and are popular for that niche, then they will recommend you more and more.

Random Tidbit: A neat article on how to make a six figure income while blogging.

Accessible designs allow users to resize text even non-compliant browsers like Internet Explorer 6. They provide alt tags for images, in case someone is using a text browser, and those alt tags are descriptive of the images so that those users can gain value from them. They offer a design in which the user can skip navigation and get right to the content both for ease of use and for someone using a text browser. Many people don’t realize when they’re designing a site that the source code is how text browsers will read their site so if you have the header, navigation ads and all other non-content related items before the content in the source code than people using those browsers will have to navigate through that on each and every page. Offering them an alternative to that is one of the keys to accessibility.

What many people don’t realize is that is also how search engines read their sites. So by making your site more accessible you are making it easier for search engines to decipher what exactly is important on your site increasing your rankings and making it easier for them to understand the keywords that your site should rank for.

Web standard based designs function in much the same manner. Designing with web standards means separating content from appearance. Anything that does not deal directly with the content or present some semantic value to your site should be relocated to the CSS. You place all your non-semantic images backgrounds, bullets, etc, colors, font sizes and faces into the CSS. Then your (X)HTML contains only the relevant markup in semantically correct tags H elements for headers, strong for important text, p for paragraphs, em for text you want emphasized, ul/ol for lists, li for list items, dd/dl for definition lists and items, etc. You can then use additional classes and ids on those elements to style your site and match almost any design you can come up with typically with additional div and span tags used sparingly to help provide additional hooks for your CSS.

Designing with web standards also allows you to optimize your site for search engines since you are now declaring to them what your header elements are including hierarchy, what the title of each individual page should be using the title tag, one of the highest ranking SEO tags; and laying out the content with semantic tags so it is able to electronically “read” your content and make keyword associations like the human eyes does naturally.

So by practicing good design you are not only naturally increasing your audience by allowing the largest number of users to view your site but also helping to improve your rankings in search engines for terms relevant to your content. In addition, by separating content from appearance you can easily update the look of your site by changing the CSS and potentially adding a few more hooks cutting redesign time drastically.

In conclusion, good design means using accessible designs and standards compliant code. This brings you the largest possible audience, the lowest possible redesign time for future updates, lower bandwidth (because CSS is cached), and search engine optimized code.

Random Tidbit: The Google maps flight sim is pretty cool.  Though I wish they had more cities.

So if you’re a developer looking for a great company, feel free to come on over.  We could use the help and we’re definitely going places.  You won’t be sorry you did.

Random Tidbit:  I found an interesting article about how Microsoft is dead after fighting with a Vista box that wouldn’t behave (or maybe it was and the behavior it’s supposed to have is illogical, who know’s right now.)  This article takes a different slant than others in that they still make a lot of money, but they’re no longer the big scary monster they used to be – Google is – and the only way to get back up there is to acquire a lot of the top quality startups.  Pretty interesting.

It is a rather long article, so I’ve compiled a sort of top 10 list of things that they found to be extremely important.  These are not in order of importance.  All factors are taken from the article and are attributed to SEOmoz.  Summaries are provided for convenience by BogeyWebDesign.

1. Page title tag – using keywords in your title tag not only shows up in results but is likely one of, if not the, highest ranking SEO element.  Christine Churchill said it best: “If you have time to do only one SEO action on your site, take the time to create good titles.” One interesting negative factor is repetition of title on many pages – keep your titles as page specific as possible.
2. Link popularity of site – incoming links, both in quality and quantity.  It also talks about sub-categorizing this further as links inbound from high ranking sites in your niche also help.
3. Age of site – not when registered but from the date of first index by search engines.  Google especially factors this in with regards to trust.
4. Anchor text of inbound links – the text around the links coming to your site.  Has started to depreciate though according to their experts.
5. Keyword use in body text – how much the search term appears in your actual content.
6. Relationship of content to keyword – how much your content actually matches those keywords.  This could also hurt you if you pull in for a keyword but don’t support it – in the case of spammers putting high use keywords to pull in for say selling ED medicine.
7. Keyword Use in H1 Tag – the trick is to avoid too much repetition of keywords.  Perhaps a broader one in your title, with more meaty relevant content around the keyword in the H1 tag.
8. Topical Relevance of Inbound Links – do inbound links to your site focus on a similar topic.  Again, building link popularity in your niche.
9. Link Popularity of Site in Topical Community – another factor they rated high that relates to being popular and relevant in your niche.
10. Rate of New Inbound Links to Site – how often do people link to your site.  The more popular you are, the more relevant you likely are to the subject.

So it seems that not only should you build a key site, but by becoming a player in your niche/topic – through white hat tactics – you will gain more credibility.  It makes sense.  For example, when you google “css” one of the top links is the CSS Zen Garden.  What is that site known for?  Revolutionizing the use of CSS on the web.  And most sites that have content on CSS likely link to them one or more times.  I probably have a dozen if not more links to that one site on mine.

The bottom line?  Design a clean, relevant site with keywords prominently displayed in the right places – title tag, H1’s – and work to become a resource to other sites in your niche as well as people who might be searching the web for that content.

Random Tidbit: Also on SEOmoz is a nice tool to help you see the page strength of your site SEO-wise.  I used it on my site and between that and the article have already taken steps to strengthen my site including changing my homepage title tag and trying to get my site re-indexed – especially considering I’ve added dozens of pages of new content.  I think I might delete my old blog since repetition issues might be the case.

The problems began when you have used hacks or filters to feed specific CSS to IE6.   Now those who use these knew they would potentially cause future problems and that Microsoft approved conditional statements would be the better choice.   However in some cases – particularly in the instances where you inherit code or time is of the essence and you simply do not have the time to separate them all out – a designer would opt for the quicker and dirtier solution of a hack.

The problem is that, essentially, not all of the problems from 6 have been fixed in 7.  So you now have the new star hack – a version of the underscore hack where you can use *property: values to feed a separate CSS to only IE.  Unfortunately, 6 picks up on these as well and typically does not break in the same way – normally on heights and the box model – so you must follow with either an underscore hack or the * html property filter – called the tan and/or holly hack I believe – to fix 6.  So now you have an extra filter in addition to one you shouldn’t have/need in the first place.

Again, the short and simple solution is to use the conditional statements.  While semantically they are very inelegant, they will make your life as a designer much easier.  Hopefully IE8, or future updates of 7, will fix these issues.  It is a vast improvement so I am hopeful.  The fact that they copied many of the good elements from the other browsers out there – including add-ons, a variation of the extensions from firefox – is a good sign.  I don’t typically say this, but my hat is off to the Internet Explorer team.

Random Tidbit: Blog writer Robert Accettura had some interesting Secrets in Websites.  Very interesting and conspiratorial.

10.    Nautica01 – a simple, clean design.  Smaller width but one of the things I like most about this is the left navigation and the rollovers they do using CSS.

9.    The Holy Grail – basically just a wire-frame but a design I’ve stolen heavily from.  Not only clean and compliant – but SEO friendly as well since your content comes first in the markup.

8.    Deep Thought – a Zen Garden design.  A good example of disjointed design in that the containers don’t line up.  A good concept not utilized enough in web design.

7.   Pret-a-porter – another Zen Garden design.  The only example of a horizontal design.  This looks and works awesome in complaint browsers and degrades well in IE.  Horizontal design is not used much in web design – but when done right it can be very powerful.

6.     Ballade – a final Zen Garden design.  The way they make the graphics – the steps, bridge, etc – flow from container to container – simply brilliant.  A side mention for Zunflower since we’re talking about graphics – the shading gives the containers depth, making it a very powerful visual design.

5.    Plain 1.0 – a Six Shooter Media design.  I actually modified this for one of my first home page designs and learned a lot from the skills of this designer.  Very talented.

4.    Andreas01 – an Andreas Viklund design.  Now hosts his templates on OpenDesigns.org, but since I didn’t see this one on there it’s from OSWD.  Simple, clean, elegant – great dropdowns and rollovers, excellent use of a header graphic, nice use of background graphic to give depth and could easily be adapted with the holy grail techniques to shoot the SEO up.  So, by combining concepts from the two, you’d have an standards compliant, search engine optimized and graphically beautiful site.

3.    Andreas09 – another Andreas Viklund.  If you’ve looked through the WordPress themes, you might recognize this one.  Not only does it change from a 2 column to 3 but it’s also preloaded with 6 color schemes – my personal favorite being black.

2.     Plain 2.0 – another Six Shooter Media design.  An update/revision on 1.0.  Bolder graphics, excellent graphics use on the containers, excellent rollovers on the side navigation, and good font and font color choices.  Some web 2.0 flavor and methods as well as a bonus in a skip to content accessibility link.

1.    Thin Green Line – a final Six Shooter design.   This and Plain 2.0 could switch everyday depending on what mood I’m in with this currently being my favorite of his templates.  Overall, it’s not as nice a design as 2.0 but the top navigation with the animated gifs has just got me hooked right now.  As with the other 2 Six Shooter designs this could use some holy grail combination to push the content first and improve the SEO.  I would love to see what he could come up with just stealing the navigation from this and replacing only that part of the design on 2.0.  I just might have to try that in the future.

For more free templates, check out my del.icio.us.

Random Tidbit: Found this awhile back.  Apparently web2.0 is catching on since even some religious sites have used methods from it.  Very interesting.

As a fan of web standards and accessibility this grates on me.  Not only because IE makes it so difficult to make things accessible unless you use em’s instead of px’s, for one, but also because I spend 25% of my time or more just fixing things that shouldn’t be there in the first place.  That’s time wasted that could be spent making my designs more clean or adding new features.

IE6 has gone from the top browser (many years ago) to now being that uncle that you’re embarrassed to have people meet.  I have heard how many people have adopted IE7 – which I haven’t used much but is much closer to being compliant – but when will it finally be the staple?  When will I stop having to code for IE6?

Unfortunately, professionally, I can’t stop yet.  Depending on which statistics you look at – compare the earlier ones to these for example – IE6 is still used by 42-61% of the users out there.  That kind of majority you can’t ignore as a business.  As an independent designer though, I can.  I’m drawing a line in the sand.  I will be soon upgrading my designing computer(s) to IE7.  After that, none of my templates will be tested in anything lower than 7.  So if you want it to work in 6 and it doesn’t – you’re on your own.  I realize that this may hurt me for sites I list my templates on – like OSWD which just recently got around to uploading the (very bad looking, since I was much more inexperienced then) templates I sent them over 8 months ago – but I simply have stopped caring.  Designing for IE6 is like Microsoft designing a new 360 game and testing it on the original Xbox to make sure it still works – they wouldn’t.

So that’s my line in the sand.  Hopefully more designers will join me and more users will become aware of the fact that there really is better out there.  Firefox and Opera(which I personally prefer) are both excellent browsers and if the user is really sold on IE then 7 is a free update.

I will also be sending OSWD 2-3 more templates (hopefully) in the next week.  No telling when they’ll go up though.  Don’t judge me for the work currently there – you’ve seen that I can do much better now.

Random Tidbit:  Since I’m harping on Microsoft, I wanted to share an interesting article about how the world would be if Microsoft was no longer around.  Don’t think I’ve shared that one yet.  Also, an excellent article on 456 Berea St. citing 10 reasons to learn and use web standards.  As someone who has had to explain why standards are important to both clients and employers, I kind of wish I had this article 7 months ago.

Recently, Target was sued in a class action suit because their site was inaccessible to the vision impaired.  It has been a law for awhile now that web sites, like other facilities open to the public, must be accessible to all.  When doing a redesign you must keep in mind not only the various browsers and screen resolutions it’s users might have – but also other mitigating factors that might cause them to be unable to use your work as intended.

I am not well versed on the subject, but I would check out Molly’s blog – she has done a lot for the web standards and accessibility community.

Random Tidbit: In further perusing my links I found another link from Juicy Studio talking about Validity and Accessibility – well worth a look and a bookmark on del.icio.us.

This does mean, however, that my posts will become even more infrequent.  I know this will disappoint my faithful readers – all 8 of you – but in order for me to achieve my goals I must prioritize my activities.

I hope that if you are a regular reader of my blog, you have – and will continue to get – something useful out of it.  Have a happy and safe new year.

The first was Smashing Magazine’s 50 Most Beautiful CSS-Based Web Designs in 2006.   Seeing some of the beautiful, cutting edge and still standards compliant sites that people can design is uplifting.  I can learn a great deal and draw lots of inspiration from more then a few on the list.  I thought it might be a sign that the days of the past – nested table designs, tag soup and such – might finally be starting to move into the past.

Unfortunately I came upon a separate post that leans 180 degrees the other way – Are Web Standards Bad for Business.  I had hoped this was a post written by someone new to the field or ignorant of the benefits.  This was not to be.  The writer is well versed on what standards compliance means and, in fact, someone who practices designing compliant sites.

Coming from a site that had a lot of “legacy” code that I spent a lot of time upgrading – as well as my as yet limited skills could – to more compliant CSS/XHTML form, a lot of the points he made hit home.  Sometimes you have no control.  Sometimes what the customer buys before you’re even involved handcuffs you with regard to design and no matter how hard you fight you can’t always win.

It’s hard enough setting yourself apart from the pack when (quote from same blog) “print based designers with no desire or experience in web standards design can churn out “pretty” cookie cutter web sites via using various automated software product.”  To have to teach about why standards compliance are worth it as well just makes it that much more difficult.

If Molly and Meyer can’t come up with a better solution, I don’t think I can.  I just hope that I see more of the former in the future, rather then the latter.

Random Tidbit: Since this post is already talking about explaining programming/design to the non-programmer/designer I wanted to list an interesting post along the same line.  Check out The Iceberg Secret, Revealed on Joel on Software.

Early experience leads me to believe that unless I find a magic button in Photoshop that does that then I potentially have a better shot of winning the lottery.

Regardless, both in my “mucking around” and experience in working with an actual graphic designer in my last position I managed to find a few neat tools / uses that I found interested and useful – especially with a mindset of a front end designer.  Warning: if you have more then a basic knowledge of Photoshop these are probably old hat to you – these are geared more towards people that are just starting to play with the program.

Of course one of the most powerful features of the product is the ability to create layers.  These function basically as their name would lead you to believe – they create a layer with some graphic and/or text on it and you are able to manipulate the layers in your template much like they were in 3-dimensional space – bringing levels to the front, back, etc.  Even more powerful is the ability to create layer sets – grouping multiple layers together.

Basically, using my site as an example, I created a layer set called bwd (BogeyWebDesign) for the whole site.  Then inside that set I created other sets logically and simply – links 1 (containing link title 1 and links 1), paragraph 1 (containing paragraph title 1 and paragraph 1), etc.  Not only does this organize the site much as you would in a style sheet – allowing someone like me to visualize, move and manipulate the template logically – but you can even hide sets / layers, move them as a group etc.

One useful trick with this?  You could add two different buttons for the links, make them on a layer in your link set, then switch off hiding one or the other – allowing you to see how each fits in with the rest of the design.  You could continue to do this with different banners, graphics, backgrounds, etc.  Then once all the options you like are “on” you have a finished mock and can proceed.  You can even save those hidden layers for future projects, updates, etc.

Simple, intuitive and something you probably already knew – but maybe you didn’t.  I don’t envy the graphic designers – which is why I’m staying with the front end – but definitely appreciate their skills.  And if anyone knows where that magic button is, please feel free to let me know.

Random Tidbit: I’ve mentioned my recent job searching and found an interesting article about how online personas can come back and haunt people doing the same thing.  Basically things like MySpace and Facebook profiles or even college essays that you’ve put out on the web can hurt you in the eyes of recruiters.  But you can also turn this online marketing to your advantage.  I direct recruiters to my site – containing links to templates, sites, blogs and other examples of my work – so that they can see an extended form of my resume.  Others are even more adept at this sort of thing.

Div-itis’ symptoms include code overrun with unnecessary divs – usually 3 or more levels thick – that simulate – in essence – the old table based code we used to write.  This causes – as with tables – higher page weight, lower SEO and a difficulty in updating this code later on down the road – since it is overly and unnecessarily complicated.

Fortunately, this affliction can be cured rather easily.  The way I cured it was reading books on CSS – and not just any books will do.  I personally recommend books by Eric Meyers and the Zen of CSS Design book.  Meyers has several good books but I would start with Eric Meyer on CSS and More Eric Meyer on CSS.  One those are complete the book Cascading Style Sheets: The Definitive Guide should become your best friend.

One of the most simple methods these two books relate – and forgive me for not recalling the technical term off the top of my head, feel free to comment with it – is using 2 or more selectors in your CSS to narrow in on the specific XHTML you want to style – rather then wrapping it in a containing div.

For example, say you have a linked list on your page that you want to style different from other linked lists – say because it’s a list of your recent work and you want it to stand out.  Instead of wrapping an unnecessary div around the list you want to style and using that as the anchor, you could simply add an id or class – if you’re going to use this more then once – to the ul and then style off of that.  Example:

Old (div-itis) rule:    div#recent li { some styles }

New rule:                   ul#recent li {some styles}

Both have the same effect, but one saves you a div.  This seems like a small thing, but what if you could save 10 divs on each page.  And your website is 100 pages, receives 1,000 visitors a month and the average visitor views 8 pages.  Say those 10 divs cost you 1KB.  1KB * 8 pages * 1,000 visitors = 8,000 KB of saved bandwidth.  7-8MB of bandwidth might not seem like much, but on a commercial site where each page it might save 2-3KB and receive 100,000 visitors – it can add up quickly.

On a recent site I did you can see some more examples of this.  I used a total of 4 divs, if I’m not mistaken, to layout the template.  Then styled off of those.  It’s a simple site, so you’ll be able to see how it works rather quickly.  The site can be found here and this is the style sheet that goes with it.

Random Tidbit: Don’t think you need to make your site accessible?  Check out this article about a recent lawsuit against Target.

What is SEO and how do you improve it for your site though?  Simply put, SEO is designing your site so that it is easier for search engines to read it – and so quicker for them to understand where you should go in their directory.  Ironically, by making it more search engine friendly you typically also make your site more compliant and easier to update and validate.

The first step to improving your SEO can be done by anyone – provide rich content.  If your site/post has the relevant keywords related to the topic you want to be listed in and contains content related to that subject that people will find interesting and want to read – then you’ve taken the first step.  This has nothing to do with XHTML, CSS, PHP or any web technology.  I’m talking about the simple text you place in between all those wonderful tags.

The second step is to understand the hierarchy of your site.  This varies slightly based on the search engine and some people will disagree with what I say about meta tags – but this is based upon reading many books and sites on SEO, as well as first hand experience.  In regards to meta tags – by all means fill them in.  But because of abuse, they are very low weight – i.e. lower in the hierarchy – and do not improve your ranking much.  The highest level is the title tag – what will appear in the bar at the top of the browser.  You should choose something that relates to the topic and, preferably, provides a 5-10 word summary of what your site/post is about.  Following that is the h tags – h1-h6 respectively – which are weighted accordingly – h1 is higher then h2 and so on.  Be careful not to abuse these by using them all over the page – as that can be considered “keyword stuffing” or other not nice words that mean search engines will not like you.  Finally, there is the rest of the stuff in the hierarchy – p, strong, ul, li and all the other wonderful tags.  They have some varying weights but not really enough to be worth talking about.  The easiest way to implement this step is to think of your site like an outline for a paper you’re doing in school.  You have a title, some subject and sub-subject headers (h1, h2, etc) and then the meat – paragraphs of content.  Only in this case, you’re not summarizing in the paragraphs, but placing rich content.

The final step is CSS.  One of the reasons CSS was proposed and implemented was that web pages had become bowls of “tag soup” – what you saw looked nice, but beneath that the HTML was loaded with misused tags, presentational information and other things that made it difficult to edit and bloated the page weight.  CSS is very simply a way to separate your presentation from your content.  Because of browser quirks this is not always possible – though the biggest perpetrator, Internet Explorer, is looking to correct this with IE7.  In an ideal world, the XHTML for your site would contain the basics – your plain text content, basic tags (p, h1-6, ul, li, etc), some id and class declarations and that’s it.  Only the things that describe your content – nothing dealing with presentation like colors, fonts, or even div/spans.  This is typically never possible because at a minimum you usually need a few div’s to mold your design – but it’s nice to dream.  Your CSS file would then hold the actual design of the site – where elements should reside on the page, what color and typeface fonts/headers should be, background graphics, etc.  You could then easily edit the look of your entire site simply by editing your CSS – potentially a single file in a simpler design.  This is the true power of CSS – not only will it allow more interested users to see your site (by helping your SEO) but it will also allow you to change your site quickly and easily whenever you want.

Once you understand the basics, you can start to see the potential.  One of the more powerful tools is to place your content first in the HTML because search engines only read the HTML and give more weight to what they read first – so you would rather have them see your content first then say your navigation or sometimes even your header.  The problem is most sites don’t want their content to display first – they want a header with site branding and usually some left navigation – though right navigation is typically better because the user’s mouse resides near the scroll bar, so having it on the right means they have to move the mouse less, improving their experience and making it more accessible for them.  With CSS you can have both.  I did this for the sites I used to work on – 2 mid-size employment sites – and have even created a few free templates on my site – feel free to steal them.

I hope that you got something out of this.  If you have any questions, comments, or criticisms feel free to leave a comment or, if you prefer, e-mail me.

Random Tidbit:  Want to have a neat Web 2.0 tool to track your competitors with?  Check out this article on Competitio.us.  The article is old, but the site still appears to be free to use.

Templates

• Intensivstation – XHTML and CSS 2 templates that start you off in pretty much any basic design you would want to use.
• Mollio – another set of basic templates that you can download and play around with. A good learning tool if you’re new to CSS and XHTML.
• Layout Gala – the best of the three, especially if you have a grasp of CSS. Takes the same markup and applies different CSS similar to the CSS Zen Garden. Excellent for setting up how you want content and links to appear for SEO purposes.

Inspiration

• CSS Beauty – excellent design of the site itself, lists of CSS sites, CSS jobs and news as well.
• Stylegala – similar to CSS beauty.
• CSS Vault
• CSS Tux – labeled as the “best dressed” sites on the web, some nice designs – including the site itself
• W3C Sites – sites that conform to the W3C standards – beauty and standards compliance hand in hand.

CSS

• Ten CSS Tricks You May Not Know – some cool stuff that I hadn’t heard of at the time for simply didn’t use enough.
• CSS Navigation Techniques – besides allowing users to navigate your site and improving your SEO, navigation can be a strong aesthetic part of your site.
• Max Design – list of resources, including Listamatic.
• Learn CSS Positioning in Ten Steps – everything you need to know about positioning
• Position is Everything – for when everything you know about positioning doesn’t work. Hopefully, IE7 will make this site obsolete.
• CSS Tools – another list of CSS tools, much longer then mine. Some redundancy but some really cool stuff I didn’t list.
• css/edge – Eric Meyer doing CSS. Do I need to say more?
• Stu Nicholls | CSS Play – I have mentioned I have a love/hate relationship with this site. It has dozens of cool ideas that I borrow (steal) and that cause me to expand my understanding and abilities with CSS. I hate it though because everytime I think I’ve come up with a new idea in CSS… I find he’s already thought of it and 3 offshoots. Highly recommended

I hope you found something you didn’t know before and something that inspires you to make the web a more beautiful, CSS enabled, standards compliant and semantically correct place. Comments, constructive criticisms and flames welcome. Spam can be directed here.

Random Tidbit: WordPress does not like Opera at all. Something in the Ajax or Javascript just hates it. I’ve tried identifying and masking as Firefox and even Explorer, still no go. Someone should work on that since it’s rather annoying. I like Firefox and it’s not that hard to switch over I guess, but I would think that it wouldn’t be that hard to get it to work in Opera compared to say Explorer. But it could be I’m just not that smart.

I am still relatively new at web design but I thought I would share some of the sites I use regularly in the hopes that experienced designers might find something new and new designers might start out correctly – that is, building CSS based, SEO friendly and standard compliant sites. Since there is a relatively large number of things I want to list, this will probably be broken up over several posts.

SEO

• See how your site looks to search engines – input your site, choose your paramaters and it will show you what order your content shows up in, your keywords and keyword density, as well as headers, title, meta tags and other SEO elements of your page. A good way to make sure your page is being read the way you want it to.
• Getting your site indexed before you launch – this article brings up a good point. Many sites talk about how to improve your SEO after the fact, but as many designers know – by doing things right from the beginning, it’ll make your life and job a lot easier. This offers several simple ideas to be indexed before you’re even done.
• Basics of SEO – 456 Berea St. offers an excellent list of things to do – keep your title (the most important SEO element) in mind and utilize it correclty, use real headings, write good content (and keep it fresh), use good (semantic and lean) markup, and keep in mind there are no shortcuts. It includes more information and ideas then I mention here – I highely recommend it even if you know a lot about SEO, you might learn something new.
• Beginner’s Guide to SEO – SEOmoz is an entire site dedicated to SEO and this beginner’s guide is actually pretty comprehensive.

Markup

• W3Schools – a free online school of the basics of HTML, CSS, JavaScript and other web languages. Very basic, but a good resource.
• Complete Guide to Web Design – An excellent, complete guide to building web pages. Easy to read and well written. Highetly recommended.

Web Standards

• W3c Validator – the official validator. You can’t have standard compliant code unless it’s valid (ad servers, CMS, etc. aside).
• 9 Ways to Misunderstand Web Standards – Some common misunderstandings that still go on today.
• Why Tables for Layouts is Stupid – An online slide show from Seybold 2003. Simple and easy to understand. A great list of resources near the end. Included because it’s amazing to me how many table based layouts there still are out there – including many of those free template sites or page builders you find. Tables have their uses – but bloating markup and killing SEO is not one of them.
• Designing with Web Standards – another great 456 Berea St. article. A comprehensive guide to designing standard compliant sites. A little hard to understand for beginners, but a source I highely recommend.

That’s it for today. Next time: CSS, Inspiration and Template sites and color/graphics sites (most likely – subject to change). A great, and much more extensive, resource list can be found at the web developer’s handbook – some of the sites listed here are on there and I have mentioned this site before. My only complaint would be that no descriptions are provided. However, on a list that large, descriptions would make it almost unreadable.

Random Tidbit: Sticking with the list theme – here are three great del.icio.us links:

• Become a del.icio.us power user
• The Several Habitsof Wildly Successful del.icio.us users
• From Del.icio.us to WordPress: How to automatically post daily links – this is something I might start doing, what do you think?

Going back to Stylish though, it is an extension that allows you to create page specific style sheets for sites you visit a lot. Why would you want to do something like that? Well, for one, you can find styles that remove the ads from Digg – allowing you to browse ad free. Another allows you to modify del.icio.us – which, though one of my favorite sites, is kind of plain. I have posted my stylesheet – feel free to steal, modify, claim credit, etc.  You will have to open it and save it as a .css to use it in Stylish since WordPress does not allow uploading of that file type.  Mine is just a modified version I found on a site dedicated to user styles. There are some nice MySpace and Slashdot ones I have yet to try. I’d like to find/make a decent one for diggdot.us.

Random Tidbit: Going back to Opera for a moment I found a Wiki that talks about a built in feature similar to Stylish. I have tried and failed to make it work but I think that’s more user error then anything. The page also mentions userstyles and another page where you can get page styles – just remember to remove the Mozilla encoding from the posts on userstyles.

As for Opera, I found a recent article that talks about how designers can edit their pages in real time and see the results using Opera 9.0. I haven’t had a lot of time to use Opera, but from what I have I’m fairly impressed. It has all the good features of Mozilla – including some additional ones built in that are extensions in Mozilla – as well as neat features like zooming and the ability to render the page you’re viewing as a text browser would – great for improving the accessibility of the site you’re designing and/or improving the SEO. The best part is of the 3 major browsers, it’s the fastest I’ve seen. Unfortunately there’s 2 problems. One is probably user error – some of the pages I’ve designed come out a little funky. I believe this to be because Opera renders the box model correctly but also reads some of the IE hacks I use – or vice versa. I did upgrade to 9 and most of this went away, so that’s a good sign. Two is the bigger problem. Only about 2% of the web users out there use it. That’s on average, and if your site or blog is about the web, especially cutting edge web technology, it’s likely much higher. But it’s still disappointing. With IE7 not looking like it’s going to fix many of the major bugs – and no real explanation why not – I almost wish they would just use all that money they’re raking in, buy Opera and plug it into Vista. But that will never happen.

Another interesting stat on that is that 5% of users still use IE5. Which leads me to believe they either can’t afford to upgrade their computer or they live in a cave. I’m hoping for a day that all users will have a CSS2 (or 3) compliant browser and designing will be a lot easier. But, not too easy, sometimes I feel I’m one good copy of Dreamweaver from being obsolete.

Random Tidbit: An interesting story about the PS3 being make or break for Sony. I had a blog recently about my thoughts on this matter. The more I hear about PS3 the more I think I’m not going to buy one. I think I’ve become an Xbox man. Which is very, very depressing when you think about it. I think I’ll just lie and say I own only the Wii…

Basically, the two ideas are ways in which to use the new web – mainly web 2.0, community content driven sites – in order to introduce your site to the masses for free.  Essentially, word of mouth advertising meets the web.  The benefit is that it, hopefully, has a snowball effect.  As people find out about your content and find value in it, they link to it from their sites, blogs, myspace’s, etc.  This grows your linked-to rating, which helps in SEO, especially for Google.

The article also has a beginner’s guide to SEO.  If you don’t know what SEO, Search Engine Optimization, is – it’s basically a way to get your side indexed, preferably indexed high, under the searches that your content matches.  So when someone is looking for widget toolboxes and you have the site 1001widgettoolboxes.com then they can find your site easily.  This is especially important for smaller businesses since they do not have the funds to use conventional advertising – tv, radio, newspapers – or to become a sponsored link for those searches – paying per click.  It again goes back to word of mouth advertising on the web – and ask any salesmen, word of mouth advertising is the strongest kind.

So besides using CSS and good XHTML to design your site, you should also keep in mind what you need to add – keywords, metatags, etc – in order to give yourself the best chance of getting your content in front of your audience.  And using sites like technorati, digg, slashdot, etc to create buzz is even better.

Random Tidbit: I can’t believe Boston is 7 games back of the Yankees.  The Yankees have no pitching and usually when I can’t watch them, which I haven’t been able to lately, the Red Sox do well.  At least the Pats are 2-1.  Although having a good preseason is rarely a good thing.  I don’t have any solid stats, but I remember hearing something along the lines of more 0-4 preseason teams have gone on to the Super Bowl then 4-0.  Not sure what finishing 3-1 or 2-2 does for you.  Time will tell.