WNAS

As this years @media conference has no wifi available, this review is posted after I got home. This will give me the time to collect my thoughts and tinker a bit with this post. More than I usualy do and I hope that this will improve my (ad-hoc) writing style. So with no further ado, I present to you my view of the 2007 @media conference.

• Beyond Ajax
• The broken world
• High preformance Web Pages
• Interface design Juggling
• Microformats, building blocks and you
• When web accessibility is not your problem

Beyond Ajax

Jesse James Garret

The first presentation of the 2007 @media conference is the keynote of Jesse James Garrett, called 'Beyond Ajax'. As this is the man who coined the term Ajax, I am pretty keen to hearing what he has to say.

He starts with explaining what he does and who he is and then starts with with a good question:

What is the web good for ( or at ).

He further goes on to explain some global things about the user expierience that changed the world. His presentation is spot on, but very broad, meaning that he could give this presentation 5 times a week to different audiences.

link to sheets

The broken world.

Solving the browser problem once and for all.

Molly E. Holschlag

Molly talks about browser development and web standards. Hers was a very nice presentation, which she gave with a lot of passion. I haven't seen her speak in person before and truly liked her style. She is passioned about what she does and I am sorry to hear that she will dissappear from the public speaking platform for awhile.

She in short explains that developing browsers is difficult. We can still blame the vendors for their faults, but we should understand what problems they face. Browsers too have to work with incomplete standards and different user models. They main thing they should do is, in her opinion, to open up to and listen to the community. She explains that only apple with safari is not doing that and strongly asks them to the discussion.

In short, a nice presentation.

link to sheets if available

High preformance Web Pages

Nate Koechley

A very good presentation from Yahoo's Nate Koechley about bettering preformance. He talked about some things that we know, but also gave a couple of good obscure examples. Furthermore, he showed us how the browsers don't deal well with cache, so that it is wise to develop for an empty cache user.

The eye opener that he started with though, was that the html load time is only about 5% of the total time. So all that work that goes into database query optimization and more back-end work counts for no more than 5%. 95% is going into scripts, images and stylesheets, so following these points is going to help you a lot.

He build his presentation around 12 pointers that he and his team have found usefull.

1. decrease the number of http requests
2. combined distribution networks
3. setting exparation headers is one to look at..
4. gzip your files to reduce bandwidth.
5. put css at the top of your documents. use <link> instead of @import.
6. put javascript to the bottom, as it stops loading everything else.
7. avoid css expressions
8. make js and css external
9. reduce DNS lookups
10. minify Javascript
11. avoid redirects
12. turn of ETags

link to sheets if available

Interface design Juggling

Dan Cederholm

Dan Cederholm the author of 'bulletproof webdesign' comes back to @media 2007 with a presentation on Interface design Juggling. The presentation compares juggling to the daily activities of a interface designer. He shows a special site he just released for an example: toupeepal, a site of wig wearers, a wig 2.0 site.

He shows that an interface designer basicly juggles with a couple of elements, namely:

1. Color
2. Typografy
3. Favicons
4. adding details without adding complexity
5. suggest the box
6. Reuse and recyle
7. microformats

link to sheets if available

Microformats, building blocks and you

Tantek Celik

My second time to see Tantek, who offcourse presents on micoformats. He gives more examples of real world usage, showing that microformats have matured a lot. Last year he spoke of how it should work, now he was (not quite) gloating.

The standard is a good way to mark up several things and is going somewhere. The examples are really good and show how you can use Microformats in your everyday projects. I for one can use them very well at my currect project. And to be honest, marking up anwb in microformats will be pretty cool on my (h)resume.

When web accessibility is not your problem

Joe Clark

This was when fatigue kicked in, after a very long day, I sadly had to leave this one to others. Afterwards I heard that it was quite good and I will read his slides.

Notes are available here

As this years @media conference has no wifi available, this review is posted after I got home. This will give me the time to collect my thoughts and tinker a bit with this post. More than I usualy do and I hope that this will improve my (ad-hoc) writing style. So with no further ado, I present to you my view of the 2007 @media conference.Update with link to the audio and sheets

