Sure, I see the appeal, but I’d rather use an extensive font stack than rely on a bit of JavaScript trickery. Granted, my website will never be known for its’ font selection, but that’s not my intention. Remember, it’s about the content, people. Fonts may deliver the content, but if you’ve got nothing worthwhile to say, it doesn’t matter how pretty the fonts are. 

Of course, this is a departure from my regular post content. I’m not talking about web-related stuff, though it is related, if only indirectly. I’ve determined that I need to write often about things that interest me, even if it doesn’t concern web development. Trust me, since it’s my nine-to-five job, I’m surrounded by plenty of web development content, though it’s not my life. Hence, this post.

If I’m going to do a triathlon, I need a tri-bike. So I bid on and won a “new old stock” 2002 Cannondale Multisport 2000 on eBay for $610. Yeah, that’s a $2400 bike for $610, though it’s almost eight years later. This bike really is in new condition, albeit it has been sitting on the showroom floor for the last eight years (one wonders how much they were charging if it sat for that long). Anyway, one of the main reasons I bid on it was because online reviews of the model stated that the 2002 Ironman World Championship was won on this bike. Oh, the dreams…

Hence, the Internet. Without the research tools afforded by Google, I probably wouldn’t have bid on this bike, much less this fiercely.

But here I am. With a “Made-in-the-USA” handmade aluminum frame that’s eight years old, compliments of eBay. Full Shimano Ultegra 6500 drivetrain, with Dura-Ace shifters. And yeah, I swim three times a week in a pool. It’s a triathlon, after all. 

Why is this? Well, first off, IMHO, the CSS Zen Garden has run its course. It has served its’ purpose, and is no longer needed. Dave Shea started the CSS Zen Garden in order to demonstrate to designers what could be accomplished with CSS2. This mandate has largely been fulfilled. We’re onto CSS3 (which has a slow and steady adoption).

When I first started out, the CSS Zen Garden was included into the staple of web standards perfection, a body which demonstrated what could be accomplished with CSS alone. Nonetheless, with the advent of various JS libraries, CSS adoption by itself looks to be pretty uninspiring. Sure, CSS works when JS is disabled, but how many of you know users who browse the web with JS disabled? And use a sub-par browser, at that? I didn’t think so.

CSS Zen Garden, rest in peace.

I regularly choose to use Google’s Chrome browser on OSX (Snow Leopard) over Apple’s Safari browser for casual browsing.

Why? Well, it’s pretty darn fast. In fact, it’s extremely fast. And it’s minimalistic, though not detrimentally so. I know, it doesn’t have the dev tools that Safari has. But if I wanted dev tools, I’d use Firefox (and Firebug and the Web Developer Toolbar addon, right?). For casual browsing, I’m going with Google Chrome, and I think you should too.

It’s fast, minimalistic, and proficient. Thank you, Google.

(Yes, I own a T-Mobile G1 (Dream) phone that I recently rooted. )

So far, so good. Everybody is super nice, and I even have a dual monitor setup, which is amazing. Nevertheless, as with all job changes, there are certain things to get used to - different strokes for different folks - and it takes a lot of attention (hence the lack of postings).

Thanks for sticking with me. 

When burgeoning web developers like myself come across those of Snook’s caliber, we can’t help but take a heavy blow to our professional confidence. I mean, how can those of us with only a few years under our belts hope to compare?  We can’t. No matter how hard we try, our work doesn’t come close to those who’ve spent years honing their craft, who know PS like the back of their hand, and who literally have their own seal of approval (Snook Approved).

On the other end of the spectrum, when we beginning web developers run across web designers like Cameron Moll (who confesses that he never formally studied design) and Dave Shea, our confidence in our abilities drops down another notch. Dave Shea started Zen Garden for pete’s sake (though lately it has fallen fallow). Or take my favorite web standards designer, Dan Cedarholm. The man’s a regular at An Event Apart and has a written books on bulletproof web design. How do I compare? Um, I wrote a thesis on creating a web style guide that maybe three people have read?

All we can control is what we do, who we influence, and how hard we work.

Do we throw our hands up and quit? Throw in the towel (insert your favorite gloomy metaphor here)?

No. We take what we observe and study as inspiration and motivation to better ourselves. As the old adage says, “Comparison is the root of inferiority.” Let’s face it, there will always be somebody smarter, more gifted, and better than ourselves. That’s a given. As we follow blogs and web design trends, we can’t avoid coming across those who are simply further along the path than we are. All we can control is what we do, who we influence, and how hard we work.

So keep plugging away at it - perhaps someday you’ll be Snook Approved.

Recently Microsoft took a play from Google’s playbook and announced that they were going to host the jQuery library (version 1.3.2) on their CDN network (they also host the superb jQuery validation library). For more background on CDN’s, check out the Wikipedia entry. Needless to say, CDN’s are a good thing for developers.

