webdesign

All articles related to web design, in the broadest sense possible.

Written at 18:35, on Wednesday 7 November 2007. Tags: c-md webdesign .

37signals state that they don’t use personas because:

“We use ourselves. I believe personas lead to a false sense of understanding at the deepest, most critical levels.”

Personas are poor substitutes for real people, they argue, and you should always base your decisions on the problems and behaviour of real people instead of passive abstractions of people. This reasoning fits perfectly with their “getting real” process, which argues for a very agile development process.

Comments closed |

Written at 14:29, on Wednesday 19 September 2007. Tags: drupal usability webdesign .

Open Source WYSIWYG editing in CMS still sucks, but with developments like the WYMeditor (“What You Mean” editor, built on jQuery) the situations is improving steadily. This editor lets content writers focus on the structure of their document instead of visual layout. As you can see, this editor provides subtle clues about the type of content you’re currently editing with a clever stylesheet. Unfortunately, the WYMeditor is still in early beta, and Drupal’s module lags a couple of versions behind.

WYMEditor in its default configuration

Comments closed |

Written at 13:15, on Wednesday 19 September 2007. Tags: drupal portfolio webdesign .

LUX Homepage

Lux is one of the biggest Art houses in the Netherlands. It’s a home for international cinema, theater, music, debate, multimedia and visual culture. Their old website was based on ancient code (frames!) and design and was manageable by just one person. For their new website, Lux decided to go with Drupal instead and brought in the help of Webschuur, Guruburu and myself. Under visual direction of design and communication agency Wunderbar, I translated their Photoshop mockups to the Drupal theme you currently see.

Comments closed |

Written at 17:45, on Tuesday 11 September 2007. Tags: webdesign .

Despite the extra required <div> tags, I regularly use the Yahoo! UI grids framework. This provides several advantages when buidling multi-column layouts with CSS. Besides speedy development and source-order independence, it gives you a lot of flexibility when creating your site. More practically, it's extensively tested in A-grade browsers which includes the ancient, but still widely used Internet Explorer 6). Lastly, they're almost completely driven by classes, which means you can add your own, semantically chosen, id's.

The default widths provided can be used for pixel-precise layouts while maintaining font-size based scaling, but there's one curious thing about the default grids that has always bothered me. For the left sidebar, they provide widths of 160px, 180px and 300px, while for the right sidebar, they provide 180px, 240px and 300px. This asymmetry has bothered me long enough, so I whipped up some code for two additional sidebar configurations: the left 240px sidebar, and the right 160px sidebar.

Comments closed |

Written at 11:24, on Thursday 23 August 2007. Tags: drupal portfolio webdesign .

Edupaper is an innovative company with a green goal: it intends to reduce paper use in education by implementing mobile applications. Using electronic paper will reduce the number of books students need to carry, and in effect reduce the number of trees which have to be cut for books that students. Furthermore, by equipping and connecting them with Open Source Software such as Dokeos, it will enable students to learn more efficiently. Of course, when Frits Hoff, CEO of Edupaper, approached me for designing his website, I gladly accepted.

Screenshot of the new Edupaper.nl design

Comments closed |

Written at 13:02, on Saturday 2 June 2007. Tags: javascript webdesign .

Not every website needs to be powered by a content management system, or even a simple blog engine. Sometimes, a fully powered CMS like Drupal or Joomla is just a little too much. Sometimes it’s not even possible to use a database and all you have is your webserver, maybe equipped with PHP or ASP. For a simple website, it’s even overkill to add the complexity of a database, and all you want is just some folders with static HTML files in them. But to make it easier to maintain and expand this website, you create some simple templates for the header and the footer, so you don’t have to change all files if you need to change the copyright date or the tagline. These are included via some server-side processing, for example, with Apache server-side includes, or PHP includes.

