One thing I wanted to do was start converting the site over to html5. Really there isn’t much of a point at this juncture other than it is more semantic and simple to make the change.

For example historically I would code something like this for the header.

In HTML5 it would be more semantic and may look like this…

Pretty easy eh?

That takes care of the compliant browsers but to get the new HTML5 elements to work in IE you need to use a little javascript called HTML5 Shiv. I am lazy and want to make sure I always have a current version so I just placed the following in the head.

Obviously this is just a piece of the conversion. I am still trying to iron out the final pieces but it should not impact the overall design.

“As a designer, your job doesn’t stop when you leave the studio at 5 p.m.  That’s why our environment is key – it provides constant input, a constant stream of ideas,” – Jae Min, Audi Chief Designer, Audi Magazine 02/08

This statment rings true for me.  While I may not be designing something as complex or complicated as an automobile, I certainly look for a constent stream of input and ideas.  This consent search allows me to find solutions to problems I have yet to encounter.  It also helps continuously refine ideas and views I have had about previously completed designs.

The first concept is one that I continually struggle with as it begs the question of, “when is enough, enough?” For every product and designer this point is different. Sometimes you may have the resources to continue to refine it over and over. Other times you may need to make the decision to stop grinding the wheels and move forward with the application.

For my self I find that doing a complete design of something more than three or four times becomes counter productive. Typically somewhere in those first designs is the core of what the interface should be. From there it can be shaped into the best solution possible. But this shaping can only happen with a clear and detailed direction. Once that disappears all design work should cease. If the stake holders still have concerns they should provide a detailed direction for the project and refinement can then resume. If they cannot provide a detailed direction then the product should be reviewed by users (assuming time allows) or released to the public with the understanding that some fast fixes will need to follow.

While the second concept seems obvious it requires you to ask a few questions. The fist one that is often asked is, “is it better to make all of the people happy some of the time or some of the people happy all of the time?”  I would argue you cannot do either of these. The best you can hope for is to make most of the people happy most of the time.

The tricky part then becomes defining what “most” and “happy” means. I believe “most” is as close to 95% as economically possible. “Happy” is really a measure of contentedness with the product in question. Again the issue becomes relaying this information to stake holders who would like to see all customers happy all of the time.

Similar to the first concept, refinement work should cease when detailed direction stops flowing from the stakeholders, even if there are still members who feel the product isn’t “ready”.  This is because it is not productive to simply say something is wrong and not provide any explanation of why it is wrong or more importantly how to fix it.

Finally the hardest part about both of these concepts is that they feel like an admission of failure.  You have to stop work when you may feel like it could be better.   If you are anything like me this is a hard pill to swallow.

On the graphics side the biggest mistake in my opinion is the failure to define a base font size. This means that the size is dictated by the default browser configuration, something that most people never change. For Windows Firefox users the default size is 16pt which is typically a little large for Web text. This gives the entire site a cartoon look. I understand that this might have been done for accessibility reason but there are other alternatives that would have allowed for a better controlled experience.

From the interaction standpoint many of the common feature such as digging, commenting, and burying have remained mostly unchanged. Personally I think the big failure here is the integration of video into the front page. This forced a redesign of the navigation which until now was excellent. In fact I have pitched similar designs and people recognized the similarities and even referred to it as “Digg style navigation.” While the new design maintains many of the elements of the previous it has added a drop-down menu system accessed through multifunction buttons. This can be confusing to casual consumers. With each click you may end up with different results.

Overall I think the previous design is better than this current iteration. Sure there are some interesting additions but I think they are really just feature fluff. I look forward to seeing how the public sees the new changes.

[Update] I just found this post. It looks like there might be other problems with the new Digg.com redesign.

For this tutorial you will need to have a basic understanding of XHTML and CSS.

First comes the HTML. Generally your logo is nested in the header like this.

To make this more accessible and for it to degrade gracefully we really want to eliminate the “img” element and in turn use a text elements like this

In the above case if a user views the page un-styled they will simply see an H1 header link with the name of your company and any other text you place inside. This allows search engines to read the actual logo in plain text and assign this text an important value (first H1 elements are seen as important). It also improves mobile device structure as many of them don’t like images.

Now we can use CSS to make the image based logo appear where we want it and more importantly how we want it (image). We only need to style two elements, the ‘H1′ and ‘a’ tags.

In the ‘H1′ element you will notice that we gave it a text-indent of -9000px. This moves the the text far enough off the left side of the page that even with the largest monitor it is not visible. By doing this we ensure that pesky text doesn’t sit on top of our beautiful logo.

The next unusual piece you will find in the CSS is under the ‘a’ element. “Display:block;” renders the ‘a’ element as a block level element allowing it to have a fixed width and height.

Now you have a beautiful logo that degrades seamlessly and is extremely accessible both to humans and search engines.