It’s that time of the year again. The day when everybody stays awake and people change their wall decorations (so called calendars). And the time when everybody is nice to you, wishing you a happy new year. So… Happy new year everybody! :)

tip of the day/year:
While 2007 looked pretty good in serif fonts with variable number heights, 2008 does not. The over-sized 8 looks terrible. Get a new font for it.

It’s always hard to criticize your own work. Does it look good? Are there any things I should fix? I found the best way to do this, is to set your work as your desktop background. Let it be a design mockup, 3D rendering, photo, vectorization, … This way you get a lot of chance to look at your masterpiece and decide wether you like the look of it or don’t. And when you do, you’ll notice some small details, that you wouldn’t otherwise - this could be any errors that you should fix, or points of interest that you might want to emphasize.

I used this principle a lot when doing car vectorizations. After spending hours making one (The lambo took me about 30 hours I believe) all I could see in them were lines, shapes, gradients, etc. But by using them as background, I could look at them from another perspective, a perspective others would look at it. It helped me fix those small details, that make the difference.

Just yesterday I was looking for a new background for my desktop. I was googling around, searching for a nice pic, until I remembered, I have quite a collection of nice photographs - why not use my own? So I went looking for a photo of mine that I’d like to constantly look at. I decided on this one. Before, I didn’t really consider this photo as anything special (good, but not all that), but using it as a background, I’ve realized how much I really like it.

So I guess this is just the best way to judge your work - just look at it. Don’t open it in photoshop to look for any errors. It will only make you feel bad about how many there are.

Some people may also prefer printing their art and hanging it on the wall. I do this with some vector drawings, since they’re just too plain for a decent background. As long as you look at the work in a relaxed kind of way, you’ll see how it really is. If you tear it off your wall or change the desktop background in a few hours… it’s probably bad. Back to the drawing board then.

A very short post this time, but this just too funny for you to miss :)

A month ago I wrote a post about web 2.0 and expressed my hate toward a web 2.0 design style. But what if everyone did things the web 2.0 way? Let’s see…

Apple

Coca Cola

National Geographic

Nike

MasterCard

See the full list

This is quite a popular buzzword nowadays - web 2.0. Some people have migrated to web 3.0 as well. So, what is this all about? Where do I download the new version? Many people have heard the term, many follow its directions, but very few really know what it is (and what directions they are really following).

It seems the term “Web 2.0″ was first used as a name for a conference, held by O’Reilly in 2005. The basic idea was, that the internet was/is becoming a social network, rather than just a collection of information. We were no longer just readers, but started contributing to the experience. This was the rise of blogs, wikipedia and flickr, to name just a few. More on this at O’Reilly - What is Web 2.0

Just 5, maybe 10 years ago, how many people you know, were using the internet actively? A few.. and they were probably referred to as “geeks” or such. But was internet not a social network back then? We had bulletin boards (or forums, if you prefer), we had ICQ, we had irc (or was it mIRC? ;) ). So why wasn’t it popular back then? Besides dial-up being slow and expensive, I believe all of these were too complicated for the common people. They were afraid of them.

So what is popular nowadays? Blogs… Starting your blog at blogger or wordpress is just a few clicks away. Commenting on them just requires your name and maybe an e-mail. Compare this to endless signup forms of forums and you’ll see why this is big.

And then there are social networking tools, such as myspace or facebook. It’s now as easy as ever to put yourself online and show yourself to all of your friends. But the technology existed years ago. Does anyone remember The Geocities page builder, back in 2000? It was a nice attempt, but still too complicated for the majority.

I skimmed trough Web 2.0 how-to design guide today. Let me sum it up for you - Just follow this little step:

1. Make it simple

And this is what web 2.0 really is. The end of endless forms, dull hierarchical navigations and cluttered pages. And by accomplishing this, “other people” can navigate the web without feeling lost. Plus, they’ve started contributing. Communicating. Everyone can upload his or her photos to flickr. But would they have done it if they had to connect to ftp.flickr.com on port 19752, using passive mode transfers and upload their photos to ~/www/photos/gallery ?

