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.

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.

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.