Review request: Test Layout without tables

They have: 62 posts

Joined: Jan 2002

Hello everyone!

Well it's been forever since I've been here. Actually I had trouble finding you after the domain name trouble (or was that some really bad dream I had...)

I have just finished a new design (redesign) for one of my websites and I hoped I could get as much feedback as possible.

I am trying to completely seperate my content from the layout with this design by using css for ALL the design elements. (There isn't a single table on this page)

What I would love is to know if the design holds up in different browsers. (I'm afraid it falls apart in the older browsers, but I don't know how much) If you could look at the template page for me (http://cpchallenge.com/testdesign/test5.shtml) and the page that shows the way the template should look (http://cpchallenge.com/testdesign/looks.html) and let me know what isn't showing up or is messed up in your browser, I would be very grateful.

I know I had always gotten winning advice here, so I'm looking forward to hearing what you think.
Thanks so much in advance for your comments!

PS: I will stop by tommorrow morning and review some sites here. (it's very late where I am and I must get some sleep) Smiling

The purpose of education is to
get more jokes.

The Webmistress's picture

She has: 5,586 posts

Joined: Feb 2001

Works fine in IE6, looks good too Smiling except I find the text a bit too big.

In NS4.7 it falls apart completely and everything falls into one long line underneath each other, with not background etc!

In NS7 it's ok but 'participating artist' is overlapping 'artwork'.

Opera is the same as NS7 plus all the text is bold.

Julia - if life was meant to be easy Michael Angelo would have painted the floor....

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

Hey! Looks good in Mozilla Laughing out loud

...Better thank anything I could create...

I think you've done a great job on the site. Laughing out loud

They have: 62 posts

Joined: Jan 2002

Thank you so much Webmistress!

I knew it couldn't be working right for NS4.7 I recently switched machines and am using OSX on my Mac now. (and I love it)
I so wish that I hadn't gotten rid of my old computer with the 12 inch screen now, because I can't even install 4.7 on my new computer.
*Note to self - Never give away an old computer if it still works.

Ideally, I'd have 4.7 so I could make a css file just for it and add the layout properties in one at a time to see what's breaking the css.
I guess I'll have to guess on it and see if someone kind will check it for me. Smiling

I'm not sure what's going on with the bold text in Opera. Maybe the text style in the content div is being inherited from the title headers.
Do you think adding font-weight: nomal; to the content div would clear that up.

I know the text is a bit large on some browsers. I'm trying to go for a totally accessible site with this redesign. We get a lot of schools that come to the site as well as artists that are older and have trouble with smaller type. I just set the font size to medium and am allowing the viewers to resize it if they want. I was thinking of adding the text resize buttons you see on some of the newer sites... I just don't know where I could put it.

Thanks so much again! I'm trying to create a highly accessable, cross-browser friendly layout. I know it sounds strange to be using css for the layout elements, but I also want a design that I won't have to update every single year when everything I'm using becomes depreciated. It's also nice to be able to have a print layout without having to create a new page for it. Smiling

The purpose of education is to
get more jokes.

They have: 62 posts

Joined: Jan 2002

Thanks so much for the compliment Renegade!

Quote: ...Better thank anything I could create...

I doubt that... I'm not that clever. Smiling

I envy anyone who can code PHP. Simple css causes me enough grief. So kudos to you!

The purpose of education is to
get more jokes.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

It looks fine to me in Opera 7 (no bold text here) except that the caption under the bottom horse drawing is overlapping the bottom borders (and that seems to be a screen res problem) Good job!

They have: 62 posts

Joined: Jan 2002

Thanks so much for looking Megan!

The overlapping is something I"ll (hopefully) sort out in the final version by placing my float divisions in the right spot in the text.

I'm making my list of browsers it works in and browsers it doesn't, so ANY feedback is appreciated! Smiling

The purpose of education is to
get more jokes.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Karen, you can install N4.x on your machine -- it'll just run in OS9. Unless you have removed that option?

I have 99% of the programs working in OSX, but I still have OS9 installed for things like, well, N4.x.

They have: 62 posts

Joined: Jan 2002

Thanks for the suggestion Suzanne.
I'd have to remove a lot of files from my hard drive in order to make enough space to partition it off to install 9.
As soon as I get the energy for it, I really should do that so I can switch between the two.

What I did do is go through the code and create a (hopefully) NS4 friendly version.
The layout isn't quite as pretty, but it should look good.

The new css should also take care of some of the inconsistant elements in the other browsers.

If someone could check to make sure it actualy does work, I'd appreciate it! Smiling

I also dropped the doctype back down to 4.0 transitional, because I'd read that xhtml can cause NS4 to load pages then re-load them, throwing off all the layers.

Thanks again for all the help everyone!

The purpose of education is to
get more jokes.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

here I am hoping to be totally done with N4 so I can remove OS9, lol...

It looks okay in N4, a bit of overlap with the main navigation and the drop down. It does look quite different, but mostly in layout.

They have: 62 posts

Joined: Jan 2002

Wouldn't life be so much easier if we could just ignore the older browsers... but then what would we do with all our free time. Laughing out loud

I finally got to check my site on a friends computer with NS 4 and NS 4.7. I'm not as happy with the way the page looks, but at least it all shows up. Although I'm not sure why the "body" div is crowded into the "main navigation" div.

Now that I've figured out which elements work in paticular browsers (I hope), I'm ready to move into the next phase of honing the look.

Like a fool I asked to have the template checked at the forum at coolhomepages.com.
I only got one response and that was to tear apart the look of my page (but it did confirm that all the elements were showing up).

So I was hoping to get some feedback from you here about the look of my template. What works for you and what doesn't.
I know this is very subjective, but I trust your judgement here... you've never steered me wrong. Smiling

Thanks so much again!

The purpose of education is to
get more jokes.

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

I find the elements with the gradients somewhat heavy-handed. And ironically, I find the text too large. If I were to make subjective visual recommendations, it would be to make the "buttons" more subtle and less metallic (more in keeping with the subject of the site, but really, it could be argued that colour pencils and metal enjoy quite the relationship, so that's pretty well something you'll have to decide), and to reduce the font size just a little. And perhaps to utilize a graphic look that's more in keeping with the easter egg illustrations, or the tools (pencils), than the gradients.

From a functional standpoint, I find the drop-downs really painful, and would like to have a gallery of artists that I could click through, from beginning to end, and a solid html page with the list of participating artists, et cetera. Having to access a drop-down with such a large list isn't easy to use.

I'd also suggest, from a usability standpoint, having the growing tutorials sorted by artist, by tutorial title, and by tutorial type.

Having the galleries IN a gallery, such as, well, Gallery -- http://gallery.menalto.com/index.php -- would make it much easier to view the various galleries, though it would lose the "others by this artist" option unless you scripted that in, and had another section for each artist's contributions.

There appear to be a number of orphan pages, and pages that only exist if you get deep enough into a section (the about section is particularly bad for that) which makes it somewhat confusing.

So that's not quite design issues, in the graphical sense, but rather in the functional sense. I hope that's useful feedback for you.

They have: 62 posts

Joined: Jan 2002

Thanks so much for the great suggestions Suzanne!
I'm working on replacing the navbar images with strait text and a background image roll-ver. It's hard to know exactly what to use to set the main links apart (I'm avoiding making "cute" little colored pencils under the text because every cp site seems to be using that).
...oh well, I'm sure something will come to me. Smiling

You are so right on track with the reorganization of the sections to make it easier to find things. I just wish I knew this site would be this big when I started. I have my flow-chart made and am going to get things organized for the redesign.

I'm also trying to work out the best way to eliminate the drop downs without having to send people back to the main page of the section everytime they want to see a different artist or lesson.

Thanks again for your suggestions. They really did make me look at the organizational structure of the site (it stil makes me shudder) and since this redesign is in order to make things more accessible, those changes will definately be a high priority. Smiling

The purpose of education is to
get more jokes.

They have: 98 posts

Joined: Apr 2003

i love the large text, one of my monitors is a dot-junk and small text looks fuzzy. I dont really like the border on white area. -Josh

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.