So, what do we, web developers learn from this? If you want people to use your pages, make them simple. Forget the nonsense, cut to the point.

And what about the web 2.0 design principles? Glass surfaces, reflections, shiny buttons? I’m sick of them. Sure, I do such designs - but people seem to expect that from me. And people seem to enjoy clicking them. So if you’ve read this far just to learn how to make a shiny website design, I feel sorry for you. I really do.

I can barely call this a redesign, hence, just an update.

Two things were bugging me with my old blog/portfolio design:

• No integration between the blog and portfolio
• No sidebar on the blog

So I decided to fix this. With my lack of time I went for just a little refreshment, not a whole new thing like I used to do every year or so. I really wanted to use nice typography in the design so I downloaded the anivers font by Jos Buivenga. I love it. This means though, that my title fonts are all images. It’s bad for accessibility, but I did my best to do it properly. So all image fonts are big enough to read comfortably and all the images have proper alt texts.

Some other enhancements are:

• Photography is now in the portfolio
• Blog also includes two most recent flickr photos
• I’m now using tags properly in Wordpress. This means I can have tag clouds. Yay! :)
• Blogroll.

I hope you like the design. Comments (positive as well as negative) are welcome.

We spend a lot of time reading text on the internet. This is mainly read on our computer screens. But reading information on a computer screen is far less comfortable than reading it on the paper. Because of that I often print out some longer articles to read them. And I’m amazed by how little people take care of such readers. Most of the time I get a paper full of useless info and links, which I can’t click anyway (or at least clicking them won’t do anything).

Example - CNN.com is a decent news website. A random article on the site might look something like this. Quite ordinary, really. But try printing this article. Or better yet, click “print preview” to save precious paper. See how bad it is? It is full of information you don’t want. I’d rather copy the news text into a text editor and print it there.

Now try doing the same with this article on A List Apart. The printed page does indeed look like an extract from a newspaper or a magazine.

“How do I accomplish a proper printout then”, I hear you ask. There isn’t much to it really. When presenting content, a browser knows which media it is rendering for. For instance, when reading a page on our computer display, the media is “screen”. For printed pages, media would be “print”.

One can specify the correct media type for each stylesheet on the page. Therefore this would include all the rules to show on screen:

<link rel="stylesheet" href="style.css" type="text/css"
        media="screen" />

And this would do it for a printed page:

<link rel="stylesheet" href="style.css" type="text/css"
        media="print" />

Now, does that mean you must create two css files, one for screen and one for print? No. You can cover both by saying media="all". So what I usually do, I create a default stylesheet with media="all" and include another one for print just bellow it. In there I rewrite some rules, which should be special for a printed page.

Things to look for are:

Removing unneeded elements

Interactive elements such as menus, banners, form elements, etc. might be useful on your page, but are totally unneeded on a printed page. You can specify a display:none; for them in print css.

Units

Primary screen units are pixels. But what is a pixel on the paper? This depends on the DPI, but you probably don’t want people with better printers to read smaller font. So try using units such as points (pt), millimetres (mm) or inches (in). A good font size would probably be somewhere between 10pt and 12pt

Colors and contrasts

Keep in mind that not all people will print your site in colors. Do check how your text and graphics look in grayscale. Fonts are usually best if black.

Backgrounds

By default, most browsers won’t print background images. So make sure your content looks ok without them.

Page width

The paper’s width isn’t 1024px or 800px. It’s usually 210mm (8.27 inch) for A4 or 8.5 inch (215.9mm) for letter. But there are paper margins to consider. I think you’re best of by not specifying any width at all, or doing it in percents

CSS does include some special rules for paged media, but as you might have guessed, most of them don’t work well in today’s browsers. The two that do seem to work, are page-break-before:always and page-break-after:always rules. These two, applied to an html element force a page break before or after it. Might be useful in cases such as when you always want a title to always start on a new page.

Preparing your website to print well usually doesn’t take much time. Just make sure to cover the basic stuff and do some test prints (different browsers and different printers, if you can). Visitors won’t get too bothered if there’s an input or a button visible, but they might get annoyed if a navigation menu doubles the amount of pages printed.