|CSS Photography Website?|
I have to build a website for a photographer, including several galleries linking thumbnails to larger images, plus links from images to PayPal.
I'd like to build the site in CSS but, being new to it (i.e. never having built a CSS site before), I'm not sure if there are any tips or tricks I should be aware of in building an image-heavy site.
Any thoughts you have will be much appreciated.
Edit- Sorry, one other "trick": photographers often bug you about making their photos look as good as possible (read: large file size), so if they have any images that can be repeated from page to page (i.e. header, background image, etc), you can place these images in the CSS, and they will be cached on the first page's download... users will not have to download new images on every page.
I'm a hugely avid supporter of standards based web design, and will fight tooth and nail with anyone who questions the benefits of using CSS-P over tables-based design.
However, it's important to bear in mind that tables do have their uses. One of the central ideas behind CSS-P is using elements for the purposes to which they were intended. Tables are intended to display tabular data, that is, data which is better understood when presented in columns and rows.
So the question is: does an image gallery count as tabular data, or is it more like a list? That answer probably depends on the application, as I can think of gallery set-ups that would match either description.
Point being, consider the possibility that using a table to display the image thumbnails may actually be the semantically correct approach, and if so, there's nothing wrong with placing a table in the layout to hold those images.
If, however, you think that a list format is more fitting, my adivce is to make ample but correct use of the float property. This will be far easier if you can standardize the size of the thumbnails, even if this means nesting each thumbnail in a standard-sized box, which is then floated. FLoats used in this way will work beautifully UNLESS the floated elements are different sizes, in which case so many funky things will happen you'll curse the day stylesheets were invented.
Don, cEM, good points both of you. Thanks.
One other thought. The photographer, I know, will want to add new images to his galleries -- I don't know how frequently, but probably several times a year. Is this simple enough with CSS?
Also, should the photos be in some external file, such as XML?
I agree with cEM that there is definitely a "tables suck!" mentality among some of us CSS-ers, which leads to people building totally unnecessary layouts where tables would work fine/better.
However I am happy that you just posted this reply Pab, as the issue you pointed out is what led to my rationale behind NOT using tables for image galleries for photographers' websites (Though again, I agree with cEM that depending on content and purpose of any other site, tables could often work wonderfully).
As I said, I've done some photographers' sites... and during the design process, ALL of them admitted that they wanted to constantly update with more photos, but had no specific idea of how many more photos they be adding to the galleries in 6, 12, 18, and 24 months. Hearing this, I decided that creating a monster-sized table and leaving empty cells for later was a fairly moronic approach (perhaps there is a better client-friendly way to do it with tables, but my idea is to always to build a site that the client can update on their own... trying to tell people how to manipulate td's and tr's over the phone is quite fruitless).
By using float properties correctly, or creating a solid list style, you or your HTML-illiterate client can add photos til the cows come home, tacking on only a few html tags every time, rather than a completely new table row, or worse yet, having to rehash the whole table. Doing things with CSS-P solved any potential 3am calls I may have gotten in 2 years when the site owner needs to add 20 photos to a page.
Missed this topic, but seeing as it's something I'm doing at the moment I thought I'd comment.
First, 'tables are for tabular data' is a good phrase, but not very useful unless you define 'tabular data'. Generally I take 'tabular data' to be 'data that fits into the intersect of two headings', not 'data that's traditionally laid out in a grid format'. For that purpose CSS supplies display:table and other associated table displays. Shame that it's not supported in IE but as ever we have to work around this.
Secondly, the float/clear method has some obvious benefits over tables. In my example I have a sidebar floated to the right of my main column. When my images come to the end of this I want each line length to expand out to fill up the whitespace automatically. This would be impossible with traditional table based layouts.
For best results use server side code with image upload. As long as the code is Accessible its fine to use tables for layout. The users will not know the deference and I bet they also use their dinning table as a desk or work bench given the chance of convenience? CSS is more complex than tables and the Internet is not about standards but the ability for average Joe to build a website without having to know about complex DIV's and CSS. For advanced users by all means use DIV's where you can but its no big deal in reality.