Skip to Content

Oracle website

I just stumbled upon the Oracle website which immediately caught my eye.

Although they're using a table-based layout, I love how they've designed the table to fill the browser width on any resolution, while the neatly constructed flash images slide over each other when you resize your browser. At 800x600, most of the flash image on the right disappears while no horizontal scrollbar comes into play. At much higher resolutions (I tried up to 1600x1200), the images still continue to reveal themselves without fading into a background colour like you'd usually expect.

UPDATE: After looking at their source code for a bit, I've discovered that it's actually just a single flash file set to 100% of the variable-width table cell, so the overlapping is taking place in the flash file. Very nice either way.

Throughout the rest of the site they haven't restricted the width of the layout and as a consequence the pages suffer from poor readibility with long lines of text at resolutions higher than the average, which when all things considered, isn't such a big deal: W3Schools Statistics put the 1024x768 resolution at 53% share since January, with higher resolutions at only 13%.

I've always debated that system/browser stats are irrelevant but it's becoming a matter of time until this trend extends into the corporate environment and not only sites with a design/techie audience adopt a 1024x768 or higher approach. Having said that however, not all users have their browser window maximized to full screen, so my debate stands firm. Cater for all preferences.

I read a claim somewhere the other day that my site was designed for 1024x768 screens. It's not, and I'm confident in my restrained liquid layout approach to use it for client projects too.

Now if I can just work out how to successfully pull off this layout with a max-width middle column...

If you're looking for a neat development tool to check your designs for multiple screen resolutions, check out Sizer: a freeware utility that allows you to resize any window to an exact, predefined size.

And finally, thanks to Styleboost for the linkage and click-through visitors for the feedback, I'm in awesome company.

 

8 Comments

07 April 2005
02:28 pm

tripeak

ooh, WELL DONE! Quite cool

Cape Town’s wonderboy Damien du Toit has found the winning formula with his latest site design.

07 April 2005
06:14 pm

Digiguru

Sizer is a very neat app, shot! Well done for being pimped on styleboost. He once told me my first version of Digiguru with the monks was too dark … strange how things change.

08 April 2005
01:55 pm

nrgza

LOL
“Wonderboy… what is the secret of your power?”

Kidding dude, you know I love how coda.coza’s looking. The whole browser size thing kinda flies right past me, but hey.

08 April 2005
03:51 pm

mudassar

cool site, nuff respect

09 April 2005
01:42 pm

MN

The webdeveloper plugin for Firefox also has a resize option…

09 April 2005
04:36 pm

Justine

Blah, blah technical technical. Were wondering while sitting on the bus yesterday… (travelled for 26 hours in a small mini bus along a dirt road – your mind has a lot of time to do some thinking)… you never said anything about REM concert. Good, bad, awesome??

09 April 2005
07:34 pm

coda

Blah blah, bus rides, blah blah. :p

The concert was alright, didn’t quite meet my expectations which I guess were too high. But looking forward to their gig in Scotland in June, the outdoor venue (I think) and being right up front will make a huge difference!

26 May 2005
03:59 pm

daniel

props to you for creating a kick-ass website. one of the absolute top personal sites ive ever seen.

just wanted to let you know, since im on dual displays (3200×1200) i checked the Oracle site out, and the images stops at just around 1800 pixels. right after the rightmost womans head ends.

just thought you might want to know.

keep up the good work!

Leave a Comment

Your e-mail address is required, but will not be published.

 
 
 

Tags allowed:  <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>