Hai Guys! Constructive Criticism needed! :D

Hello forumers!
So, I've been working on this site for more than a year now, from designing, programming, marketing, etc. So yeah, lots of thought, sweat and blood put into this. It's a "Finance" website regarding our country.

Website:
http://www.gstconsult.com

Awstats:


Analytics (I seriously forgot to put this.. *recently just added it in though)

the main traffic is from US though.
+ another question, is it possible to sell ads on my website?

I would really appreciate the community's honest and intelligent feedback

oh, and there are a few projects coming up too! Stay tuned!

Thank you.

 

Well, the first thing I noticed was it took forever for the page to even start loading the sub-files. The overall page-load was painfully slow. This led me to do a performance analysis and the problem is immediately clear -- the two megabytes in size and 26 files is excessive, but a bigger problem is that there's almost a three second hang on loading the .html file. Something is holding things up there and that's ridiculous when said HTML is only 19k. That's either a server issue, or some sort of scripting screwing with things... particularly when every other file has a access time well under 300ms.

Design-wise you've got a problem with all the px metric fonts -- many of them are hard to read and illegible in size for me. Remember, the WCAG says to use %/em for font-sizes for a reason and that's why fixed design is inaccessible trash. You seem to have made an ATTEMPT at being responsive, but given the layout elements that really aren't conducive to the process best guess would be (before I even look at the source) you tried to use bootcrap didn't you? As I often tell people go find a stick to scrape that off with.

You color choices are acceptable for all but that orange. The white text on orange has severe legibility issues and I'd highly suggest choosing something a bit darker -- again refer to the WCAG or any of my hundreds of posts where I mention the formula for making sure you meet accessibility minimums. The blue links are also a bit too bright for the grey backgrounds, I'd suggest running those through the formula just to be sure as it's likely right up against the edge of usability.

That weird shaking phone number thing? Looks like ass in FF since it's not anti-aliasing and really is the type of goofy nonsense I'd more expect to see from a site written before 4 Strict was a twinkle in the W3C's eye than a modern site.

I don't know quite what you are trying to do with that map below the bottom section, but it's tiling and scrolling strange -- since it's mostly covered up it seems a massive waste of resources for something that doesn't look good -- nor does it make the site any better for users.

You also have some inconsistency in your rounded corners, the rounded on the dark navy "contact us!" heading for example don't match the lack of rounding around it, making it look more haphazard in appearance. Consistency is always important in design.

Breaking down the filesizes the first thing I'm wondering is what the devil is it wasting 1.4 megabytes in 14 separate files for in terms of images? I don't see anything on the page that should be that many images, much less that total size. The raw number of files seems to stem from a lack of leveraging reduction techniques like the incorrectly named CSS sprites -- that would be an easy fix right there and probably provide a smoother user experience. The ridiculous total size can be almost single-handedly attributed to two files...

A full megabyte of it is that ridiculous map having ZERO encoding:
http://www.gstconsult.com/jb.png

I'd either try doing a color reduction to 256 colors or less since it is line-art, or resorting to jpeg -- if not simply axing the image outright as really serving no legitimate purpose besides wasting bandwidth. That one image is sucking down HALF the pageload! Not quite sure what's going on there since even a normal png of that should only be 700 or so k, but really on something like that it should be a 256k palettized png or a 128k JPEG.

The other file:
http://www.gstconsult.com/image/gst-need-help-banner.png

is also excessively large and has the problem of using an image for text, something I always advise against. At 268k it's not ridiculously large, but really this too could benefit from some compression. If one were to move the text out of it and generate that in the code (usually the smarter move) and pre-composite the background and/or resort to "close enough AA" that could be gutted down to as little as a tenth the current filesize.

The scripting is also ridiculous since you aren't doing anythign that should actually NEED JS to do, well, much of anything. Much of that bloat (313k of it) can be blamed on the garbage framework nonsense of bootcrap and jqueery -- which go right to the top of the list of things to swing an axe at.

Of course, it's bootcrap so the total CSS size IS ridiculous. For some bizzaroland reason you seem to be including BOTH the minimized version of Bootstrap and it's full version, and really given the simplicity of the site there is NO reason for the entire site's CSS to be more than a tenth the current total. Again I see another example of precisely why I consider CSS frameworks to be halfwit nonsense as all it has done is make you write more markup and more CSS than you would have had without it.

Taking a look at the markup, the relative lack of logical document structure, proper semantics, and overuse of classes and DIV are typical of what bootcrap tricks people into thinking is good development. Sure, it's only 18k (which is kind-of impressive given the choice in toolset) but that's 18k for 3.2k of plaintext and nothing I'd consider to be a content image. That could be as much as TWICE the code needed for such a simple page.

The use of numbered headings is utter gibberish providing no structure, it abuses button tags outside of forms for christmas only knows what type of scripttardery, you have a form I can't seem to actually get to show on the page that's filled with endless pointless DIV and classes for NOTHING, you've got STRONG inside headings just begging for search to slap you down, headings around things that aren't even the start of subsections of the page, inline-level tags wrapping block-level (no matter what HTML 5 says, that's just begging for /FAIL/)... it starts to look like you were choosing your tags based on their default appearance instead of what they actually MEAN.

I mean, you've got some good things, and a lot of bad things. Your overall concept is simple (that's REALLY good), most of your colour choices make sense and only need some small tweaking (also good) -- you just need to make the implementation match that and bring the accessibility up to snuff; blindly flailing at it with bootstrap is NOT the answer if you actually want true device neutrality -- aka the thing responsive layout is simply the final step in providing.

As I often say, toss it and start over. Take the content, put it into a logical order as if HTML and CSS never existed. Semantically mark up that content to say what things are NOT what they look like using heading PROPERLY to provide structure, then and only then start worrying about using CSS to create your layout while forgetting that ignorant nube-predating nonsense like bootcrap even exists.

 

Not had any issues on the website, the only issue I would like to point out is that moving telephone button section which keeps rocking back and forth seems really annoying . But other than that I think it's a great site and I think you could put adverts on there to get some revenue.