Archive for October, 2007

Steve Souders, chief of Yahoo's Exceptional Performance Team, devised 14 rules for faster pages to squeeze more zest from page performance, the rules in short are:

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network (CDN)
3. Add an Expires Header
4. Gzip Components
5. Put Stylesheets at the Top
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make Ajax Cacheable

After sourcing through numerous high traffic sites they discovered that on average only 12% of a page request is used up by back-end processes whereas the remaining 88% is used up by front-end processes, such as JavaScript, CSS, Ajax and parsing the DOM. This is an interesting analysis but not at all surprising.

Yahoo have also released a handy Firefox plug-in called YSlow which parses a web page and gives you performance analysis based on these 14 rules.

Took a while but was well worth the wait, some interesting analysis has been made on the results. Go get it!

A recent SXSW podcast titled "The Holy Trinity of Web Design" dealt with the issue of contention in projects consisting of in-house teams and contractors. Contention is especially apparent when both sides are technically sound and experienced. As a contractor, querying why things are as they are or suggesting new ways of doing things could be seen as being critical to the in-house team who do not see any problems with the way they are working. The situation is a hard one to be in; recommending new approaches that add, what they see as unnecessary, work is a big risk take and not taken in good measure.This is something that rang true to my personal experience. In most cases I had to prove my technical expertise on a topic before I could gain the respect of team members. Once that respect is gained, the contention reduces and they are all ears.

So here is my advice to those who are currently in this situation:

• To the in-house team: You need to keep in mind the reasons you employed outside help in the first place. Contractors are in a position to contract as they have proved their technical grounding and come in with a wealth of knowledge and potential to tap into. Do not waste that potential! You should also be happy a contractor is voicing their opinions and going out of their way to suggest improvements which will benefit the company as a whole.
• To the contractor: You must not be too pushy or overly critical of everything. Respect current processes that are in place, even though these processes may be inefficient. On critising give practical advice and action points. If there is action to be taken offer to be the initator. This will come in favour as it demonstrates you're being constructive; not just critical.

In the end it really is down to respect from both parties. If either side feels disrespected what started as an enjoyable gig could turn out being a political battle.

As you may well know, using a definition list (DL) to layout forms with labels and fields side-by-side could be a bit flaky at times; forms don't seem to scale nicely and numerous layout problems could occur with dynamic content. Typical pitfalls are situations where a label or field takes up two or more lines or a BR tag in the DD column breaking things. After some playing around and testing I finally came to an elegant and bulletproof solution.

dl {clear:both;}
dt {float:left; clear:left;}
dd {overflow:hidden; clear:right; height:1%;}

The above CSS snippet will float the DT tag to the left. Then the DD tag will snug nicely to the right of it. The clever thing is if the content within the DD tag spans more than one line it will be indented by the width of the DT column. Try it!

However, our form looks a bit messy at the moment as the width of the DT column is determined by its content. Hence form fields and labels don't align properly. To resolve this all we do is add a fixed width to the DT column.

dt {width:10em;}

Now, we're faced with yet another problem. If the contents of the DT tag spans more than two lines it will occupy the space of the DT tag below it, pushing all the other DTs down causing misalignment of the DT - DD rows. To resolve this we add an additional empty DD tag for clearing, which we place below the actual DD containing content.

dd.x-form-clear {clear:both;}

To complete this post here's an example form layout using definition lists.