Site critique?

[zuma022]

I was wondering if I could get a few opinions? I've started doing some webdesign, mostly just for friends and family, but I'd like to maybe attract a client or two here and there.
If you came across this site, what would you think?

http://www.zumawebdesign.com

I tried to keep it fairly simple and brief, but still classy. That's what I'm aiming for anyway. I don't really have a whole lot of experience though.
I'd really appreciate your opinions. Thanks.

[Me1000]

First off let me say that I really like this.

1. With the design, I get scroll bars on the page horizontal and vertical. LONG ONES...

2. I find lightbox very much too "flashy" too much movement. You might look into a lightbox alternative that is simpler and still elegant. Though that is just my preference.

3. the "Lomography" part of the portfolio. Why not eliminate the flash and go with something more standards based? Javascript can make you a very nice looking gallery...

4. Your (home) page validates XHTML Transitional, why not just make the leap to strict while you are at it? There are only 2 errors on the home page with Strict, both of which are easily fixable...

[zuma022]

Thanks so much!

I have to look into those scroll bars. I mostly use Firefox, they don't show up there (not in IE either) but I just noticed them on Safari. That's the browser you used I assume?

Good point about the lightbox. I kinda like it, but it doesn't really go too well with the simple style of the site. I'll have to look into some other options. Any recommendations?

You're right strict wouldn't really take much effort. I'll do that! Again thanks a lot for your help.

[angelwatt]

Overall, it has a good design and look to it. Just a few comments:

1. The content seems to be set off center toward the right, center would work better.
2. Your Home icon looks more like an arrow. If you add a doorway or chimney that would help with the ambiguity.
3. I'd personally take the text size up a notch.
4. As for the "This page is XHTML and CSS valid," that's really unnecessary. It also interrupts the flow of the content, as code-wise that content comes before the text in the right column. For someone using a screen reader, they may think they've reached the end of the page when you start mentioning things like the validation, as that's often something found at the bottom of pages.
5. On the right column, you have a couple bullets that start with lowercase letters, while most are uppercase.

Code Comments:

1. You've got a number of empty p tags and extra br tags. Something to clean up.
2. You've got a little divitis going on. For the navigation I suggest tagging it up as an unordered list (ul) and using CSS to give you the same look. This will help in terms of accessibility as well.
3. Without looking too closely it seems you have your navigation icons also added at the end of your code, likely for "preloading" them so they appear more quickly on the navigation. Take a look into CSS Sprites as an alternative approach to this as the extra code at the end isn't very professional. The #preload section is also likely what's causing the scroll bars in Safari. To help with that, in your CSS add width:0;

As for a lightbox alternative that's simpler, I have a script like that. You can find it on my site (see profile) in the programming section if you're interested. I don't have the latest version of the script on my site yet, but you can still check it out to see if it be of use.

[zuma022]

Thank you so much! I can't tell you how useful these comments are.

I'll be sitting down over the weekend and fix those points.
I'm very new to CSS controlled layouts, so yeah I guess there's a lot of divs. I actually tried to use an ul for navigation, but I couldn't get it to work with the rollover. And yes those navigation icons at the end are for preloading. I used CSS to position them at -1000px so they shouldn't show up unless CSS is disabled for screenreaders. I'll try the width 0 though, hopefully that'll solve the scrollbar issue. I'll also take a look at CSS Sprites and your site, that sounds very interesting.

Thank you!

[cromwell64]

Originally Posted by zuma022

Thank you so much! I can't tell you how useful these comments are.

I'll be sitting down over the weekend and fix those points.
I'm very new to CSS controlled layouts, so yeah I guess there's a lot of divs. I actually tried to use an ul for navigation, but I couldn't get it to work with the rollover. And yes those navigation icons at the end are for preloading. I used CSS to position them at -1000px so they shouldn't show up unless CSS is disabled for screenreaders. I'll try the width 0 though, hopefully that'll solve the scrollbar issue. I'll also take a look at CSS Sprites and your site, that sounds very interesting.

Thank you!

