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.

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.

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.

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.

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.

10.5: BogeyWebDesign.com – not even rating a full number, but I’m always updating my site. I’d be surprised if the number of (non me) page views was over a dozen a week, but maybe you’ll find a template or idea you can steal.

10: Smedlock.com – I’m a geek, I admit it. I play Magic the Gathering. And this is one of the best sites to pick up cards on the net and I have never had any problems from them.

9: MySpace – I almost hate to put this one up here. I probably use WordPress more, but I like the fact that you can share information easily with you friends. Not many of my friends have/read blogs or are into CSS and web design. But most of them have a MySpace.

8: Open Source Web Design – A huge, free collection of open source templates from beginners to experts. Stick to XHTML with CSS and you’ll find tons of great designs you can just plug your information to and have an amazing site. For free.

7: Web Developer’s Handbook – A huge collection of resources from Web 2.0 sites, to CSS and HTML tools and all the way down to color pallette generators and free stock photography. Awesome tool for designers.

6: CSSPlay – One of the best collections of CSS on the web. Anytime I need something neat, I look here first. The only problem is that anytime I think I’ve done something original, I usually find that he’s already done it.

5: MeyerWeb – The King of CSS. Enough said.

4: DilbertBlog – Scott Adams’ Dilbert is one of the funniest comic strips out there, especially if you’ve ever worked in a cubicle. The only thing funnier is Scott Adams himself.

3: CssZenGarden.com – The single greatest collection of CSS on the net in my opinion. If I had half the skill of some of the people that have designs on here I’d be all right. Hopefully, one day, I’ll make one and have it accepted.

2: Del.icio.us – This is my new obsession. I love the fact that I can store all my bookmarks in one place, categorize them easily and even share them with my friends. Awesome.

1: Digg.com – I am constantly checking this site for interesting stories, great deals or even some useful CSS and web design stuff. I have yet to post or get an account, but I may yet when I have more time.

Hopefully you found something interesting that you had not seen. I just realized most were design sites, but that has been my main focus the last year or so – so I guess that makes sense. I’m sure I’ll have a revision down the road. What is your top 10.5 sites?

Random Tidbit: Want to get to know me a little more? Of course you don’t. But I’m gonna toss my MySpace up here anyways. Logon and check out my weasel – my ferret Mugsy. She gets top billing because she’s cuter and works for Skittles.

Left and right will cover 20% of the available space and – for those of you bad at math – content the other 60%.  The header is 100px tall – I may update this to 10em to make more fluid later on – and the wrapper holding the 3 main divs has a 100px padding.  Changing both will expand the header and push the content down.  I also found a neat trick to position things at the bottom of the window.  I may also move the footer down to whichever is further down – the bottom of the browser window or the bottom of the content.  That may be tricky though and I wanted to get this out for now.  I should have a 2 column one out soon – if you wanted to convert this one simply delete the left or right, add the 20% to either or both of the ones left and change the margin-left if need be.

I also have not had time to add graphics to anything.  Between work – I work on a major companies family of job boards – and some recent job opportunities that have sprung up, I have been straight out.  I’m hoping to rectify this soon.

Random Tidbit: Two interesting space happenings.  One is Voyager 1 is about to leave the solar system.  Pretty impressive that something that old is still going strong.  Also, after almost kicking Pluto out of the ‘family’ the tide has changed and they’re thinking of adding 3 new planets to the solar system – nothing as cool as Uranus though.  I’m almost willing to bet 10 bucks Google will buy one of them.  They buy everything else that’s new (2.0) – not that that’s a bad thing.

The problem is when you find an image, figuring out what color scheme to use to best fit the images you have or get from the site.  Well, I found a nice Color Palette Generator that takes in a 600px or less image and gives you a matching palette.  Pretty neat.  I’m hoping to use this to generate some template sites very soon.

That’s all for now.  Been pretty busy at work and updating my site when I get home.  Hopefully I’ll have something to show soon.

Random Tidbit: If you haven’t checked out del.icio.us yet, do it.   Basically, it’s a social bookmarking site.  Meaning you can bookmark neat sites you find and share them with your network of friends.  In addition, it allows you to organize them with tags.  If you’re like me, and most designers, you have a large number of local bookmarks – at work, on your various computers – and no real cohesion.  This allows you to import them from your browser and save them all on there.  So you can have access to your entire bookmark collection and organize them very simply so that you can easily find what you are looking for.  I keep a great deal of mine private, but I’m going to start changing that as I go through mine in the next few weeks.  Feel free to check out my public ones – and send me a network invite if you want.  At the very least, use it.  It’ll save you a lot of time and it’s a cool site to boot.

The problem is that I also wanted to use some drop shadowed graphics to try and create depth – a good example being Zunflower.  I think the combination of the two elements would be a striking addition to my portfolio.

The problem?  My seeming inability to get Photoshop to do what I want it to do.  Everytime I tried to create the graphics the other day it was fine until I tried to save for the web and use it on my template.  Then everything broke down – specifically the drop shadow went ‘wonky’ (a highly technical term, look it up).  After several tries I finally gave up.  In talking with a graphic designer friend he suggested I try adding the background to the graphic, but I’m still not sure how that would help.

So now, stuck on this, I’ve spent the last few days ineffectively trying to get back to the design.  I have managed to do a few other odds and ends around the site, but most of those haven’t made it off my local platform and onto the web.  I’ve hit a virtual wall.

I’m hoping the freedom of the weekend will help and get some creative juices flowing, motivating me to get some work done.  I would like to get that finalize so I can get some templates cranked out.  I would like to offer them on some open source sites soon – I’d love to see others use my work.  But only time will tell.

Random Tidbit: It was awesome seeing Big Papi crank a ‘homah’ on the Indians to win it the other night.  I knew the minute he came up the game was over.  In Beantown we spell clutch B-i-g-P-a-p-i.  Hopefully this season will finally convince people that regardless of him not playing the field he should be the MVP (as he should have been last year).  Winning games – with your glove or bat – is winning games.  Period.  It was also good to see Tom Brady stand up for his teammate Deion Branch.  I have faith in Belichick, but come on, he’s a top 5 receiver and he’s making something like $1.5M this year.  We ask so much of them, we gotta give a little back.