Feedback appreciated for a new design I am working on.

Hi all.
I am currently re-designing my site to use a CSS based layout. I was
just wandering if anyone could give me some feedback on how it looks,
suggestions on how it could be improved that sort of thing.
The test page is at: http://freewebdesign.cjb.cc/test
Only the index page is up at this stage, I will add content and build
the site from the index page once it's working well.


--
Regards Chad. http://freewebdesign.cjb.cc

Chaddy2222 wrote:

I am currently re-designing my site to use a CSS based layout. I was
just wandering if anyone could give me some feedback on how it looks,
suggestions on how it could be improved that sort of thing.
The test page is at: http://freewebdesign.cjb.cc/test
Only the index page is up at this stage, I will add content and build
the site from the index page once it's working well.

impressive...

Travis Newbury wrote:

Chaddy2222 wrote:
I am currently re-designing my site to use a CSS based layout. I was
just wandering if anyone could give me some feedback on how it looks,
suggestions on how it could be improved that sort of thing.
The test page is at: http://freewebdesign.cjb.cc/test
Only the index page is up at this stage, I will add content and build
the site from the index page once it's working well.

impressive...
Thanks...

--
Regards Chad. http://freewebdesign.cjb.cc

Chaddy2222 wrote:

Hi all.
I am currently re-designing my site to use a CSS based layout. I was
just wandering if anyone could give me some feedback on how it looks,
suggestions on how it could be improved that sort of thing.
The test page is at: http://freewebdesign.cjb.cc/test
Only the index page is up at this stage, I will add content and build
the site from the index page once it's working well.

Visually, I would add some left and right padding to your main DIVs so
that the text has some 'breathing room' from the sides of the viewport.

Similar request for navigational list. You need more separation between
the items so they are more visually discrete. Either more space between
or some kind of separator treatment.

I know you are visually impaired. I like the color scheme better in your
new design. However, the grey hover on your links does not have enough
contrast with the link text. Is your impairment with color identity or
basic vision, if the former you may wish to have someone help you pick a
hue that contrasts better. Since your links are blue I would choose a
compliment in the yellow range.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Alan J. Flavell wrote:

I'm afraid you're missing the point.

You're right, I was, been working with PHP & sending headers to much lately,
those DO make a difference.

If you have provided a content-type of text/html from the server, then
a <meta http-equiv...> is far too late to be trying to change your
mind and say that it's really application/xhtml+xml

I understand that now, my apologies.

Grtz,
--
Rik Wasmus

Jonathan N. Little wrote:

Chaddy2222 wrote:
Hi all.
I am currently re-designing my site to use a CSS based layout. I was
just wandering if anyone could give me some feedback on how it looks,
suggestions on how it could be improved that sort of thing.
The test page is at: http://freewebdesign.cjb.cc/test
Only the index page is up at this stage, I will add content and build
the site from the index page once it's working well.


Visually, I would add some left and right padding to your main DIVs so
that the text has some 'breathing room' from the sides of the viewport.

Similar request for navigational list. You need more separation between
the items so they are more visually discrete. Either more space between
or some kind of separator treatment.
Ok. I have made a few change: http://freewebdesign.cjb.cc/test

I know you are visually impaired. I like the color scheme better in your
new design. However, the grey hover on your links does not have enough
contrast with the link text. Is your impairment with color identity or
basic vision, if the former you may wish to have someone help you pick a
hue that contrasts better. Since your links are blue I would choose a
compliment in the yellow range.
Done.

Thanks.
--
Regards Chad. http://freewebdesign.cjb.cc

Chaddy2222 wrote:

Jonathan N. Little wrote:
Chaddy2222 wrote:
Hi all.
I am currently re-designing my site to use a CSS based layout. I was
just wandering if anyone could give me some feedback on how it looks,
suggestions on how it could be improved that sort of thing.
The test page is at: http://freewebdesign.cjb.cc/test
Only the index page is up at this stage, I will add content and build
the site from the index page once it's working well.

Visually, I would add some left and right padding to your main DIVs so
that the text has some 'breathing room' from the sides of the viewport.

Similar request for navigational list. You need more separation between
the items so they are more visually discrete. Either more space between
or some kind of separator treatment.

Ok. I have made a few change: http://freewebdesign.cjb.cc/test

Okay better, but two things. If you need to adjust spacing in elements,
do not employ &nbsp; technique but adjust margins and/or padding. Then
you can fine tune with CSS rather then editing your markup. Secondly, I
have issue with your use of DL for your links. They are a simple list of
links, not a definition list. Use UL not DL. Example and I have cleaned
up your CSS a little:

CSS:

/* Adjusted margins and padding to improve clickable area on links */
..links { margin: .5em; }
..links UL { list-style: none; }
..links LI { display: inline; padding: 0 .5em; }
..links LI A { text-decoration: none; padding: 0 .25em; }

..links LI A:link,
..links LI A:visited {
color: rgb(51, 102, 153);
background-color: rgb(255, 255, 204);
border-bottom: 1px dashed rgb(51, 102, 153);
}

..links LI A:hover,
..links LI A:active {
color: rgb(73, 81, 92);
background-color: rgb(255, 255, 102);
border-bottom-style: solid;
/*
since your have a dashed border on the links
rather than turn text-decoration on and off
on your links I just change the border style
*/
}

HTML:

<div class="links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

I also defined as a class you you can use in other areas on the page,
like your lower links...



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jonathan N. Little wrote:

Chaddy2222 wrote:
Jonathan N. Little wrote:
Chaddy2222 wrote:
Hi all.
I am currently re-designing my site to use a CSS based layout. I was
just wandering if anyone could give me some feedback on how it looks,
suggestions on how it could be improved that sort of thing.
The test page is at: http://freewebdesign.cjb.cc/test
Only the index page is up at this stage, I will add content and build
the site from the index page once it's working well.

Visually, I would add some left and right padding to your main DIVs so
that the text has some 'breathing room' from the sides of the viewport.

Similar request for navigational list. You need more separation between
the items so they are more visually discrete. Either more space between
or some kind of separator treatment.

Ok. I have made a few change: http://freewebdesign.cjb.cc/test


Okay better, but two things. If you need to adjust spacing in elements,
do not employ &nbsp; technique but adjust margins and/or padding. Then
you can fine tune with CSS rather then editing your markup. Secondly, I
have issue with your use of DL for your links. They are a simple list of
links, not a definition list. Use UL not DL. Example and I have cleaned
up your CSS a little:
Thanks for the suggestions.

I made a few changes to the current stylesheet. Is it better now?
http://freewebdesign.cjb.cc/test

CSS:

/* Adjusted margins and padding to improve clickable area on links */

.links { margin: .5em; }
.links UL { list-style: none; }
.links LI { display: inline; padding: 0 .5em; }
.links LI A { text-decoration: none; padding: 0 .25em; }

.links LI A:link,
.links LI A:visited {
color: rgb(51, 102, 153);
background-color: rgb(255, 255, 204);
border-bottom: 1px dashed rgb(51, 102, 153);
}

.links LI A:hover,
.links LI A:active {
color: rgb(73, 81, 92);
background-color: rgb(255, 255, 102);
border-bottom-style: solid;
/*
since your have a dashed border on the links
rather than turn text-decoration on and off
on your links I just change the border style
*/
}

HTML:

div class="links"
ul
li><a href="#">Home</a></li
li><a href="#">About Us</a></li
li><a href="#">Web Design</a></li
li><a href="#">Contact Us</a></li
/ul
/div

I also defined as a class you you can use in other areas on the page,
like your lower links..
Thx.

--
Regards Chad. http://freewebdesign.cjb.cc