You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Nov 22

A challenging website project

2004 at 02.47 am posted by Veerle Pieters

Let’s talk a little about some of the latest projects I’ve worked on. It started all with an update of the company logo, and housestyle together with a new brochure ending up with a new design of the online newsletter and website. Needless to say the website was the most challenging part of all.

A website is always a challenge but this one was a special one since I’ve implemented a few things that were new to me and it is also the first one where I used a stretchable layout. One thing is for sure, stretchable layouts give me a serious headache and nightmares.

These are some of the technical highlights of this project.

But now that it is finished and I look back at it I’m glad I did it and learned so much from this experience. The biggest challenge was for me the creation of the top and left navigation. For the top navigation I’ve borrowed a smart technique from Didier Hillhorst. It is a seriously cool technique that is really worthwhile looking into called Navigation Matrix. Thanks so much Didier ;-)

The left navigation main menu buttons use replaced images. So in the code you’ll only find HTML text, the images are defined by CSS. This, in combination with vertical dropdowns for the submenus that reveal when you mouse over them gave some compatibility problems that I needed take a step back and leave this out. In the original version there were 3 different stylesheets: 1 for Safari, Mozilla, Firefox, Netscape,... 1 for and I.E. 6 Windows and another one for I.E. 5 Mac only (since the menu didn’t seem to work in this browser). For I.E. 6 only text was used for the main navigation because of the trouble that the images gave me. This way the look differed too much with browsers that follow the standards and where I could use these images. But the fact that there was such a difference in look didn’t please my client. So I took one step back. The current version only shows the main menu buttons and once you are actually in a section the submenu is revealed. If I would have used only text for the menu (and no images for the main buttons) I think there would be less problems. Here is an idea I picked up from A List Apart to base this menu on.

Snapshots from the Telemak website

Another nifty feature I used in this site is the enhanced Shaun Inman’s IFR (Inman Flash Replacement) technique by Mike Davidson. The main sections use a simple gif image, but the sub titles use this technique which I find very impressive. It’s thanks to those 2 geniuses Shaun Inman and Mike Davidson that I was able to achieve these nice titles using just a simple Flash file and pure HTML text. Now THAT is seriously cool. Again thank you for this.

Implementing the navigation on top and left wasn’t easy but dealing with a stretchable layout is even worse. Some of the problems aren’t even solvable since the content doesn’t always flow nicely like you would like it be. For browsers that use standard W3 guidelines you can set a max-width. But we all know that Internet Explorer 6 doesn’t support this. Some things are uncontrollable. My layout bursts from graphics that it makes things so difficult. A stretchable layout is all good and well in a simple design with less graphics. In my layout I used some nested floats that make things a little more complex to deal with. I’ve made a simple sketch to give you an idea:

Telemak website - layout div contianers

As you can see there are a lot of div containers that make this layout. So you can imagine it isn’t obvious to make this work in all recent browsers and platforms… And I’ll never make that mistake again: doing this job for the same budget as for a fixed layout. It takes way too much production time because of all the extra testing and trouble you run into. So if I can give a good advice, technical specifications are important (now more then ever) in your price offer. Define as much as possible: platforms, browsers, screen resolution, layout (fixed or stretchable/liquid). Another advice: also add a separate price if you need to make it look and work prefect in I.E. 5 Mac and I.E. 5 - 5.5 Win since these are the most difficult ones.


29served

gravatar

1

permalink this comment Questionable Intelligence Mon Nov 22, 2004 at 08.07 am

First off, I’d like to say that you’ve done a great job.  The pallette, layout and imagery are excellent.  I’ve used that hierachical list navigation on a few sites myself.  There’s just one small thing I don’t like:  when I saw the media player widgets in the navigation areas, I immediately thought that it was something I could click.


gravatar

2

permalink this comment Ian Cox Mon Nov 22, 2004 at 08.16 am

awesome, anybody would be proud of that.


