[cmcleod design]

here is a site i am designing for my dad. He is a jeweller.

I would appreciate any comments on the design. note: CSS is required to view properly at this time. tables will be implemented shortly.

cheers

[edit: fixed URL]

[ 06-23-2001: Message edited by: cmcleod design ]

[seanrg_2000]

A few quick suggestions.

1] There is a noticeable color shift between the background on the logo and the bacground fill of the page. You should match the backgrounds with a web safe color.

2] The left navigation is a bit overwhelming. I'd break the site into "top level areas" (ie, work, techniques, etc.) that would display their sub sections (sculptures, brooches, etc.)

3] The width of the main content area seems a bit small and of a fixed width. I'd make the width dynamic based on the size of the browser's window.

Sean
SacredPaws

[funkboy]

I agree with the comments above. Simplify, simplify. Go through and make sure you take out any redundant sections - I notice you have a "Work" section and a separate "Gallery" section - could you somehow combine these two very similar things?
Cutting down on redundancy is always a good thing... maybe stylizing the text at the top of the page to make it jump out a little more would help, too. A plain serif font sometimes looks a little weird when there's other large sans-serif fonts (Arial, Helvetica, fonts without little feet) on a page.[/LIST]

[cmcleod design]

cheers

the color shift i need to work on. Its strange, even if i match the colors exactly using RRGGBB style choices, they always look different.

left navigation i will talk to my dad about, he should know if he wants work and galleries combined somehow.

the dynamic page width thing i have never done before and have no idea how to do it. Could you explain how this could be done please?

[cmcleod design]

ooops. double post

[ 06-23-2001: Message edited by: cmcleod design ]

[AlbertWu]

Originally posted by cmcleod design:
<STRONG>cheers

the color shift i need to work on. Its strange, even if i match the colors exactly using RRGGBB style choices, they always look different.</STRONG>

Is it in RGB mode? CMYK will cause colour shift problems...

[cmcleod design]

Originally posted by AlbertWu:
<STRONG>

Is it in RGB mode? CMYK will cause colour shift problems...</STRONG>

I think it is. I'm using Fireworks to create the logo image. Any ideas on how to fix the shift?

[Raman]

&lt;pre&gt;
&lt;link rel="stylesheet" href="file:///Personal/Callum/sites/david/styles.css" type="text/css"&gt;
&lt;/pre&gt;

BAD BAD BAD! I oughta take away your keyboard from you!!

Anyway. Fireworks might be snapping to "web safe" colors. Check it out.

Why all the layers? Convert them to tables at least. And like the guy above said - don't make them a specific size (unless you're really anal about your layout).

What mac designers sometimes don't realize (realise?) is that the macintosh is just about the only OS that resizes the browser (and other) windows to fit the content. On a windows browser it will have alot of olive on teh rght size on a 1024x768. If all your users are mac then dont' worry about it.

If you really want all those in the menus then why not make 9 flyout menus (or make less and make the ones that have a few links in them flyout)

Lastly - read the book called "Web Design- the complete reference". Its a big book but has some very good design tips in there, esp with refernce to menu's and peoples memory.

Since you're using sort of an olive theme, why not make the links apropriately colored instead of teh usual blue?

I also vote for keep it clean. But that's a personal thing.

lastly, the top of the page takes up too much real-estate. i'm viewing it at 1024x768 and it's fine

Let us knwo when you make your changes and we'll give you more constructive criticism.

Meanwhile take a look at my site raman-sinha.com/coastaldev

-Raman

[cmcleod design]

Originally posted by Raman:
<STRONG>&lt;pre&gt;
&lt;link rel="stylesheet" href="file:///Personal/Callum/sites/david/styles.css" type="text/css"&gt;
&lt;/pre&gt;

BAD BAD BAD! I oughta take away your keyboard from you!!

</STRONG>

Oooops I will fix that HUGE error as soon as i get home unfortunately since i'm on campus now i cant access the page via ftp.

[cmcleod design]

