Feedback appreciated for a new design I am working on.

C

Chaddy2222

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.
 
T

Travis Newbury

Chaddy2222 said:
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.
Click to expand...

impressive...
 
R

Rik

Chaddy2222 said:
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.
Click to expand...

<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=ISO-8859-1" />

Hmmmmz, not sure wether the choice "application/xhtml+xml" was appropriate,
but I've forgotten the exact rules :).

<div id="header"><h1>Free Web Design Online!</h1></div>

Why wrap it in a div? What layout are you giving it, that you cannot apply
to the h1 directly? Div's are nice, but terribly overused. If there's a
better tag, use it, maybe using a couple of different classes.

Navigation: it's actually a list, you might consider making it one,
allthough removing the standard browser presentation is a pain. You seems to
have started out like that, considering the seemingly useless:
list-style-type's in the "a" markup.

From a graphical point of view:

H1: try some padding on the left, I think that will look a lot better, but
that's personal taste.

The "navigation" at the top is not enough "seperated", in Opera 8.52 I can
hardly make out that it's not just one link. Also: try to be consistent in
the use of capital letters. Now it's mostly random.

Text color is OK to my young eyes, but I'd imagine that for some people i
could use a bit more contrast.

I'd suggest using this in the body:
<body>
<h1> Free Web Design Online!</h1>
<ul>
<li><a href="#" title="Home" class="on">Home</a></li>
<li><a href="index.html">About Us&nbsp;</a></li>
<li><a href="index.html">Web Design&nbsp;</a></li>
<li><a href="index.html">Contact us </a></li>
</ul>
<h2>Welcome To Free Web Design Online!</h2>
<p>This page is a template for the new look version of the site.<br />The
page has been created useing XHTML and CSS for better markup and
useability... We hope you like it.......</p>
<ul>
<li><a href="index.html">Contact us</a></li>
<li><a href="index.html">About us </a></li>
<li><a href="index.html">Example Sites&nbsp;</a></li>
</ul>
Copyright &copy; 2006 Free Web Design Online! All Rights Reserved.
</body>

And adjust your css accordingly.
About using lists: http://css.maxdesign.com.au/listamatic/ contains a lot of
examples of how to whip them into the shape you want.

I applaud the use of relative sizes for text instead of px (or even worse,
pt..).

Grtz,
 
A

Alan J. Flavell

<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=ISO-8859-1" />
Click to expand...

Complete nonsense, I'm afraid.
Hmmmmz, not sure wether the choice "application/xhtml+xml" was
appropriate, but I've forgotten the exact rules :).
Click to expand...

There's no extra charge for checking the specifications before
making oneself look silly, you know. (Been there, done that...)
 
N

Neredbojias

To further the education of mankind, "Chaddy2222" <rockradio2000
@yahoo.com.au> vouchsafed:
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.
Click to expand...

It looks okay if a little, uh, sparse.

Were I you, I'd forget the xhtml and use html strict, though. Despite
certain prognostications, xhtml is not going to replace html any time soon,
if ever.

I agree with the previous feedback about separating the links more, too.
 
C

Chaddy2222

Rik said:
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=ISO-8859-1" />

Hmmmmz, not sure wether the choice "application/xhtml+xml" was appropriate,
but I've forgotten the exact rules :).
Click to expand...
Well, it can be done, but a lot of people say that HTML4.01 strict
works just as well.
It's actually served as HTML but it has the XHTML info their. If IE had
better support for XHTML then the pages could be served up as XHTML
instead of HTML, but XHTML is not well supported yet.
<div id="header"><h1>Free Web Design Online!</h1></div>

Why wrap it in a div? What layout are you giving it, that you cannot apply
to the h1 directly? Div's are nice, but terribly overused. If there's a
better tag, use it, maybe using a couple of different classes.

Navigation: it's actually a list, you might consider making it one,
allthough removing the standard browser presentation is a pain. You seems to
have started out like that, considering the seemingly useless:
list-style-type's in the "a" markup.
Click to expand...
Yeah, I removed the list from the navigation as I could not get the
page to validate with the list, now i've got it validating I will add
it back in.
From a graphical point of view:

H1: try some padding on the left, I think that will look a lot better, but
that's personal taste.
Click to expand...
I'll have a look in to that, thanks.
The "navigation" at the top is not enough "seperated", in Opera 8.52 I can
hardly make out that it's not just one link. Also: try to be consistent in
the use of capital letters. Now it's mostly random.

Text color is OK to my young eyes, but I'd imagine that for some people i
could use a bit more contrast.

I'd suggest using this in the body:
<body>
<h1> Free Web Design Online!</h1>
<ul>
<li><a href="#" title="Home" class="on">Home</a></li>
<li><a href="index.html">About Us&nbsp;</a></li>
<li><a href="index.html">Web Design&nbsp;</a></li>
<li><a href="index.html">Contact us </a></li>
</ul>
<h2>Welcome To Free Web Design Online!</h2>
Click to expand...
And adjust your css accordingly.
About using lists: http://css.maxdesign.com.au/listamatic/ contains a lot of
examples of how to whip them into the shape you want.

I applaud the use of relative sizes for text instead of px (or even worse,
pt..).
Click to expand...
Thanks. My current site at http://freewebdesign.cjb.cc can also be used
with user specific font sizes, however I was having trouble controling
issues such as keeping the font sizeing constant across all pages with
the old layout.
 
R

Rik

Alan said:
Complete nonsense, I'm afraid.


There's no extra charge for checking the specifications before
making oneself look silly, you know. (Been there, done that...)
Click to expand...

