Website for Review
http://www.barryswebdesign.co.uk/april/

Additional Comments
I am working on a new design for my website and i would like to know what people think...

Be real with your answers please

Menu: Up-arrow on "Home" should stay there all the time? Or it should move to menu item
that user hover mouse pointer over? Second sounds better deal to me ... Also, red color for
mentioned arrow is ehh ehh, try same shade of grey as with "Recent projects", "My services"
and "Get in touch" ... Also, onmouseover color is blue but it's not matched to any other color
on page!

"Barry" and "Web design and PC solutions" would look better if colored same color as
background color on "Recent projects" or "My services"

"Call me today ..." and "My services" yellow text is not matched with other colors ... Most other
colors are "dirty" so you might try "dirty" yellow instead

"Web site packages" on "Menu" point to completely different looking web page ... You might be
better if you stick with one template (design) because site will look more compact

I suggest you to try not to use too many colors ... Check some online COLOR BLENDER tools
like www.colorblender.com to find matching colors, that will make your web page more pro ;o)

Also, box that contains "Freelance website design ..." has left and right borders fading to black
but all other boxes don't ... Either make them all fade or make them all visible ... Same goes for
border widths = some are 1px, some are 2px ... No consistency there!

w3c validators = all fine, gratz !!!

Thanks for the info

the site is work in progress to be honest I was just looking for an opinion on the design.

I would not usually post up an unfinished site.

I am using php to place the marker on the links that shows the current pages and I know that some of the links still go to my 404 page of my current site.

Do you like the layout, thats what im really asking?

vertical spacings between boxes is not equal ... Looks like upper part of page is compressed
but lower part is not (in terms of space usage)! Not bad with 1400x1050 but with 1024x768 gap
between "Call me today" and lower boxes is just to big ... You might make it more compact in
general so users don't need to scroll down too much

If you click on the links you will see that the pointer moves to the page that is selected or live.

I have darkened the text a  little to make it grey and i think that it does look a little better

I dont usually validate all pages as i do think that having very trivial mistakes at the end of a page will not effect the accessibility of the site pages, but I do however like to keep all code clean and tidy.

I hand write all code for my own site (unless it is a javascript gallery or some thing like that) so i am constantly looking to see if my site has mistakes via IE6 and 7 and FF.

This site is still work in progress and I will be taking mostly all the facilities from the old site i am currently using for my businesses. (take off the april on the addy and you see my current site)

thanks again for the comments

should be a week or so before i finish the site

barry wrote:

If you click on the links you will see that the pointer moves to the page that is selected or live.

ok but why not make arrow grey (for example) until user actualy click on menu item? that way it
will differ from one sitting on "Home" and remove possible confusion about if it's intentionaly
same colored or something went wrong ...

overklokan wrote:

vertical spacings between boxes is not equal ... Looks like upper part of page is compressed
but lower part is not (in terms of space usage)! Not bad with 1400x1050 but with 1024x768 gap
between "Call me today" and lower boxes is just to big ... You might make it more compact in
general so users don't need to scroll down too much

Yea I noticed that..
i was using a    with a clear:both styled paragraph as i was having a little issue with FF moving the footer up the the level at the top of the middle boxes. Ive taken out the   and still kept the clear both so now the gap looks the same..

Im using 1280 x 1024 and it just fits on the page for me and i have a couple of task bars .. google and stuff

overklokan wrote:

barry wrote:

If you click on the links you will see that the pointer moves to the page that is selected or live.

ok but why not make arrow grey (for example) until user actualy click on menu item? that way it
will differ from one sitting on "Home" and remove possible confusion about if it's intentionaly
same colored or something went wrong ...

Yea good idea .. think ill change it to grey as you suggested

yep looks much better now ..

barry wrote:

Yea I noticed that..
i was using a    with a clear:both styled paragraph as i was having a little issue with FF moving the footer up the the level at the top of the middle boxes. Ive taken out the   and still kept the clear both so now the gap looks the same..

True ... Why not move "Menu" little lower so that gap between it and "Web Design ..." is equal
as others? Or just remove underline from "Web Design ...", you don't have it anywhere else on
the page anyway ...

Also, as I tend to see pixel mistakes (ehh) I see that upper left corners of boxes don't have
same looking light reflection ... footer don't have it at all! So, 3D look of those boxes is not
consistent on whole page ...

In general, layout is fine ... For other tips i gave you decide yourself ... I'll go check this forum
a little, have fun ;o)

overklokan wrote:

Also, as I tend to see pixel mistakes (ehh) I see that upper left corners of boxes don't have
same looking light reflection ... footer don't have it at all! So, 3D look of those boxes is not
consistent on whole page ...

In general, layout is fine ... For other tips i gave you decide yourself ... I'll go check this forum
a little, have fun ;o)

Yea true that was a bit of lazyness on my behalf ..

I ve been trying to get a ligh effect on the go for ages but never actualy got it exactly how i wanted and im sure that by next week these boxes will look pretty much different....