on your preload div you could add display:none to hide the content instead of the negative margin.

[angelwatt]

Originally Posted by cromwell64

on your preload div you could add display:none to hide the content instead of the negative margin.

Well, on some browsers when using display:none it will not 'preload' the images, which makes the whole thing pointless.

[cromwell64]

Originally Posted by angelwatt

Well, on some browsers when using display:none it will not 'preload' the images, which makes the whole thing pointless.

well then, visibility:hidden;

[angelwatt]

Originally Posted by cromwell64

well then, visibility:hidden;

That can work depending on what other CSS accompanies it. By itself, it still takes up space on the page and could potentially create unwanted white space. Though, if used with position:absolute it would become removed from layout flow.

Here's the CSS I use for something that I want onscreen, but not seen.

.nosee {
 width: 1px; height: 1px;
 overflow: hidden; float: right;
}

I avoid using 0px as IE has had issues in certain cases with it. You can also have opacity set to .01 in cases where the 1px is seen on the screen. I've generally used this to hide text from "normal" users, but still have it available to users of screen readers. The above is just "food for thought," and gives an example of accomplishing what the OP was doing. There's other equally good ways.

[cromwell64]

Originally Posted by angelwatt

That can work depending on what other CSS accompanies it. By itself, it still takes up space on the page and could potentially create unwanted white space. Though, if used with position:absolute it would become removed from layout flow.

Here's the CSS I use for something that I want onscreen, but not seen.

.nosee {
 width: 1px; height: 1px;
 overflow: hidden; float: right;
}

I avoid using 0px as IE has had issues in certain cases with it. You can also have opacity set to .01 in cases where the 1px is seen on the screen. I've generally used this to hide text from "normal" users, but still have it available to users of screen readers. The above is just "food for thought," and gives an example of accomplishing what the OP was doing. There's other equally good ways.

but wouldn't using something like this be simpler and achieve the same effect?

.nosee
{
    visibility:hidden;
    position:absolute;
}

[angelwatt]

Originally Posted by cromwell64

but wouldn't using something like this be simpler and achieve the same effect?

.nosee
{
    visibility:hidden;
    position:absolute;
}

I'll defer to this snippet,

Originally Posted by http://www.naarvoren.nl/artikel/high_accessibility/

... if you use visibility: hidden or even display: none to make certain text invisible, some screen readers will enunciate or render the text anyway.

Also, it depends on the purpose. Since the OP is just hiding images the above mentioned issue will work OK, which is why I earlier said that the CSS you posted would work (for that situation: preloading images). My defining of the .nosee class though is used for a different purpose (hiding text from sited users), which as the quote above states, can have issues with screen readers. That's why I use my technique. And that's why I ended my last post stating that my CSS was an example.

If you want to learn a little more about screen readers and CSS's effect on them, see this site, particularly the table at the bottom.

[zuma022]

Originally Posted by angelwatt

You've got a number of empty p tags and extra br tags. Something to clean up.

I've started to make some changes to the site. This may be a noob question, but the empty tags are for spacing. What would be the correct way to add an empty line?

[angelwatt]

Originally Posted by zuma022

I've started to make some changes to the site. This may be a noob question, but the empty tags are for spacing. What would be the correct way to add an empty line?

CSS would be the tool. Add extra margin or padding to elements. You can add id attributes to tags if need be to just add the styling to one tag element. On your list you can increase the line-height as alternate to using margins or padding to give you the extra spacing. If you have any specific instances that you need help with just let me know.

[MojoWill]

Originally Posted by zuma022

I've started to make some changes to the site. This may be a noob question, but the empty tags are for spacing. What would be the correct way to add an empty line?

you could use a spacer div

.spacer10 {
height: 10px;
}

then add <div class-spacer10></div> to insert the break

[angelwatt]

Originally Posted by MojoWill

you could use a spacer div

.spacer10 {
height: 10px;
}

then add <div class-spacer10></div> to insert the break

That's not very semantic HTML. I'd avoid doing this as there are better ways.