Aleksandar • Vacić

iOS bits and pieces

From 5-level-nested-tables to clean CSS design

My company’s main product is called MarginMaker, a comprehesive betting platform for telebetting, shops and internet betting.

Our most recent client first bought telebetting, and when that was completed successfully, they contracted us to expand to Internet betting as well.

First incarnation of the web site was build with features at the fore-front. We were to create web site that will allow the customers to place bets in the fewest steps possible, as well as give them ability to quickly sift-through betting offers. Since all competitors already had web sites, we were in position to analyze them, see what is good and what is bad and build something better.

So we did.

Web site had all the bells and whistles, with floating betslip that would follow you to every page you go (unique feature no one else had), live price update without page refresh etc. Site is very dynamic (using ASP pages) and display could totally change in a matter of minutes.

And all of that worked in modern browsers, as well as IE 4 and partly in NN4.

Client’s decision to support 4.0 browsers gave us a lot of trouble. We coded several versions of the same script, layout was built using bloated markup; from time to time, client asked for some new feature or change to be incorporated which, in the context of time-frames, often lead to more bloated markup.

So in the end, we had average home page of about 80k HTML, with 300kB od javascript’s, multitude of images and Flash banners and some stylesheets. This was slow to download, so we placed all scripts in HEAD part to cache them (IE does not cache external javascript files called in BODY part).

This then introduced the delay to content - even with all files cached, browser still sent almost 30 HTTP requests to check has the files changed.

On above-56k connections, all this was not a problem and customers liked the features and number of registered users quickly grow. But for majority of UK modem users, site was slow. The fact that most of them used free services like FreeServe made things worse (those ISPs are often overloaded which leads to unacceptably long wait for HTTP responses).

So, we looked for solution. IIS log analysis revealed that 99.1% of users used IE5+, with IE 6 being 72.4%. Using this and lots of talking, client agreed to redesign using modern web technologies and abandoning full support for old browsers.

Here follows a tale of converting multiple nested-table layout to valid HTML 4.01 + CSS layout.

In the end, we got 5x smaller files and 10x faster web site.

Although I work for Finsoft and here describe one of its projects, this blog and thus the following write-up has nothing to do with Finsoft Ltd. All expressed views are entirely mine.

Can you place layers over flash files or drop downs?

It is a known fact that some browsers can’t draw layers (absolutely positioned) over Flash files or drop-down boxes. To see why that happens, refer to my first WCH post, which was my first tackle with this problem.

Now, after extensive testing in several Windows and Mac browsers, I have much better picture how all this works.

Going cross-platform

This revision of the script & style is rather small (hence the small version increment) but it adds important compatibility with Mac browsers. I’ve tested it on Mac OS 10.3, in Safari 1.1, IE 5.2.3, Firebird and Camino 0.7, Opera 6.03 and OmniWeb 4.5. Also tested on IE 5.1.7 on Mac OS 9 but very lightly as it appears that that one has identical behavior to 5.2.3. If you find differences, please let me know.

CSS is slightly changed, and simplified in a way; more like streamlined, free from unneccesary style rules. I also returned WinXP style example - it needed change in IE-related script to work properly. Fixing this has side effect that item icons can be used again.

I provided download links for each example menu style, so you can play around and reuse them.

TTT: EE

Treebeard saves Merry and Pippin from Old Willow

I just finished watching Extended Edition of The Two Towers.

It is totaly amazing.

42 mins of additional footage really fill-in the gaps. When I watched the original movie, I felt that some things are missing, that story cuts too quick to some scenes. I was also puzzled why have Peter Jackson and co. did some things.

Lots of spoilers follow - do not read if you prefer to see it fresh and new.