In this post, I’d like to outline a handful of techniques and technologies we as creators for the web can employ today. Although some of these methods are only available in more modern browsers, I hope to explain how we can still maintain support and offer alternative solutions for older browsers.

A Bit of History

Back in 1997, I had just began dipping my feet into web development — more specifically HTML. Later that year, a new version of the HTML specification was to be released, known as “HTML 4.0”. Three U.S. Presidents, a dot-com bust and a housing bubble later we find ourselves still writing the same old HTML, now “HTML 4.01”. CSS shared a very similar story. Technicalities aside, my point is simply this: HTML and CSS have not seen a new major release of their specifications in several years.

The Future Is Now

You may have heard that there are two new kids on the block: HTML5 and CSS3. Although both of these specifications haven’t been finalized, modern browsers are beginning to implement features of HTML5 and CSS3. Of course, older browsers don’t have most of these features, but that’s okay.

Think about this for a moment: we’re still supporting and trying to create “pixel perfect” designs for Internet Explorer 6, a browser shipped with Microsoft’s nine year old operating system Windows XP. Let me say that again, we’re still designing websites that are meant to look exactly the same in modern browsers like Mozilla Firefox and Google Chrome but also a browser that is almost a decade old. Sad, but true.

Here’s where I propose we ditch that old idea and start using something I call “pixel imperfect” designs by using a well known strategy called Progressive Enhancement. Essentially, one design does not fit all browsers anymore. We need to accept the fact that browsers ARE different and they each offer their users different capabilities. We’ll need to start creating variants of our designs to show the potential experience in both modern and legacy browsers. What’s great about using Progressive Enhancement is that we can design our solutions in a way that less capable browsers still receive a great experience because we’re simply “layering” on new features that more capable browsers will utilize when they’re supported.

Implementations

Font Embedding

Arguably one of the most (if not THE most) important additions to CSS3 is the official support for embedding fonts. No longer are we stuck with having to cut images or use Flash when we want to use fonts not considered “web-safe”. We can use whatever fonts we want as long as the seller of the font permits web embedding. Several font providers like Typekit and FontShop are already providing solutions for embedding fonts on the web.

No more opening up Photoshop to do minor copy tweaks, or re-cut all of a site’s images containing copy when we want to translate it to another language, or using slow Flash solutions unsupported by most mobile platforms.

The best part about CSS3 font embedding: it’s supported in virtually all browsers used today! That includes Internet Explorer 4+, Firefox 3.5+, Opera 10+, Safari 3.1+, and Chrome 4+.

Enhanced Forms

In HTML5, forms get a bit more usable. For starters, we get a baker’s dozen of new input types: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url and week. iPhone users (other phone manufacturers will likely follow suit) get contextual keyboards when the new HTML5 input types are used:

Drag & Drop

Google recently added support for the new HTML5 Drag & Drop API in it’s Gmail. Simply put, users can now drag files right off their desktop into Gmail. It’s subtle, yet awesome.

Geolocation

Imagine visiting your favorite retailer’s store locator and it already knows your location, making suggestions of stores near your current location? This is one of the many applications of the new Geolocation API available in HTML5. Many mobile platforms already support this method with many more desktop browsers to follow.

Conclusion

The above examples aren’t the only new technologies available to us today. For a complete list, just ask your local web developer over a cup of coffee (or even better, a beer).

Just remember: browsers are different, their capabilities are different, and we should be utilizing them instead of crippling our creations because of older platforms. Let’s move the web forward.

Ben is a Senior Developer in our Chicago office.

(Oh, and those of you paying attention might also note that this effectively also answers the question about a Google OS.)

Figures that Google wouldn’t just drop a bomb, it would lay waste to the expectations of a browser. My hat is off to the Chrome development team — you guys pulled off a doozy.

Google (correctly) identified that there is a significant problem with browsers today: They’re too slow. That generalisation is borne of the increasingly complicated apps that are being developed each and every day on the web. There’s so many websites out there that require extensive scripting and content richness that even the most advanced browsers sometimes chug away.

So for only-Google-knows-how-long, the Chrome team slugged away with the fundamental problems of a browser: How to deliver something quickly. Browsers were all based on the same core model of sequential loading (there have been countless presentations to that effect) and this still causes a lot of optimisation headaches for complex web apps.

We’ve been stuck with the same model for almost two decades here, folks.

