xfinx.nl

Removing the stubborn compatibility view icon

Bjorn Boonen — Wed, 25 Apr 2012 09:38:41 +0000

Yesterday someone I know complained that the layout of our site (leadingcourses.com) was broken in Internet Explorer 9.

Of course my own IE was showing no problems until I was playing with the compatibility view.

The button is so close to the refresh button, it happens more than once people click it by accident, breaking the fine layout of a site to something IE7 alike

I was reading some blogs and found that everything was in place already to hide the icon.
But it was still there.
There was no way to get rid of the compatibility view icon. It just would not go away..

Until I remembered I was using the following html tag:


 
 
 
 
 ...
 ...

This is very handy as you just say

.ie7 header {
   background-color: #000;
 }
 .ie8 header {
   background-color: #f00;
 }
 ...

So I have to replace this by doing:

 header {
   background-color: #f00\9; /* IE8 and lower*/
   *background-color: #000; /* IE7 and lower*/
 }
 ...

Reducing the html to


 
 
 ...
 ...

This fixed the issue for me, I hope it helps.

Leadingcourses.com launches widget for search

Bjorn Boonen — Wed, 11 Jan 2012 13:51:43 +0000

As of today everybody offer their visitors a quick way to search through more than 7,000 golf courses in europe which are listed on leadingcourses.com.

More info can be found on: http://en.leadingcourses.com/i/search-widget/
leadingcourses.com

My usage of !important;

Bjorn Boonen — Mon, 31 Oct 2011 15:09:26 +0000

To be honest, it is only since a short time I actually make use of !important. Most of the time I’d kick it out of my css directly, but I found some some cases where it actually makes sense!

Well properties like !important exist for a reason, well I can actually think of 2.

To give people like me a job. (Yes I’ve actually seen a stylesheet of +1k lines where almost half of the styles where ‘infected’ with !important.)
To do create some generic layout.

That special thing is something I’d like to share with you guys.

Using !important for saving a lot of lines of code.

People who know me know that I like clean code. More is less I often say. This is of course not true for classnames, variable names etc.

Buttons!

When a button is designed for a site, I alsways check if the button can be made CSS-only. And well, in 99% of the cases it actually is.

Most of the time a designer designs a button to look the same wherever the button is displayed. This is where !important comes in. I use !important to make sure, the color, the font-size, paddings, margins and border stays the same. I’ll provide a piece of code to clarify myself:

HTML:


  
  
  


  Yes, please tell me more
  some text here some link here
  Show me !important!

CSS:

/**
 * @description: zone where people can do ...
 */
.zone.tell-me-more a {
  border-bottom: 2px solid #000;
  color: #f30;
  font-size: 1.2em;
  text-decoration: none;
}

/**
 * @description: button specific code
 */
.button {
  border: 1px solid #000;
  background: #f30;
  color: #fff;
}

You’ll now see a button which has a 2px border on the bottom and seems to have no text. This sucks of course. What would be possible to do is:

/**
 * @description button adaptions for tell me more zone
 */
.zone.tell-me-more .button {
  border: 1px solid #000;
  background: #f30;
  color: #fff;
}

The downside of this is that I have to override this for every time I tend to ‘break’ the button. So instead of doing that, I’ll create a specific place in the css where I put my button styles.

/**
 * @description: button specific code
 */
.button {
  border: 1px solid #000 !important;
  background: #f30 !important;
  color: #fff !important;
}

/**
 * @description: zone where people can do ...
 */
.zone.tell-me-more a {
  border-bottom: 2px solid #000;
  color: #f30;
  font-size: 1.2em;
  text-decoration: none;
}

Of course in this small example it does not matter that much, but I’ve noticed that in large projects it helps a lot. And yes, back-end developers will be more confident when typing html, stuff does not appear funny when they paste some code somewhere else. But this is just a nice side-effect

jQuery datepicker, how to disable one day?

Bjorn Boonen — Mon, 01 Aug 2011 20:28:53 +0000

Today I needed to disable one day in the jQuery ui datepicker. I did some research, and I found out, it is actually much simpler than I thought. There is something available in the plugin itself ($.datepicker.noWeekends).

The actual code I needed is like this:

$('#trigger-datepicker').datepicker({
        beforeShowDay: function( date ) {
 var ignoreDay = 0; // sunday === 0, monday === 1, etc
return [(date.getDay() != ignoreDay), ''];  }  });

Enjoy! (I do at least ;-))

Preloading an image or sprite and make it load fast

Bjorn Boonen — Tue, 12 Jul 2011 12:54:36 +0000