Basically, a CDN is a super-efficient way to serve static files, and Google’s been doing it for free for a few years. Most developers download the library directly, and this benefits the end user, because the page effects load that much faster. You can also use various cloud services to construct your own CDN. However, there’s a tradeoff if you’re going to use a sponsored solution.

You’re at the mercy of said CDN, and depending on your personality, this could be a bad thing or this could be a good thing. If you’re of the paranoid bent, relying on someone else to serve the library is a good cause for many sleepless nights - If the Google or Microsoft servers go down, your applications will go down as well. That’s why it’s good practice to keep a local copy of the library on hand as a back-up. However, unless you have an easy way to reference this backup library, you’re still screwed. However, if you’re more optimistic, you’re okay with this scenario. I mean, how likely is it that a CDN network would be compromised, much less one hosted by Google and Microsoft?

I’ve been using Google’s jQuery CDN for our school’s website over a year without a problem and I’ll continue to do so. What’s your take on it? Which is better, Microsoft’s or Google’s CDN?

“You should have an audio file of a dog barking when someone comes to the website.” Um, no.

“Or how about some paw prints that follow the cursor around, wouldn’t that be cute?”

Sigh.

‘You should have an audio file of a dog barking when someone comes to the website.’ Um, no.

What this individual kept forgetting is that your website visitors just want the content. They don’t want the graphics or audio files or lame cursor trails, they want your content. Words, information, directions, store hours, whatever it may be, that’s what they want to find and then leave.

Yep, you read that correctly - your website visitors don’t want to stay on your website any longer than they have to. Chances are your site isn’t as entertaining as espn.com or nytimes.com and the sooner you realize that fact, the better off you and your website will be.

Don’t make it hard for people to find what they need on your website. Don’t give them Flash intro’s or stupid pop-up boxes or any of that other nonsense. Make them happy and give them your content.

I know, all of this has been said already before (Steve Krug, anybody?). Still, it bears repeating: deliver good content and everybody will be happy.

A quick Google search reveals that there are a lot of outdated lists of ping servers, and some of them are quite long. Here’s a small starter list of current ping servers:

• http://ping.bloggers.jp/rpc/
• http://rpc.weblogs.com/RPC2
• http://api.moreover.com/RPC2
• http://ping.blo.gs/
• http://blogsearch.google.com/ping/RPC2
• http://rpc.pingomatic.com
• http://www.blogpeople.net/servlet/weblogUpdates
• http://rpc.technorati.com/rpc/ping
• http://ping.myblog.jp

How do you handle ping servers in ExpressionEngine? Have any more to add to the list?

Another benefit of using Blogger is that it’s owned by Google, and Google owns search, so ostensibly it helps with search engine optimization; odds are good that your blog post, if titled correctly, will show up higher in Google’s search rankings, though don’t quote me on that. I’ve just had good luck myself with blog posts showing up quite nicely in the search results.

I don’t mean customization by way of themes either. If you’re a business, you don’t want a blog that looks like 3,000 others, you want it to look like the rest of your website. Blogger allows you to dramatically customize the blog template and actually tinker with the HTML. However, don’t try this unless you’re comfortable with HTML and CSS - if “View > Source” means nothing to you, I’d recommend sticking with a theme or hiring someone (like me!) to incorporate Blogger into your online presence.

Before we get started, you need to create a Blogger profile. Go to www.blogger.com to sign up and create a blog. Also important is to create a directory for Blogger to publish to on your website. I creatively called mine “blog.” Again, if these steps are foreign to you, hire someone to do it.

First thing to do is set up publishing. Go to Settings > Publishing > FTP Publishing. Here you’ll want to give some FTP details so Blogger can post your entries to your webserver. This is pretty self- explanatory. However, take it slow because details matter!

Once that’s set up, the next thing is to go to Template > Edit HTML. You should be viewing the source code of the blog template. Make sure you specify the path to your own CSS file in the head of the document. Add any site-specific elements, such as headers, navigation, footers, and so forth. Most likely you have a main content area in your HTML, and this is where you want to put the Blogger code. I opted to have a main content area and a little sidebar for archives. Simply give these areas IDs and insert the respective Blogger parts as need be. You can also comment out anything you don’t want displayed on your blog, such as “Powered by Blogger” and so forth.

This takes some time to fine-tune; you’ll most likely have to republish the blog several times to iron out any layout and font errors. Nonetheless, the Blogger template code is pretty straightforward to work with. In no time you’ll have a customized Blogger-powered blog on your static website!

Yeah, I now prefer clean and simple designs that focus on the content (this may be a sign that I’m getting older). This design is not flashy (no Flash to be found, haha) nor is bleeding-edge (it’s not a single-page website with fancy scrolling) . Instead, it has predictable divisions and comfortable margins, in the hope that the content stands out.

Nonetheless, I’ve incorporated a few tweaks that are new. First, it’s powered by ExpressionEngine. You could say I’m following the crowd on this one - noted web designers such as Jason Santa Maria and Jesse Bennett-Chamberlain, not to mention A List Apart use EE to power their websites. Call me a lemming, but EE is excellent, if a little complicated to learn at first.

