Draft Photography Website Advice Needed

Hi there,

I'm trying to create myself a photography website using a CSS based layout.
I'd normally create a website using tables, so this is a first for me.

The link to my website is here: http://tinyurl.com/4focd

The content on this site is so far very low (so not all the links work yet),
but before I spend too much time in the design and coding of this (by
coding, all I know is HTML and
CSS, so nothing fancy going on here I'm afraid), I'd appreciate it if you
could have a look at what's there already, and give me some feedback on the
design, and also some pointers on how I'm doing the CSS.

I realise that the layout only seems to work as I intend in Internet
Explorer 6, and this is how it should look: http://tinyurl.com/64epj If you
have any tips or hacks that you know of that will make the site work well in
most popular browsers, that'd be really helpful.

One more thing, as I only know HTML and CSS, I've been struggling to find a
quick way of adding photos to the Gallery section, without manually creating
a popup page for each image! I can just make the link for each image open
in a popup window on it's own, but I preper the HTML popup window (see the
second photo from the left for an example of the HTML popup window). Does
anyone have any tips for doing this in a more efficient way at all? Any
time saving advice will be appreciated, especially when I hope to add
several hundred photos to this website, once all the galleries are added.

Thanks for any help or advice, it's appreciated.

Regards,

Stephen

ste© wrote:

Your handle is copyright?

Hi there,

Er, G'day.

http://tinyurl.com/4focd

Don't provide a tinyurl. Provide the real one. Those tiny things expire and
make the archive useless.

Nice look :-)

Is there supposed to be a black line through the splash picture?

You are using images of text for your navigation. Don't. Those images are
not resizable.

I assume you are doing this to achieve the rollover effects. This can *all*
be done with pure text/HTML/CSS. No images required. Makes it *much* faster
as well, no pesky images to download and *no* need for all that javascript.
You also then get to use a different colour for visited links.

The HTML:

<script language=JavaScript>

Should be <script type="text.javascript>

<!-- Hide script from old browsers

The only browser you are hiding anything from is Netscape release 2 and
other similar things. These are now totally obsolete. You don't need this
cargo cult stuff any more.

The image preloads: see above.

There is some redundancy:

<div id="footer">
<p class="footerstyle">

Why not just apply all the styles to the p containing the copyright notice.
There is no need for an enclosing div. Same for many other bits. You don't
need the divs. Just apply the styles to the elements inside the divs.

Why are you serving up your pages as .shtml? I see nothing that needs a
secure connection here.

The CSS:

Why is *everything* positioned relative? Do you know exactly what position
relative means? If not then you should not be using it.

The CSS is way to verbose. You don't need all those rules. Utilize
inheritance. You seem to be specifying a rule for each element in your HTML
document.

Do *NOT* fiddle with my UA. This is my browser, I like my scroll bars nice
and blue, like I set them up to be.

The gallery:

The grey on black navigation bar is almost impossible to read

Nothing happened when I clicked a thumbnail. Oh hang on, I just got an error
message. My popup blocker has stopped you from opening a new window. Why do
you think that I need another window to look at your images? The one I
already have open is fine for me.

Contact:

You are aware that mailto does not work, are you not? Hint - I am in a
public library. Do you think a public library has an email client installed?
Hint - I use hotmail. I do hot *have* an email client.

Other:

The font size is not fixed. It is, however, a bit too small at 80%. I
immediately enlarged it back to what I like. Why not simply leave font size
out altogether. You will then get a font size that your viewer likes.

The fluid width is a big plus :-)

--
Cheers
Richard.

ste© wrote in message ...

Thanks for any help or advice, it's appreciated.

A photographer who doesn't know how to use 'Photoshop' D'oh.

Thumbnails at 12K which should be no more than 2K maximum.
No wonder the galleries take so long to load on dial-up lines. (More than
60% of all users)

On Tue, 07 Sep 2004 10:27:23 GMT in alt.html.critique, rf wrote:

script language=JavaScript

Should be <script type="text.javascript

!-- Hide script from old browsers

