Funky style!

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Sites like and seem to have a very
slick, sharp and funky style. What sort of technology are they using,
it seems to be more than just standard HTML?


Re: Funky style!

On 26 Sep 2006 23:14:27 -0700, ruperty put finger to keyboard and

Quoted text here. Click to load it

Whatever the underlying technology, all that the browser is getting
are text, images, HTML, CSS and maybe some Javascript - just like any
other website. View the source and you can work out what they're doing
to acheive the effects you like.

Please help a cat in need: /
"I need someone to hide under, should the sky fall on my car"

Re: Funky style!

ruperty wrote:

Quoted text here. Click to load it

They're just using competent designers who have a good sense of graphic
design (probably something they're born with) and they know how to
translate this to a web site. The crucial difference, if you have to
point a finger at it, seems to be taking "bitmap design" and combining
it with fluid design.

Years ago there were bad web dezyners who were good paper designers and
had good graphical skills, but they never understood the fluid nature
of the web and the fact that "Your browser is not my browser". They
learned enough crude HTML to design a fixed-size bitmap in Photoshop,
then slice-and-dice it to fill cells in a rigidly sized table.
Generally these designs looked beautiful on the designer's own Mac,
then very ugly on another browser, such as the one used by their users.
You could tell these dezyners because they always blamed the _user_ for
having the wrong equipment to view the site and they were awfully fond
of "Best viewed at / with" banners and trying to force obscure fonts
onto people.

Nowadays a good web coder is someone who understands fluid design
(probably with CSS rather than tables) and knows how to make a site
that works equally well (as far as possible) on a big screen / small
screen or resized into a tiny window. They've realised that the web
isn't paper and that the browser accessing it isn't predictable.

A good web _designer_ is someone who understands this fluid web coding
issue, and they're also a good graphical designer. They're not afraid
of bitmaps, but they know that their bitmaps might find themselves
stretched and cropped to fit the window. Look for lots of thin bitmaps
that are repeated to spread themselves out, according to the actual
size of the rendered element - they're not the old blocky bitmaps that
insist on being an exact size in pixels on both axes. They also seem
very fond of graduated shading on these fills.

Re: Funky style!

ruperty wrote:
Quoted text here. Click to load it

Without looking at the code, this is what stires me from those two

 - gradient images repeated vertically on each side of the content,
making it pop out of the background.
 - images designed well for the background used as links
 - text on top of images for the headings

correction after doing a bit of right-clicking: the gradients aren't 2
images on each side of the content, they are one images as the
background of the content.

 - gradient image repeated horizontally for the top of the background,
with the ending coor of the gradient used as the background color
(scrolling up and down makes it look like the gradient could have
benefitted from being a few pixels taller for a smoother transition
from image to solid color)
 - again, text on top of images so that text size can change

Because both pages use fixed image sizes, their content areas will
stretch the screen if you have a very narrow browser window, and
drastic increases to text size will have text overflowing onto other
images. So, although more code could solve the latter problem (and the
former sizing issue should probably remain to prevent elements from
overlapping in small windows), and making an assumption of the type of
visitors they generally get, the design will probably work perfectly
for 90% of their users, and good enough for the other 10%

Site Timeline