Page Layout for Products

How to layout product images and descriptions inc price

[uk_designer]

Hi all. I've got a website that has around 8-9 pages each page has around 6-7 images of produts on along with text descriptions and prices. The current layout of the page is a large table divided into rows/colums.the left cells contain my products which go down vertically and there is a text description and price etc directly next to it on the right cells.

I am redesigning my site and am looking for any advice about alternative ways of laying out the products for each page instead of the standard table described?
Thanks,
Michael

[Marcia]

>>The current layout of the page is a large table divided into rows/colums.the left cells contain my products which go down vertically and there is a text description and price etc directly next to it on the right cells.

Good question Michael, are you using imbedded tables for each product now or is it all one large table?

I've got some similar pages I'd like to do a makeover on. What I'm running into is that the way the tables are set up now it's hard to do updates to the pages because of the way the shopping cart code is coded in.

The way I have it now is that I'm using an imbedded table for each row with about 3 or 4 columns going across for each of 3 or 4 products hard to update. I think it makes it easy to scan across a single row to see several products or styles at a time rather than having to scroll down to see each one at a time. I really like products or styles displayed that way.

But when it's done that way you have to be really careful to change the right fields, particularly n the shopping cart code. It's hard to describe, but all the product info isn't together, it runs sequentially across for each and you have to match them. it would be impossible to use CSS for positioning; it has to be done with imbedded tables, which is one reason I've stayed with them. It might be easier with an additional set of tables, but that would be going imbedded 3 deep, possibly even 4

Its not only a matter of how it looks, it's how it affects the ease of coding and the code/text ratio. I'd love to figure some alternative product layouts; there don't seem to be many options available.

[uk_designer]

Marcia yes I've been looking around the net for some page loyouts but there doesn't seem to be any available. I have just created a table with small border and input an image onto the left side and text to the right side of this i.e the right cell. I think it looks ok but am interested to see how other cells display their products which does actually seem to have the same layout as myself but their borders are hidden.
I will mail you my web page example and I'd be interested to see how your setup is.
Michael

[jdnnj]

I recently came across this article at A List Apart.
[alistapart.com...]
The cool thing about this solution is that you do not have a fixed number of columns, each product will float depending on the window size. I had not set the height for 'float' div's and with some products having 2 line descriptions it made them float out of whack in IE6—giving them a fixed height solved this problem. It may take some tweaking to be perfect in your application but I believe the idea is a great alternative to tables.

[tolachi]

I second the advice on reading the A List Apart article.

I also recommend reading "Speed Up Your Site" by Andrew King. He talks about how the way tables render can slow down the speed at which your pages display and offers some design advice. The book lists a lot of good resources on the net to checkout, so it is more of a very comprehensive jumping off point on the multitude of ways to make your site leaner and meaner.

[Mark_A]

I agree re splitting up tables ... you can use more modern methods using css or you can split the page in to header main contents, lower contents and footer tables etc to make each load faster ...

I forget what the size is but after table contents reach a certain size nothing shows till its all loaded ... bad :-(

Re laying out product pages ...

There are loads of ways .. I recommend browsing other sites and seeing what you think will work the best from what else is already out there.