gravatar

3

permalink this comment Veerle Mon Nov 22, 2004 at 08.31 am

@Questionable Intelligence (what a name! :-) btw) thanks for pointing this out. Didn’t actually crossed my mind when I created this. Maybe I was too focused on the fact that they deliver streaming media. Maybe I should give it a “hidden” link to the “showcases” section ;-)

@Ian Cox, thanks. When I was creating the site there were times that I wish I could ban the whole thing to hell but now I’m actually glad it’s done.


gravatar

4

permalink this comment H. Wiedow Mon Nov 22, 2004 at 08.32 am

Hey,
I aslo must say, you do a great job. I may have a small hint for you. The menu on the left sid use a image for the hover state. I allways use one image and shift the image in the different states. So the browser has not to load a new image. You can find many examples by ala.


gravatar

5

permalink this comment Veerle Mon Nov 22, 2004 at 08.49 am

@H. Wiedow, oh I see. You mean a bit like I’ve done for my top navigation? For this I used 1 gif that has all buttons in it, in all states. It’s called the Navigation Matrix. Very interesting technique. So maybe I should have used that for both navigations. I’ll keep this in mind thanks ;-)


gravatar

6

permalink this comment awarnach Mon Nov 22, 2004 at 09.22 am

Nice design… nice tips.. but why do I see a horizontal scrollbar when viewing the site with Moz. FireFox set at a resolution of 800x600 pixels?


gravatar

7

permalink this comment Veerle Mon Nov 22, 2004 at 09.35 am

@awarnach, oh you are right I thought I’ve fixed this :-S Thanks for letting me know. I’ve used 780px for the line in the clearing div + for the minimum width in the CSS with that is 10 pixels too much to have no scroll. I’ll fix this in an update ;-)


gravatar

8

permalink this comment Ezku Mon Nov 22, 2004 at 09.56 am

A nifty design. What bugs me is that in the left menu you used different hover images instead of the sprite technique… as H.Wiedow already seems to have noticed. Curious how the top menu instead did have that treatment? :)

Yeah, definately a thing to fix. The load times are really noticeable. But, as said, a nifty design whatsoever. Nice job.

(Oh, and I’m not seeing any sIFR, but that’s because I’m running with Opera, right?)


gravatar

9

permalink this comment ekrem Mon Nov 22, 2004 at 10.01 am

first of all…great job! :-) i wish i could get such jobs hehe…

but there are a few things that imho not fit…

1. the header is way too overloaded…it give a very stressfull feeling if you browse through the content and to be honest… the photoshop work on the right header part is not that good as the wonderful gfx you did on the left side (the logo part looks AWESOME)

2. the corner on the bottom right corner is roundend… okay… but if you chose the “products” it looks like you have missed to cut the rounded part….

phew.. i hope you understand what i have tried to explain… i need sleep!

ekrem


gravatar

10

permalink this comment Veerle Mon Nov 22, 2004 at 10.32 am

@Ezku, I wonder can you supply some links to help me out a little more since the technique I’ve used on top is more for tabbed horizontal navigation (not for a left one). I looked at other examples/techniques to build my left navigation, since it is a “left” navigation and originally it worked in a total different way (collapsible) as you can read in my article. Since I needed to do a step back I looked at the fasted way to fix things. My budget was already “spend” you know ;-) I have to consider my budget too ;-)

BTW it works in Opera, but not in vs 6 (only in vs 7).

@ekrem, I’ve made 6 designs in total for my client and previous versions of the design used a less graphic heavy header (which I preferred btw) but they really wanted their banner with the Atonium in there.

Not all the images have the rounded corner since my client does the updates himself and he doesn’t know Photoshop as well as I do (to create such corner), so that’s why.


gravatar

11

permalink this comment AkaXakA Mon Nov 22, 2004 at 10.43 am

Wow Veerle, that looks really sweet. Ever since I saw the small screenshot you posted of it on Authentic Boredom I was wondering how the finished product would look.

