18 replies [Last post]
Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 14 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

Hi people

I re-designed my web-design site to a more mature professional looking site.

Need some comments and suggestions. I havn't tested for the mac yet, but it's pretty solid on the PC.

[link removed by poster]

Gone all out on accessibility.

I know my style switcher cookie doesn't work yet, it's because of the status bar message, will sort that soon.

If you have viewed this site before, please clear your cache and temp files.

Thanks in advance.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

JS Web Design site check please.

I only had a minute to check - two things popped out at me:

I didn't like the indent on hover over the main menu and last sentence on the first page faze should be phase.

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 11 years 36 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

JS Web Design site check please.

I like the simple design, however there is something missing that i can't quite put my finger on. Perhaps if you tried thinning the left and right borders. Also, maybe the links are a little bit large.

Other than The concept is good.

I am Dan, Dan I am.

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 14 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

JS Web Design site check please.

Hi

I made the changes that you have suggested.

I have problems in Mac IE.

The navigation stretches all the way accross the top covering up the title background photo but not the title text.

Also the right content block isn't floating right of the left content block.

Why do they make it so bloody hard for us?

This is my first fully flowing site using no position:absolute which I was amazed when I got it to work straight away on PC IE FF OP. I had to trim 3px off some off the floated divs to work in explorer but that hasnt affected the layout or look.

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 11 years 31 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

JS Web Design site check please.

Hi

Don't know if it's just bad timing on my part but the Portfolio, Prices and Contact pages have just gone wibbly.

One thing I noticed on the Accessibility side (ok 2 things) is that you should be using Labels on the contact form. Also, technically having the input area before the label might cause problems for someone using a reader - but it certainly looks nice!

Edit: It seems to be working again so ignore that bit. Found another very small thing - the quick portfolio links on the index page go to the external site - probably better to keep them within the site and have them going to the portfolio page/relevant section.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 14 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

JS Web Design site check please.

Hi

would this be how to use the label tag,

<form action="mailprocess.php" method="post">
<ul>
<li><input type="text" name="name" size="30" maxlength="30" class="forminput" /> <label for="name">Name</label></li>
<li><input type="text" name="email" size="30" maxlength="30" class="forminput" /> <label for="email">Email</label></li>
<li><input type="text" name="subject" size="30" maxlength="30" class="forminput" /> <label for="subject">Subject</label></li>
<li><textarea name="text" cols="40" rows="10" class="formarea"></textarea></li>
<li><input type="submit" name="submit" value="Send" class="button" /></li>
</ul>
</form>

Will have a re-think on my form structure.

Is it my form that looks nice or the site in general.

I dumped the entire site on the server again probably as you was viewing it because I made a change to some of my css id names.

Any ideas on Mac IE

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 11 years 31 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

JS Web Design site check please.

That's exactly how to do the label thing!

It all looks nice - but I was referring to the contact box - it looks neat with the labels that way round - accessibility could be an issue though - have you had a look at this site: http://www.accessify.com/default.asp very good for all things Accessible!

Just my opinion here - but maybe a couple of pxs more padding on the left hand column text and it's quite slow downloading(36 seconds on 56kbps) I'm presuming you're going to crop that Goose picture down a bit and optimise it as it's 139kb?

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 14 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

JS Web Design site check please.

Hi all.

Thanks for the help so far.

Down to one last problem on Mac IE which I really need to get sorted.

The navigation up at the top left is still stretching all the way to the right and covering my title area.

I have tried a few things with padding, margins and borders, but nothing seems to work.

I have taken as much out of my css as possible so only the required styling is left which I thought could have solved the prob.

I have tried defining margins and padding on everything but still no result.

[link removed by poster]

Need help. Crying

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 11 years 31 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

JS Web Design site check please.

Probably not the cause - but you've left off the ending ";" on your width in your nav element in your CSS...

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 14 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

JS Web Design site check please.

I always leave it off the last piece of style and the #nav only has the one piece of style, which is probably not needed anyway.

Should I be adding the last ; to all my styles?

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 11 years 31 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

JS Web Design site check please.

My understanding is that it's a bit like coding MSQL and the like - the application only processes a command/instruction when it sees a complete one - and it recognises a complete instruction by the ";" which signifies "end instruction"

