ZOMDir > Blog

Monday, 27 January 2014

ZOMDir on YouTube

For the ZOMDir project I have created some movies about adding and removing a link. These movies are:
  1. Add a link in a blink
  2. Remove a link in a blink
  3. Drag and drop to add a link
  4. Drag and drop to remove a link
Have fun.

Disclaimer: I made this short movies at the moment I thought that the site was stable, however currently the site might look slightly different. The functionality is still the same.



Friday, 17 January 2014

The results of optimizing the performance

The result of minimizing of the number of requests by ZOMDir.com is huge. I have minimized the number of images by using CSS sprites and I have merged all CSS code in one file.

According to tools.pingdom.com there where in the past for a typical page 14 requests:

  • 7 images
  • 4 css files
  • 2 html file (due to an Ajax call there is an extra html file)
  • 1 javascript file
After that I have optimized the code there are 7 requests:
  • 4 images
  • 1 css file
  • 1 html file
  • 1 javascript file
With GTmetrix.com I have compared the old and the new version. The old version has:
The new version has:
  • Page Speed Grade: A (99%)
  • YSlow Grade: A (97%)
  • Total page size: 34.9KB
According to whichloadsfaster.zomdir.com the new version is 2.3x faster (the average over 100 runs). The average loadtime of the new version is 670ms instead of 1511ms for the old version.



A faster website with CSS media queries

Recently I have been working on the performance of ZOMDir.com. This time I wanted reduce the number of http requests by reducing the number of CSS files. This can be done by using CSS media queries.

Previously I used 4 CSS files. 

  1. s.css for normal and large computer screens;
  2. m.css for mobiles, and handhelds;
  3. t.css for the television;
  4. p.css for the printer.
With media queries I only have one CSS file, named c.css

I have experimented with several Methods of choosing a responsive design on several devices (at the moment of writing this blog, I realise I didn't have tested the pages on a television). The result so far is that the best option is: Basic media selectors like screen, handheld, print and tv with css queries in one single css file.

Note: This is true for all current browsers. In particular older versions of Internet Explorer do not support Media queries



Viewport

When I was coding the above mentioned experimental pages, I almost forgot to add the code:

<meta name="viewport" content="width=device-width" />
  
With this tag you tell the browser what the width is of your website, so it is essential for a responsive webpage.

CSS

The basic code of the c.css file is:

@media screen and (min-width: 731px), projector and (min-width: 731px) {

  /* A normal (large) screen, width > 730px    */
  /* Hide code not intended for large screens  */
  .mo,.po,.to{display:none}
}

@media handheld, screen and (max-width: 730px), projector and (max-width: 730px) {

  /* A mobil device or handheld, width <= 730px */
  /* Hide code not intended for small screena   */
  .so,.po,.to{display:none}
}

@media tv {

  /* A television                               */
  /* Hide code not intended for televisions     */
  .mo,.po,.so{display:none}
}

@media print {

  /* A printer                                  */
  /* Hide code not intended to be printed       */
  .mo,.so,.to{display:none}

}

Monday, 6 January 2014

A faster website with CSS sprites

The last few days I've been working on the performance of ZOMDir.com. That was necessary due to the fact that some extra functionality slowed down the site a little.


CSS Sprites

To guarantee a good user experience it is necessary to have a quick responding website. I have done almost everything to speed up the site, but I've never used CSS sprites.

First I created a sprite with instantsprite.com and experimented with jsfiddle.net to get some experience. 



Pros and cons of CSS Sprites

In practice it was not possible for me to sprite all images used. Soon I concluded that:
  1. I was not able to repeat a CSS sprite image;
  2. You can't scale a CSS sprite image (100% for the desktop version, 50% for the mobile version of the site);
  3. The CSS sprite image is not shown when the page is printed.
Therefore I did not sprite all images. Nevertheless I was able to improve the performance. The new version of the website loads circa 12.5% faster than the old version.

However there are some drawbacks. With CSS sprites the user is not able to save the image. This implies that these sprited images will not be indexed by Google. Probably this has also consequences for the partially sighted. A sprited image doesn't have an "Alt" text.

An alternative, to handle this latest drawback, is to use code like this:


<div class="sprite iconname" title="This text will be shown in the tooltop"><span class="displaynone">Alternate text describing the image you will see</span></div>



Instead of this standard image code:

<img src="images\iconname.png" title="This text will be shown in the tooltop" alt="Alternate text describing the image you will see" />




Friday, 3 January 2014

10.000 links

Today, there are 10.000 links on ZOMDir.com. This fantistic number is reached in 212 days. The avarage number of links added per day is 47.


See the stats for the current situation.