But then you run into a roadblock when you try to maintain your navigation in a similar vein. Being a good standardistas, you use an unordered list for your navigation, and use CSS to present it. But in your navigation, you want to highlight the currently viewed page, since this greatly enhances the usability of your website and lets readers know where they are. And that requires a predetermined strategy to setup and maintain, such as using body id’s and menu id’s, or using PHP to match the page with the proper menu. These solutions have some drawbacks which led me to investigate an alternative solution. In this article, we’ll look at some common techniques for highlighting the current menu item in an otherwise static website, and at a Javascript-based solution.

Comments closed |

Written at 00:05, on Wednesday 9 May 2007. Tags: c-md javascript webdesign .

A large part of the discourse on web development today is focused on design patterns and interface components. But what are they exactly, how are they useful and how can they change the way we work? More importantly, what are their limitations, the scope of their application?

Design patterns are sort of an evolution of the style guide, which we are familiar with from graphic design. But while the style guide documents and prescribes the use of graphic design for communicating a certain brand, design patterns abract common problems in interaction design. A common examply is undo functionality.

Comments closed |

Written at 11:34, on Tuesday 27 March 2007. Tags: drupal portfolio webdesign .

We just launched the new Moulin Blues website!

Moulin Blues Archive page

Comments closed |

Written at 11:37, on Wednesday 21 February 2007. Tags: c-md webdesign .

We have now entered the age of the audience. Audience is the new currency for determining social status. The more audience you have, the higher your rank. And social websites like MySpace, Digg and YouTube are perfect examples of this. In feudal society, you are what you’re born; in consumer society, you are what you buy; in the Information Age, you are who you’re watched. I wonder, is everyone turning into a simulacrum, constantly re-representing themselves, pushing their identity until there is no original left? Or worse (applying the participation inequality rule): are we all turning into a silent audience of lurkers?

Google Idols winners Pomme and Kelly gained world-wide fame with this playback video.

Related reading: article on how privacy is redefined by a new generation in NYMag. And the classical essay by Walter Benjamin on originality and audience: The Work of Art in the Age of Mechanical Reproduction.

Comments closed |

Written at 22:57, on Thursday 11 January 2007. Tags: personal webdesign .

Together with the launch of my portfolio, I decided this site needs a visual facelift as well. So here it is. I know redesigning isn’t as hip as realigning, but the changes are just too much.

My blog anno 2007 - a typical journal entry

I’ve ditched the three-column layout and used two columns (or even one) throughout the site. The footer is three-column though, and it has all the navigation elements to make it more useful. Colour-wise, I’ve tried to get the best of both the dark and light version of the previous version of this website, and of course incorporated the new logo. Furthermore, I bumped up the base fontsize to 12px Verdana (scalable, of course, in every browser). If that’s not enough for your , try the font-size controls next to the logo, which bump the base font size up to 18px. Finally, I’ve made sure that the main text has enough contrast, which goes a long way to a more accessible website.

Technically, this website is still built on Drupal 4.7 (will try to upgrade to 5.0 as soon as the Textile module is ported), and I also use the Yahoo! UI library for it’s CSS framework. I’ve also retained the moo.fx-based Javascript enhancements, although I may migrate them to JQuery once I upgrade to Drupal 5.0, since that’s built in.

All in all, I think this design greatly simplifies the website and makes it consistent in brand with the portfolio. It also creates a softer and friendlier face, despite the brown colour palette. What do you think?

Comments closed |

Written at 01:07, on Wednesday 20 December 2006. Tags: webdesign .

My new logo

A big part of setting up a business as freelance webdesigner revolves around creating your own personal branding. So I thought long and hard about the brand I wanted to create for myself, and this is the result.

I think it communicates elegance and dynamics by the use of strong diagonal lines, passion by use of hot colors, and professionalism by use of a balanced composition.

What does it communicate to you?

(If you’re interested, the fonts used are Porcelain and Adobe Jenson Pro.)

Comments closed |

Written at 20:51, on Saturday 5 August 2006. Tags: accessibility dutch webdesign .