Recently we did a new re-design for leadingcourses.com. One of the goals was to make the site fast. As I am a (freelance, yes, I can be hired ;-) ) front-end developer, I wanted the front-end to be as fast as possible with as little effort as possible.

I already read a lot of articles written by Steve Souders and Stoyan Stefanov about site speed. A lot of stuff went in my head for that, and now I will just type it out so it is written down.

In this post the steps I took to make our sprite load faster.

Steps I took

Creating the sprite

The first thing I did is move all the assets to 1 sprite. To be honest 1/2k more or less I do not consider as an issue as I wanted to do as less effort as possible, but with the best result. I created a sprite (png) and I did not pay attention where to place certain images, as long as it was convenient for me to develop.

Reducing the size of the png

There is a lot of metadata and other crap in the image that can be removed quite easily, I was looking into a tool which could handle that. There are several available, but for my sprite, punypng gave me the best result, smaller and no loss in quality. The weight loss is more than 1 or 2k, which is great of course ;-). So instead of optimising the image and make development a bit harder, I used punypng to make my file smaller.

Preloading the image.

So as I told before, I read a lot about site speed, but I had to digg a bit to find the article which explained the solution I also used.

Basically the idea is, add an image with javascript to the head of the document.

But there is one problem with this. Printing. Yes, and only printing in IE. It seems that when printing a document, yes it actually happens, all ‘normal’ elements are shown by default, but the special elements like

Pictures of Albania

Bjorn Boonen — Wed, 01 Jun 2011 11:57:22 +0000

It has been quiet for a while in this blog. With a reason. At first our lovely baby girl was born. And second I was very busy with the new version of http://www.leadingcourses.com.

In April I went to visit Albania and took some nice pictures. Currently I use my 50mm as a default, with which very nice effects, even for nature can be made.

A small horizontal gallery, xfinxgallery

Bjorn Boonen — Mon, 17 Jan 2011 08:24:12 +0000

Recently I created a small gallery which enables you to add images, text or whatever and put it in a small (automated) scroller. It is quite easy to use (see below). If you have any feature requests? please let me know :-)

Requirements: jQuery 1.4.4

Version 0.6.1

Removed dependency on certain classname (xg-list)

xfinxgallery 0.6.1: JS | CSS

Version 0.6

Added automated animation

xfinxgallery 0.6: JS | CSS

Version 0.5

Removed empty space at end of list.
Added classname support
Added animationType
Added animationSpeed
Added active/inactive controls

xfinxgallery 0.5: JS | CSS

Usage:

$(function() {
  $('.xfinxgallery').xfinxGallery();
});

options

Recalculate (integer default:false)
By default no recalculate is done. Does a simple setTimeout to recalculate the width of the inner element
activeControls (boolean default:false)
Default controls are hidden, except when the width of the inner element exceeds the width of the outer element.
innerBox (string (classname) default:xg-inner)
By default the classname expected is “xg-inner”
innerElement (string (classname) default:xg-inner-element)
By default the classname expected is “xg-inner-element”
animationSpeed (integer default: 500)
The moving speed of the elements within the gallery
animationType (jQuery’s animation type default: swing)
autoAnimation (boolean default: false)
auto animates step by step. After using a control, the animation is stopped (see autoAnimateRestartTime)
autoAnimateRestartTime (integer default: 10000)
setting the value to -1 will disable the restart of auto-animation.
autoAnimationInterval (integer default: 1000)
moving speed of the element.

Links?

Bjorn Boonen — Fri, 10 Dec 2010 09:06:50 +0000

Ok, yesterday I realised that I get too much links to keep track of. As most of those links are pretty useful to a lot of people I know I’ll try put them all here.

Enjoy!

10 Top Tips For Really Ramping up Retweets
http://searchenginewatch.com/3641614
How quickly do my pages load?
http://www.panalysis.com/tracking-webpage-load-times.php
Why separate mobile websites are hurting the internet
http://adactio.com/journal/1716/
The complete guide to duplicate content
http://yoast.com/complete-guide-duplicate-content/
Best jQuery Plugins of 2010
http://webdesignledger.com/resources/best-jquery-plugins-of-2010
jQuery Plugin Template
http://css-tricks.com/snippets/jquery/jquery-plugin-template/
WOFF (Web Open Font Format)
http://webfonts.info/wiki/index.php?title=WOFF
Happy customers through an improved checkout
http://boagworld.com/usability/improved-forms/
jQueryPlugins
http://www.jqueryplugins.com/
A re-introduction to JavaScript
https://developer.mozilla.org/en/a_re-introduction_to_javascript

Banners getting better

Bjorn Boonen — Mon, 06 Dec 2010 14:36:28 +0000

