Site Critique

[Niwa Rose]

Hello all. I'm an inspiring Web Developer who has recently obtained my first client; that was a few months ago. I'm pretty much done with the site, but I would like some critique on it. www.emtcpr.com/new

Thanks a lot!

 

[iBlue]

I think it looks pretty nice. Something is wrong with the About Us page though. It cuts off instead of scrolling.

 

[Niwa Rose]

I think it looks pretty nice. Something is wrong with the About Us page though. It cuts off instead of scrolling.

Weird. May I ask what your browser is and your OS?

 

[iBlue]

Weird. May I ask what your browser is and your OS?

Sorry, I should have mentioned. I'm using Mac OS X 10.6.2 and the latest version of Firefox.

Here is a clipped screenshot of what I mean.



I'm not very clued into HOW sites are designed so I can't be of much help in the solution but I thought I'd point it out.

 

[Niwa Rose]

Sorry, I should have mentioned. I'm using Mac OS X 10.6.2 and the latest version of Firefox.

Here is a clipped screenshot of what I mean.

View attachment 204846

I'm not very clued into HOW sites are designed so I can't be of much help in the solution but I thought I'd point it out.

Ah, your browser must be over riding the font size that I have declared in the css. I'll just have to increase the height.

Thanks for pointing it out. ^^

 

[Angelo95210]

Same issues for me (with same config) as described above. But apart that it's fine I think. Well done.

 

[DaReal_Dionysus]

The graphics are a bit rough around the edges and the text is small. Bit if it's your first try it's not to bad as I have seen much worse on here.

 

[7031]

Pretty damn good although I would remove the "Main Menu" text and the full screen button on the slideshow.

 

[JohnDoe8450]

Ok, my comments...

Get rid of the "Main menu" text, it's pointless. If people can't tell where your menu is, you're doing it wrong.

The flash image thing could be done with javascript. I suggest avoiding flash whenever you can.