(In Dutch only). Changes in the accessibility guidelines for governement websites in the Netherlands.

De Nieuwsbrief Advies Overheid.nl van 12 juli bericht over enkele wijzigingen in de aanbestedingen van het bouwen van websites voor overheden:

Het besluit schrijft voor dat alle nieuw te bouwen websites van de rijksoverheid vanaf 1 september 2006 aan de Webrichtlijnen moeten gaan voldoen. Bestaande websites moeten uiterlijk 31 december 2010 aan de Webrichtlijnen voldoen.

De Webrichtlijnen zelf zijn ook aangepast: het onderscheid tussen de Optimale en Minimale Set verdwijnt en de Web Content Accessibility Guidelines (WCAG 1.0) is toegevoegd als richtlijn.

Comments closed |

Written at 22:10, on Wednesday 19 July 2006. Tags: javascript usability webdesign .

Thanks to a fairly hacked-up version of Jehiah’s Table of Contents script, I’ve added my share of progressive enhancement to what are otherwise long and boring articles. I’ve looked at a number of promising TOC generation-scripts, but couldn’t get them to work (the first threw me this Javascript error: span(error). “tagDetail[i] has no properties” while the second returned this error: “this.stack0 has no properties”. The demo’s worked though. Strange). So I returned to this old faithful, and enhanced it somewhat.

Comments closed |

Written at 12:11, on Monday 17 July 2006. Tags: javascript webdesign website .

This article refers to the fifth version of this website.

My blog anno 2006 (light variant)

As I promised in dynamic text zooming, I made some improvements to the text controls. I also added the option to switch to a light design (click on the lightbulb!). All thanks to the use of CSS for presentation, semantic XHTML for structure and content, and Javascript for interaction and behaviour.

Comments closed |

Written at 11:06, on Wednesday 12 July 2006. Tags: accessibility webdesign .

If you think the text size on this website is too small, there are several things you can do about it. In almost every browser, you can choose View – Text Size to increase or decrease the text size; most browsers even provide keyboard shortcuts like CTRL+ and CTRL-. Some browsers, like Firefox, Safari and Opera, even provide a convenient way of setting a minimum text size. Not many people know these commands though. And Internet Explorer won’t let you resize text which is set in pixels. A designer must use a unit like em’s or percentages to set font sizes in the CSS, like the Fonts CSS in the Yahoo! UI Library has cleverly done (and which I thankfully use on this site).

To provide people an additional means for font sizing, I’ve implemented two links at the top of the logo – not too ubtrusive, but still easily discoverable (I hope at least – feedback welcome!). Clicking the “Large” link will dynamically grow the fontsize 40%, clicking the “Regular” link will shrink it to the original size. It’s a nice effect with obvious accessibility enhancements. I used the excellent moo.fx Javascript library for the effects; I have very little Javascript skills so I was glad it was ready-made. It even retains your choice by setting a cookie. It has some important disadvantages though:

Comments closed |

Written at 16:54, on Friday 9 June 2006. Tags: accessibility webdesign .

Websites van Zuid-Limburgse gemeenten zwaar onvoldoende

Last year, I supervised an accessibility review of the websites of 19 local Dutch councils. The research was executed by students from the Hogeschool Zuyd, Communication & Multimedia Design, who were instructed to use the web guidelines from our governement. These guidelines form a framework with localized transcripts of international accessibility guidelines, best practices and some suggestions on how to use them for evaluating websites. Decent background information on this field proved to be essential for the students to complete their research, hence I was consulted frequently. The results were dismayal, to say the least. There was just 1 website which used a valid Doctype, a large majority used frames (directly against all guidelines) and some even used Javascript browser sniffing! None of the pages we tested validated, and we saw a lot of copy-paste from MS Word. Keyboard navigation was extremely difficult in some cases, forms were submitted with Javascript instead of a POST, and fly-out menu’s were used in the worst kinds of ways.