Secondly, I’m using a CSS Framework to layout my website - it’s BlueTrip. I know, I know, a CSS Framework is such a cop-out (write your own code, you lazy web developer, etc.,) but here’s the thing - I’m a little tired of writing redundant code. I’ve cut my teeth coding a website from the ground-up, and I have to say, I have better things to do with my time. I’m not ashamed to admit that I like the fact that a CSS Framework has a lot of goodies already built in - a hard reset (a la’ Eric Meyer’s Reset) great typography (including smart baselines), a print stylesheet, and a grid layout, of course. Go ahead - add “showgrid” to any container class, and you’ll see what I’m talking about.

Lastly, I’ve experimented with CSS Sprites. The services icons on my homepage are really one image being applied four different ways by the style sheet - this means that one http request is needed instead of four. Yeah, it’s pretty cool.

Roll all these changes up and my website now looks pretty good across platforms and browsers, not the mention the mobile crowd (iPhone and G1). Perhaps a mobile-specific solution will appear later (mobifyme.com). Nonetheless, I feel pretty good about what I crafted so far. Sure, it’s a work-in-progress, as all redesign are, but I hope it makes a good impression on you too.       

The reason I bring this up is I had a chance to look at my little website in IE6, and of course the transparent PNGs looked awful. Just terrible. I didn’t realize that they looked that bad and made me look, well, amateurish. So I stuck on a PNG hack just for the few who came my way on that blasted browser. I could have just ignored it, and I would’ve felt justified in doing so: “You want to view the web in an outdated browser? Go right on ahead. Only don’t complain to me if things don’t look pretty as they should.” Only trouble was the PNG hack didn’t work as touted, so I was back to square one. What did I decide? Ignore it.

I can take that approach but my clients cannot. See, some of the people I design websites for depend on their website to grow their business. They can’t afford to turn off those few who stumble by on IE6, because they need the business. It’s that simple. Hence the hacks. As much as I would love to ignore it, my clients cannot.

But how long do we support it? Until traffic drops below 10%? 5%? When? Or should we simple ignore it now and move on? Google’s solution is to provide a plugin that transforms IE into Chrome.

For Christmas, I’m going to ask everyone I know to do web developers a favor and upgrade their browsers instead of getting me something.

These options seem to fly in the face of the spirit of CSS, to impose a structure of sorts to the development of a website layout. Those who know CSS think the concept befitting a simpleton, those who don’t, well, not so much. To those who are unfamiliar with CSS, a framework is a godsend, for all the hard work has already been done.

A grid framework is a carryover from the print side of things, where grids have been long used to nicely layout content. With a grid, content boxes line up cleanly, with minimal fuss. Indeed, a grid takes the guesswork out of lining up a complex layout - just follow the grid and you’ll be fine. The adaption to website layout is obvious.

Why use a CSS grid at all? Well, first off, most frameworks include more than just a simple layout schematic; it includes a print style sheet, as well as browser- and print-specific styles. And don’t overlook the main benefit - content boxes line up where they should, no thinking involved. A grid relieves the developer from worrying about a pixel-perfect alignment. An additional bonus for using a framework is fast development; if you know the conventions of a CSS grid framework, it doesn’t take much to whip up new layouts on the fly. Also, most CSS grid frameworks have been tested against multiple user agents (read browsers) and platforms (read operating systems) and have passed with flying colors.

Why shouldn’t you use a CSS grid framework? Well, if you aren’t familiar with CSS, it handicaps your development - you’re limited to the framework; if a client asks for something different, you’re screwed. Also, a framework can come across as conventional and safe; this is fine for large websites, but a detriment for smaller, boutique websites.

So why am I entertaining the idea of a CSS grid framework? Well, I work on a large-scale public website (3,000 plus pages) where a generic framework would come in handy; layout tweaks for special promo pages would already be included in the main CSS file. This means that you don’t have to create special “page specific” styles to embed in the head of each document. I also don’t have to worry about IE6 and whatever quirks it may throw my way, because the framework has been thoroughly tested against that browser already.

I’ve been toying with the Bluetrip CSS grid framework because it is an amalgamation of several popular approaches, combining the benefits of each. The downside is that my layout will be centered and 960px wide, with predictable divisions. The upside is that it will look more-or-less the same in almost every user-agent. This is an upside I can live with. What CSS Grid Frameworks do you prefer and why?

Only 25% of the web pages surveyed passed the W3C X/HTML validator, 46%  passed the CSS validator, and only 34% passed the WAVE validator. The oldest web style guide was last updated in 1997, with the most current updated in 2008, and 48% showed no date stamp. More disheartening was the fact that out of 64 higher education web style guides tested, only 2 passed all three tests: Iowa State University and Penn State University. On the flip side, 25% of the web style guide web pages tested failed all three tests.

Clearly, there was no correlation between the quality of a web style guide and the quality of the corresponding website: exemplary web style guides were found on sub-par websites, and vice-versa. Read the about the results here.