Alexandre Van de Sande is Wandering About

• card
• reel
• bio

I think the actual layout for this website has a bit more under the hood that deserves mentioning. The site served as a testbed for some webdesign concepts I firmly believe in, not anything really new, but more designers should paying attention to those.

Designer design. Writers write.

Simply put: if a designer is updating the website content, if someone is manually editing html files, then there is something really really wrong going on. The trouble is that, if you, the developer/designer of the site is updating content, that means the client, that owns the site is not. Which means that he will not go to that trouble of writing anything new on the site unless it’s really important,in other words, almost never. A site that does not reflects the owner’s voice or isn’t frequently updated is a dead website. I cannot believe the number of colleagues that still uses some kind of wysiwig+ftp tool to make sites: wake up, blogging’s been around there forever. Setting up a wordpress content manager takes no time.

This site is built using a Wordpress Multiuser installation, with the following plugins: Tiger administration (which only I can see), Yet Another Photoblog (for the thumbs pages), and a Scriptaculous library (that’s what makes my card fade, for example)

Do not measure in pixels, but in type.

In the classic days where typography mattered, everything was measured in picas, x-height, EM widths. Then came the pixel and some arbitrary font sizes based on obsolete html tags. For ages now, the pixel was an immutable common grid for everything digital. This is not true anymore. Newer OS (including Vista and leopard) use vector based UI elements, so that you won’t need to reduce the resolution of your monitor to have bigger letters. Many new generation devices, as the OLPC laptop or the iPhone uses a 144dpi screen. Because the pixel is getting smaller, does that means your site also will?

So there goes the pixel away, and we welcome the Em back. By using a type based unit (the Em is equal to the point size of the current font) you are not only getting a more flexible grid for your site, but also preparing the web for high resolution displays.

This site uses a almost Em only sizing, which you can see for yourself when you change the font size (crtl and + or cmd an + on your firefox). The exceptions are for the images, such as the icons for the header menu.

Optimized to 640px or 40″

I get upset when someone starts discussing about the fact that “our userbase is using more and more 1024 screens” or if we should design for which browser size. Following the past buying trends is antonym for getting ready for the future.

First because there is no such a thing as a typical screen size, as we move in a world of small-screen-phones and big-ass-table computers. Also, the fact that I have a lot of screen real state does not mean I am giving your filthy site much of it. Asking, as a designer, for my site to used in a maximized, toolbarless window, is at minimum, to be arrogant.

This site is not build on a fixed grid, but on flexible “I need a little more margin here please” set of rules that accommodate the content.

Invisible microformatting

For years internet visionaries have been predicting the day that the internet will be a very smart database readable by computers. The web reinvents itself every other day, mostly into stuff whose point is rarely understood by most people, even less by machines. That’s why microformats are important: a set of simple invisible tags that help your site be indexed by the next google bot, the next browser, the next operating system and most next big things.

The “card button” shows you my hcard, a set of contact information that can be styled into mostly anything using css, and understood by most computers.The “download as Vcard” link, for example, is nothing but a technorati service that automagically convert’s it to me. All entries on this blog use hAtom, that can convert any page in a rss-like format.

Aj…xed

Let’s move on, there is no such a thing as Ajax. It’s a term that normal users never need to hear and really power users understand simply as a bunch of other unrelated technologies. But the animation effects are cool. Click on the card again, just for fun.

Graceful Degradation

This site was built on a mac using webkit rendering engine that makes safari. It uses some cool, w3c-legal but rarely supported effects like drop shadows, and a Helvetica proprietary font that not everybody has. Also, some effects used, like png transparencies will be invisible for someone still using something as internet explorer 5. Yes, the site is not equal in evry user’s screen, but neither is every users computer. It’s good to relinquish full control.

Mac users, PC users, firefox users, Opera users, Internet explorer 5 users. The site is made to be good-looking on every platform, but there’s nothing truly wrong in making it even better if you use a more w3c compatible browser, a prettier font rendering engine or have some professional fonts, is there?