A couple of months ago, Ellen finished the final report (I’ve only written the chapters which were directly about the research) and we sent it to the local councils. Unfortunately, there were few reactions and even fewer intents of improving the websites. Half a year after the research, we finally decided to go public with it and sent a press release. Besides some local fame (Ellen got interviewed on tv, I was interviewed for a local newspaper), we also received some reactions from the technical people at the councils, who were more then interested to use our results to improve their websites.

Comments closed |

Written at 08:19, on Wednesday 26 April 2006. Tags: usability webdesign .

Printing on the web is still a chore. While CSS offers rich print output via the CSS print media type, both browsers and websites still (mostly) do a lousy job of them. Here are two suggestions for browser makers.

Comments closed |

Written at 11:48, on Saturday 1 April 2006. Tags: webdesign website .

A typical website has several “standard” elements which appear on each page, such as a logo, one or more navigation area’s, a content area and a footer. Most of the time, these elements are also displayed in this order: logo at the top, content in the middle, navigation at the top and/or sidebar, and footer at the bottom. This visual configuration is also a clear hint at the relative importance of each of these elements: the brand or identity at the top is relatively more important then the copyright information at the bottom. Sounds straightforward, doesn’t it?

Comments closed |

Written at 18:14, on Thursday 2 February 2006. Tags: webdesign .

A little known feature of Mozilla Firefox, which is particularly useful for web developers who wish to check their site in both Firefox 1.0 and Firefox 1.5, is the ability to run multiple Firefox versions next to each other concurrently. The trick is to start each version with a different profile so that they won’t mess up your settings and extensions.

Comments closed |

Written at 17:26, on Wednesday 25 January 2006. Tags: drupal webdesign .

I’m currently in the process of learning Drupal, and what better way then to build something in it? At least the static part of my website will be ported to Drupal (that means everything not under journal), although I may consider putting my blog under it as well. That means abandoning my beloved Textpattern, and I’m not sure I’m ready for that step yet. So far, Drupal is turning out to be a very good alternative for Joomla and Mambo, since it’s completely UTF-8 ready, valid XHTML Strict out of the box, some WAI-III complaint themes, clean URL’s, multiple sites with one codebase, multi-lingual, flexible user roles and customizable workflow, flexible hierarchical and non-hierarchical content organization, XML-RPC built-in, distributed login, advanced (and multiple) template systems and if that isn’t enough, totally extensible through third-party modules. Some of these features are still planned for upcoming Joomla releases, but they’re available in Drupal right now.

Comments closed |

Written at 17:19, on Wednesday 2 November 2005. Tags: personal usability webdesign .

Just wanted to say all those all two of you feedreaders that I’ve restyled my site a bit. I created it with Halloween in mind, but of course I managed to be a day late with this launch. I’ve achieved the worn look thanks to a set of brushes (via).

My blog anno 2005

Also check out my new contact form, which is now more or less unobtrusively enhanced with asynchronous javascript (aka AJAX). Thanks go to Dustin Diaz for sharing his ajax contact form after much begging and threatening. There are some improvements to be made to make it fully accessible and unobtrusive, for example, it doesn’t handle errors with PHP now, and there’s some hidden text in the contact form which is read by screen readers. But still great work for a 0.9 version!

Comments closed |

Written at 16:16, on Saturday 15 October 2005. Tags: webdesign .

Today, October 14th, the worlds’ standards bodies IEC, ISO and ITU celebrate World Standards Day. (The site seems to be slashdotted at the moment, but there’s a Google cache page available). It’s up again. It’s too bad that the developers of the websites of these organisations are so unaware of the importance of standards, thus causing the websites to violate every standard, unless you can call tag soup a standard. I’m referring to the underlying HTML code here.

Comments closed |

Written at 17:15, on Friday 7 October 2005. Tags: accessibility usability webdesign website .

This is just a collection of hacks I’ve implemented for my Textpattern installation, and a note on update management..

Comments closed |

