Identity management

Written at 17:56, on Monday 3 March 2008. Tags: personal website .

My website anno 2008

As the World Wide Web continues to evolve, people use it for increasingly personal and social purposes. The current social networking sites are quickly gaining critical mass, moving the adoption curve forward from an early majority to the late majority. In the Netherlands, Internet usage in is still rising, and the skills of surfers continue to improve. According to the Dutch bureau of statistics CBS, more than 2 million people have designed a webpage.
As we put more of ourselves online, our identity expressions become more and more shattered throughout the web. Facebook, Flickr, Last.fm and Hyves all represent a small piece of me and my online identity. Bringing these all together will take a couple of years, although with developments like OpenSocial, OpenAuth and OpenID the first building blocks are in the pipelines.

Anyway, the whole reason of this introduction is that I’ve made a small step in consolidating my Web presence – I have now merged my portfolio into my blog. I really liked the design of my portfolio so I tried to keep as many aspects of it as possible, and only made small tweaks as necessary (although there are many of them…). There are some big improvements to the design though, mostly fixing mistakes from my last redesign.

First of all is a return of a navigation block at the top of the page. Since the previous incarnation only had two really big sections (the blog and the links), I didn’t see a need for a permanent navigation block. But it’s back with a vengeance, sporting a shiny jQuery-powered rollover effect.

The journal itself now boasts 10 entries again. This means more scrolling, but less paging, which is a Good Thing. This is more conform the Mullet-style layout I originally intended for the journal.

My elsewhere section, where I aggregate all my favorite website links, has dramatically improved thanks to the use of a four-column grid design. It’s one of those improvements that seem so obvious in rertospect that I wonder why I didn’t come up with it sooner. I’ve also increased the item count to 100, which is quite hefty, but very manageable. I found myself getting caught up browsing through my old links again, re-discovering old gems!

Thanks to the power of Drupal, I’m able to organize my portfolio in some pretty cool ways. Using the taxonomy module, every portfolio item is tagged with the medium or technology in which it is created. With the books module I created 5 distinct sections through which you can browse: my current freelance work, C-MD work, Solide work, print, and my early art work. For the landingspage I decided to use large thumbnails, giving an immediate (and for some, sufficient) idea of my work. Clicking on the images shows a larger version in a lightbox, while clicking the title or the casestudy link will take you to the permanent link of a portfolio page.

Getting this all to work in Drupal the way I wanted to involved some heavy themeing work, which I’d be happy to write up if anyone’s interested. Unfortunately, there were quite some places where I couldn’t override a theme function or manipulate Drupal’s HTML output (I’m looking at you, Views module), and it was time-consuming to find the proper way to handle these cases. I resorted to manipulating the DOM with jQuery to fix some annoying bugs.

I made no effort whatsoever to get this working in Internet Explorer 6. I don’t intend to either, unless anyone has compelling arguments otherwise. Less than 4% of my visitors uses Internet Explorer 6, which is such an insignificant amount that it doesn’t warrant the extra development time and headaches.

Add comment. (1 total) |

1 Comment so far

Some minor updates: I fixed the elsewhere and portfolio pages for Internet Explorer 7, apparently, floats that are cleared are not put on the same height as the first adjacent one, causing strange layout glitches. Will need to look up more about this behaviour, for now, I used jQuery to insert an empty <div> which forces IE to line up everything in the same rows. Maybe I should just rewrite this layout with tables… (in CSS of course!)

I also implemented lazy loading, but again, IE doesn’t play along nicely. Works very good in Firefox and Safari though, improving page loading times from 15-17 seconds to 2-3 seconds!

Jeroen Coumans on

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You can use Textile markup to format text.
  • SmartyPants will translate ASCII punctuation characters into “smart” typographic punctuation HTML entities.
  • Insert Flickr images: [flickr-photo:id=230452326,size=s] or [flickr-photoset:id=72157594262419167,size=m].
  • Web page addresses and e-mail addresses turn into links automatically.

From the portfolio

  • Escher

About this website

My name is Jeroen Coumans, I'm a freelance web designer, front-end developer and Drupal ninja from the Netherlands. I love to create beautiful, usable and accessible websites. On this website, you can find my portfolio as well as my personal weblog. Interested in hiring me? I'd love to hear from you.

After completing my BA in Arts and Culture I'm now doing a MA in Communication and Multimedia Design. More …

Elsewhere

Script to update Drupal teasers | be fused

"One of the annoying things about changing the number of characters for teasers in Drupal is that you have to edit and save every single node (page, story etc) for the change to take effect. Well, it doesn't have to be that difficult, because here is a nice little script that will update all of the teasers at once."

Add comment | Visit site …

Degrading Script Tags

Reducing the number of tags required for loading an external javascript library by combining them into one tag. "Only one tag – and the semantics would work like this: The external script would attempt to be loaded (as normal). If the load and execution was error-free then the internal script would be executed as well. If the load or execution failed then the internal script would not be executed. "

Add comment | Visit site …

Aurora: What Is Internet’s Atomic Level?

"For Aurora we saw an opportunity to change the browser’s focus from the page to the individual “object”. Giving users the ability to interact directly with the atomic parts of a given web page offered greater personalization of their Internet experience. " This has interesting repercusions for webdesign as well.

Add comment | Visit site …

The Joker Action Figure

These toys set a new bar for realism.

Add comment | Visit site …

Google Chrome Process Manager

John Resig, jQuery creator & Mozilla hacker, writes about the significance of the process manager in Google Chrome: "The blame of bad performance or memory consumption no longer lies with the browser but with the site."

Add comment | Visit site …

Surface: een Natural User Interface

(dutch) An overview of the Natural User Interface, a term coined by Microsoft for their Surface concept.

Add comment | Visit site …

Official Google Blog: A fresh take on the browser

Should be released any time now, curious if the screenshots in the comic are like the browser.

Add comment | Visit site …

Mozilla Labs » Introducing Ubiquity

Ubiquity is "experiment into connecting the Web with language in an attempt to find new user interfaces that could make it possible for everyone to do common Web tasks more quickly and easily." A command-line for the web, connecting services through a hotkey.

Add comment | (1 comments) Visit site …

Mariët Ruiter 3150801: Kritische literatuursynopsis

Critical comparison of mine and Selwyn's vision on the Digital Divide.

Add comment | Visit site …

IEBlog : Internet Explorer 8 Beta 2 Now Available

Will Microsoft make new virtual machines available for testing purposes? I hate buying another Windows license just to get my testing setup of IE6, IE7 and IE8 complete…

Add comment | Visit site …

Subscribe

Or choose one of the single feeds:
Journal feed | Elsewhere feed