Software can be like wine.  Let’s say, a bottle of red wine. How about, a Cabernet Sauvignon, aged 11 years or so, that you forgot about in your wine cellar.  You’ve tried this one before, when it was still young, and it didn’t do much for you.  Now you give it another shot…

You immediately notice hints of oak, vanilla, and traces of blackberries.  It’s a little much to take in, so you let it breathe.  You then notice rich tannins, and more complex aromas that you can’t place.  You look at the bottle, and read label: “Scalable Vector Graphics ~ 1999″.

The Scalable Vector Graphics (SVG) format is nothing new.  Created around 1999, this XML based standard needed to mature a little to really show it’s capabilities.  I’m sure those of you that have been around these interwebs a time or two have come across SVG in the past and were probably unimpressed.  With the web becoming a legitimate platform, and as the underlying technologies (HTML, CSS, and Javascript) and the browser have finally started to mature, the capabilities of SVG can now be realized.  We all know from the mass amount of shiny icons and “web 2.0″ sites out there that vector graphics are really popular these days.  But with SVG, the ability to use and manipulate vector graphics as objects is taking the web past 3.0, all the way to 4.0!!

Here are some examples of pretty compelling uses of the SVG format:

The Raphaël Javascript + SVG Library
http://raphaeljs.com/analytics.html
http://raphaeljs.com/chart.html
http://raphaeljs.com/ball.html

W3C Example w/ Code:
http://www.w3schools.com/svg/tryit.asp?filename=animatemotion_2&type=svg

One of the more famous SVG examples, the cubic spline tiger:
http://www.croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg

“What about HTML5?” you might ask.  ”What about the really cool stuff that the Canvas tag can do?”  Well, there is some overlap, but SVG is much more suited to manipulating objects than the Canvas.   The way to view it is that (out of the box) SVG deals with graphical objects (vector graphics, raster graphics, text) and remembers what is rendered, making it easy to re-render.  The HTML5 Canvas is a lower level protocol that is basically a “drawable” region, which makes it very flexible.  One is not better than the other, they are just different mechanisms.  If SVG is a bottle of fine wine, the Canvas is a Cuban cigar.

Enjoy Time Spent Encoding Videos

“There is no single combination of containers and codecs that works in all HTML5 browsers. To make your video watchable across all of these devices and platforms, you’re going to have to encode your video more than once.”
http://diveintohtml5.org/video.html

Hope You Like Banners

“HTML5 won’t kill Flash banner ads – they’ll just be done in HTML5, but now you can’t ignore them with a Flash-blocker”
http://radleymarx.com/2010/02/five-myths-of-html5-vs-adobe-flash

Just a Reminder, Standards Move Slow

“The de facto standard for the Web in the past decade was IE6.”
http://blog.est.im/archives/830/comment-page-1

A Somewhat Misleading Final Specification Date

“The HTML5 specification is not expected to be finalized until 2022″
http://www.eweek.com/c/a/Application-Development/20-Essential-Things-to-Know-About-the-HTML5-Web-Language-329684/?kc=EWKNLEDP02082010A

Ready or Not?

Is HTML5 Ready? http://ishtml5ready.com/
Is HTML5 Ready Yet? http://ishtml5readyyet.com/

It seems Javascript Toolkits have infiltrated every nook and cranny of the internet. And it seems like everybody and their nephew has built one.

So which toolkit is the right one for you?  Well, most of the big names have the same subset of features, such as “drag and drop”, animation capabilities, and XML HTTPRequest functionality.  Maybe you need something a little more, like HTML Generation or the out-of-the-box charting functionality of Dojo.  Or, your deciding factor may be licensing.  You may love the features of GWT, but your company doesn’t gel with the Apache License.

I put together the illustration below from the data available on this wiki article to compare all the big guns in the Javascript Toolkit game.  I know I left off some that you may be using, and didn’t list all of the features, but this should be a good snapshot to get you started.  Please let us know your experience with these or any other Javascript Toolkits.

Another thing we would love to know is will you be using one of these toolkits when HTML5 is “fully supported” in all the major browsers… whenever that may be?

Toolkit sites:
Scriptaculous: http://script.aculo.us/
Dojo: http://dojotoolkit.org/
GWT: http://code.google.com/webtoolkit/
jQuery: http://jquery.com/
MooTools: http://mootools.net/
midori: http://www.midorijs.com/

And for those of you that don’t know who Eric Meyer is, shame on you. Shame. Shame. Shame.  I can’t write it any better than An Event Apart, “Eric Meyer has been working with the web since late 1993 and is an internationally recognized expert on the subjects of HTML, CSS, and web standards. Author of Eric Meyer on CSS and More Eric Meyer on CSS (New Riders), Cascading Style Sheets: The Definitive Guide (O’Reilly & Associates), and CSS2.0 Programmer’s Reference (Osborne/McGraw-Hill) as well as numerous articles for the O’Reilly Network, Web Techniques, and Web Review, Eric also created the CSS Browser Compatibility Charts and coordinated the authoring and creation of the W3C’s official CSS Test Suite.” So yeah, he knows a thing or two about web development.