Make the title of the page (which appears on the browser's window) include the company's name.

Learn PHP for server-side includes.

And, "... I'll just have to increase the height. ..." WHAT? You have your heights set as absolute values in your CSS??? That's not recommended... Your height should be fluid!

 

[Niwa Rose]

Same issues for me (with same config) as described above. But apart that it's fine I think. Well done.

Thanks much.

The graphics are a bit rough around the edges and the text is small. Bit if it's your first try it's not to bad as I have seen much worse on here.

Do you have any tips for the graphics? ^^
I've already fixed the text on the copy I have on the computer. I was just playing around with the "em" attribute for the font size. xD
Thanks very much. ^^

Pretty damn good although I would remove the "Main Menu" text and the full screen button on the slideshow.

Will do! Thanks for the input. ^^

Ok, my comments...

Get rid of the "Main menu" text, it's pointless. If people can't tell where your menu is, you're doing it wrong.

Will do. ^^

The flash image thing could be done with javascript. I suggest avoiding flash whenever you can.

Wouldn't flash work on a wider audience than JavaScript?

Make the title of the page (which appears on the browser's window) include the company's name.

Aye captain!

Learn PHP for server-side includes.

I'm working on JavaScript and PHP right now. ^^ I'm a little fuzzy on what server-side includes mean however.

And, "... I'll just have to increase the height. ..." WHAT? You have your heights set as absolute values in your CSS??? That's not recommended... Your height should be fluid!

Well I did that because I couldn't get each of the three columns to correspond with each other. The right sidebar might be longer than the left and the content, the content might be longer than the sidebars and so on; because I have the sidebars of a different color, that is a major problem. I did look into a JavaScript solution; however, I haven't been able to get it to work. Do you have any recommendations how to have the height of my sidebars dependent on the height of my content?

Thanks for your input. ^^ It's really much appreciated.

 

[besler3035]

Will do. ^^
Wouldn't flash work on a wider audience than JavaScript?

Nope - Javascript is much more accepted than Flash. Plus, Flash isn't iPhone-friendly

 

[JohnDoe8450]

I'm working on JavaScript and PHP right now. ^^ I'm a little fuzzy on what server-side includes mean however.

Basically, they let you have an index.php file which contains the nav, header, footer, etc... and include other files as the main content. So you don't have the menu hard coded in 6 different files.

Well I did that because I couldn't get each of the three columns to correspond with each other. The right sidebar might be longer than the left and the content, the content might be longer than the sidebars and so on; because I have the sidebars of a different color, that is a major problem. I did look into a JavaScript solution; however, I haven't been able to get it to work. Do you have any recommendations how to have the height of my sidebars dependent on the height of my content?

Have a look at the file I attached (change extension to .html). Change the heights of the different columns, the footer will follow the longest and the container div will include all of them.
If you want the background colors to go all the way down to the footer, as have the red, blue and green in my example make it to the black footer, just don't give them any backgrounds and have the container div have a background image which repeats vertically and has the three colors.
Ok, that wasn't very clear... Look up what's called the "Faux-Column" technique.

 

[DaReal_Dionysus]

Do you have any tips for the graphics? ^^
I've already fixed the text on the copy I have on the computer. I was just playing around with the "em" attribute for the font size. xD
Thanks very much. ^^

go ion the internet and find some really good layouts, try to make yours look like theirs just for practice. Also turn up the resolution in the graphics program you are using. If your using photoshop then I would export PNG 24 bit, that will help keep clarity and make file size better.

 

[JohnDoe8450]

go ion the internet and find some really good layouts, try to make yours look like theirs just for practice. Also turn up the resolution in the graphics program you are using. If your using photoshop then I would export PNG 24 bit, that will help keep clarity and make file size better.

The big advantage I see in PNG is transparency. Otherwise, very high quality JPG or PNG look basically the same. Just don't use low quality JPG. And well, gif I never personally use... especially not animated ones XD

And yeah, How I work when I'm building a website is I'll build the whole thing in photoshop and then take out the pieces I need as I build the layout with CSS. The fine tuning of the text and typography I do with CSS, as the browser doesn't render fonts the same way photoshop does.

For inspiration, look up best-of lists of website designs. Here are a few from my bookmarks :
http://www.webdesignerwall.com/trends/2008-design-trends/
http://www.webdesignerwall.com/trends/30-examples-of-attractive-nav/
http://www.webdesignerwall.com/trends/best-of-css-design-2008/
http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
http://www.thebestdesigns.com/archive/?pg=2&c=typography
http://dzineblog.com/2008/06/27-dark-website-designs.html


BTW : For your images you could try this :
http://smoothgallery.jondesign.net/what/

 

[Wee Beastie]

Hey, I think you are off to a great start here. It looks like you are getting plenty of suggestions in this thread, so I'll just post a couple random things that no one has mentioned yet:

- From a design perspective, always make sure that you maintain the aspect ratio of the image you are resizing. Many of your images look squished or stretched. This is important, and I would go back through and replace all of the photographic images on your site. This is marring an otherwise clean and respectable layout.

- I personally think that the "valid html, css" message is superfluous. I think opinions may differ on that, so take it with a grain of salt. I don't really think any users care about that, so why clutter up your site with it? I mean, sometimes you need to put in invalid code to get the results you need, so whey tie yourself down? I'm pretty good about valid xhtml, but I have definitely been known to use css hacks to target Safari and things like that. Should be rare, but you do what you gotta do, you know?

Okay thats my 2 cents. Looking good though!

 

[Niwa Rose]

Nope - Javascript is much more accepted than Flash. Plus, Flash isn't iPhone-friendly

Ah, okay. ^^

Basically, they let you have an index.php file which contains the nav, header, footer, etc... and include other files as the main content. So you don't have the menu hard coded in 6 different files.

Ooh, okay. ^^ That kinda makes sense.

Have a look at the file I attached (change extension to .html). Change the heights of the different columns, the footer will follow the longest and the container div will include all of them.
If you want the background colors to go all the way down to the footer, as have the red, blue and green in my example make it to the black footer, just don't give them any backgrounds and have the container div have a background image which repeats vertically and has the three colors.
Ok, that wasn't very clear... Look up what's called the "Faux-Column" technique.

I never thought of using a background image.

go ion the internet and find some really good layouts, try to make yours look like theirs just for practice. Also turn up the resolution in the graphics program you are using. If your using photoshop then I would export PNG 24 bit, that will help keep clarity and make file size better.

Aye, thanks. ^^

Hey, I think you are off to a great start here. It looks like you are getting plenty of suggestions in this thread, so I'll just post a couple random things that no one has mentioned yet:

- From a design perspective, always make sure that you maintain the aspect ratio of the image you are resizing. Many of your images look squished or stretched. This is important, and I would go back through and replace all of the photographic images on your site. This is marring an otherwise clean and respectable layout.

Aye, will do. ^^

- I personally think that the "valid html, css" message is superfluous. I think opinions may differ on that, so take it with a grain of salt. I don't really think any users care about that, so why clutter up your site with it? I mean, sometimes you need to put in invalid code to get the results you need, so whey tie yourself down? I'm pretty good about valid xhtml, but I have definitely been known to use css hacks to target Safari and things like that. Should be rare, but you do what you gotta do, you know?

Okay thats my 2 cents. Looking good though!

Right, right. I suppose you're right. ^^

 

[Niwa Rose]

Okay, I've updated the site. ^^

www.emtcpr.com/grey

New Header Design
Java Script Sideshow
Variable Height
Optimized Photos
New Footer Content

I have some problems though. D: The JavaScript Slideshw doesn't show up in IE.

 

[Cromulent]

Basically, they let you have an index.php file which contains the nav, header, footer, etc... and include other files as the main content. So you don't have the menu hard coded in 6 different files.

That is not what a server side include is.

This is what server side includes are.