[thelist] Re: image slicing - not for the timid

Thu Apr 26 12:16:29 CDT 2001

OK.... here's my take on this design problem.

First of all, there are entirely too many "pixels" there that do not add to
the usability or visual appeal of the site, and do not reflect the content
itself.  So get rid of it, while maintaining the overall design.  Here's
how...

- Anything that is a "line" should be an html line, not a graphic.  So the
black borders around the "boxes" could be table cells with visible black
borders.  You could also make a table with little cells for gutters and then
just chop up an image that was only as wide as the vertical "side bar", and
about 3 pixels tall.  Then insert it into the gutter cell and have it repeat
as a background.  This will give you the illusion of having the whole border
vertically, but will only use a very small image, and you can reuse that
image over and over on each table.  The background images wont render at all
on 3.x browsers, so make the background a solid dark color to act as a stand
in border if viewed by a 3.x browser.  Another approach along these lines is
to make an image as wide as your table and 2 pixels tall.  Make sure it
includes both "edges" of the table.  Let that image repeat for the length of
the table, and then use images for the top and bottom caps.  This lets your
pages flex to account for various text sizes used by users.  Its also easier
to create.

- Convert all graphic text into HTML based text, with the only exception
being the header.  Use the same trick up top to extend the gray and blue
stripes across the screen to the right.  This will work for a liquid layout
as well.

- Anywhere you have a corner, chop out an image to retain the corner.  But
delete any images that are used in straight horizontal or vertical lines and
replace with tiny repeated versions.  Anything else is a waste of bandwidth.

I could go on and on, but these are the basics.  While your graphic designer
did a fine job, its immediately obvious that person has no experience with
web design and a few "errors" are present that you may have to sacrifice in
the UI.  The most obvious is the overlapping tab just above the "subscribe"
box.  Preserving these sorts of design elements will significantly increase
download time, and in the end will do nothing for your users experience.  My
advice would be to ditch that sort of effort.

In the end, I would suggest some web UI experience golden rules:

- Any patch of solid color should come from HTML, not a graphic.
- Any text should be HTML based text, not images
- If a "graphic" does not DIRECTLY support the content of your site, dump
it.  Graphics for table boxes only serve to draw attention to the group of
content itself, nothing more.
- Always reuse graphics and visual elements as often as possible.  This
speeds up downloads and helps add cohesiveness to the overall design.
Future pages will used cached versions of the visual elements rather than
download new ones which allows you to "build" visual density deeper in a
site

Ok.... take all that for what its worth!  I hope something in there was
valuable to you.  Please feel free to contact me if you had more questions
about the slicing tricks.

Thanks

> --
> 
> Christopher Orth - Webmaster
> The Casey Family Program
> -
> corth at casey.org
> Desk: 206-282-7300 X 8556
> Mobile: 206-510-4465
> Text messages to: 2065104465 at page.nextel.com
> 

-----Original Message-----
From: J. Blanchard [mailto:jay.blanchard at thermon.com]
Sent: Monday, April 23, 2001 8:28 AM
To: thelist at lists.evolt.org
Subject: [thelist] Re: image slicing - not for the timid

---
Message: 16
Date: Sun, 22 Apr 2001 19:30:23 -0700
From: Cayley Vos <cvos at netpaths.net>
Organization: NetPaths.net
Subject: [thelist] image slicing - not for the timid
Reply-To: thelist at lists.evolt.org

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. 
This would make a good advanced problem for a web design class.  anyone that
can help will get a
case of beer.

http://www.netlivemusic.com/images/nlm.gif

for anyone seriously interested (masochistic), I can provide a psd
--

Cayley Vos, Principal
---

Cayley,

Just perfromed a quick test of this, I actually approached this from a
rather simple POV -- 4 total slices...
1st slice is left hand underneath "Home"
2nd slice is from the gutter between the left side and the middle section
3rd slice is a small sections between the 'tracks' and the 'Features' which
can also be used as a table background image which will give you liquidity.
(This slice is 1 pixel wide)
4th slice is from left side of 'Features" to the far right side.

Rather a simple approach using matching background color and given that
there are straight lines. All baseline graphics can be used as table
backgrounds in their respective cell, then add all text and pictures using
CSS for positioning.

Jay Blanchard
Web Engineer
Thermon Industries
1.800.820.HEAT x327

___________________________________________________________________________
Visit http://www.visto.com/info, your free web-based communications center.
Visto.com. Life on the Dot.

---------------------------------------
For unsubscribe and other options, including
the Tip Harvester and archive of TheList go to:
http://lists.evolt.org Workers of the Web, evolt ! 