The only browser you are hiding anything from is Netscape release 2 and
other similar things. These are now totally obsolete. You don't need this
cargo cult stuff any more.

I'm not so sure of that. I have some pages that have two <div>s that I
want one or the other displayed but not both at the same time. So I set
one of them to display:none and the other to display:block and offer a
button that calls some javascript to toggle between them. Wanting the
full page to be accessible when javascript is turned off I got the
suggestion to put the above css in a separate file and then put in the
<head>:

<script type="text/javascript">
document.write('<link rel="stylesheet" href="extra.css">');
</script>

This does exactly what I want but jigsaw doesn't validate it. Adding the
html quoting doesn't affect the operation but it allows it to validate.

You can see how I use it at <http://www.afclt.org>.

--
"One's reach must exceed their grasp, or what's a heaven for?"
-- Robert Browning
Rick Pasotto rick (AT) niof (DOT) net http://www.niof.net

Rick Pasotto wrote:

On Tue, 07 Sep 2004 10:27:23 GMT in alt.html.critique, rf wrote:

script language=JavaScript

Should be <script type="text.javascript

!-- Hide script from old browsers

The only browser you are hiding anything from is Netscape release 2 and
other similar things. These are now totally obsolete. You don't need
this
cargo cult stuff any more.

I'm not so sure of that. I have some pages that have two <div>s that I
want one or the other displayed but not both at the same time. So I set
one of them to display:none and the other to display:block and offer a
button that calls some javascript to toggle between them. Wanting the
full page to be accessible when javascript is turned off I got the
suggestion to put the above css in a separate file and then put in the
head>:

script type="text/javascript"
document.write('<link rel="stylesheet" href="extra.css">');
/script

This does exactly what I want but jigsaw doesn't validate it. Adding the
html quoting doesn't affect the operation but it allows it to validate.

You can see how I use it at <http://www.afclt.org>.

[post intentionally untrimmed for clarity, or in my case unclarity]

What has all of this to do with the cargo cult

<!-- Hide script from old browsers

I mentioned above?

Do you have a case of bad snippage?

--
Cheers
Richard.

"Steve R." <stevie_ritchieNOSPAM (AT) hotmail (DOT) com> wrote

ste© wrote in message ...
Thanks for any help or advice, it's appreciated.

A photographer who doesn't know how to use 'Photoshop' D'oh.

Is that an introduction of yourself as you begin your critique, or did you
miss the word "draft" in the subject line, or did you miss this paragraph:
"The content on this site is so far very low (so not all the links work
yet), but before I spend too much time in the design and coding of this (by
coding, all I know is HTML and CSS, so nothing fancy going on here I'm
afraid), I'd appreciate it if you could have a look at what's there already,
and give me some feedback on the design, and also some pointers on how I'm
doing the CSS."

Don't get me wrong, you've got a valid point, but as this is version 0.1 of
my website, if you like, I'm not too worried about this type of thing just
yet. But don't worry, I'll be back when the site is 'ready' for a final
critique! ;-)

Thumbnails at 12K which should be no more than 2K maximum.

It's a "draft" site, and before I waste my time finishing and perfecting it,
I'm trying to see what I've done wrong with the design and coding, and how I
can improve it. I'm trying to get the foundation built properly so I can
then build everything onto the top of it.

No wonder the galleries take so long to load on dial-up lines. (More than
60% of all users)

"Draft!" :-P

So then Steve, where are the rest of your comments? I'm waiting! ;-)

Thanks,

Stephen

On Tue, 07 Sep 2004 12:28:25 GMT in alt.html.critique, rf wrote:

Rick Pasotto wrote:

On Tue, 07 Sep 2004 10:27:23 GMT in alt.html.critique, rf wrote:

script language=JavaScript

Should be <script type="text.javascript

!-- Hide script from old browsers

The only browser you are hiding anything from is Netscape release 2
and other similar things. These are now totally obsolete. You don't
need this cargo cult stuff any more.

