[RexGrammer]

So after a while of doing .NET development (C#) I actually decided to do some web development. The first thing I did is bought one book about html one about css and one about php. And after some learning I did some demo's and then decided to try and make a site. This is my first website and I would like critics on it (please be harsh )

http://matija.webege.com

Ignore the fact it's on a webege server (it's just my preferred development server*). I would like if you could grade the:

• Design
  
• Cross-Browser Compability
  
• Elegancy
  
• Client-Side and Server-Side scripting
  
• Anything else that comes to your mind

I'm aware of some flaws (which will only be present in the development version):

• My javascript is scattered across a lot of files, that's just there so I can debug easily, I'll merge it when I enter production stage.
  
• Most of my javascript isn't minified, again that's just so that I can debug it more easily.
  
• My CSS isn't minified.
  
• I'm not deflating my javascript. I'll add that part in my .htaccess file, just didn't get to it yet.
  
• Some of my images aren't optimized
  
• Should I minify my HTML?
  
• I'm considering to inline small javascript and css (to reduce the number of HTTP requests)

So if you could spot a flaw or maybe a better day of doing something please point to it.

Some things to note ( aka some things I'm proud of doing ):

• Cross-Browser Compability - I've tried to make it the same for every browser, unfortunately IE stands in the way of fully doing it, so instead of using awesome new CSS3 properties, I did some things with js and jQuery, and well, it doesn't look and feel the same, but better than nothing
  
  NOTE: If you look at my css, you'll see that I haven't used any vendor prefixes but content shows properly, if you're wondering how I achivied that: I used -prefix-free. Basically it's a js library that detects your browser and in accordance to that adds the needed vendor prefixes to the styles, neat huh?
  
• I used jquery to animate some changes in IE, I had to add a plugin called jquery.color
  
• If you're wondering how I managed to make that neat 'scrolling menu' (it follows you when you scroll down the page), there's a file called 'scrollingMenu.js' in 'root/js/libs/', look at that and the .fixMenu and the .navMenu styles in the css.
  
• I used semantic markup as much as I could, I think the markup is quite semantic
  
• I added a script that will execute if you come in IE telling you that you'll best experience the content with some modern broser

Ignore the fact that the content is in a foreign language

I also plan to add a nice feature: depending on your physical location (via google geolocation api) it will display content in the appropriate language

So if you could please review it thanks. To recap: if you could please leave out the flaws I already mentioned, and give some ideas to add some cool features and improve

Also I was wondering would a walkthrough of this site be of any value? Would it be good for the community if I made it? Would it be good and informative? Could it be of any value?

This post has been edited by RexGrammer: 27 May 2012 - 01:46 PM

[modi123_1]

The rotating buttons are intensely annoying.

It's customary to have the page you are on still show the menu button highlighted.

When clicking a photo I expect it to show up in a lightbox-esque thing..versus going to the image.. at bare minimum throw it to a NEW tab.. not the actual one I was just on.

That logo is all sorts of jagged.. make it in a vector program.

The wall of text front page is less than inviting.

[mccabec123]

I'd ditch the spinning menu buttons, bad design, users don't really care if their menus spin Also it's a tad glitchy if you move the mouse, as you use the 'onmouseover' and 'onmouseout' event on the container, and the the div spins back on mouse out and spins around on mouse over, so when you're about 2 or 3 cm's from the centre of the container it starts to rotate in both directions as it forces the mouse in and out of the container, you could avoid this by putting a seperate div within the container around the text which triggers the movement rather than the entire thing.

[RexGrammer]

By lightbox-esque you mean something like this: http://lokeshdhakar....ects/lightbox2/? (Sorry for asking these questions, I'm just new to web development and really hadn't have the chance to meet with things like this )

I've ditched the rotation

Could you please suggest a color scheme for the current active page menu list item?

I'm currently in the process of adding the lightBox and making the logo a vector

I'm also trying to see what can I insert in the home page so it will be more inviting.

[modi123_1]

Quote

By lightbox-esque you mean something like this: http://lokeshdhakar....cts/lightbox2/? (Sorry for asking these questions, I'm just new to web development and really hadn't have the chance to meet with things like this )

Yes.

Quote

Could you please suggest a color scheme for the current active page menu list item?

Since they were rotating red perhaps.. red?

[RexGrammer]

I've:

• Added the lightbox effect
  
• Ditched the rotation, added the same effect but without the rotation
  
• Added the current menu item selection ( i opted to use the same color but with some alpha transparency )

I still need to:

• I still need to design that logo in a vector format (Can I use it as a SVG on the web?)
  
• Still need to find out a new home page content

If you catch anything else, I would really appreciate it. Thanks for the insights so far.

[Ryano121]

Personally I find the whole menu bar re - positioning to be really annoying. I'm not sure if it's just because there's not much content on their at the moment or what but I find it really distracting. It's a good idea, but the current implementation isn't the best - especially when the whole page content shifts down a few pixels when you scroll back to the top of the page. Could be really good it it was dialled down a bit in my opinion.

[modi123_1]

Quote

I still need to design that logo in a vector format (Can I use it as a SVG on the web?)

Inkscape, Adobe Illustrator... I think paint.net and possibly GIMP.

It's still spinning for me.. the menus that is.

on top of this page: http://matija.webege.com/services.html
you have a "--> ­"

[RexGrammer]

I did the logo, but how can I insert it into the webpage? Since HTML doesn't have any native tag for vector graphics (or does it?)

You might need to do a hard refresh of the page, since I screwed around with the .htaccess file and I've might set the expires headers in a distant future, so your browser cached the .css file.

Applied a quick fix for the "-->".

@Ryano121Actually the fact that the content shifts down is kind of expected, you insert the menu between the logo and the content, so it shifts to accommodate for that. Could you please define 'Could be really good it it was dialled down a bit in my opinion.' please? I don't understand what do you mean by 'if it was dialled down a bit'.

This post has been edited by RexGrammer: 28 May 2012 - 11:51 AM

[modi123_1]

Quote

I did the logo, but how can I insert it into the webpage? Since HTML doesn't have any native tag for vector graphics (or does it?)

The best to do is save it as a png - at the right size you need it. Don't let the page resize it.

Quote

You might need to do a hard refresh of the page, since I screwed around with the .htaccess file and I've might set the expires headers in a distant future, so your browser cached the .css file.

Okay - there it goes.

[Ryano121]

I think it's something to do with harsh red drop shadow which hides some of the text.

I don't think it would be too much of a problem on larger resolutions, but it can be very dominating on smaller screens.

Quote

Actually the fact that the content shifts down is kind of expected, you insert the menu between the logo and the content, so it shifts to accommodate for that.

What I mean is that when you scroll down whilst reading some of the text, eventually the menu bar will reposition itself and the text that you were just reading will have moved up quite a lot - meaning that you have to find your place again.

[RexGrammer]

@modi123_1Well it isn't resized in code if you download it and look at it it's 960x200 which is exactly the size on site

@Ryano121Everything has been taken some serious consideration, if you assume that the smallest monitor that will view this page will be 1024x768 (and it's designed like that). You will fix the menu up only if you're reading the second paragraph and when it fixes in the upper position then it covers only the first paragraph so you can still continue to read the second one undisturbed. I actually did a test on 22 people, they said it didn't bother them. ( this test is aka make your classmates do the testing ) I guess I could do something, like add a div that will always be there and it will hold the space for the menu, but I will put this as last to my list since it isn't as important as the other changes