Jeff: There has been a lot of talk and excitement in the web design community about CSS 3 and HTML 5. I find this interesting, mainly because I’m a dork, but it doesn’t seem like most of the major web browsers can fully implement existing agreed upon standards correctly, much less the next generation. Do you have any thoughts on this? Also I know there are bits and pieces of CSS3 and HTML5 that work in some browsers but when should we expect these technologies to go “mainstream?”

Eric: Some of them already have: ‘canvas’, which is part of HTML5, is used quite a bit for a variety of very cool purposes.  It’s also possible to use some HTML5 markup right now, either with a little CSS or a little JavaScript or both or even neither, depending on the browser. We might all groan and say, “God, the Browser Wars are back!” but really, that’s not at all the case.  Things are soo much better than they used to be that in comparison, this is at most the Browser Mild Disagreements.

Incompatibilities are the only thing we can ever count on in web browsers.  The last day of complete browser interoperability was the day before the release of the second web browser.  Browser teams don’t coordinate with each other, don’t agree on what to do or not do– and if they did, we’d probably complain that they had formed a monopoly that was unresponsive to our needs.

Jeff: Will we have to resort to some sort of battle royale street fighter kumite with everyone involved to get this done (CSS3 & HTML5 becoming widely accepted)? And if so, do you think Jean Claude Van Damme is a good fit or possibly Steven Seagal might make an appearance?

Eric: Um, sure.  Aren’t there any more recent tough guys to throw into the mix?

Jeff: What is the best way (I mean other than physically threatening or brandishing a weapon) to convince people that seem more interested in slapping code together quickly that web standards matter and it’s in their best interest to follow them?

Eric: Leading by example, sharing our experiences, making resources available, and helping when asked.  Nobody can be forced to go down the standards path, and frankly I’m not really interested in trying. People will slap together code, and it will mostly work, until the point where they want to do more powerful stuff or they get users with accessibility problems or they just start to realize that what they’re doing is clumsy and bloated and there must be a better way to do it.  When that happens, they’re ready to look at what’s been done by others and take advantage of resources and assistance.

It’s sort of a virtual apprentice setup.  Those wanting to become craftsmen learn by studying what the craftsmen who preceded them have done and said.  It isn’t perfect, but it’s working all right for now. I suspect there may emerge a system of actual, in-person apprenticeship, but it will happen very slowly.

Jeff: Designing a website to be optimized for mobile devices is a hot trend but it seems like Adobe and Apple are currently engaged in some sort of weird macho staring match about how to get Flash on the iPhone.  In addition, JavaScript and CSS have (at best) limited functionality for the majority of users with standard traditional cell phones. There seem to be a lot of roadblocks to transferring typical web interactivity to mobile devices, what are your thoughts on the future?

Eric: That one’s a stumper for me, because I’m not sure what the best mobile experiences should be, let alone what we’ll get.  There are some things one can do in a desktop browser that just seem really hard to do on a mobile device, like dropdown menus.  Maybe those will just never make it to mobiles.  Or maybe someone will come up with an interaction pattern that is recognizably a dropdown and yet is perfectly optimized for mobile environments and we’ll all wonder why nobody thought of it sooner.

Jeff: I’m going to skip explaining the part about what web 2.0 is, because quite frankly the word makes me want to smash my head through my computer monitor.  What are your thoughts on what the next version of the web will be?

Eric: It’ll be a more powerful version of what we have now, one that we sort of collectively evolve, and we’ll worry about branding it later.

Jeff: Do we go ahead and call that web3.0 or will it be so advanced that we skip directly to web 4.0?  If so, who can I sell this domain web4point0.com?

Eric: I’m sure there’s a social media guru out there somewhere who’d love to take that off your hands.

Jeff: The other day I was thinking about when I was first learning how to design websites, I made this really simple hangman game out of JavaScript.  I thought it was cool and was quite proud of myself at the time but it always seemed that JavaScript was regarded by web developers (at least the ones I knew) as this wacky weird little language that wasn’t really that powerful. Now it seems like JavaScript is everywhere you look, disguised as ActionScript in Flash/Flex, or playing a vital role in the creation of mashups, etc. Has JavaScript changed or have the attitudes of those developing websites changed more?

