Posts in de categorie « webdesign»:

okt 19 2007

Slideoo: a cool tool for displaying your Flickr-photos

New to this blog: a flash-based banner on top displaying photo’s from my flickr-photostream. It’s on the homepage and on the archive page for this post (so if you don’t see it right now head over there

Was tempted into making this after reading on Mashable about a Belgian startup called Positiveluck, who just launched this service called Slideoo (or is it Slide∞ ?).

Writing a tutorial for this webservice would be quite simple:

  1. Go to slideoo.com

  2. enter a Flickr username (Preferably your own, if you don’t want to go into lengthy arguments with Flickr-users about whether or not an API can steal data)
  3. choose between a photoset or the photostream (newest photos on top) of that user
  4. Customize if you want small, thumbnail, medium or large images, and set options for width and the number of pictures to fetch)
  5. Hit “Create your Slideoo”.

Slideoo then quickly compiles the images into a horizontally scrolling flash-movie. It also provides you with the embed code to integrate your slideshow into the platform of your choice (Typepad, Myspace, Facebook, Blogger … most popular social networks and major blog platforms are represented through the magic of the cool widget-distribution network Gigya.

Cool, ain’t it? It ain’t eyepopping as other flickr-mashups as e.g. Tiltviewer, but I bet that will make you grow tired of it less quickly.

There is still room for improvement in the service, certainly:
The top functionality wanted would be to have a “random” function, so that on each reload the displayed photos would be different.
Another one is to distribute the flash-file, as integrating the thing on your blog now risks slowing down your site in two ways: the flickr-api has got to respond (but that’s taken care of by internet-giant Yahoo), nd slideoo has got to be able to handle the traffic.
And third: I’m sure some smart kid could write this in javascript + ajax instead of Flash, which could render it more accessible.


okt 18 2007

Gravatars on WordPress

Tech news of the day is that Automattic (the company behind WordPress, the blogging platform used by all wildly popular bloggers such as yours truly) has acquired Gravatar (a webservice that make it possible for a person to have one avatar across the entire web).

A gravatar, or “globally recognized avatar”, is actually simply an 8080 pixel image of your choice that follows you from weblog to weblog appearing beside your name when you comment on gravatar enabled sites. WordPress had it’s own competing avatar-system since August last year, but now will be able to compete better against rival systems such as MyBlogLog. They will now be integrating the two systems in a next release of WordPress.

Integrating gravatars on a wordpress-blog right now is not terribly difficult, as is clearly explained in the WordPress-codex. If you know your way around in the admin-area it’s just a matter of five minutes. Upload the plugin, activate it, and change one line in the comment-part of your WordPress-theme. The plugin takes care of “hashing” the email-adresses of your commenters, changing it into a link to an image on the gravatar.com website.

My php-code for a comment now became:
<li style="background: url(<?php gravatar("","","http://houbi.com/gravatar.gif") ?>) no-repeat;
padding : 0 0 0 100px; height: 100px;">
<?php comment_text() ?>
</li>

This sets up the gravatars as background images of a list and moves the comment text to the right. If the gravatar.com returns no image for a commenter a plain grey image is used.

Picking a gravatar for yourself is not very difficult either:
1. Go to http://site.gravatar.com/signup and put in your email address.
2. Go to your mail program, find the mail support@gravatar.com has just sent you, and click on the link inside the message.
3. Choose a password (you will need this if later you’d decide to select a different picture).
4. Create Your Default Gravatar. You do this by either uploading a file from your local computer or network, or by finding a nice image from the web. Don’t worry too much about the size of the image, you can “crop” (cut away superfluous parts) or scale the image in the next step.
5. Crop or Size Your Image. With the slider you can resize, with the square you can pick a different part of the image.
6. Select how “adult” your image is (a way for prudish webmasters to filter out knobheads from other kind of knobheads, wankers from other kind of wankers etc…).
7. Apply the image you’ve now created to your Email Address

Et voil, you’ve now become the owner of one shiny gravatar.

All that’s left to do after that in order to see your gravatar in all it’s glory here on this blog, is making a comment here.


sep 24 2007

New photo layout

With a bit of css and a bit of niftycorners-javascript, the pics seem to come alive much better. Kewl.

This picture is of a so-called “Pot Marigold” (in het nederlands: goudsbloem), an edible flower for the herb garden.


feb 16 2007

Styling alt tags

Would it be possible to style the alternative text that is displayed when an image does not load ( This is particularly useful for newsletters, as the default for most mail packages is to NOT display the images right away). My first reaction was: nah, this can’t be done. Second: uhm, let’s try. Third: well have you evah.

Turns out that by setting the text properties (style:text-align, color, font-size ..) of an image, which normally don’t have an effect as the thing IS an image, the alt-text of the image inherits these properties and thus shows up when the image doesn’t load.

That way in our latest vdab magezine-newsletter, we managed to style the head in such a way that the header still comes across well, and the decorative images are hidden ( color: white for those ones ). And that way, the mail still manages to look reasonably nice when opened at first. And it is super-accessible in the same go.

With images loaded: Without them:

Related, on the subject of alt-tags, read this accessibility blog entry: Should alt text be used to paint a thousand words?


nov 26 2006

Thinking Web (1)

Useful new sites, articles, newbies, tricks, discussions etc. from the world of webdesign, css, xml, information architecture, javascript yada yada, as I come across them.

… on CSS-organisation

Friendly Bit did a serious bit of thinking into the question of How to structure large CSS files. Apart from the indentation part – a very logical way to structure CSS for large projects indeed!

His advice to avoid general rules, handle things with specifics in context (#header ul li a {…} instead of li a {…} or even header a { … }) is the only way to more or less successfully “debug” a complex website!

And sorting the styles in alphabetical order instead of function-related might be a real timesaver if ever somebody foreign to your website has to tinker with its styles.
Other input on this issue:

… on CSS-lookups

Useful Google Coop-powered site for CSS-related issues (search a subset of Google’s web index): Skuer.

… on design tools

25 Essential Firefox Extensions for Professionals. One or two I didn’t know/use. Still find it amazing how this has become such a strength of Firefox, giving it a clear advantage over IE & co for the websavvy crowd.

… on AJAX

Cameron Moll invents a vocabulary for AJAX-effects: Responsive Disclosure, Magnetism, Data Brushing, Latency Reduction … Great to get on the same wavelength as another person you’re talking to, so make this an industry standard!


nov 21 2006

Links and how to improve ‘em

Came across this interesting Firefox Add-on called Link Alert.

It works by changing the cursor above “non-regular” links to indicate what will happen if you click it. Thus a link that leads to a word-document, will automagically have a “word”-icon next to the “hand”-icon if you hover over the link.

Although there are some minor issues with this add-on ( changing the options doesn’t take effect until a restart of the browser; There is no way for adding types by the user; What if the website-author already implemented some cursor-changes?; The icons could’ve been better designed …), I still think this massively useful!

In fact, I think this is a kind of behavior that should be implemented as the standard behavior in browsers (of course with an option to turn it off, for those that feel the visual overhead outweighs the usability bonus):

  • As Jacob Nielsen rightfully puts in his latest alertbox, this is an empowerment issue. The users that would benefit the most of this extra information on links (those that don’t really understand the concept of popups, new windows, pdf’s opening …) are not the ones who are going to install Firefox plugins.
  • There were already some very intelligent solutions, implemented on the best of sites to help the users understand what’s going to happen after clicking a link. But these rely on the intelligence and sensibilities of the webdesigner.
  • Add-ons/Plugins are bound to be less memory/performance efficient than a browser-native solution.

So, kudos to Link Alert, but I think this is an easy improvement to include in the next versions of Firefox, Safari, IE & Opera …


nov 7 2006

IE7 page zoom: is this for real?

IE7 finally made it easy to scale up/scale down the font size (‘ctrl’-‘+’, ‘ctrl’-‘-‘, or the ‘100%’ situated at the bottom right of the screen). Long time coming!

The IE7-team elected to go with “page zooming” instead of “font scaling” for this. This means not only the fonts go up in size, everything does. Opera 9 has this feature, and it works like a charm. A real bonus for the users: they can scale up, always, even if the designer had the anal idea of controlling his intended minuscule font-size in pixels or in images.

And then the IE7 implementation came around. It’s an unfinished work! Just look at a few of the horrible consequences it has on the layout of the website I work for (fluid layout, ems-based, so that it would scale together with the font-size the user chooses to look at the site in).

Just look at these (screenshots are from this page):

Everything scales, except for the page background (the vdab-logo is an image, blended in to the background):

The crumbtrail below is a bunch of <li>’s, text with a border-bottom, and a background image with padding/margin to have the text next to it:

And, cream of the crop, these are just a bunch of radio buttons and labels, stacked

Some blogbuzz/discussions on this:


Dit was pagina 2 van 212