just keep tryin' ta get a little better

Every time I’m writing new HTML&CSS I check google analytics to see what browsers our users are using. I do this so I can determine what browsers must be supported and if Internet Explorer 6 is, by any chance, dead yet. This is, annoyingly, still not the case (I shall be very drunk when that day comes). IE6 still has, on one of our web pages, 47.30% share between different IE versions (IE7 trails it closely with 47,06%). Overall IE holds a 48.54% share, Firefox is second with 47,09% and Chrome is third with 1,90%.
So no surprises here, except maybe for Chrome which beats Opera and Safari. The power of Google brand is amazing.

What I did find interesting is how IE6&7 share changes during the week. On weekends IE7 has a bigger share then IE6, whereas during the week IE6 leads. And here lies the main problem why IE6 is still hanging around. You see, most of IE6 users come from various government agencies and departments (ministries, schools, town halls, …) and big companies. They usually don’t upgrade because they use custom web applications that refuse to work on anything else other than IE6. The other main reason is that system administrators (in companies mostly) can’t justify the upgrade to the bosses or are just plain ignorant and don’t bother. So that is why IE7 gains, although slightly, over IE6 during the weekend, because users who surf the internet during work with IE6 go home and use something more modern.

This disturbs me greatly, because I don’t know how this will change anytime soon and we, webmasters, will have to support IE6 (if we don’t want to loose customers that is) for a long time.
Off course there are other reasons for this mess we are in. Most users are regular Joe’s who haven’t got a clue about computers and they usually don’t even know they are using a browser, they just “surf the web”, so we can’t expect them to upgrade anytime soon. How could they? They don’t even know that there is something wrong with what they are using. And Microsoft is to blame here. They ware simply not aggressive enough when they released IE7, they should have pushed IE7 as a critical update that would install automatically without user intervention (they could exclude companies from this so that sys admins could confirm the install) and they should have launched a broader media campaign, like they are doing now with IE8.

We are currently renewing Igre123 with a wider design to accommodate the new standard web resolution. Somewhere along the way, we decided that it would be nifty if user’s avatars would be rounded like on Facebook:

I thought the task would be difficult at first, but after I tossed some CSS around, I found out that this is not the case.
In a nutshell: you have a regular rectangular image and then you make another (overlay) image that you put on-top of the first image. The overlay image is mostly transparent and only has white corners that make the curved border (those hide the corners of the first image).
I’ve made this demo page where you can see how one can accomplish this (I used ugly images just for the sake of demonstration). You’ll notice that there are two examples. The first one uses one overlay image which has corners both on top and on the bottom. Use this if you know the dimensions of the image being rounded (as the overlay must match it’s dimensions).
The second example uses two overlay images, one for the top and one for the bottom. I use this one, as our user’s avatars have a variable height (but fixed width). The only problem here was IE6, that’s why there is a height property on the container span. Without that IE6 puts the bottom overlay at the bottom of the page and not at the bottom of the image.

If you have a web page such as YouTube or Mojvideo, where the sole reason for a pages success is user generated content and the quantity (and quality off course) of it, it’s easy to forget about the users who don’t contribute to the content of the page. We (at Popcom) spent most of the time developing and improving features for registered users, which isn’t bad per se, but unregistered users (who account for the majority of visitors) usually don’t gain anything from that. Mostly because you have to be signed in to see the new feature. The problem is that usually there is no easy or unobtrusive way to advertise that feature to unregistered users.

So, the goal of any page maintainer should be to evenly spread his time between developing features for registered and unregistered users. The real trick is, off course, making some feature for unregistered users which will convert them into registered users.

Another common usability mistake most make, is the step after a user signs into a web page. Most web pages will redirect a user to the front page or his profile page, which is fine if he is signing in from the front page. But most commonly a user will sign in when he is forced to do so, when he tries to leave a comment for instance:

The text translates as “Sign in, if you want to comment, rate or add the game to your favorites”. Upon clicking the link, a user would then be presented with sign in page. So far so good. The problem arises (on most web pages) when a user successfully signs in. Instead of redirecting him back to the page where he was, when he clicked on the sign in link, he is instead taken to the front page. Now the user must navigate his way back to where he was, loosing his interest in leaving the comment along the way …
I’m stating the obvious now, but the correct way is to redirect the user back to the page, where he can do whatever he was unable while not signed in.