Eric: Both.  It’s gotten a lot more powerful, and people have started using it to do all kinds of stuff natively in the browser that would’ve been unthinkable even two years ago.  AJAX drove a lot of that change in perception, but also things like Google Maps and the various JS-based APIs.  People started to realize that no matter what you might think of JS as a language, it can be used to do a lot of cool stuff and it’s pretty much here to stay.  My contention of late is that it will be the basis on which the web will advance at a much-accelerated rate, actually shifting the basis of standards development into the hands of the community.  We’ll see.

Big thanks to Eric for the interview!

More about Chris…

Chris Coyier is a web designer from Madison, WI currently living in Chicago, IL and working for Chatman Design. He also happens to run a web design community (css-tricks.com) that has an extensive collection of really awesome articles, forums, videos, downloads and snippets.

Jeff: Obviously uitrends.com covers a wide range of user interface trends (so I’m told), and a lot of the information presented on your website covers how to implement some of these trends. What are some of the key trends you have covered on your own website?

Chris: Using custom fonts is becoming a big thing recently. Fonts have always been a hot topic, since the core web fonts available for use are so limiting it really itches designers the wrong way. So there have always been image replacement techniques and fancier stuff like sIFR. But just recently we’ve seen popular browsers implementing CSS support for the @font-face rule, something that IE has supported for a long time. This allows for font files to be directly linked to in CSS and used in the browser, even if the user doesn’t have that font on their system. One problem with this is that any fonts you can do this with legally kinda suck. But now we have technologies like TypeKit coming around, which I covered briefly, which are using additional technology to allow you to use actually very nice fonts with @font-face. This is going to be big in the coming year I think.

Jeff: There has been a lot of talk and excitement in the web design community about CSS 3 and HTML 5. Are these real solutions to existing web design problems or just a bunch of overblown hype and wishful thinking, kind of like when I saw the movie Back to the Future II and got really amped up about hoverboards? What are your thoughts on these being implemented or even agreed upon by December 21st, 2012 (the “supposed” end of the Mayan calendar)? Any correlation or am I just grasping at straws here?

Chris: Oh it’s all very real. A lot of CSS3 stuff you can already use in a “progressive enhancement” kind of way to make designers cooler for browsers that support them but still be fine in browsers than don’t. The standard example is rounded corners, which you can implement with -moz and -webkit CSS attributes very easily. IE won’t get the rounded corners but of course that isn’t the end of the world. HTML5, for garden variety web designers like me, means a barrel full of new tags we can use to mark up web pages in far more semantic ways. For more hardcore developers, check out this HTML5 intro video that has some pretty mindblowing stuff you can do with HTML5 today.

Of course, I’d swear it all off forever if I could have a hoverboard.

Jeff: Web standards. Are they golden rules to be followed or do they just get in the way of cranking out some sweet non-compliant code? Why? Is this all part of a more semantic web with flying robots that interpret code and stuff?

Chris: Compliant code doesn’t limit you in any way. There aren’t things you can do with non-compliant code that are super cool, but put you in some kind of “bad kids” club. Non compliant code just means you screwed something up somewhere. You didn’t close a div, you used an attribute that doesn’t exist, you forgot to include an attribute that is required to make your code more helpful. Validation is just a tool to make sure you are on the right track. The real test is if your page works and looks right (i.e. doesn’t look broken, not necessarily exactly the same) across all browsers, and validation can help you get there.

Jeff: There are a lot of tools like content management systems (CMS) that allow people to create websites easily without a lot of knowledge about setting up, planning, organizing, designing, usability or even coding. Is this good or bad for web design? And, if you had to pick one CMS out of the 1.2 trillion available (last I checked) which would it be and why?

Chris: WordPress. I chose it 90% of the time. I feel like I can do just about anything with it. But, this choice is because I already feel very comfortable with it. I can crank out a WordPress powered site very quickly and I know that when changes and things come up with that site, I’ll have to power to get it done. Ultimately our work as web designers comes down to getting things done, so sometimes you have to make choices based on what you already know. Learning the ins and outs of 10 different CMSs just isn’t practical. If you are super comfortable in Joomla and can really get it done with that, more power to you. But I definitely feel like WordPress is a pretty amazing system.

Jeff: Is there anyone on Twitter that uitrends visitors should be following? You know, other than uitrends and Jeff Noble – that guy pretty much rules.

Chris: Well, other than Jeff Noble, you could always follow me. This account is pretty amazing. I think you should use Twitter however makes sense to you. Follow your friends, follow people you think will be interesting to you. Don’t follow some list of SEO experts you found on a list somewhere because you think you’ll get a bunch of hot SEO tips you can’t live without. That’s lame and boring and your twitter stream will turn into a bunch of nonsense. I suggest looking over at least the first page of a persons tweets pretty carefully before following and seeing if they look interesting before following, and then not being afraid to unfollow people if they turn out to not interest you. Twitter is only valuable if you get something out of it, and that you have to manage yourself.

Big thanks to Chris for the interview!!!