I want to make a dark yet reflective look about all the boxex ..

Ill do it soon but for now i have to work on paying customers projects first

ill speak to you soon and you will see consistency in my design .. until then have a great time looking at other peoples sites .. i do, some times its actually quite funny   .. although people in here tend to take to much to heart so be aware that if you say the wrong thing a bunch of regulars will jump on you and start to cry a bit

those that can't accept complains and suggestions should not start topics here, right?

My thoughts/comments;

Like the plastic/wet look of your graphics. I like the way you have the three sections near the bottom. In general the overall layout is good.

IMO the theme is too dark.
I found it on the difficult side to read. Maybe add some spacing to the letters to help the readability factor. A brighter background color with darker text may help the readability.

The following may be a little premature since you are just starting out with the designing.

I noticed you have  used a combination of an external style sheet, embedded styles and inline styles. Are you planning on getting all of the styling into a single external style sheet?
In looking at your external style sheet You can decrease the current file size (just guessing) by around 25 to 30 percent if you use shorthand property values wherever  possible.

With the main menu you could place these inside an unordered list as well rather than having each link inside a div, decreasing the amount of html needed.

I mention reducing file sizes as every k saved will help in the display time to the visitor.

ColoEagle wrote:

My thoughts/comments;

Like the plastic/wet look of your graphics. I like the way you have the three sections near the bottom. In general the overall layout is good.

IMO the theme is too dark.
I found it on the difficult side to read. Maybe add some spacing to the letters to help the readability factor. A brighter background color with darker text may help the readability.

The following may be a little premature since you are just starting out with the designing.

I noticed you have  used a combination of an external style sheet, embedded styles and inline styles. Are you planning on getting all of the styling into a single external style sheet?
In looking at your external style sheet You can decrease the current file size (just guessing) by around 25 to 30 percent if you use shorthand property values wherever  possible.

With the main menu you could place these inside an unordered list as well rather than having each link inside a div, decreasing the amount of html needed.

I mention reducing file sizes as every k saved will help in the display time to the visitor.

Yes still testing the layout of the page and yes the stylesheet will all be in one file.

I agree with Coloeagle, I had a bit of trouble with the colors.  I like the layout but my eyes had trouble focusing on any one thing.

Good luck!

I think it looks great. But I think you use too much bold in your introduction, and the gray arrow that shows up looks bad too. The only other thing I could think of is that the sides of the page look really blank (in the black area), 8/10.

ok with regards to ColoEagle's remarks

I have weeded out the sheet and used a short hand on most of the stuff in there. I have used on page styles for the small form because when i design the enquiries page the inputs will be a different size so i didnt want to get some crazed up conflict on the page.


I have also used a 0.1 exs spacing in the lettering so that it becomes more readable.
i always did think the text was a bit to squashed up too but now with a spacing i think it may be a bit more easy on the eye, but i do think the text now looks like some kind of old military type that im not to sure about.


Soracross what screen res are you using? I use 1280x1024 mostly and the page just fits dandy on my screen. I do use my laptop with ie6 also to test for cross browser and it still fits and looks ok on that too?

I was thinking about using a pattern on the back but im not sure?

changed the design ..

I liked your original layout better.

Still on the dark side. IMHO

The text is now easier to read.

With the font declared being Trebuchet MS remember that not everyone will have Trebuchet MS. Consider adding a list of 3 or 4 different fonts for your entire family. Be sure to use a serif as the last one as this is normally the default font. List them in the order of preference.
Example;
font-family:Trebuchet MS, Verdana, Helvetica, Georgia, Sans-serif;

Regarding your forms you could add a class to each form enabling you to have it all in the single external style sheet

With your embedded styles for the small form, add a class of small or whatever to the small form. Then specify this form only in the external style sheet.

form.small input {

        width:90px;

        font-family:"Trebuchet MS";

        font-size:12px;

        background-color:#333;

        height:19px;

        color:#FFF;

        margin:0;

        padding:0;

}       

form.small select {

        width:90px;

        font-family:"Trebuchet MS";

        font-size:12px;

        background-color:#333;

        color:#FFF;

}

Example of more shorthand using your #holdermiddle
Currently you have;

#holdermiddle {

        background-repeat: repeat-y;

        background-position: left top;

        background-color: #000000;

        padding-right: 0px;

        padding-bottom: 0px;

        padding-left: 0px;

        margin-right: 0px;

        margin-bottom: 0px;

        margin-left: 0px;

        padding-top: 60px;

        border-right-width: 1px;

        border-left-width: 1px;

        border-right-style: solid;

        border-left-style: solid;

        border-right-color: #000000;

        border-left-color: #000000;

        z-index: -6;

}

The same things can be accomplished with;

#holdermiddle {

        background:#000 repeat-y left top;

        padding:60px 0 0 0;

        margin:0;

        border-right:1px solid #000;

        border-left:1px solid #000;

        z-index:-6;

}

Though with this particular css id I'm confused why you have the repeat and the position when you are not using an image.