Russ & Pups

Hey guys,

Just popping this one up for a critique... The site is me killing two birds with one stone.. Putting together a fictional biography using a modern presentation media (for Uni) and building some CSS based designs and templates.

I'm fairly happy with this one, it's a nice simple and clean 'cutesy' feel.

I would like to know what you think of the design and layout ** The jpg's haven't been optimised yet **

You can let me know what you think of the content if you want, but it is fairly random draft at the moment.

Cheers,

Edit >> Thought it poignant to point out that I don't play with stuffed animals, just some gifts I have received from ex-girlfriends in the past (can't just throw them out can I? LOL, give them a back-story and have them fight crime I say)

Nice! I like the design and the way the navigation "grows off of" the main body. The color scheme fits well, and the title font looks neat too. Overall, it's a nice site... Simple, yet elegant. Great work!

Thanks for the kind words SWagner.. I like the 'growing off of' effect too, sort of reminds me of some old table-based layouts I've seen.

Yes. Now, I understand that you will work on the images, which I strongly recommend, since they are a bit grainy. But otherwise, as I said above, good job!

Soooooooooooo cute! Simple, effective, fun, visually appealing...
I wouldn't change a thing... * um well maybe a little therapy?*

LOL thanx... at least thanks up until the first *

My shrink says remarks like that make me worse :crazy:

HTML: Select all

like any other bachelor cat, spends his days sleeping, playing X-Box, drinking beer and writing poetry. The Russ philosophy on life is a simple one -- sleep, drink, play, write, fight crime 

Potential spouse, Nah forget it, couldn't get past sleeping.

I see images in the screenshot, they didn't load for me though.
Strange! I like the layout though

Hmm, that's weird -- it is working even after a cache clear for me... can you try again?

Cheers

Nice, clean and simple... Good Job!

The page would look better if the white container was rounded at the corners.
on the pages with not much content the footer comes up very high and looks slightly odd when moving from large pages to these smaller pages.

Just thought i would put some actual critique into the thread



v1ck.

in IE7 the border of your content, menu and footer div is dark brown, but in FF, its looks pinky Is it normal? Do you set it like that?

Nice layout tho...

Are you using a mac? It is dark orange in both FF and IE for me, they look a little different in each because it is a ridged border...

Looks pinky in FF for me too. I'm on a PC.

I like the design. Couldn't be easier to navigate. Not 100% sure about the mid 90's feel coming from the border though. Especially where the borders sort of overlap and cause a funny looking corner.
Apart from that, cool.

Its dark orange for me too....

I am on Windows XP Pro..
Here is the screen shoot

Attached Images

	FF.jpg (5.6 KB, 8 views)
	IE7.jpg (38.8 KB, 9 views)

I have to be honest. I don't like it. It looks dated and I don't like all the sharp corners.

Make the background something marginally more interesting than black and round off the corners.

I'm not sure what color it's supposed to look like but I get it the same as monie's screen shot. I take it that's wrong?

It's hard to assess this, because it's a "test" or "practice" site, with no particular audience or purpose.

On the whole, I think it looks good. The cutesy images are integrated well into the site.

I'm not keen on the sharp, boxy shape of the page. As you say, this reminds one of old table layouts; but why reproduce intentionally the awkward shapes that were a by-product of old coding methods?

I don't like the variation in <h3> positions. You push your second <h3> over to the right; why? Are you trying to spice up the formatting (if so, this isn't a good way)? It's confusing; the second <h3> looks to be functionally different from the first.

Your code is good, as I would expect, with valid CSS and XHTML Strict. But let's improve it a little:

Code: Select all

<div id="menu">
<a href="index.html" title="Russ &amp; Pups Home Page">Home Page</a>
<a href="#" title="Meet Russ &amp; Pups" class="activeLink">Meet The Team</a>
<a href="theStory.html" title="The Russ &amp; Pups Story">The Story</a>
<a href="recipes.html" title="Cooking with Russ &amp; Pups">Recipes</a>
<a href="friends.html" title="Russ and Pups' Friends">Friends</a>
</div>

Use a <ul> instead of this <div>, and put each link inside a <li>.

Okay thanks everyone.... I think it is quite apparent that the square borders just don't cut it...
I have changed the css and added some rounded corners.. Let me know if this helps.

Hi Mike,
What is so confusing about the left/right h3 headers? I feel it breaks up the page nicely.

I changed the menu as suggested but only because suggested.. I am comfortable with CSS and XHTML, I also make pretty semantic websites but I have never understood why menus are placed in UL's... There appears no benefit to this in any way that I can see, everything can be achieved just as easily, if not easier with a div filled with links.

Sorry if I am missing something really obvious or basic here but I just don't get it... Thanks for your suggestion though.

Page elements should be used consistently. It helps users scan the page and understand its structure. By varying the formatting, you make it difficult to understand the structure.
It's not about what's easiest for you.

A <div> is semantically neutral. In terms of meaning, it doesn't exist at all. The links inside it, therefore, are not semantically grouped. Their only grouping lies in their proximity (one link follows another) and their visual appearance (which hardly helps blind people). Moreover, if CSS is disabled, they may butt up against each other in one long unreadable line.

Since navigation is a list of items, use an unordered list (or ordered, if there is a specific sequence to the items).

Screen-readers will then get announcements such as "list of 4 items". With your way, they just get the links one by one, so it's harder to understand their context and harder to skip over the whole thing.