New website for Sandberg Trygg

Yesterday the new website for the Swedish B2B advertising agency Sandberg Trygg was launched. Sandberg Trygg The new Sandberg Trygg website

The site was designed by Ola Carlberg of Sandberg Trygg and developed entierly by me with project management by Martin Sandberg of Studebaker.

The gory technical details

There are some interesting technical details I’d like to share with you:

Minimal SWF

The FLA contains only fonts and a single line of code — the rest is in external source files. There are no other assets included in the FLA so the resulting SWF is less than 115 Kb and loads in a flash (pun intended).

MTASC

I have used MTASC during the development. I created the initial SWF with fonts and then used that SWF as a resource library by making MTASC read it but output the resulting SWF as a new file. That way I didn’t have to start the Flash environment as long as I didn’t change the fonts.

All data is external

The text content and other data is loaded when the intro greeting is displayed, but images are loaded as needed. There isn’t a single loading sequence, the user never has to wait for the site, instead it tries to load images intelligently making use of natural pauses where the user is busy reading a text, as well as deferring loading of larger images in favor of thumbnails to give the appearance of completeness.

Having all content and data external is really good, some of it is absolutely necessary to have external since it has to be in a database, but images and texts that don’t change often are still worth not having in the SWF since it’s just a matter of replacing the file on the server instead of re-compiling the SWF when it needs changing or tweaking.

Deep linking and SEO

The site is also fully deep-linkable, bookmarkable, reload-safe, SEO’ed and multilingual. All text content is available to Google in a simple text-only mirror of the site, which is created by a single XSL. The text-only version is also used if the user wants to print a page. The user can choose between Swedish and English, but the underlying system supports any number of languages.

Backend in PHP

The backend services are written in PHP and there is a MySQL database underneath it all There is also a simple administration system which is an Ajax-application, also with a PHP backend. The backend combines all data into a single package which is compressed and cached in order to speed up the site’s bottleneck, just before the menu is shown. That is the only place where a loading squence might be desirable, but if the user doesn’t have a very slow connection the loading shouldn’t take more time than it takes to read the greeting message (which is different depending on how many times you have visited the site, so user’s won’t be bored).

Problems

I had some problems during the development, three of which are interesting to talk more about:

Fucked up inheritance

The first was that without any warning the inheritance chains of some of my classes got totally fucked up. I couldn’t find any explanation for it besides the possibility that for some reason the classes were put in the wrong order in the SWF so a parent was loaded after a child. Unfortunately, I have no way of confirming this, and I didn’t find any way around it at first. Then out of sheer desperation I tried the -group switch on MTASC and suddenly everything worked fine. -group puts all classes inside a single movie clip, which is different from the default mode. I guess that when the classes are put in the SWF this way then end up in the right order.

I haven’t seen anyone else report this error, but I’m starting to realise that I’m quite alone in building Flash applications in a fully object oriented way with all code in proper classes and lots of abstractions. Most Flash developers don’t end up with inheritance chains longer than two. (I know, extends is evil, I belive so too, but there are examples of inheritance used right here).

Cut-off diacritical marks

The second problem I had was that in large sizes, more than 60px, the ring of the letter Å (a common Swedish letter, pronounced somewhere near “o”) would be cut off. This appears to be a bug in the font rendering system in Flash. The solution was to increase the leading to double the font size in headings (where the leading didn’t matter anyway) and turning on cacheAsBitmap (otherwise it wouldn’t work when tweening).

Loading and animation

The third problem has to do with loading. The site loads a lot of images, and when an image is loaded it is displayed by fading it in. At first, a new image was requested as soon as one was loaded, which meant that there was usually one image loading and one image fading at the same time. When this happened the player started skipping frames in the fades looked jerky and slow. The solution was to wait until an image had faded all the way before starting the next loading. This slows down the loading, since a lot of time is wasted waiting. It would be good if it was possible to load and animate at the same time, but it seems not. I can’t understand why Flash can’t handle loading in the background while still running animations at 30 fps.

2 Responses to “New website for Sandberg Trygg”

  1. Jens Says:

    Snygg vill jag säga. Men hur fick du åäö att fungera som de ska? Jag har provat alla varianter men så fort jag hämtar in texten från en db så blir vissa bokstäver boxar eller liknande.

  2. Theo Says:

    Orsaken till att tecknen blir boxar är att du inte skickar den till Flash som UTF-8.

Leave a Reply