I also saw you put in a max-width to keep it from streching too far on high resolutions, that’s important to know (as I found out on my own project in which I use essentially the same grid layout)


gravatar

12

permalink this comment Kevin Mon Nov 22, 2004 at 12.13 pm

You’re an inspiration! Next time I tackle a similar project, I will rethink my design process strategy.


gravatar

13

permalink this comment Ezku Mon Nov 22, 2004 at 12.28 pm

Veerle,

I think you’re confusing sprites for something overly complicated. The Navigation Matrix technique may look a bit complex, but in reality it’s just another application of sprites, which, in essence, are simple.

Here’s the thing: have an image that contains both the normal and the over state. It doesn’t matter if the menu is horizontal or vertical. (There also needn’t be a matrix, each button can be separate since they are independent of eachother.) Set the image as a background on an element the size of your button, and adjust the background-position property on :hover.

You should be able to grasp the concept rather easily. I once applied this to a mouseover menu that had worked with javascript, and it took around five minutes in total.

The original concept, as far as I know, comes from Petr Staníček’s Fast Rollovers. There’s an article about this on A List Apart: CSS Sprites: Image Slicing’s Kiss of Death. I bet you’ll find it most illuminating.


gravatar

14

permalink this comment Ezku Mon Nov 22, 2004 at 12.44 pm

Well, technically an image with two states is a one-dimensional matrix, but you get the point. :)

Oh, and I see where you’re using sIFR now. I forgot I was using the latest Opera 7.60 preview, whose text-selecting is a bit broken for a reason or another. I couldn’t select the sIFR’d text so I mistook it for an image ;)


gravatar

15

permalink this comment Veerle Mon Nov 22, 2004 at 12.45 pm

@Ezku, thanks for the information. I’ll look into this (when I find some time). One question: is it a problem if the hover state is much larger then the default state of the buttons? My hover buttons contain a background for the submenus (with the big number in). Hope difference in size doesn’t matter? I assume not but I thought I’ll ask anyway just to be sure ;-)


gravatar

16

permalink this comment matthijs Mon Nov 22, 2004 at 01.27 pm

Hi,
Very nice piece of writing, thanx for that! I have been experimenting with these techniques also. People interested in these rollovertechniques should definitely also read the links Ezku mentions in his reply (wellstyled dot com fast rollovers) Pay attention to the Update on Petr Stanicek’s site. That one is important for the IE6 flickering problem, I ran in to that one myself with a clients website…


gravatar

17

permalink this comment bogyit Mon Nov 22, 2004 at 02.34 pm

@Veerle
in regard to :hover statment size doesn’t matter, you can see an example here:
- http://diveintomark.org/

bye :)

P.S. you’ve done a great work :)


gravatar

18

permalink this comment koen Tue Nov 23, 2004 at 03.31 am

Very nice job, cool article, interesting replies. :)


gravatar

19

permalink this comment Philipp Keller Tue Nov 23, 2004 at 10.38 am

First I have to say that the site is technically well done. It has a very professional look.

On the other side I’m not feeling confortable while browsing the site. I think the side is overloaded, perhaps when you look for hours at the page then you get used to it but it takes time..

I’d like to specify what I mean:
- I also wanted to click on the “pause”, “forward”, etc. buttons, I would leave them out
- I think too, that the header is overloaded, the “thing” on the right is ok but the “swoosh” effect and the thing left too it are too much in my opinion
- the “latest news” icon is great (I think you are generally one of the best icon designers..)
- I would leave out the “latest news”-“arrow”, you know, the bubble-thing on the top right.
- I also would leave out the rounded corner bottom right of the latest news section.

I hope you are getting my input right.. I also think the website is done and you are not modifying any longer..
But this is just my opinion.


gravatar

20

permalink this comment Veerle Wed Nov 24, 2004 at 06.24 am

