[thelist] image slicing - not for the timid

viveka me at karmanaut.com
Mon Apr 23 09:10:16 CDT 2001


At 7:30 PM -0700 22/4/01, Cayley Vos wrote:
>I must admit, i've come across a doosey.  I have a beautiful graphic 
>created (by my designer) and
>now I have to make it elastic for the web.  this is the kicker. 
>making a standard 800 pix wide site
>from this is no problem.

First step is to resize it to 780 pixels wide (from 850)
so it'll really fit on an 800x600 with room for a scrollbar.

I figure the only really stretchy part is the middle content
section. Each of the three main columns need to be a
table, nested inside a larger content table. This should
be separate from the table running across the top banner.

The biggest problem I see is the form elements.
In some browser/OS combinations, they can be more
than twice the size of other combinations. There's
really no consistency in their size, or real control over
it. The only way to deal with this is to design around
the problem - give form elements plenty of room to
grow. The input fields on your page are far too tightly
designed; they need to be moved somewhere they
can stretch out.

Here's a very quick shuffle of your elements, with some
rough slicing lines drawn in as well:

http://www.karmanaut.com/coursenotes/examples/images/nlm.gif

The slices aren't really right, or finished, but they give
an idea of the approach I'd take. Banner table up the top,
content table under that. I've made the left column part
of the content table - that's wrong, it really needs to be
its own nested table inside a single cell. More like the
middle column, which should extend up to incorporate
its header bar. This is the main place where the site
gets liquid. If this image is specified ALIGN=LEFT with
some HSPACE around it, then the text can flow under
it at small screen sizes, like this 640x480 example.
This might need a little browser testing and design
reworking to be reliable though.

Notice the subscribe form is in its own table inside
the middle column table inside the content table.
This allows it to stretch if it needs to, using tiling
(or just wide) background images behind the form
elements. I've moved it in the layout to attach to
the wider middle column instead of the narrow
left-hand column (which should probably just
stay at a fixed width) to give it room to grow.

Anyway, it would take more work than this to get
it right, but this is where I'd start.

>This would make a good advanced problem for a web design class. 
>anyone that can help will get a
>case of beer.

Well, I'm in Australia, we have beer here already, but
thanks. Instead, do you mind if I use this as an example
for my web design students? It would make a good
advanced problem for them ;)

Regards,

V.

-- 
|  Viveka Weiley, Karmanaut.	 http://www.karmanaut.com
|  hypermedia :: virtual worlds :: human interface :: truth :: beauty
|  http://www.planet-earth.org :: http://www.MacWeb3D.org
|  http://www.sydney.siggraph.org.au





More information about the thelist mailing list