I was trying to post a few usefull comments in a minimal amount of time, but
OK, here it is.
http://www.w3.org/TR/xhtml-media-types/xhtml-media-types.xhtml#media-types

While the content type IS application/xhtml+xml, you COULD use text/html,
for a good reason:

text/html:
Appendix C "HTML Compatibility Guidelines" summarizes "design guidelines for
authors who wish their XHTML documents to render on existing HTML user
agents". The use of 'text/html' for XHTML SHOULD be limited for the purpose
of rendering on existing HTML user agents, and SHOULD be limited to [XHTML1]
documents which follow the HTML Compatibility Guidelines. In particular,
'text/html' is NOT suitable for XHTML Family document types that adds
elements and attributes from foreign namespaces, such as XHTML+MathML
[XHTML+MathML].

That was the nagging in the back of my head. And now I will further prove to
you I'm lazy: I will NOT investigate which browsers are XHTML compliant, and
which aren't.

Grtz,
 
S

Steve Pugh

Chaddy2222 said:
Well, it can be done, but a lot of people say that HTML4.01 strict
works just as well.
It's actually served as HTML but it has the XHTML info their. If IE had
better support for XHTML then the pages could be served up as XHTML
instead of HTML, but XHTML is not well supported yet.
Click to expand...

The real issue here is that your server is sending out content-type:
text/html so saying application/xhtml+xml is useless as the real http
header trumps the meta tag fake.

If you did send application/xhtml+xml in the real HTTP header then by
default IE wouldn't be able to render the page at all.

You've gone to the effort of putting some code into your pages that
conflicts with what your server says about the page, and which if it
was honoured would make the page unusable by a large segment of users.

So why did you bother?

Steve
 
A

Alan J. Flavell

Alan said:
Complete nonsense, I'm afraid.
Click to expand...
[...]

I was trying to post a few usefull comments in a minimal amount of
time, but OK, here it is.
http://www.w3.org/TR/xhtml-media-types/xhtml-media-types.xhtml#media-types
Click to expand...

I'm afraid you're missing the point.
While the content type IS application/xhtml+xml, you COULD use
text/html, for a good reason:
Click to expand...

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

On the other hand, if you have provided a content-type of
application/xhtml+xml, then the rules for specifying the character
encoding will already have done their work and fixed the character
encoding, long before it gets to the point of seeing that bogus <meta
http-equiv...> that's possibly trying to make it be something else.
text/html:
Appendix C "HTML Compatibility Guidelines"
Click to expand...

....for XHTML/1.0 only...
summarizes "design guidelines for authors who wish their XHTML
documents to render on existing HTML user agents".
Click to expand...

We've done this part so often before, I'm not going to repeat the
arguments all over again; but they really aren't part of what it takes
to understand that:

is nonsense.
That was the nagging in the back of my head. And now I will further
prove to you I'm lazy: I will NOT investigate which browsers are
XHTML compliant, and which aren't.
Click to expand...

That wasn't any part of the specific problem, either.

*Even* if you could find a client implementation which accepted
text/html from the server, and changed its mind about content-type and
character encoding when it saw this ominous <meta http-equiv...> , it
would still be complete nonsense in terms of the WWW specifications.
 
J

Jonathan N. Little

Chaddy2222 said:
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.
Click to expand...

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.
 
R

Rik

Alan said:
I'm afraid you're missing the point.
Click to expand...

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
Click to expand...

I understand that now, my apologies.

Grtz,
 
C

Chaddy2222

Jonathan said:
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.
Click to expand...
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.
Click to expand...
Done.
Thanks.
 
J

Jonathan N. Little

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

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...
 
B

BusyGuy

Chaddy2222 said:
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.
Click to expand...

Chaddy, are you looking for a critique on thevisual design or on the
code? I think youy are asking the former but Rik gave you such a useful
set of comments on the code, i feel outclassed if that was what you
were looking for.

(Rik, your generous reply to Chaddy demonstrates the best about usenet.
I bump into so many assholes in some other other groups I hang out in,
it's a pleasure to be here.)

Chaddy, I was lucky enough to marry a woman who was a damned good
screen designer. And her friend was an excellent coding queen. Now I've
lost that connection, I'm struggling to develop those skills to 10% of
the quality they had.

Also, I'm a photographer by profession so I do have somewhat of an eye
for design.

Your page has a nice, clean appearance. If you want to keep it simple,
my only suggestion would be to replace to navogation buttons. Somehow,
they clash with the rest of the design.

I would centre the whole.

I would eliminate the exclamation marks.

The green and yellow work well at the top. The pale biscuit/buff
background works not quite so well. Maybe stay with the ame yellow or
more to a pale blue. (Or, for that matter, a tint of the green.)

Would it be possible to come up with a different font for the yellow
heading? I'm not a fan of using many fonts but it could be that a
different one on this occasion would be helpful. Or maybe a logo would
achieve what I'm thinking.

Anyway, good luck with the site. Are you serious about free web design?
 
C

Chaddy2222

Jonathan said:
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:
Click to expand...
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 */
Click to expand...
.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..
Click to expand...
Thx.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Looking for feedback on this markup language I developed and my website idea? 0
Hi, I am a webflow user. I am looking for CSS code that can KEEP ALL ELEMENTS POSITIONED in the SAME spot across all resolutions 0
Working on mobile css menu with plenty of frustration! 2
Need feedback from experienced developer when a project grows and git please 1
feedback on code design 23
menu bar and banner responsive issues....any guidance is appreciated! 0
Intro and asking for direction.(newbie am I) 2
How to Design a Cross Network app 0

Members online

No members online now.
Total: 36 (members: 0, guests: 36)
Robots: 407

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,013
Latest member
KatriceSwa

Latest Threads

Top