And implementing this is really easy, that is why it’s even more strange that there are so many web pages without this “feature”. All you have to do is append the current URL to the sign in page (signin.php?ReturnTo=current_url for instance) and then do a simple HTTP redirect after the sign in.

The image above is taken from our web page igre123.com, where we don’t annoy our users :)

Sitemaps are XML files that help web crawlers (google, yahoo, …) get to know your web page better. The sitemap file contains information about when a web page or sub page was last modified, how often it is updated, etc.
It also includes a “priority” information which tells the crawler how important is one page in comparison with other web pages on the same domain. I won’t go into any details here as you can read all about sitemaps here.

Since I don’t want to edit the sitemap files by hand I’ve written a simple PHP5 class that generates the sitemap(s) on my behalf. On videoarhiv.com, for example, I generate the sitemaps when a crawler that fetches new videos is run.
Now since most of the web pages I work on have many sub pages, my class splits the entries into multiple sitemap files (there is a limit of 50000 entries per sitemap file, and it can’t exceed the 10MB file size) and then generates a sitemap index file that contains the URLs to site maps.
This class was constructed with my demands in mind, so you may have to tweak it to suit your needs. For instance, I only store 40000 (which is hard coded) entries per sitemaps as to respect the 10MB file size limit.
You may have to change this, depending on the type of URLs you have (if you have very short URLs, you can increase this number for instance).

Source code of the class can be found here.

And here is a short example of how to use it:

Include ( '/path/to/SiteMap.class.php' );
// change to SiteMap::WRITE_GZIP to compress the sitemaps
$sm = new SiteMap ( '/path/to/sitemaps/', 'http://www.yourdomain.com/sitemaps/', SiteMap::WRITE_PLAIN );

$data= Array ();
$data[] = new SiteMapItem ( 'http://www.yourdomain.com/', Date ( 'c' ), SiteMap::CHANGE_HOURLY, '0.9' );
$data[] = new SiteMapItem ( 'http://www.yourdomain.com/about', Date ( 'c' ), SiteMap::CHANGE_MONTHLY, '1.0' );
// add all your sub pages like above

// this will generate your sitemap(s) and store them on the location you specified in the SiteMap constructor
$sm->Generate ( $data);

I like talking about usability, so today I’ll talk about another easy way to improve your web page. There are many web pages which use AJAX to post the contents of a form back to the server. The problem is that most of them don’t act as regular forms, where you can hit enter on your keyboard and submit the form.
The problem is that most developers use a type=”button” instead of the type=”submit” button in their AJAX forms, so you have to click on the button to submit the form. The problem with using a type=”submit” button in AJAX forms is that the browser will submit the form the regular way.

And this, off course, can be easily fixed. You already have a JavaScript function that your type=”button” button calls when clicked. All you have to do is change the type=”button” to type=”submit”, return false from the function that does the AJAX request and then you define a “onsubmit” event for your form.

Example:

your form elements

And that’s it. Off course you should attach the “onsubmit” event via JavaScript not in-line like in the example.

Most developers just go “the usa what now?” when you mention usability. And it shows if you browse the internet a little. And it’s really sad that this is the case, as there are so many quick and easy ways to improve the usability of your web page.

I’ll talk about labels today. They are a very useful but often neglected tags. Take this web site for example (there are many other):

Notice the check boxes in the red box (I added that), you define what you want to search for with the search bar above. Great. Only that it isn’t.
If you want to select the “V imeniku” option you have to click the radio button and clicking on the text “V imeniku” has no effect. That’s annoying because you have to pixel-hunt that small radio box.

So how do you improve this? Enter label tag. You put the text that is associated with a certain option inside a label tag, and you set the “for” attribute of the label to the ID of the radio box (or any other form element) you wish to trigger.
Now the user can either click the radio button or the text and the result is the same.

A short example:

<input type=”checkbox” id=”cbContent” name=”cbSearchType” value=”content” /> <label for=”cbContent”>Po vsebini</label>

I would like to state here that all the web pages I’m responsible for are using labels, but they are not. Mostly they are my old projects I don’t have control over anymore. But there are still some active projects that don’t have labels on every form. But I “convert” them as soon as I work on that page on some new feature. Please, do the same!

