css

When designing websites graphic designers often draw a neat picture in photoshop. The day to day use of a website greatly differs from this ideal scenario. The design shows a calm and readable site with demo text. But the actual website in use everything but serene and readable. The text style is usually the first aspect of a site that gets diluted. Both users and visitors create content or leave comments which just don't fit the initial picture painted by the designer. A lot of problems stem from the use of wysiwyg editors in content management systems. These editors usually grant their users a lot more freedom than a web designer wants. A properly configured wysiwyg editor should greatly limit the possibilities of the user to a few essential functions such as creating lists, inserting links and marking text as strong or emphasised.

However, many a time such wysiwyg editors are incorrectly configured. If users have too many text formatting options the result is text corruption. Because of their limited knowledge of html code, users mess up semantics, introduce a diversity of text styles, insert many incorrect tags and a plethora of inflated code and inline styles. The more creatively inclined user seems to have an urge to colour pieces of text, raise the text size, insert alternate fonts and create unused or endlessly nested tables into the content of your carefully designed site. Once users start copying and pasting from MS Word they introduce a visual cacaphony which seriously breaks the visual appease of your site. Sometimes it can even break the basic layout of your site and hinder search indexation.

Sometimes, having an easy to use CMS like Drupal or Joomla is just one more excuse to keep on tweaking. Just now I added a related nodes block to the article and project pages. Let's say I write an article like this and I tag it drupal. A couple other articles on the same topic are shown in a block in the right column. Hard to do? I don't think so! Just use the views module an some view arguments, like so.

There's more stuff I changed in the last week or so. I completely changed the functionality of the breadcrumbs. I wanted them to reflect the structure I use for clean urls. But I wanted to use page titles instead of the url shorthand (and lowercase) terms. So I created a little snippet. Let's say I have an project with a fairly simple url like /projects/world-domination.

1. first I fetch the url and system path
2. then I breaks it up in into parts using the / as divider (so I have 3 parts: /, /projects and /projects/world-domination)
3. for each part I check if the url is pointing to a valid page.
4. for each valid target page I fetch the page title
5. then I return all the breadcrumbs with valid links back to the theme
6. If the clean url path wasn't found, the normal system breadcrumbs are used as a fallback mechanism

and... Presto! A simple breadcrumb bar for all the project nodes. Including "Home" and the current page's title. Off course I needed to find other solutions for Views, Taxonomy, System paths, etc. but that's a longer (and even more boring) story. I anyone's curious how I did it. I'll send them the code.

Discussions on Drupal site optimisation are usually technical discussions. But many a time they boil down to philosophical discussions. Search engine optimisation (SEO) and performance tweaks aren't necessarily good for the manageability of your site or for your potential visitors. I ran across a couple of these dilemmas in recent days while trying to optimise my own site.

JS / CSS compression

On of the questions I struggled with is: "should I compress the javascript and css files?". From a performance perspective, the answer is a clear yes. The performance boost is minimal because the servers of my hosting provider have ample headroom. But any performance gain helps. I manage to reduce the number of http requests by 18 simply by combining all the css and js files into 1 file for js and 1 for css. However, because I still do lots of front-end development, I want my own website's css files to be readable by potential clients. If prospects want to judge my css coding skills they'll probably want to take a look at this site's css code to. Compressing the files also makes them very hard to read. And all the care I put into laying out the code neatly (alphabetical element properties, consistent commenting, consistent tagging, etc) is lost for the potential observer. Right now I decided to enable this performance tweak because the potential number of observers is really limited.

Since a week I'm working in Haarlem every Tuesday, Wednesday and Friday. With the good folks of 2Value we're manning a new office at the Kenaupark. The synergy of sharing an office location can be a really good thing. One of the benefits is always having a usability guru around. Kor pointed me at some shortcomings of this website. Some of them I solved today. For instance, take a look at the print stylesheets, by making a print preview in your browsers. Looks pretty smart aye? I cleaned up some elements and greatly increased the font size. Another big improvement is the speed of the website. I automatically resize images most images on the size using the the Drupal imagecache module and the GD library. This makes it easy for me to upload full size pngs (my default screenshot file format). However, the file size of the scaled images - the project images and thumbnails - was still way to large. Using some nifty little imagecache actions allow me to change the file format of the images on the fly. Now I cache the images as jpg. This typically saves about 300 KB on the frontpage!

Code Culture has a brand-spanking new layout. My wonderful friends Leon and Rob from WAT Ontwerpers have concocted a colourful corporate identity, logo, and website design. The drupal theme for this website, I built myself. Though this is still a work in progress (and it probably will be a work in progress for the remainder of it's life), many of the elements of the new design are in place. Let me point out some highlights:

• The logo can be placed over any image and still retain it's expressive power. The header image can be altered to match a specific section's topic or style.
• Good old Helvetica is serving some nicely layed out text styles. Most (semantically relevant) html text elements have been molded to a calm well readable rhythm. Blockquotes, links, linespacing, indenting, lists, etc have all been carefully layed out.
• We have minimised wasted space by wrapping the text under the right column.
• To further demarcate sections and whitespace, we've added some nice supportive visuals to the layout.
• And don't forget the stuff most of us never see! Browser text resizing and print styles have been optimised.
• Cross browser support: the template has been tested in firefox, opera, safari, ie6 and ie7.

Afgelopen jaar is Interpay gefuseerd met een Duitse partner. Uw pintransacties worden nu dus afgehandeld door een Europese combinatie die Equens is gedoopt. Ik heb er in opdracht van Eden Design voor gezorgd dat een rimpelloze overgang van de Interpay- naar de Equens-vormgeving mogelijk was.