Google did what most mature applications do, and turned everything into multiple processes, running them independently so they’ll execute (overall) more quickly. Add onto that the complete rewrite and virtualisation of the JavaScript engine (courtesy of V8). Finally, take some of the caching/processing out of the browser and lob it over the fence to Google Gears (another one of Google’s underrated little gems), and you don’t have a browser anymore. You have something worthy of using the internet.

Sorry, I fully realise that I’m geeking out, here. I can’t help it. It’s exciting to see someone break a mold.

Yes, all this high praise comes with a major caveat — I’ve only used it for a couple of hours. But that’s a couple of hours of trying to break it with everything that bothered me in other browsers.

My personal favourite? Flickr. I love Flickr, don’t get me wrong, I’ve got (currently) 6,515 items and I will continue to use Flickr until either it disappears from the web, or I die. (Hopefully the latter will be the case — I don’t wanna move that many pictures and metadata.) My biggest gripe with Flickr isn’t even really with Flickr itself — it’s with how browsers handle Flickr’s map.

I love to place images on maps so I know where I’ve been. But the processing needed to do all that (without a plugin like Flash) ain’t light. And 30 minutes of placing images on the map in Firefox 2 would grind it to a halt, sucking up over 1 GB of memory on my computer. Although IE was better at memory management, its JavaScript engine is still pokey. Firefox 3 was a huge step over Firefox 2 (it corrected the memory leak). None of the other browsers compare to Chrome. It’s ability to literally fly over the map astounds me. Thirty minutes of hardcore panning, placement, jumping, and moving (with the hybrid map turned on) did nothing to kill performance.

With 1.3 GB of RAM already (intentionally) in use by other applications, I should add.

And I need to figure out how on the internet (as opposed to “how on Earth”) Chrome managed to slice 75% off the loading time for Rolex.com down here. I’m currently hanging out In Costa Rica, and (at least on the lousy connection I have right now) it takes forever to load my favourite website. But with Chrome, it was zip-BANG-done. I am stunned. Stunned, I tell you!

(I should note that down here in Costa Rica, the lags in response time are very exaggerated compared to the ones I’m used to in Calgary. So when something like Chrome suddenly yanks those delays out, you notice it.)

Okay, okay, so not everything is all sunshine and lollipops. I have noticed a few things:

• Chrome ain’t perfectly handling WordPress‘s scripting. I have to remind Chrome where the cursor is supposed to be. (I noticed this as I wrote this entry.)
• It’s lauded memory management seems a bit weird. Although performance wasn’t affected, Chrome seems to cache a lot of material in memory. Over 100 MB of data while I was in Flickr (and I’m sure I haven’t downloaded 100 MB of map data). Given, it cleaned it all up when I closed the tab, but it still seems odd. I would like a little more control over that.
• Chrome kicks up a minimum of two processes in memory. It seems to be one for the browser itself, and one per tab (so the more tabs you have, the more running processes you have). This is inline with Google’s “multi-process” design … but do we really need to see each process?
• Plugins. We need plugins. Someone build Firebug for Chrome, please!!
• I’ve seen first-hand some rendering issues, notably with PNG transparencies controlled in CSS (drop shadows go solid, then vanish), font rendering when content is dynamically swapped in and out, and I’ve heard from others of some Flash-based rendering issues, too.
• Mac support. I know Macs aren’t a massive platform compared to PCs, but if you really want to appeal to an obsessive market, you need a Mac client.

Pros vs. cons aside, the biggest problem Chrome has is market presence. The average person doesn’t know about Chrome, and they’re not going to go out of their way to get Chrome (though they should). Despite a press conference that was held just before launch today (a note to CBS News: I watched the videocast; next time, send a reporter who wants to report, not be the first to ask a dumb question), the average person will take much longer to even hear of Chrome, let alone use it.

But Firefox, my old friend, you’ve been supplanted. Chrome wins this round. I still like you, though — you’ve been a trusted friend and assistant for years. And you’ll remain in my development toolset until further notice. Do yourself a favour — learn from Google. They’ve got a few tricks that you haven’t picked up on yet.

And Microsoft? PAY ATTENTION. This isn’t the first time another browser has challenged you to performance and standards compliance (yes, even Chrome doesn’t support Acid3 … yet). I know you’re all over IE8 right now, and we’ve read about how standards-compliance keeps coming back as an issue. I urge you to please see how a true next-generation browser works, and maybe add some of this smart-thinking to your offering. The web developers of the world would greatly appreciate this.

Now if you’ll excuse me, I suddenly feel a need to kneel at the Altar of Google and make a sacrifical offering. I hope a bottle of Coke will suffice.