PNG8 vs other image formats

PNG8 is a rising winner in all the battles between the web formats. It has smaller size than GIF and PNG24, it has alpha channel, and the really big advantage is the semi transparency, which unfortunately degrade in IE6 to a GIF-like full transparency. So there are few very important advantages at all:

1. smaller size than PNG24 and GIF

2. same semi-transparent pixels as PNG24 but with smaller size and no need of alpha filter for IE6, where there’s a GIF like full transparency.

Fireworks and semi transparent pixels in PNG8

The problem is that only Adobe (former Macromedia) Fireworks can export such semi transparent PNG8s, and it’s not free. You may guess PNG (Portable Network Graphics) is a Macromedia format which unfortunately turns into closed capability of rendering PNG8 with transparency and with no need of Fireworks. Very sad!

Recent discovery

Finally these days I found a workaround with PNG8 and it’s called pngquant. You can find the tutorial on http://www.ethanandjamie.com/blog/37-user-interface/81-png8-transparency-without-fireworks and everything here’s about the above pngquant.

Now make your website sprites

a PNG8

What if you have to close on outside mouse click?

This situation is kind to be familiar. There is some panel which should be closed on outside click. Yeah, this is the most common usage of the outside click. And to do that is pretty simple.

In this tutorial … jQuery

For those of you not used to use jQuery, in short this is a JavaScript library, which gives you the power to manipulate the DOM with ease. One of the very good parts of jQuery is really the ability to help you with less code to do the hard work of searching and changing the DOM. If you don’t have any experience with this library, well you can use any other if you’d like.

First step: combine the events

One of the events should be click over the panel, and the other click over the document. (more…)

Well if both style=”border:[0|none]” is working and border=”0″ attribute doesn’t help, and all this is not working only on IE, the solution is …

frameborder=”0″ attribute

<iframe frameborder=”0″ … ></iframe> is helping

What a lovely combination

Recently I wrote an article about the Google Adsense problem with page load blocking and than the solution was simple and elegant. You must put your ad in a separate .html file and to include it into your page with an iframe. That gives the page the ability to “breath” and to load faster.

You can see the entire article here.

When everything’s OK, wait for the IE

Yes as usual every browser loaded the iframe correclty, except … (more…)

The Google Adsense code block

Everyone dealing with Google Adsense knows how it looks like as JavaScript code. When you register, apply and receive the code chunk, you receive actually an inline chunk of js describing the width and height of the code and the key, uniquely identifying the page ad and an included javascript file.

<script type="text/javascript"><!--
google_ad_client = "pub-9858850710257888";
/* 250x250, google ad 09-5-19 */
google_ad_slot = "0062396170";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.co/...">
</script>

Inline scripts and their behavior

The problem with the page load is that inline scripts included somewhere in the page, the case with adsense is just like that, blocks every page load until the script is executed. Of course when you’ve two or three ads somewhere in your page that causes huge delay of page load. Sometimes that may delay the page twice as much as if there were no ads from Google.

The workaround

The simple workaround is to place your ads <script> inline, included or both in a separate .html file and to include it as <iframe>. Such a solution gives the page the ability of render before the iframe is executed and the page load event is fired in an early stage.

<iframe src=”/path_to_the_banner.html”></iframe>