Site Ratings & Reviews - Help Requested

Author

Help Requested

Rhi

2007-02-09, 6:15 am

Hello there, alt.html.critique!

I'm trying to make the move from using tables to CSS in my web design, and I
am having some trouble getting a layout to display properly in IE6. It
works well in Firefox, Netscape and IE7- but in IE6, it's horribly broken.

Could anyone point me to the problem, and where I might find the resources
to get it fixed up?

Any thoughts on the layout/colors/styling of the mock up would also be
appreciated!

Thanks a bunch!

http://www.9thparadigm.com/example.html <-- mock up is posted here

mbstevens

2007-02-10, 3:15 am

On Fri, 09 Feb 2007 03:31:10 -0500, Rhi wrote:

> Hello there, alt.html.critique!
>
> I'm trying to make the move from using tables to CSS in my web design, and I
> am having some trouble getting a layout to display properly in IE6. It
> works well in Firefox, Netscape and IE7- but in IE6, it's horribly broken.
>
> Could anyone point me to the problem, and where I might find the resources
> to get it fixed up?
>
> Any thoughts on the layout/colors/styling of the mock up would also be
> appreciated!
>
> Thanks a bunch!
>
> http://www.9thparadigm.com/example.html <-- mock up is posted here

The flower on the left is 3 or 4 colors, and should not be a .jpg. It is
24K -- way too big. You should be able to keep the quality at about 3-5K.
The flower on the right is 21K, again way, way too big.

I would make the menu a list.

How is the site broken? It seems OK in Fox under Linux.

John Hosking

2007-02-10, 3:15 am

Rhi wrote:
> Hello there, alt.html.critique!

Hi, there, hapless victim! Well, I hope my contents help...

>
> I'm trying to make the move from using tables to CSS in my web design, and I
> am having some trouble getting a layout to display properly in IE6. It
> works well in Firefox, Netscape and IE7- but in IE6, it's horribly broken.
>
> Could anyone point me to the problem, and where I might find the resources
> to get it fixed up?
>
> Any thoughts on the layout/colors/styling of the mock up would also be
> appreciated!
>
> Thanks a bunch!
>
> http://www.9thparadigm.com/example.html <-- mock up is posted here

Very dark and discouraging. If it's supposed to be for a company, I
don't think I'll want to by anything from them. I think I'll be too busy
hanging myself.

Your design elements, especially your <h2>s, don't respond too well to
text and browser resizing. When I first opened your page, the "website!"
part of the first header was coincident with the h2ding.jpg.

When you need an example domain, use www.example.com, which is reserved
for that purpose. You're using domain.com, which is rude if you don't
own it.

It's weird that you have an image unrelated to the heading specified in
the h2 markup, as in <h2>Welcome to the website!<img
src="images/consult.gif" alt="" align="right" border="0" height="227"
hspace="6" width="208"></h2>. Also weird is that you have a nice .CSS
file but you're "styling" the image locally in HTML.

Why transitional and not strict? Why XHTML and not HTML?

You're serving the page as Content-Type: text/html so it's not XHTML
anyway. I can not tell you what IE6 will do with this code. It may be
related to the <h2>-nested images being hidden behind the <div>s.

Your list of nav links in the left column could be marked up as list
items. That'd make more sense than <div class="menu">. Your nav list
also contains four <h1>, which is inappropriate. They can't all be the
most important topic heading on this page.

In your text you have <p>Second heading here!</p>. Why not make it
<h3>Second heading here!</h3> or something appropriate?

This page looks like it's supoosed to be a template, meaning other
people you don't know will be trying to use it. In that case especially,
the markup should make good semantic sense.

Add a font color to your elements, especially since you've defined such
dark backgrounds for everything.

I don't usually like fixed-width designs, so the huge empty space I see
when I maximize the browser in FF, Opera, and Netscape doesn't please me
(IE6 expands at all viewport sizes), but I do like the fluid way
everything shrinks down when I decrease viewport width. Nice!

HTH. GL.
--
John

Rhi

2007-02-10, 3:15 am

> Hi, there, hapless victim! Well, I hope my contents help...

Thanks very much for your insight!

> Very dark and discouraging. If it's supposed to be for a company, I don't
> think I'll want to by anything from them. I think I'll be too busy hanging
> myself.

It's actually to be my studio website, I do a lot of graphic design and
illustration. I created the mock up because I didn't want to appear to be
promoting illustration on a poorly done website in the guise of looking for
a critique.

I'm fond of dark colors, personally, but I have a fairly light display on
my computer, someone with proper color settings may see a more dismal
pallette. I'll try to lighten some of my grays and use a bit more of the
light lavender to highlight, and see if I can't pull a stylized, but not
dreary look out of my color scheme.