I'm not so sure of that. I have some pages that have two <div>s that I
want one or the other displayed but not both at the same time. So I set
one of them to display:none and the other to display:block and offer a
button that calls some javascript to toggle between them. Wanting the
full page to be accessible when javascript is turned off I got the
suggestion to put the above css in a separate file and then put in the
head>:

script type="text/javascript"
document.write('<link rel="stylesheet" href="extra.css">');
/script

This does exactly what I want but jigsaw doesn't validate it. Adding the
html quoting doesn't affect the operation but it allows it to validate.

You can see how I use it at <http://www.afclt.org>.

[post intentionally untrimmed for clarity, or in my case unclarity]

What has all of this to do with the cargo cult

!-- Hide script from old browsers

I mentioned above?

Do you have a case of bad snippage?

You have a reading comprehension problem. Evidently *some* people need
to be told every little detail.

This does not validate:

<script type="text/javascript">
document.write('<link rel="stylesheet" href="extra.css">');
</script>

This *does* validate:

<script type="text/javascript">
<!--
document.write('<link rel="stylesheet" href="extra.css">');
-->
</script>

What you refer to as 'cargo cult' is actually quite useful *today*.

I did make one error though. I should have referenced validator.w3.org
rather than jigsaw.w3.org.

--
"Life's greatest happiness is to be convinced we are loved."
-- Victor Hugo, poet, novelist, and dramatist (1802-1885)
Rick Pasotto rick (AT) niof (DOT) net http://www.niof.net

Rick Pasotto wrote:

You have a reading comprehension problem. Evidently *some* people need
to be told every little detail.

This does not validate:

script type="text/javascript"
document.write('<link rel="stylesheet" href="extra.css">');
/script

This *does* validate:

script type="text/javascript"
!--
document.write('<link rel="stylesheet" href="extra.css">');
--
/script

What you refer to as 'cargo cult' is actually quite useful *today*.

I did make one error though. I should have referenced validator.w3.org
rather than jigsaw.w3.org.

Hmmm. A validator that recognises, indeed insists on, cargo cult nonsense?
How amusing.

I will leave this thread now. The other regulars here will no doubt tear
strips off you :-)

--
Cheers
Richard.

ste© wrote:

Thanks for the reply Richard.

Cheers and thanks for your most detailed reply to my critique.

But... it's about 11:30 here, way past my bedtime :-)

Promise: I will reply to all of your points in the morning, after a quiet
coffee :-)

However all of those Yanks will have had their say by then :-)

--
Cheers
Richard.

ste© wrote:

Hi there,

I'm trying to create myself a photography website using a CSS based layout.
I'd normally create a website using tables, so this is a first for me.

The link to my website is here: http://tinyurl.com/4focd
(snip)

Stephen,

On the home page you have two panoramic photos.

Using Netscape 7.1, if I make my browser window wide but short or narrow
but tall, it distorts the aspect ratio of these photos. The effect isn't
bad for landscapes, but would be grotesque for faces. Perhaps you can
remove height="100%" from the two img tags to maintain the aspect ratio
as screen size changes.

On the gallery page navigation: absracts -> abstracts.

Netscape 7.1, at 600 X 800 full-screen, doesn't like it:
- On the Home page, the nav links are about 1px down into the black
area below them. The upper div, including your name, the nav, and the
upper photo, are offset to the left of where you expect them, so there's
a jog between them and the lower photo.
- On the About page, the black area at the bottom of the screen
("strap") covers the last paragraph of text. There are also offsets
similar to the Home page. Reducing screen width moves the text downward
until it starts to appear below the footer. If the window width is
reduced, the main nav links overlay your logo.
- On the Gallery page, in addition to problems described above, if the
window width is reduced, the sub-nav links (landscapes, nature, etc.)
start to disappear from the right end. I suspect they have slid downward
and are hidden by the white area below them.
- On the News page the first two news items are covered by the black
bar ("strap") and the footer text.

Net: You need to test with something other than IE. I suspect Firefox
will show the same problems and would be a good choice to start with.

Chris Beall