well i have fixed the color shift on the main logo (turns out it was because the stylesheet wasn't working). I agree that the top of the page takes up too much real-estate and I will work on that tonight.

Color shift on the jewellery image will get done tonight and i will try and convert to table form

HELP: Does anybody know how to make tables that dynamically resize?

[ 06-25-2001: Message edited by: cmcleod design ]

[seanrg_2000]

If you view both the left navigation and the main content area as part of the same table, the code would be something like this:

<font face = "courier">
&lt;table border="0" width="100%" cellspacing="0" cellpadding="0"&gt;
&lt;tr&gt;
&lt;td width="135" bgcolor="#FF0000"&gt; Left Nav &lt;/td&gt;
&lt;td width="100%" bgcolor="#00FF00"&gt; Main content &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</font>

That way the left nav stays at a fixed width, while the main content area fills the rest of the page.

Sean
SacredPaws

[cmcleod design]

thanks seanrg_2000.

One more thing, i am unsure if i can get the same border style as i have now with CSS into table format. Is this possible?

thanks to everyone so far for their help, i really appreciate it

[Raman]

I'll throw in another tidbit regarding tables:

Balloon cells are empty cells that do nothing but help you position things. The key is to make the TD 100% wide so that it pushes everything over and dynamically resizes.

Try it. It's the key to making pages look good at any resolution while leaving your site flexible to all.

Almost all my table and cells are either 0 or 100%.

Check out this EXCELLENT tutorial by JS Hook. It will instantly make you a better designer (I'm a programmer so I'm an idiot when it comes to design).
http://www.jshook.com/flexible_pages/

-Raman

[cmcleod design]

Originally posted by Raman:
<STRONG>I'll throw in another tidbit regarding tables:

Balloon cells are empty cells that do nothing but help you position things. The key is to make the TD 100% wide so that it pushes everything over and dynamically resizes.

Try it. It's the key to making pages look good at any resolution while leaving your site flexible to all.

Almost all my table and cells are either 0 or 100%.

Check out this EXCELLENT tutorial by JS Hook. It will instantly make you a better designer (I'm a programmer so I'm an idiot when it comes to design).
http://www.jshook.com/flexible_pages/

-Raman</STRONG>

Thanks Raman, that tutorial is incredibly informative and helpful. I will try and implement a format such as that tonight when i have time.

btw. I have updated the navigation area on the site and made the subtopic areas on different pages. have a look if u like

[dogzilla]

Originally posted by cmcleod design:
<STRONG>

Thanks Raman, that tutorial is incredibly informative and helpful. I will try and implement a format such as that tonight when i have time.

btw. I have updated the navigation area on the site and made the subtopic areas on different pages. have a look if u like </STRONG>

First - I really like the design. Clean and the colors work well together.

A couple of points:
- Why use DIVs on the home page? I think you could get the exact same effect with a table and not have to worry about CSS. Also, the Table would resize vertically. I'm on a 1024x768 screen and I scrolled down to see...nothing.

- the blue you use for headings is very like a link color, while the link color is black and suggests inactive text. I don't know if you want to switch them or make them all the same. I surf with link underlines off, and it's not obvious to me which is a link and which isn't.

- in the "Gallery": is it brooches or broaches?

- need a "back" link for subpages

- I don't do this as often as I should, but you might want to add different titles for the pages (eg: "dmcleod art : Gallery") and consider adding meta tags for search engines.

[cmcleod design]

Originally posted by dogzilla:
<STRONG>

First - I really like the design. Clean and the colors work well together.

A couple of points:
- Why use DIVs on the home page? I think you could get the exact same effect with a table and not have to worry about CSS. Also, the Table would resize vertically. I'm on a 1024x768 screen and I scrolled down to see...nothing.

- the blue you use for headings is very like a link color, while the link color is black and suggests inactive text. I don't know if you want to switch them or make them all the same. I surf with link underlines off, and it's not obvious to me which is a link and which isn't.

- in the "Gallery": is it brooches or broaches?

- need a "back" link for subpages

- I don't do this as often as I should, but you might want to add different titles for the pages (eg: "dmcleod art : Gallery") and consider adding meta tags for search engines.</STRONG>

1. The reason I have DIVs on the pages now is because I didn't know how to do tables that work the same way. If you want to see the front page in table format, then please have a look here

2. I haven't really thought through about colours for links and text etc. Still a work in progress as you can obviously see

3. I'm fairly sure its "brooches". Spelling courtesy of my dad.

4. Back links is something that must have missed my eye. Will implement as soon as I have time.

5. Thats a good idea with the titles reflecting content of that sub-page. Will work on that soon too.

[Xeo]

Originally posted by seanrg_2000:
<STRONG><font face = "courier">&lt;table border="0" width="100%" cellspacing="0" cellpadding="0"&gt;
&lt;tr&gt;
&lt;td width="135" bgcolor="#FF0000"&gt; Left Nav &lt;/td&gt;
&lt;td <font color = red>width="100%"</font> bgcolor="#00FF00"&gt; Main content &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;</font></STRONG>

Shouldn't that be <font face = "courier">width=*</font>. I find that <font face = "courier">width="100%"</font> on an internal cell like that to only cause problems. I don't know which browser (I think IE) but at least one will say the window width, that the user has is 100% and because you want 135 pixels for that one cell it will always have a horizontal scroll bar. This is incredibly annoying.

ie. The user has their window exactly 600 pixels wide. The page itself is 735 pixels wide making it have a horizontal scroll bar. They try to increase the width to 750 to compesate but now the page is 885 pixels... all because that cell is 100% and it has to add on an additional 135.

Like I said, I don't know what browsers do this, but I know at least one major one does, and if it's not horizontal then it's vertical. Come to think of it, IE does it with vertical sizes. Yah, I remember now. It happens if you have 2 seperate tables. One table is a set height (say 135) and the other is 100%. You will ALWAYS have a vertical scroll bar.

Now I can't remember if cells in the same table act funny like that, but they might. Seperate tables don't play nice in situations like that.

OK, well, now that I've been thinking aloud, I guess I'll just end it with my opinion. I like to use an asterisk better because it simply fills up with whatever space is there. Is that what zero does too? I didn't know that.

[Raman]

Originally posted by Xeo:
<STRONG>

Shouldn't that be &lt;font face = "courier"&gt;width=*&lt;/font&gt;. I find that &lt;font face = "courier"&gt;width="100%"&lt;/font&gt; on an internal cell like that to only cause problems. I don't know which browser (I think IE) but at least one will say the window width, that the user has is 100% and because you want 135 pixels for that one cell it will always have a horizontal scroll bar. This is incredibly annoying.

ie. The user has their window exactly 600 pixels wide. The page itself is 735 pixels wide making it have a horizontal scroll bar. They try to increase the width to 750 to compesate but now the page is 885 pixels... all because that cell is 100% and it has to add on an additional 135.

Like I said, I don't know what browsers do this, but I know at least one major one does, and if it's not horizontal then it's vertical. Come to think of it, IE does it with vertical sizes. Yah, I remember now. It happens if you have 2 seperate tables. One table is a set height (say 135) and the other is 100%. You will ALWAYS have a vertical scroll bar.

Now I can't remember if cells in the same table act funny like that, but they might. Seperate tables don't play nice in situations like that.

OK, well, now that I've been thinking aloud, I guess I'll just end it with my opinion. I like to use an asterisk better because it simply fills up with whatever space is there. Is that what zero does too? I didn't know that.</STRONG>

Netscape 4.76 seems to take the 100% td width and do it to the viewable area of the browser instead of 100% of the width tha thte table has made for it.

i learned this the hard way when i designed http://go.vicinity.com/equiva_shell and http://go.vicinity.com/equiva_texaco

needless to say i Hate netscape.. 1/2 the CSS that it's supposed to support doesn't even work so i had to create 2 stylesheets.

I've never used *. zero (or not specifying width) seems to make it use only what it needs which is differnt than telling it to take up 100% of what it can take up (the rest of the row in IE vs. teh whole screen in NN 4.7).