And, if you haven’t already, read trough this web page (useit.com: Jakob Nielsen on Usability and Web Design).

Contrary to popular belief, on various developer forums, I’m, in fact, not a two headed monster crushing hopes and dreams of new comers.

Every now and then a new user registers who’d like to be a programmer. All is good up until the moment he click’s on the submit button of the new thread form. What usually happens then is a thread in which the new user is asking for complete source code for his problem/answer to something way out of his league/homework solution/…

Then I come along (or some other similarly minded colleague) and try to explain that nobody will work for free/he should start with basics/he should do the homework by himself/…

And then the new comer says isn’t a forum supposed to be a place where people help each other/but I want to do this, and I want it now/but I really need this tomorrow/…

In the past I’d try to explain to this new user how things work, throw in some analogies with being a pilot, car designer, etc. and I’d, off course, fail miserably. I really don’t know what’s so hard about understanding, that you have to learn to walk first before you can run, and that programming is no exception.

I’ve simply stopped doing this as it a complete and utter waste of my time. I just let the newbie learn the hard way. But I’m still trying to come up with a great response to this type of questions that would send the new user in the right direction. I do want to help; I always do, if question is really a question.

No educational content in this post, I know, but I just needed to rant a little :)

Time has proven that the best ideas are dead simple. Think YouTube, Flickr, Hotmail, Twitter, etc.
And once again somebody beat me to the punch and made a something that was under my nose the whole time, I just didn’t see it.

Anyways, the other day my father asked if there was any way for him to edit the web page of his singing choir. They have a simple HTML only page with some sub pages. So a full blown CMS would be an overkill, as my father would have to learn how to use that and he doesn’t need all the features. Well luck had it that I was browsing the daily WTF and they ware running an ad for something called CushyCMS. The name hit home with me (I mean it just so likable) and I clicked on the link.

It is a CMS … just that it isn’t. The video on the front page will give you a better picture of the whole thing so just go and watch it. But in a nutshell it’s a piece of software that you don’t have to install, you just register, enter your web page’s FTP information, add pages to the CMS and you can edit the content. It’s just magic.

The interface is idiot-proof so anyone can use it. The editor (you can define multiple editors and grant them access to selected pages only) only sees a simple rich text editor, where he can format the text, insert images, etc.
And the best part is, like I said, no installation required on your server. All you have to do is add class=”cushycms” to the element you wish to make editable and CushyCMS will generate a input field (RTE, regular input, image upload, etc) on your behalf. It even stores history of the changes you made, so you can rollback to any previous version if you wish. And, of course, you can still edit the pages by hand directly on the server.

The only draw back I found so far is the lack of any dynamic content generation. For instance; if you have a page with news, you have to edit the whole page, and add a new news item and edit it by hand so that it matches the design of other news. And you can’t make new pages (you have to create them by hand on the server and then add them to CushyCMS).

It’s, like I said, a very simple idea that I wish would think of. Oh and it’s free, unless you wish to brand it, in that case there’s a small monthly subscription fee.

Using jQuery (or prototype or whatever) is a standard tool in my tool belt nowadays. It’s so useful I can’t think how I’d do without. You can make some pretty nifty user interfaces with it. And not just pretty ones, but useful ones to.
Take our latest project for example, on the front page (and sub pages also) there is a list of TV stations and it’s current program (2 or 3 items per station). And some of those programs have extra description:

Now the old fashion way would be to click on a program which would then take you to another page where you could read the description. The jQuery way is to show the description immediately and with some style! So after clicking on the first program, for example, the description would slide down beneath it, thous saving user the time of a new request and the time it would take him to get back to the schedule:

Off course this is useless for web crawlers (google, yahoo, …) so you still have to provide the old fashioned way (if you wan’t for your content to be found). It’s really simple to achieve this. You construct the link (which opens the description) like a regular HTTP link which points to a page where you can read the same description (in my case: http://www.spored.tv/program/unicevalca-mitov/1009118). Web crawler (or any user who has JavaScript disabled) will now see this link and will be able to read the content.
Now you use jQuery to dynamically add a onClick event handler, to every link, which slides the description and returns false, so that the browser doesn’t follow the link. Feel free to view the source code of spored.tv to see how I’ve done this.