• Beyond Ajax
• The broken world
• High preformance Web Pages
• Interface design Juggling
• Microformats, building blocks and you
• When web accessibility is not your problem

Update

All of the sheets and audio are available here

Beyond Ajax

Jesse James Garret

The first presentation of the 2007 @media conference is the keynote of Jesse James Garrett, called 'Beyond Ajax'. As this is the man who coined the term Ajax, I am pretty keen to hearing what he has to say.

He starts with explaining what he does and who he is and then starts with with a good question:

What is the web good for ( or at ).

He further goes on to explain some global things about the user expierience that changed the world. His presentation is spot on, but very broad, meaning that he could give this presentation 5 times a week to different audiences.

The broken world.

Solving the browser problem once and for all.

Molly E. Holschlag

Molly talks about browser development and web standards. Hers was a very nice presentation, which she gave with a lot of passion. I haven't seen her speak in person before and truly liked her style. She is passioned about what she does and I am sorry to hear that she will dissappear from the public speaking platform for awhile.

She in short explains that developing browsers is difficult. We can still blame the vendors for their faults, but we should understand what problems they face. Browsers too have to work with incomplete standards and different user models. They main thing they should do is, in her opinion, to open up to and listen to the community. She explains that only apple with safari is not doing that and strongly asks them to the discussion.

In short, a nice presentation. And after I had a chance to meet her and have a brief talk, a very nice lady...

High preformance Web Pages

Nate Koechley

A very good presentation from Yahoo's Nate Koechley about bettering preformance. He talked about some things that we know, but also gave a couple of good obscure examples. Furthermore, he showed us how the browsers don't deal well with cache, so that it is wise to develop for an empty cache user.

The eye opener that he started with though, was that the html load time is only about 5% of the total time. So all that work that goes into database query optimization and more back-end work counts for no more than 5%. 95% is going into scripts, images and stylesheets, so following these points is going to help you a lot.

He build his presentation around 12 pointers that he and his team have found usefull.

1. decrease the number of http requests
2. combined distribution networks
3. setting exparation headers is one to look at..
4. gzip your files to reduce bandwidth.
5. put css at the top of your documents. use <link> instead of @import.
6. put javascript to the bottom, as it stops loading everything else.
7. avoid css expressions
8. make js and css external
9. reduce DNS lookups
10. minify Javascript
11. avoid redirects
12. turn of ETags

Interface design Juggling

Dan Cederholm

Dan Cederholm the author of 'bulletproof webdesign' comes back to @media 2007 with a presentation on Interface design Juggling. The presentation compares juggling to the daily activities of a interface designer. He shows a special site he just released for an example: toupeepal, a site of wig wearers, a wig 2.0 site.

He shows that an interface designer basicly juggles with a couple of elements, namely:

1. Color
2. Typografy
3. Favicons
4. adding details without adding complexity
5. suggest the box
6. Reuse and recyle
7. microformats

Microformats, building blocks and you

Tantek Celik

My second time to see Tantek, who offcourse presents on micoformats. He gives more examples of real world usage, showing that microformats have matured a lot. Last year he spoke of how it should work, now he was (not quite) gloating.

The standard is a good way to mark up several things and is going somewhere. The examples are really good and show how you can use Microformats in your everyday projects. I for one can use them very well at my currect project. And to be honest, marking up anwb in microformats will be pretty cool on my (h)resume.

When web accessibility is not your problem

Joe Clark

This was when fatigue kicked in, after a very long day, I sadly had to leave this one to others. Afterwards I heard that it was quite good and I will certainly read his slides.

Notes are available here

The new design is NOT tested in IE, so if you find anything wrong with it, please drop me a line. I will try to fix things as soon as possible, but it does not have my highest priority.

If you find that things are not usable, that is another thing. Those things will get my on my high priority list right away.

So, please share my faults with the rest of the world, or IE's depending on who's point of view you share.

After a couple of months, I decided to redesign (realign) my site yet again. I still rather like it. The illustration at the top is one of my personal favorites, not in the least as I created it for the birth card of my youngest son 'Pieter'.

