Just before Christmas, the big news was that StatCounter was showing Firefox 3.5 as becoming the world’s most popular browser. The StatCounter graphs for that period do indeed show that Firefox 3.5 overtook the previous leader IE7. What I find interesting though is how FF3.5 managed to take so much market share in such as short space of time.

Much has been made of IE6 lingering around and refusing to die and here Mozilla have managed to establish FF3.5 incredibly quickly and cut massively the number of people using FF3.0 (FF2.0 is virtually non-existent now). Why is that Microsoft have been able to encourage users to make the jump from IE6 to IE7 and now from IE7 to IE8?

Interface

People were happy with the IE6 interface in the same way they were happy with the Microsoft Office interface – it had been the same for years and IE7 was a move away from that. They introduced drop-down menus on the toolbar, which were not popular. Tabbed browsing was a move forward but with the expanded toolbar, the space for the tabs was too small. Problems like this do not encourage people to move up to a newer version. They don’t see the improvements in the rendering engine and as we’ve been designing for IE6 for years, they’re more than happy to stick with it. IE7 actually brought with it’s own set of problems and IE8 has done the same. Why upgrade if it’s going to cause you problems?

Users

Could it be that the faster uptake of new Firefox versions is just a natural effect of the type of users that Firefox has. It’s entirely possible that the kind of people who question whether they want to use Internet Explorer at all and purposefully seek out another browser are exactly the kind of people who upgrade their software regularly. This is a great kind of user to have and makes life much easier for everyone. Let’s not forget that the move from FF3.0 to FF3.5 is a required download and does not happen automatically like the minor version upgrades. Which leads me onto the next point  – what happened to the automated deployment of IE7 and IE8.

Corporate IT

Whenever a new version of Internet Explorer is announced, Microsoft post on the IEBlog and advise everyone that the new version will be delivered automatically via system updates. But with the other hand they take away as they also take the opportunity to advise system admins as to how they can block the update from coming through. When IE6 first appeared on the scene back in 2001, it was in a time of massive growth for intranet projects. It was the buzzword of the next few years (and, to be fair, progress hasn’t slowed). There was also an explosion of pro-am web developers who had got used to coding to suit IE5.5 and between them they built a lot of intranets.

As discussed above, each version of Internet Explorer created new problems while solving others. Is it that there are a large number of companies out there who are blocking IE updates on corporate networks in order to put off investing money in their old Intranet.

Maybe It’s Us

Of course, there is a fourth option. Maybe it’s us. Maybe there are actually millions upon millions more Web developers out there than we ever thought. And they’re all keeping old version of IE knocking around for testing purposes. And out of curiosity we’re all visiting each other’s sites to see whether everyone else is still supporting IE6 and generating all this traffic ourselves. If that sounds like you… quit it!

The PNG format has an ever-growing place in Web design, especially now that the number of IE6 users is starting to drop. All modern browser support the format and its alpha transparency, which makes it very handy for use in layouts. Drop shadows and various other semi-transparent effects can be applied using a PNG without having to worry about the background colour beneath it. No more adding the background with JPEGs or colour dithering with GIFs.

However, there are criticisms levelled at the format – most notably its size. Whereas PNG will probably never compete with the JPEG for photo-quality images, there are many optimization techniques that people fail to use or just take for granted because of the JPEG format. What people dont realise is that there is a fundamental difference between the two formats – JPEG is lossy and PNG is lossless.

The JPEG format analyses an image and changes the actual pixels in order to achieve its compression. This is why JPEG artefacts (blockiness) appears on the image. Whatsmore this occurs on each save, so repeatedly saving out as JPEG results in further and further loss of quality. PNGs on the other hand can be edited and saved over and over again without any reduction in quality because PNG achieves its compression using techniques similar to those found in zip files. The actual pixel values never change in a PNG image.

With a little understanding of how this type of compression works, we can develop some optimization techniques for PNG images. In its simplest form, compression finds sequences of a particular value and converts it to one value and a multiple (i.e. how many times that value is there). The compression works best when there are a restricted number of values in a particular file.

How does this relate to our images? Well, when we say values, read colours. The less colours in a PNG image the better the compression will act. To demonstrate this, we can use the Posterize effect in Photoshop, which is designed to reduce the number of colours in an image (the name comes from print design, when posters would be reduced to as few colours as possible to save on printing costs).

Heres our original image, a 24-bit PNG with an 8-bit alpha transparency. Using Photoshops Save For Web function, the images comes out at 164KB.

Opening this image and repeated the Save For Web process will have no effect on the image size or quality. Photoshop will simply uncompress the image when you open it and then apply exactly the same compression when you save it. Instead, open it up and select Image – Adjustments – Posterize. Set the number of levels to 60 and click OK. We get the following image:

Youd be very hard-pressed to find a difference between this and our original but this has brought the size down to 124KB (a 24% reduction). The reason the difference isnt noticeable is that colours that were next to each other and very similar have been combined as one colour – the eye tends not to notice this as its very biased towards picking out contrast. Taking this further, we can drop it the posterization to 40 levels, and the result looks like this:

At just 40 levels, we start to see some of the colour-grouping on the yellow die, but the rest of the image is still very comparable in quality to our original. Its now down to 112KB (almost another 10% saving). Taking it down to 20-Levels brings it down even further to 92KB but the quality really starts to go, so maybe in this case somewhere between 40 and 60 levels would be the best compromise.

The important thing is that the control of this is completely down to you. It can be applied whilst creating the image or at later optimization stage after saving it out for the first time. Through the use of layers or just the basic selection tool, you can apply posterization to different parts of the image. In this case, its possible to get the size of the image down even more by applying one level of posterization to the out-of-focus elements and a more drastic posterization to red die in the foreground.

Let’s face it, endlessly bashing out HTML is a pain. Even with the advent of automatic tag-closing in certain editors, I still spend far too much time typing tags and changing indentation so that it’s readable to me later on. This is why ZenCoding caught my eye. It’s shorthand for HTML, based on the CSS selector syntax.

Using Selectors

By using the common CSS selectors in a supporting editor, you can save yourself a lot of time. Here’s a quick list to refresh your memory:

These can of course be strung together to form complex HTML layouts using much less code. The editor will then expand it into beautifully laid out HTML. Let’s take a standard page layout:

<html>
	<head></head>
	<body>
		<div id="header"></div>
		<div id="content"></div>
		<div id="footer"></div>
	</body>
</html>

Using the ZenCoding syntax, we can reduce that to the following snippet of code:

html>head+body>div#header+div#content+div#footer

A simple line of code in a syntax we’re all familiar with, which expands to create a whole starting page of markup.

Multipliers and Iterators

It doesn’t stop there though. One of the most annoying things about layouts is when you have multiple tags that are the same or similar. You’ve got the choice of typing each one out or copying and pasting, making changes as you go along. ZenCoding enhances the CSS syntax with the inclusion of a couple of special characters, * and $. Using *, followed by a number, will add that tag the same number of times. Using $ will add the index number of that tag. So, for example:

ul#menu>li.menuitem-$*5

This will expand into an unordered list with the ID “menu”, with five list items inside it. These list items will all have the class menuitem-$, where $ is the index of that list item within the list. Here’s the markup:

<ul id="menu">
	<li class="menuitem-1"></li>
	<li class="menuitem-2"></li>
	<li class="menuitem-3"></li>
	<li class="menuitem-4"></li>
	<li class="menuitem-5"></li>
</ul>

ZenCoding is open source software hosted at Google Code. There’s already a large number of supported editors including Dreamweaver, Aptana, Textmate and NetBean with more being added regularly.

Something I was struggling with recently was a quirk in how Internet Explorer zooms in and out on content. All browsers allow you to zoom in and out of a page (usually using Cmd / Ctrl and the +/- keys). It’s rarely perfect, but some browsers are less than perfect than others.

Whilst all browsers these days use this feature to zoom all the elements on a page (back in the day, it just changed the text size) there is a glaring omission in Internet Explorer in that it doesn’t zoom the background image on a page. Not really a problem if you’re using a tiled / textured background, but if you’re using a full image that ties in with the rest of your layout it’s a disaster. It’s becoming more and more common to see site takeover ads that include a custom background that fits around the content of the site.

I’ve found a strange workaround for this that involves using CSS to assign your background image to the <html> tag as well as the <body> tag. You’ll need to keep the image on the <body> as otherwise Firefox and Safari will not render it all (it’s not in the standard!). It’s literally just a copy and paste from your body tag. For example:

html {
    background-image: url('/images/large_background.jpg');
    background-color: #000000;
    background-position: top center;
    background-repeat: none;
}

This would be a non-repeating image positioned at the top and middle of the page (suitable for use with a “margin: 0px auto” layout) with a black background colour (you’re fading the edges of your background images, right?).

It’s still not perfect, but it’s better than it is. Zooming in will now work perfectly across all browsers. Zooming out beyond the normal display with result in the background image being scaled with the content but will leave an echo of the background image assigned to the <body> tag to the right.

Is your forum still as good as when you first launched it? Does it still have the same number of users signing up to it that it did in the beginning? Is it getting more popular as time goes on? You can find out how many people have signed up to your forum over it’s lifetime with a single line of SQL.

Open a connection to your database using MySQL Query Browser, phpMyAdmin or whatever database management app your’re using and issue the following statement:

SELECT MONTH( FROM_UNIXTIME(user_regdate) ) AS Month,
YEAR( FROM_UNIXTIME(user_regdate) ) AS Year,
COUNT( * ) AS Total FROM phpbb_users GROUP BY Year, Month

making sure to replace “phpbb_” with your table prefix if you haven’t used the default.

This query works by creating Month and Year fields based on the user registration date for all the rows in your query. We can then group the records by Year, and then Month, in ascending order and the COUNT(*) clause will add up all the rows in your users table for each Year / Month combination. What you get is a chronological list of months, showing you how many users signed up in each month.