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.

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.

• Be careful with spending any $2 bills, I found two stories about problems in doing so – one from Woz, who actually has an interesting site, and one involving someone unhappy with Best Buy.
• An interesting post about what code doesn’t do in real life that it does in the movies.
• Some of the top secrets of pizza delivery drivers.
• Why not to pump gas at noon.
• How the gaming generation has a different approach to problem solving and learning.

I have more that I’ll share in future blogs, but I had a backlog of them available.  Enjoy.

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.

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.

On Zimbio there is even a page with all of the Web 2.0 logos.  Very cool.  What is Zimbio?  It seems be a cross between Wikipedia and a blog, but I’m no expert.  Some neat community blogs on there though.  I have to look more into it to see if there’s any good CSS / Web Design ones.

Random Tidbits: Turns out I was a bit premature with Pluto the other day as we’re now down to 8 planets instead of up to 11.  I had the link and lost it.  To make up for it I found two neat Flash diversions.  One is a Japanest IQ test given to prospective employers.  I think I solved it in under 5 minutes.  Another good logic game has you diverting lasers with mirrors.  I got stuck on level 6 I think.  The problem?  Neither has good English directions.  Enjoy.

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.

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.