Banners getting bad

To be honest, I think banners are a good thing. Having banners on the site is an obvious way to earn money for the content you show for free.
That is the main reason why I do not have an ad blocker.

But the most recent developments in the Netherlands concern me. Banners tend to be bigger, heavier and worse, taking over control!

Today I saw a Sony banner. This banner break parts of the User Interface, slows down the site, causes scrolling problems in some browsers and of course, causes a lot of frustration with visitors due to all this.
[Read more…]

Fronteer workshops voor visual designers

De browsermarkt is enorm aan het veranderen. Internet Explorer was jarenlang leidend, tegenwoordig zetten browsers als Chrome, Firefox en Opera de toon. Maar ook nieuwe apparaten zoals mobieltjes en iPads maken gebruik van uiterst geavanceerde browsers met goede ondersteuning van nieuwe technieken zoals HTML5 en CSS3.

[Read more…]

Clearing the clearfix

.Clearfix is a classname which is used often on websites to make sure that a wrapping box gets the height of all it’s (floating) children. This means that child elements will not stick out of the box if they are floated (float: left/right)

A lot of people love the .clearfix, it has been introduced somewhere in 2004, which is a while ago. I was using the .clearfix a lot, and I loved it! Until… Someone @fronteers (http://fronteers.nl) told me what I am about to tell you now..

Do not use .clearfix! In 2004 it was a nice way to go, but that is a while ago…
[Read more…]

Fun with CSS: Background images on images?!

First of all, pardon me for my English, it still needs a lot of work, but as I have some non-dutch people in my contact list, I will write in English from now on.

At this moment there is a big hype around CSS3 and HTML5. But we still have some issue with one of the major browsers: Internet Explorer. As all web developer know, this browser is old fashioned.
With plain css1 and css2.1 a lot is possible.

Today I will show something I recently used at work. To be honest, I never thought of the idea, I have no clue why, but I just did not think of it… Until I actually needed it.

I was creating a bar on the bottom of the browser viewport, and I wanted to make it all as small as possible.

I had an image:


And I had some blue background. Personally I think this is not very beautiful. As not all browsers support rounded corners properly, I created a single image which is big enough to put behind the image. (On the site it is part of a sprite, but for this example I only needed the actual background image)

What I did looks like the following:


Which looks much nicer.. What I did?

img {
    background: url(/img/img-bg.png);
    padding: 12px 11px;
}

Well, how easy is that?

Enjoy!

Website onder de loep: www.beslist.nl (nieuwe website)

Omdat Beslist.nl een behoorlijk grote site is, vind ik het absoluut de moeite waard om hier een stukje over te schrijven. Een real-life voorbeeld van hoe het niet moet werkt vaak heel goed.

Ik heb begrepen dat de frontend van de nieuwe site van Beslist.nl grotendeels herschreven is.

In mijn post over CSS best practice schreef ik over een tweetal website die erg op elkaar leken en dingen hadden als float left  en float right.

[Read more…]

Grafieken met html en javascript, geen flash!

Ik heb een beetje een persoonlijke aversie tegen flash elementen op de site. Helemaal gezien html + javascript oplossingen in veel gevallen minimaal zo goed zijn als de flash-variant. Daarnaast laadt het ook nog een stukken sneller!

Daarnaast ben ik een fervent gebruiker van jQuery.

Er zijn verschillende plugins voor jQuery die erg goed zijn en veel te bieden hebben. Hieronder stel ik er twee voor die er volgens mij uitspringen. Beide versies maken gebruik van de <canvas> tag die door de meeste browsers ondersteund worden (HTML 5), echter IE ondersteund het niet. Google heeft voor IE een javascriptje geschreven die toegevoegd kan worden aan de pagina. Hierdoor werkt de canvas plugin in IE 6, 7 ,8. Erg handig dus, crossbrowser plugins.

Flot

Flot werkt voor: Internet Explorer 6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+. En is gebaseerd op een zo eenvoudig mogelijke implementatie. Als je de voorbeelden volgt, is het implementeren van Flot een eitje!

Versie

De versie zit momenteel bij 0.6. Dit betekent niet dat het instabiel is, in tegendeel het ziet er goed uit in eigenlijk alle browsers en is ook zeer stabiel!

Daarnaast verschijnt er met enig regelmaat een update, dit is zeer belangrijk, mocht er een probleem zijn, dan is deze in veel gevallen redelijk snel gefixt.

Documentatie

De documentatie van Flot is uitgebreid echter alleen in .txt-formaat. Echter de voorbeelden zijn zo eenvoudig dat de complete werking van Flot te vinden is met de voorbeelden.

Functionaliteiten

Flot heeft een aantal goede en goed werkende functionaliteiten, varierend van pie charts, stacked bars en gewoon lijngrafieken. Voor een lijst van functionaliteiten, zie een voorbeelden van flot.

jqPlot

jqPlot is een andere plugin en op bijna dezelfde punten sterk als Flot. De website oogt alleen stukken beter en professioneler.
Ook jqPlot is geteset voor Internet Explorer 6/7/8, Firefox, Safari, and Opera.

Versie

De versie op dit moment is 0.96. Dit geeft al aan dat ze er bijna zijn, bijna bij versie. Het product wat er nu staat is dus bijna ‘af’.
Ook jqPlot heeft regelmatig update, dus ook hier geldt, is er een issue, dan is deze snel gefixt.

Documentatie

De documentatie met jqPlot is ook volledig, en een stuk overzichtelijker dan Flot.

Functionaliteiten

jqPlot is iets uitgebreider dan Flot, en qua uiterlijk net zo mooi. Het is bijna ondoenlijk om het op te noemen, zie daarom meer bij de voorbeelden van jqPlot.