After talking with some people I found that the banner-agencies actually understand the problem. They actually also have ‘a solution’. The solution is not perfect as some of the functionalities you get when implementing a banner are lost, but at least it does not block your site.

So you are pretty anxious to get the recipe right?

Well, you basically need the following:

empty iframe
a file which holds the banner javascript
some javascript

Ok, first the empty iframe, that is something that looks like:

The second thing you need is a file which holds the banner tag, let’s call it rectangle.html

rectangle.html
Add the banner tag in this html

Well, now the mixing starts.
I use jQuery most of the time, so the solution I present is a solution using jQuery. Basically you have to set a src on the iframe when the site is loaded. You can use onload, but I prefer onDocumentReady. The code looks like this:

$(function() {
    $('#rectangle').attr({src:"/rectangle.html"});
});

very simple huh? (see an example)Well there are some downsides.

Layers and expandables are not possible, they stick in the iframe.
The tags won’t communicate with each other.
1. banners can’t be served in an order.
2. They can’t control if competing banners are on the same page or not.
3. They can’t add ‘roadblocks’, which are banners of 1 brand on the entire page.

Well, this is quite sad, as point 1 means that your banner-portfolio drops, as does the money with it. And point 2 also has the same effect.

Well, it is great if you don’t care about these issues, but some people do, especially business. But for point1 there is a solution.

If the banner agency uses DART, you can add the file: DartIframe.html in your web-root. This makes sure they can access the parent of the iframe, which enables them to serve expandables and layers.

I still have some questions which are unanswered, when I hear about that, I’ll update again.

Banners getting bad

Bjorn Boonen — Wed, 14 Jul 2010 10:36:08 +0000

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.

Slow

Recently it just happens too often that I have to wait for a banner to load until a site is rendered. How can we solve this?

There are some possibilities, for instance, load the banner in an iframe. But banner agencies do not like this. They want to track the visitor, pushing the banner in an iframe will make sure they can’t. And as they decide the terms, this is not going to happen.

So there are 2 solutions left, the first: no banners at all. No.
The second: Lazy loading.

I saw a nice post on how to achieve lazy loading. This might be something which you can use to load the scripts banners use. I already asked a banner agency for input. At the moment they’ll react, I will update this post. At this moment they are having some troubles understanding that banners can load slow.

“Als het lang duurt voordat een banner ingeladen word, dan ligt dit niet aan de doubleclick server. De servers zijn snel genoeg en het materiaal is al meestal sneller ingeladen dan de site zelf.”

In English: When it takes a long time until a banner is loaded, this is not because of the doubleclick server. The servers are fast enough and the material is loaded faster than the site does in moest of the cases

I closely watched some sites and it seems like some banners are not blocking your content to load all the time, this means the advertising business is also taking steps to overcome loading problems.
One of those steps is offering a banner of only a few KB at first, and load the big fancy movie banner in that banner. So the total size of the banner will be big, but the initial load is small.

Next to the loading issue, there is another issue: UI.

User Interface (UI)

In the early days, we had a full banner (468×60) which was one of the biggest banners on your site. We all know them, and you’ll hardly come across one in the wild anymore.

One of the most popular banners nowadays are rectangles (300×250). But there is a new one coming, this one is nearly side wide and pushes your site down. In some cases, your site ends up below the fold.

Another issue which is becoming a bigger problem, is the problems with z-indexing. Modern website do not use pop ups anymore, they now use an element which floats over the content. This is a growing problem as banner designers do not know which z-indexes are used for what on which site. Most of the time a site does not use extensive layering, but now and then, they are, and it will only become more and more.

So what are advertising agencies going to do to fix those issues? At this moment the only thing you can do is file a complaint and the banner will be removed / fixed.

Future

What is the future of banners? Well I said before, they are getting bigger. Sanoma recently had a banner which was covering an entire site.
Finland is one of the countries where banners / advertisements are everywhere! Sites tend to get bigger and more intrusive banners.
When will this end?

Something with a foot and shooting in it?

Because people tend to get blind for banners, bigger banners where made. People also got blind for those, so even bigger banners are designed now, which are also very intrusive. The last part will get on the nerves of a lot of people. So a people start to program banner blockers because they are annoyed by those banners. The next step is that a lot of people will install a banner blocker.
The result?

(1) Advertising agencies will try to work around the banner blockers. -> (2) Banner blockers will get better. -> (3) (4)More people will install banner blockers. -> Banners will be more intrusive -> (5) Banner blockers will get better -> go to (1)

The result? Revenue loss!

Strange enough this post also reminds me, I should make a design for my site : /.