@bogyit, thx for the URL nice (and interesting) hover effects ;-)

@Philipp Keller, about the header remark, you’re not the first one who mentions this to me and I get your point. Some of my first design didn’t have this banner at the top, and I prefered those designs over this one. You can read all about it in today’s post.

Thanks everyone, your comments are much appreciated.


gravatar

21

permalink this comment meltz Fri Nov 26, 2004 at 02.13 am

hi Veele I notice one small error on the telemak site.

When you click on the about telemak and news side navigation and mouseover the submenu, the hover does not work.


gravatar

22

permalink this comment Veerle Fri Nov 26, 2004 at 02.44 am

@meltz, thx for mentioning. It caught my attention too a few days ago, no idea what causes this. But these pages are maintained by my clients and I suspect something ‘could be’ wrong implemented. I’ll have a look as soon as I can.


gravatar

23

permalink this comment rob-ot Sat Nov 27, 2004 at 11.54 am

It’s not my type of designs, but it does look very pro.
There is 1 thing I do not understand. In your content div you have added < img src = ” images/line.gif” width=“1” height=“420” alt=””  / >
I guess you have used it to get a fixed min. height? You can use Mezzoblue’s   trick for this. It will make your coding a bit more semantic.
Keep up the good work and writting. And i’ll practise my Englisch a bit more ;)


gravatar

24

permalink this comment Andy Budd Fri Dec 3, 2004 at 09.38 am

Just wanted to say nice site. The liquid layout works really well.


gravatar

25

permalink this comment Ryan Oswald Thu Dec 30, 2004 at 06.19 pm

I just want to be a designer. I don’t care about XHTSS XSLMRSS PHPCP XMLST CSSATOM, just let me design! I want to be creative and design a site and manage it. I don’t want my floats and absolutes to position unrelatively while I’m structuring my xhtml doctype cause I have to CHMOD my MovableType CMS for my blogging. So somebody please get this stuff working.


gravatar

26

permalink this comment Henrik Feldt Mon Mar 21, 2005 at 08.37 pm

Hello Veerle!

I found blog just today and I am reading and reading - finally someone who is good at design but still talks about the coding bit behind the design as well.

This site you have made is really well done, although I think, personally, that it’s a bit messy in the top right corner: the pause and stop buttons and stuff, u know…

Also Opera 8 Beta 2 Displays it wrongly at small viewport widths, but since it’s a Beta so far I wouldn’t worry. (For example: it chrashes when it displays my site ^^)

It’s refreshing to view the work of someone who use a bit different techniques than I do. So far I have mostly stuck with fixed layouts, although I’m slowly turning towards more liquid and dynamic layouts. I bet I’ll have a look at your implementation of the CSS when it comes to that.

Best wishes
Henke


gravatar

27

permalink this comment defrag Tue Apr 19, 2005 at 08.09 am

Interesting articles. I’m a new member so bear with me. What are your thoughts as to why complete css layouts is not used by the majority of popular websites such as amazon, ebay, etc. HTML tables are still being used with ext css at these types of sites. Is it not a web programming technology that is still not widely used and accepted by most high traffic websites? I’ve found that most websites using complete css layouts are just web designers. No? The reason I’m asking is I want to be sure I am advising my clients correctly and not simply creating a site for them based on my own design interests. thx


gravatar

28

permalink this comment reese Tue May 9, 2006 at 02.20 pm

I know this is an old article, but I have to thank you for your tip on getting more technical specs before quoting a project. One of the reasons I haven’t ventured into stretchy designs too much is the amount of work involved, but you helped me see I could build that into the quote if the client requires it. Thank you!


gravatar

29

permalink this comment Roman Thu Jul 6, 2006 at 08.02 pm

Text on your site (http://www.telemak.com/index.html) looks horrible in Firefox 1.5.0.4 on Win XP. Letters have gaps—they appear like they would on a bad quality fax.



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist