Jump to content

My first try .. for comments


TiggersBounce

Recommended Posts

It took a while, but once I got going it went fine. Hard to be updating the content at the same time you are reworking the entire layout.

 

 

 

I have validated the XHTML and the CSS, had to tweak a bit but passed. No CC's or hacks.

Checked on FireFox 3.5, SeaMonkey 2.0 and IE5, 6, 7 and 8 (I have some old computers) and there are minor rendering differences, but survives zoom and text enlarge without breaking too easy.

The rendering actually looks best in IE6 I think. There is a pink bar above the footer in Fx that doesn't belong there, doesn't show in IE. I'd like to fix that. Also some spacing issues around the images, since hspace and vspace in the tags got kicked out by W3C. I'm guessing another line or 2 in the CSS would fix that.

Oh, and my wife says it is very nice on her Blackberry.

 

No, it isn't fancy. But neither am I. I am my own client, so my work reflects that.

 

 

Comments, suggestions and criticisms (with fixes) all appreciated.

edit: removed links now that critique is done, back into development bin. Thanks again for everyone's help.

Edited by TiggersBounce
Link to comment
Share on other sites

If you add overflow:auto; to the #content, that should fix the gap in Firefox.

 

My two other main comments:

-- Comic Sans (the primary font you are using) is nearly universally despised by designers. It doesn't have a professional feel, and I believe it ends up hurting the design because of its unprofessional feel. You'd be much better off with something like Arial.

-- You have a LOT of content on the page. In order to encourage people to read it, it would help to add more padding to give the design a bit more breathing space. Adding some padding to the images will also help.

Link to comment
Share on other sites

Thanks for the fix. It works now! I doubt I would have found that on my own.

 

About the suggestions,

1. I have no idea what Comic Sans looks like ... my first choice was Comic Sans MS and the 'font family' it belongs to starts with Comic Sans. I thought I was doing the 'right' thing. So what I will do is eliminate the Comic Sans, and leave the other two choices as Comic sans MS, cursive;

 

2. I know there is a lot. It used to be a lot more. Opening up the layout is something I'll be working on, especially around the images.

Link to comment
Share on other sites

As far as the design goes...

 

I would like to see more padding on the sides - more space between the edge of the page container and the text.

 

On the navigation, if you want to keep the borders on the links upon hover, I would add a border on the normal state so the text won't jump when hovering, You could make the border match the background so you won't see it if you want.

 

I would add some "back to top" links so that after someone is finished reading about the poodles, they don't have to scroll a bunch to get back to the top for more navigation options.

Link to comment
Share on other sites

Comic Sans MS will hold its position because it is available for the most of the machines: PC and Mac. Fonts suggested as an alternatives in Sitepoint article - well, not so much. Of course there is also a possibility of font embedding services willdely used by designers (not for free).

As for your particular layout:

On my now wide screen I dont see the actual text because of the vivid pink gradient body background. Further - drop Comic sans as it not fit in your kind of layout - try Tahoma or Georgia or Arial - for the text. Also - when go to the "poodle farm" website, I expect to see a huge picture of poodle on a front page or some slideshow.

But the main point is - make one and only layout for all pages and bigger headlines. By the way, if you like Comic sans, use it only for the headlines only - for visitors it will be easier on eye to navigate through the page with a lot of text content. And again, tame the background color!

Link to comment
Share on other sites

I agree with what everybody says about the lack of padding. It just doesn't look very 'designed' having everything run right up to the edge of their box. And worse than Comic Sans is Comic Sans in Italics - and very hard to read.

 

I also don't like how the navigation jumps when you hover over the words.

 

People generally expect main navigation links to take one to a new page, not just further down on the same page. And the equipment page doesn't even look like it's part of the same website (but at least there wasn't so much PINK)

 

I also find there's just too much different stuff on the front page - I thought it was a website about poodles, but there is a box about software, citations, opinions, quotes - just way too much. It's missing some serious organization and a plan.

 

The navigation looks like it's just in the default blue.

 

In your code, you can save yourself many of the classes. Example- your header h1 and h2 tag are in a div of header - so leave off the class, and in your CSS, write #header h1 and #header h2. Same goes for all those classes on your

s in your navmenu division.
Link to comment
Share on other sites

Thanks to everyone who took the time to check out the page and make comments. I should likely apologize for making something public without making a 'best effort' but I was more worried about whether I was getting things structurally correct, and there is no point putting a fine finish on a piece of equipment that won't survive the first hour in service.

 

Andrea pointed out that when she followed the 'Equipment' link it was like going to another website. That is my current HTML website, built on a table layout with .. what do you call it .. tag soup? That's what I am working to change. But I can't do it all in one day, and I'm not prepared to start messing about with the Home page until I have an overall plan, a template, and most importantly some direction and confidence. I can play with my personal Potpourri page in the background without my mailbox filling up. There are over 20 html pages that all have to be updated, converted, merged or retired.

Yes .. I even figured out how to use a table cell as a link. Which is probably worse than using an image as a link, and is completely ignored on a BlackBerry.

 

Here are the suggested changes (amongst others) I made to my PotPourri page,

  • The Comic Sans is GONZO. Except in the #header H1.
  • Most of the pink is gone. New hex color, new gradient, more image height so the darker shades don't show until the bottom of the page. There is so much pink around here I have been desensitized to the colour.
  • "Return to Top" links added periodically through the page.
  • No more jumpy hovers. A simple background change for now, until I decide what I really want for a menu.
  • Padding, padding and more padding.
  • Cleaned up the CSS file, organized and as Andrea suggested, cut some classes. I feel like I'm back in high school .. cuttin' class...

 

Thanks again. This is like the first step in a journey of 1000 miles ....

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...