Christian Heilmann

Posts Tagged ‘wsj08’

Webmaster Jam Session hack – quickly fixing a web site with YUI grids

Saturday, October 4th, 2008

Last weekend I went to Atlanta, Georgia to speak at the Webmaster Jam Session or short WJS organized by Coffeecup software. I’ve written a detailed report on the event on the YDN blog and in short it was fantastic.

One of the things I did at the event is sit in on one of the Website Smackdown sessions, which are expert reviews of web sites people in the audience submitted. One of the sites was the following:

The original site

What shocked me about it was that it is fairly new, but still uses tables for layout. When I investigated I heard that the reason is simply lack of resources to build web sites in a different manner. This is sad, as nowadays we have resources to build upon readily available on the web that we couldn’t even dream of when I started developing. To prove the point that you can re-do a small info site like this one using semantic markup and CSS without even knowing much about it, I used the YUI grids and created the following in roughly 15 minutes:

YUI redesign site

You can download the web site demo files and play with them yourself.

I’d be happy to write more, in-depth articles about this kind of structure and redesign if there is interest. The only question I have about it is where to publish them? People that would benefit from these are not likely to read the blogs and magazines I write for. Is there a government web standards publication somewhere?

My Ajax Experience presentation – YUI for control freaks

Saturday, October 4th, 2008

I just spent several splendid days at the Ajax Experience in Boston, MA and was asked to deliver a talk about the YUI. Here’s what I went for: I wanted to make very clear that while YUI is a library much like the others, the real power of it lies in the control it gives you over the whole frontend development process from start to end.

  • The CSS components make sure that creating CSS based layouts and typography are as easy cross-browser as libraries make JavaScript development
  • The YUI DOM control allows you to monitor the size of the browser window, the position of the document in the window and the dimensions of any element. You can use this power to control things like fixed positioning and element overlap and even monitor font resizing.
  • I explained the concept of Custom Events and how the -debug versions of YUI will notify you as a developer at any moment of execution about the internal happenings.
  • I showed the development tools – the YUI logger, profiler and test suite and how they make your development process much less random.

The slides are available on slideshare and here are the code examples mentioned in the slides for browsing and to download as a zip.

[slideshare id=631005&doc=yui-for-control-freaks-a-presentation-at-the-ajax-experience-631005-1473&w=425]