phpied.com

Via Eric Goldsmith, I found today this nice Web Performance 101 article, where the author, Alberto Savoia, states Top Four Laws of Web Site Performance. The article is as old as 2001 (heh, back then "website", being a relatively newer concept was spelled "web site" ) and the topic is performance, but the "laws" are strikingly fresh and applicable not only to performance, but to any aspect of the web development, and to the websites in general. I couldn't resist the urge to comment and add a 5-th law, so here goes.

1. The Law of Stickiness

People find a website they like which seems to do the job and they tend to stick around. Rarely are people loyal to a web site, so it's not uncommon for people to grow dissatisfied, or irritated, bored, or just find a better option... and migrate and stick around for a while at another site. Friendster-MySpace-Facebook anyone?

As a Yahoo! Search developer I would testify it's not easy to move people over from where they've been sticking around for a while, but it's already happening (Yahoo! Search grew the market share for 5 months in a row) and just the nature of things.

2. The Law of User Perspective

Successful sites are best developed when the developer is the user, when you build something for you and something you would want to use. But that's not always the case. So if your visitors are IE6, dial-up users a continent or two away from your server, don't assume that your Safari Mac browsing session from the room next to the server will be any indication of what users are experiencing.

3. The Law of Responsibility (a.k.a. It's Always Your Fault)

Whatever you do on the website - front-end, back-end, DB, network, whatever... you can change things for the better. So often we find excuses instead of solutions.

And as front-end developers (I assume most of you who read my blog), as, if I'm not mistaken, Nate Koechley puts it, "we're the last line of defense" for our users.

4. The Law of Expectations

People spend most of their time on other sites. Don't be the smart-ass with the cool, but useless and confusing feature. You'll be the only one who finds it cool. Be as fast as the competition, offer user experience people are accustomed to, e.g. put your logo at the top left corner.

OK, let me quickly wrap-up with my addition, before I get too cheesy and inspirational...

5. The Law of the Task

At the end of it, it's about the task. If people come to your site and are able to achieve their task (make a reservation, purchase, subscription, read an article, whatever) with minimum effort and distraction, they'll be happy. They'll recommend you, they'll say your site is fast (although technically, your roundtrip time may be not as good as the competition), they'll stick around (law #1). Don't request too much information in a form, don't be a PITA with your validation, walk the user through as little steps as possible... and get out of the way. People have more interesting things to do than spend time on your site. "If you love somebody, set them free". And you love your users, right

I remember reading a discussion over at Sitepoint - has the fun gone out of PHP? No it isn't! No way, the fun is here... or should I say PHun

Check this out - videos from a beer drinking contest at a PHP conference. I love how serious the gyus are, I mean, at the end, a contest is a contest, you're serious or you're out, it is a serious matter and should be taken with the necessary amount of responsibility

And how about this T-shirt on sale at php|arch?

While it may be amusing in a sorta geeky kinda way to wear your programming inclinations (or any other inclinations, for that matter) on a t-shirt, I believe I stopped doing it long time ago, my last fan t-shirt was probably the one displaying a nasty scene from a Canibal Corpse's album cover (man, am I that old!)

The nice thing about the shopping experience at php|arch, usability-wise, is that they really make sure you're aware of the shipping details. Did you see, they ship only to North America and the Rest of the World. No way you can get that t-shirt delivered on Mars or Venus, sorry, not at this time, working on it...

I recently posted about those auto-fill utilities, like the one found in the Google toolbar. They are designed with one mission in mind - to fill form fields for you. When you hit a page with a form, if the form has fields with common names such as "name" or "email", the auto-fill utility can populate the form for you, using some previously stored (by you) values.

How the Google toolbar for Firefox's auto-fill looks like

All is good, but in order to communicate which fields can be auto-completed, these type of tools change the input background to colors such as yellow. And if you have a dark page with dark background and light (white) foreground colors on the form fields, you cannot really see you're typing. (examples)

To workaround this I tried implementing a solution (as Marco suggested in the comment to the previous posting) where a javascript:
- traverses all text input fields
- gets the background color using the computed styles
- checks if the color is as expected. And if not:
- calculates a negative value of the background color and sets it as a foreground color.

Try the demo. In order to see exactly what it does, you need to have an auto-filler installed.

Some notes

Parsing color values

This demo is using a lighter version of my own RGBColor-parsing class. Lighter, beacuse it really needs to parse only two types of color values: rgb(xxx, yyy, zzz) and #xxyyzz.

Computed styles

There is a difference between IE and FireFox (anyone surprised?) in the way the computed styles are returned.

IE:
the_element.currentStyle.backgroundColor
will return something like #ffaadd

FireFox:
document.defaultView.getComputedStyle(the_element,'').getPropertyValue('background-color')
will return something similar to rgb(123, 45, 67)

Auto-fill-able fields

If you want the Google toolbar's auto-fill to recognize your fields, you need proper label tags in your markup. For example:

<input type="text" name="name" id="name" />

... will not be recognized, but ...

<label for="name">Name: </label>
<input type="text" name="name" id="name" />

... is ok.

JCreator - Another live example

I saw recently another site where the issue resolved above is very noticeable. If you want to download JCreator Lite from http://www.jcreator.com/download.php?productid=215952, you need to fill out a form. Submitting the form with errors will give you back the form with errors fields highlighted in red. Excellent idea and very friendly way to show validation errors. But the fields are red and the text is white. With the auto-fill ON, you get yellow fields and white text and you cannot see what you've typed that needs correction.

Screenshot with the auto-fill OFF:

Screenshot with the auto-fill ON:

I've noticed some bloggers redesigned their sites using very dark backgrounds and the results are often very cool. The thing is that the forms also have dark backgrounds and, in order to be readable, light colour fonts.

The problem I saw is that form auto-fillers such as the Google toolbar, paint the fields they think they know about in some shade of yellow. As a result, white font on yellow background is next to unreadable.

Dustin Diaz's blog was recently redisigned.

The form with the tooltip from the offending auto-fill thing.

What's my email?

Also Marco has done a great job redesigning his site. In his case the font is a shade of gray, so the text is more readable, but still not too contrast.

How to resolve the issue? Trying to find a one-colour-fits-all-auti-fillers may be hard, but maybe trying to keep the form fields' background as light as possible is a safer way to go.