But there were some usability issues that concerned me. Not that I lost any sleep over it, but still. There was way to little crowd participation in the form of comments and stuff. People didn't find it easy enough to navigate to other pages and such. So I changed the whole bit. Keep reading to learn what I have changed, that you can see. But more importantly, why?

The comments are now fixed on the left side, or at least for people who use decent browsers (cough, not IE) to make it easier to comment. After all, it saves you one click. In the previous version of the design, you had to click the link (which had a non obvious text), to get to a seperate comment page. That didn't quite made sense, didn't it. Now you can comment as you read.

Future versions will include the fixed comment for IE and a live preview of how your comments will display..

The links to the next and previous articles are

I removed the AJAX search box. Blasphemy, I hear the crowd shout, thou willst not remove any of the holy AJAX thingamics. And to make matters worse, in daily life, I implement that functionality. But let me explain my decision, so hear me out;

In the previous version of my design, the search box had a 'google suggest' kinda functionality. You typed and a max of 10 results dropped down below. Those results were reachable with the keyboard, so far so good. BUT, it didn't always work as planned in all of the browsers that I tested it in. And the results that you got were short and sometimes that hindered me. As I have always said, this is my site, so I call the shots. So for my own purpose, a seperate page with the search results is more usable, the results are displayed with more detail, so I can have more information on which I can make my choice.

All of the css stuff is now standards and I have yet to implement some IE 6 and below fixes. The fixed comments are not fixed yet in IE 6 for instance and I think more things will tend to go wrong. At this moment I will not worry about it, as the majority of my readers do use a proper browser. I will create a seperate post, just to collect the comments on things that go wrong.

Many websites and applications struggle with the same difficulties, how to create a visually attractive frontend without reverting to too much extra elements. Web standards savy developers struggle each day to keep both ends happy.

WARNING, rant ahead!I beforehand apoligize to any designer, developer or whoever is hurt during reading this. A small warning, if the shoe fits...

In the one corner the 'too hip' designer, who thinks that adding just one more subtle line or shadow finally earns him the respect of his peers.

In the other corner, the 'I'm too damn good for front end' java (or .net for that matter) developer. Who doesn't blink as his IDE or framework of choice generates just one more superflues div extra. After all, it isn't his problems, that is for the 'frontend guy' to solve.

This is the tag team that I, and many web developers with me, have to defend myself against. Enter the latest trick in the book. Using the <body> element for styling.

As some people know is that minimizing code is one of my favorite thing to do. It is almost sick, but I can enjoy a proper markup, fact is: I read them on the train. This little private thing aside, I am a fully adjusted member of the human race and all, but still. Some people write code like poetry.

So when I came across an idea to minimize my daily clutter of superflues div's that are being thrown into my code by either designers of (in my case) java developers, I rejoiced.

I have used a container div in my markup for years, when I needed one or when I thought I needed one and I stopped thinking about it all together years ago. It was just something you did, something you needed. But today I wondered if we needed that div.

The common practice for me was all this years, to start with a container div, no doubt straight out of the Alistapart bible. It was so common for me, that I hardly even thought about it, untill now. Why is it that we all start with a div?

Why, to style offcource, to give a certain width to the pages content, to center it and what not. But all of these things, we can do on an element which is allready in the page, something that is needed for the actual framework of the html page, the <body> element. Sometimes things are that obvious that we don't even see them even though they are as plain as day. So instead of doing:

We just go:

Sure, it is only one div that we take out, but look at the principle. Once we start out with one extra element, it will be very hard to stop from adding just one more. It will become a slippery slope and once you start to slide, there is no stopping you.
With this extra div, what is one more and remember the tag team? They will say, if you can add an extra div, so can I.

After all it is just one more.
Go and take a look at the css file for these pages, and you will see, that although I have a #page or other containing element present on each page, the actual styling takes place on the body. One of the main advantages is that I have only one place where I set the width, margin and other stuff. And therefor only one place where I have to change that if I ever decide to broaden my horizon and my pages.