> Your design elements, especially your <h2>s, don't respond too well to
> text and browser resizing. When I first opened your page, the "website!"
> part of the first header was coincident with the h2ding.jpg.

Oh dear! Well, I have to admit, I'm not new to putting websites togather,
but I'm one of those people coming from WYSIWYG editor background- so this
is a big step from tables and set font sizes for me. I'll try to work on
that issue.

> When you need an example domain, use www.example.com, which is reserved
> for that purpose. You're using domain.com, which is rude if you don't own
> it.

So sorry! >.< I'll correct the oversight.

> It's weird that you have an image unrelated to the heading specified in
> the h2 markup, as in <h2>Welcome to the website!<img
> src="images/consult.gif" alt="" align="right" border="0" height="227"
> hspace="6" width="208"></h2>. Also weird is that you have a nice .CSS file
> but you're "styling" the image locally in HTML.

> Why transitional and not strict? Why XHTML and not HTML?

Honestly, I don't know. XHTML seemed to be the more commonly used
extension, so I chose it over html.

> You're serving the page as Content-Type: text/html so it's not XHTML
> anyway. I can not tell you what IE6 will do with this code. It may be
> related to the <h2>-nested images being hidden behind the <div>s.

Yup, that was the problem I was having. I played with it a bit- and I think
I may have found a solution to that issue, which I'll link to this evening,
once I've spent some time addressing the other issues I've seen here as best
I can.

> Your list of nav links in the left column could be marked up as list
> items. That'd make more sense than <div class="menu">. Your nav list also
> contains four <h1>, which is inappropriate. They can't all be the most
> important topic heading on this page.

Thank you! Will fix.

> In your text you have <p>Second heading here!</p>. Why not make it
> <h3>Second heading here!</h3> or something appropriate?
>
> This page looks like it's supoosed to be a template, meaning other people
> you don't know will be trying to use it. In that case especially, the
> markup should make good semantic sense.

I'll work on commenting propery on the html so that it's a little easier
to view. It makes sense to me, but I can't ask for help and expect you all
to try to untangle my thought process. =)

> Add a font color to your elements, especially since you've defined such
> dark backgrounds for everything.
>
> I don't usually like fixed-width designs, so the huge empty space I see
> when I maximize the browser in FF, Opera, and Netscape doesn't please me
> (IE6 expands at all viewport sizes), but I do like the fluid way
> everything shrinks down when I decrease viewport width. Nice!

I tried to pull off "best of both worlds"- limiting the width to try to
preserve readabilty (says the girl with the dark gray background and black
text) but making an effort to accomedate users not browsing full screen.
I'll try to tweak my layout for a more professional, less template-ish look,
and work on bettering the scalibility.

> HTH. GL.
> --
> John

Thanks a bunch, John. I really appreciate the feedback!

Bergamot

2007-02-10, 3:15 am

Rhi wrote:
>
> http://www.9thparadigm.com/example.html

It's completely unreadable with those colors.

--
Berg

Jim Moe

2007-02-10, 3:15 am

Rhi wrote:
>
> I'm trying to make the move from using tables to CSS in my web design, and I
> am having some trouble getting a layout to display properly in IE6. It
> works well in Firefox, Netscape and IE7- but in IE6, it's horribly broken.
>
What does "horribly broken" mean? The images are hidden in IE.
You allowed the default text alignment in the <Hx>s.
The "Free Quote" image in an <h2> element. Given its size and how you
want the layout, it should probably be in a <div> by itself, and the <div>
floated right, and placed before the <h2>.

> Could anyone point me to the problem, and where I might find the resources
> to get it fixed up?
>
To use lists, <ul>, for the navigation lists, and other useful topics:
<http://css.maxdesign.com.au/>

General browser quirks discussion:
<http://www.positioniseverything.net/>

> Any thoughts on the layout/colors/styling of the mock up would also be
> appreciated!
>
The color contrast is so low that it is unreadable.
The readability is aggravated by the tiny font size, 80% (= 13px) of my
preferred size.
Since the images are purely a visual decoration and offers nothing to
the content, the alt text should be empty: alt="". What would
"less.than.three logo" convey to someone with a text or speaking browser,
or to a search engine?
You are using deprecated markup: font, align, hspace, etc. These are
presentational elements that should be in CSS.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Ed Seedhouse

2007-02-10, 3:15 am

On Fri, 09 Feb 2007 14:54:54 -0600, Bergamot <bergamot@visi.com> wrote:

>Rhi wrote:
>
>It's completely unreadable with those colors.

Agreed.