I'm sure someone will correct me if I'm wrong!

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 14 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

JS Web Design site check please.

I added the litle thingy at the end of all my styles.

I'm sure i'm not the only one to do a flowing site like this, there must be a solution to my problem without disrupting the flow of title, nav, content, footer.

Maybe the problem would go away if I put the #title under the #nav in the xhtml, and floated the #nav left

rather than #title above the #nav and float the #title right.

This would screw up my semantically correct document though.

Edit

I want to screw the screws in tight so the shelf doesn't fall down.

My favourite ride at Alton Towers is the cork screw.

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 11 years 31 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

JS Web Design site check please.

Does it work properly if you remove the title div?

If so - maybe put the text into the background image and have a display:none <h1> tag with the title in it in case of stylesheet failures.

There is a serious Accessibility argument for having the navigation appear physically after the main contents of the page so that screen readers (and PDA users) don't have to keep going through it.

You could have the nav at the bottom of the page physically and position it absolutely at the top of the page. Then include a hidden skip to nav link just in case.

Just a thought...

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 14 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

JS Web Design site check please.

OK

I was allready on the case of getting rid of the #title div but I've kept the h1.

Floated h1 right so the nav sits at the top left. Styled h1 text-align:right.

This has now left my styleswitcher menu homeless, so i'm just working on that.

It will probably have to go under the navigation (boo) and float:right style on the nav.

Clear:left on my left column.

This is just speculation, so i'm about to have a go.

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 14 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

JS Web Design site check please.

Bodge!

Nope that didn't work.

Ok. I am gonna have to position absolute my styleswitcher menu.

Man it was so good, I had it so when you increased the text size nothing bodged. Thanks to micro$oft i have to ruin a good thing.

Unless there is a way to keep my styleswitcher menu under my title without wrapping it in the h1 tag then re-styling it with a span. Thats probably the only way. divs are out aswell, they was my original problem.

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 11 years 31 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

JS Web Design site check please.

Sorry - can't think of anything smarter at the moment.

Only thing I can come up with is including the Stylesheet on/off in your navigation menu as the last item in the list. But then that would mean messing with the li sizes and I suppose as it's not strictly a navigation item it's not semantic.

On mine I've got a Skip Nav link and the Stylesheet switcher above the main container - so they're the first things in the flow - gets them out of the way - it's another possibility...

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 14 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

JS Web Design site check please.

All this workaround has made the problem worse now the menu stretches off the screen.

Gonna look up some mac ie float box problems, and then quit for the day.

Cheers for the help.

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 10 years 47 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

JS Web Design site check please.

The main background works pretty well but there are some issues regarding font-family selections. The nav menu looks a little too plain and the text overlaying the logo could be more fitting to the picture. I think you should simply recreate the header picture with a better font added as part of the picture itself. For the nav section, maybe semi-transparent bars would do the trick. The placement of the text is pretty appropriate, though.

Your h2.secondheading backgrounds are a little visually misleading to me. On the righthand side, whenever I look at the white duck in the background, I feel like it's supposed to be a number or something, number one to be exact. Then my eye followed along to the next h2.secondheading only to see the same "number." I know it's a duck and not a number now but my eye was tricked at first.

You seem like you're on the right path in general. Keep hammeriing away at it and you'll reach pixelated paydirt eventually. Finally, wasn't there a gorgeous robot on your site? Where the hel* did it go? Tongue

- Antibland

Joseph Sprint
Joseph Sprint's picture
Offline
Enthusiast
Last seen: 5 years 14 weeks ago
Timezone: GMT+1
Joined: 2005-04-15
Posts: 381
Points: 0

JS Web Design site check please.

Hi

Got rid of the Goose head on the headings. It did look like a number.

Went for the heading text on the picture, as nothing was working to fix the nav box problems. This is a shame as I had a great resizing site.

The problem was down to the heading float:right. The nav which was lifted to the left had it's right side dragged out all the way across to the right of the container.

Box model float problem?

Somebody must have come across this before.

I havn't seen what would happen if I take the unordered list away from the nav and use paragraphs instead. This could maybe do the trick.

I will attach the original files in a zip file for any body who is interested in trying to solve a problem for curiosity's sake.

Cheers

Jo