Written at 22:22, on Wednesday 28 September 2005. Tags: webdesign .

Andy Budd recently had a change of heart on Macromedia’s Flash and considers its potential for Web2.0. Since it already solves a lot of problems that AJAX -based RIA‘s currently struggle with (such as maintaining state), he considers its current strengths as development platform: the Flash platform is already able to separate presentation and business logic, it’s asynchronous by nature, it’s fully object-oriented, etc. Like everything, I think web developers/designers should use Flash when it’s the best solution for your website (i.e. if it serves your business goals, your website goals and your audience). Nevertheless, it’s important to realise that Flash is still a proprietary solution, which is a serious drawback.

Comments closed |

Written at 12:41, on Sunday 18 September 2005. Tags: accessibility webdesign .

Joe Clark’s article on ALA, entitled Big, Stark and Chunky didn’t attract much attention at first. However, during his @media2005 presentation, he pitched the idea again and gave the audience a homework assignment to create zoom layouts for their personal websites and weblogs. Douglas Bowman was already half done when the presentation ended, and his is a beautiful example indeed. Apart from Joe Clarks’ original article, various resources, experiments and best practices have come up. But what is a zoom layout exactly?

Comments closed |

Written at 16:51, on Tuesday 30 August 2005. Tags: accessibility webdesign website .

Garret wrote about his Textpattern hacks quite some time ago. One which I’m surprised which wasn’t integrated into the recently released first stable version, aptly named version 4 yet is that there are no <label> tags for the comment form. Adding these in the presentation comment form is trivial, of course, but then your site won’t validate anymore because Textpattern doesn’t automatically generate the id parameter for the form elements. And as everyone knows, the reason for this is that it provides an explicit association to the form control for assistive technologies. For example, a screen reader will read the associated label for a particular form element if it has been marked up with a label.

So, how do you add <label> tags for the comment form while still keeping your site validated? Here’s how.

Comments closed |

From the portfolio

  • Grasscity producten pagina

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

Issuu and Smart Look for a better PDF viewing experience

A plugin that embeds PDF's, Word and Powerpoint files in a very cool, usable and fast Flash interface.

Visit site …

Palm Pre: everything you ever wanted to know - Engadget

This is the only device I would consider as replacement for my iPhone. Palm seems to have done some essential things right, like contact management by pulling data from various services in the cloud. I love the zoomable UI and the card metaphor for app switching.

Visit site …

Release:jQuery 1.3 - jQuery JavaScript Library

Some very nice features and performance improvements in this release, among which the Sizzle CSS selector engine (currently fastest avaiable), live events and much faster HTML injection.

Visit site …

jQuery API Browser v1.3

Improved and also available offline as AIR app.

Visit site …

A List Apart: Articles: Return of the Mobile Style Sheet

"What can be done for mobile browsers that do not read handheld style sheets, or parse CSS Media Queries? Short of ignoring them, there are two options."

Visit site …

Mapeed.AddressChooser API documentation | Home

Cool Javascript component that can be used for address collection in forms, combining HTML form and Google Maps for dynamic place retrieval and auto-completion.

Visit site …

Digital Ethnography

Blog of Michael Wesh, cultural anthropologist, professor of the year, and creator of the video "Web 2.0 … The Machine is Us/ing Us".

Visit site …

Components Versus Patterns

Analysis on the differences and commonalities between components and patterns. "Although the two concepts are strongly related, their differences warrant consideration to ensure you are building the type of library that’s right for you."

Visit site …

The State of the Web 2008 | Web Directions

"Welcome to this detailed report from our first “State of the Web” survey of professional web designers and developers. It includes details and analysis of all the responses to over 50 questions covering technologies, techniques, philosophies and practices that today’s web professionals employ."

Visit site …

The Curious Case of Twply and Twitter - Bokardo

Excellent interface analysis of twply: "Moral of the story? Design can effectively be used to deceive people. Deal only with those services you know and trust. "

Visit site …

Subscribe

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